/* ── App overrides (loaded after TailAdmin CSS) ────────────── */

/* Dashboard design tokens used by project-owned reusable UI components. */
:root {
  --ui-color-primary: rgb(70 95 255);
  --ui-color-primary-hover: rgb(54 74 210);
  --ui-color-primary-soft: rgb(70 95 255 / 0.1);
  --ui-color-on-primary: #fff;
  --ui-color-link: rgb(70 95 255);
  --ui-color-link-hover: rgb(54 74 210);
  --ui-color-info: rgb(29 78 216);
  --ui-color-info-bg: rgb(239 246 255);
  --ui-color-info-hover: rgb(219 234 254);
  --ui-color-info-border: rgb(191 219 254);
  --ui-color-success: rgb(21 128 61);
  --ui-color-success-bg: rgb(240 253 244);
  --ui-color-success-hover: rgb(220 252 231);
  --ui-color-success-border: rgb(187 247 208);
  --ui-color-warning: rgb(161 98 7);
  --ui-color-warning-bg: rgb(254 252 232);
  --ui-color-warning-hover: rgb(254 249 195);
  --ui-color-warning-border: rgb(254 240 138);
  --ui-color-danger: rgb(185 28 28);
  --ui-color-danger-bg: rgb(254 242 242);
  --ui-color-danger-hover: rgb(254 226 226);
  --ui-color-danger-border: rgb(254 202 202);
  --ui-color-danger-solid: rgb(239 68 68);
  --ui-color-danger-solid-hover: rgb(220 38 38);
  --ui-color-danger-outline: rgb(239 68 68);
  --ui-color-on-danger: #fff;
  --ui-color-surface: #fff;
  --ui-color-surface-raised: #fff;
  --ui-color-surface-subtle: rgb(249 250 251);
  --ui-color-surface-strong: rgb(243 244 246);
  --ui-color-surface-hover: rgb(249 250 251);
  --ui-color-border: rgb(209 213 219);
  --ui-color-border-strong: rgb(156 163 175);
  --ui-color-text: rgb(55 65 81);
  --ui-color-text-muted: rgb(107 114 128);
  --ui-color-control-disabled-bg: rgb(243 244 246);
  --ui-color-control-disabled-border: rgb(209 213 219);
  --ui-color-control-disabled-text: rgb(107 114 128);
  --ui-shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
}

.dark {
  --ui-color-link: rgb(129 140 248);
  --ui-color-link-hover: rgb(165 180 252);
  --ui-color-info: rgb(147 197 253);
  --ui-color-info-bg: rgb(59 130 246 / 0.12);
  --ui-color-info-hover: rgb(59 130 246 / 0.18);
  --ui-color-info-border: rgb(59 130 246 / 0.3);
  --ui-color-success: rgb(74 222 128);
  --ui-color-success-bg: rgb(34 197 94 / 0.12);
  --ui-color-success-hover: rgb(34 197 94 / 0.18);
  --ui-color-success-border: rgb(34 197 94 / 0.25);
  --ui-color-warning: rgb(250 204 21);
  --ui-color-warning-bg: rgb(234 179 8 / 0.12);
  --ui-color-warning-hover: rgb(234 179 8 / 0.18);
  --ui-color-warning-border: rgb(234 179 8 / 0.25);
  --ui-color-danger: rgb(248 113 113);
  --ui-color-danger-bg: rgb(239 68 68 / 0.12);
  --ui-color-danger-hover: rgb(239 68 68 / 0.18);
  --ui-color-danger-border: rgb(239 68 68 / 0.25);
  --ui-color-danger-outline: rgb(248 113 113);
  --ui-color-surface: rgb(17 24 39);
  --ui-color-surface-raised: rgb(17 24 39);
  --ui-color-surface-subtle: rgb(11 18 32);
  --ui-color-surface-strong: rgb(3 7 18);
  --ui-color-surface-hover: rgb(31 41 55);
  --ui-color-border: rgb(55 65 81);
  --ui-color-border-strong: rgb(75 85 99);
  --ui-color-text: rgb(209 213 219);
  --ui-color-text-muted: rgb(156 163 175);
  --ui-color-control-disabled-bg: rgb(31 41 55);
  --ui-color-control-disabled-border: rgb(55 65 81);
  --ui-color-control-disabled-text: rgb(156 163 175);
}

/* Hide the reCAPTCHA v3 badge – Google allows this as long as
   you include their required attribution text on protected pages.
   See: https://developers.google.com/recaptcha/docs/faq */
.grecaptcha-badge {
  visibility: hidden !important;
}

[x-cloak] {
  display: none !important;
}

.ui-modal-root {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 1rem;
}

.ui-modal-root-top {
  align-items: flex-start;
  padding-top: 1.5rem;
}

.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgb(156 163 175 / 0.5);
  backdrop-filter: blur(32px);
}

.ui-modal-panel {
  position: relative;
  z-index: 99999;
  width: 100%;
  max-height: min(90vh, calc(100vh - 2rem));
  /* `hidden auto`, never plain `hidden`: this rule loads after the vendor
   * Tailwind bundle, so `overflow-y-auto` on a panel used to be overridden and
   * any modal taller than the viewport became unreachable with the mouse
   * (A-21). Panels that carry their own `.ui-modal-scroll` / flex scroll region
   * never overflow here, so this stays invisible for them. */
  overflow: hidden auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ui-color-border);
  border-radius: 1.5rem;
  background: var(--ui-color-surface-raised);
  box-shadow: 0 20px 45px rgb(16 24 40 / 0.18);
}

.ui-modal-panel-padded {
  padding: 1.5rem;
}

.ui-modal-panel-sm {
  max-width: 26.25rem;
}

.ui-modal-panel-md {
  max-width: 37.5rem;
}

.ui-modal-panel-lg {
  max-width: 45rem;
}

.ui-modal-panel-xl {
  max-width: 64rem;
}

.ui-modal-panel-full {
  max-width: min(72rem, calc(100vw - 2rem));
}

.ui-modal-scroll {
  overflow-y: auto;
}

@media (min-width: 640px) {
  .ui-modal-root-top {
    padding-top: 2rem;
  }
}

@media (min-width: 1024px) {
  .ui-modal-panel-padded {
    padding: 2.5rem;
  }
}

html,
body,
body * {
  caret-color: transparent;
}

input,
textarea,
[contenteditable=""],
[contenteditable="true"],
[contenteditable="plaintext-only"] {
  caret-color: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
label,
nav,
aside,
header,
.menu-item,
.ui-btn,
.ui-icon-btn,
.ui-toggle,
.ui-quick-toggle,
.ui-page-btn,
.ui-static-indicator,
.ui-status-icon,
.ui-action-icon,
.ui-info-dot,
.status-pill,
.styles-status-badge,
.inventory-summary-card,
.product-prefix-panel,
.ui-data-table thead,
.ui-data-table th,
.ui-data-table-sort,
.product-table-sort {
  user-select: none;
}

input,
textarea,
select,
option,
[contenteditable=""],
[contenteditable="true"],
[contenteditable="plaintext-only"],
.ui-data-table td,
.ui-selectable {
  user-select: text;
}

.explanations-hidden .ui-explanation,
.explanations-hidden [data-explanation] {
  display: none !important;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.status-pill-success {
  background: rgb(220 252 231);
  color: rgb(21 128 61);
}

.status-pill-warning {
  background: rgb(254 249 195);
  color: rgb(161 98 7);
}

.status-pill-error {
  background: rgb(254 226 226);
  color: rgb(185 28 28);
}

.status-pill-neutral {
  background: rgb(243 244 246);
  color: rgb(75 85 99);
}

.dark .status-pill-success {
  background: rgb(34 197 94 / 0.15);
  color: rgb(74 222 128);
}

.dark .status-pill-warning {
  background: rgb(234 179 8 / 0.15);
  color: rgb(250 204 21);
}

.dark .status-pill-error {
  background: rgb(239 68 68 / 0.15);
  color: rgb(248 113 113);
}

.dark .status-pill-neutral {
  background: rgb(31 41 55);
  color: rgb(209 213 219);
}

/* Inherited-content state (brand fallback "dedí" chips). */
.status-pill-info {
  background: rgb(219 234 254);
  color: rgb(29 78 216);
}

.dark .status-pill-info {
  background: rgb(59 130 246 / 0.15);
  color: rgb(96 165 250);
}

.ui-title-count {
  color: var(--ui-color-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.product-brand-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.5rem;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  white-space: nowrap;
}

/* Fit4You = fialová z objednávok (majiteľ 3. 10. 2026, FIT4YOU-PLAN A7) — tá istá
   ako Brand.colors[0]; nikdy žltá. */
.product-brand-pill-fit4you,
.dark .product-brand-pill-fit4you {
  background: #7356A6;
  color: #fff;
}

.product-brand-pill-zdravy-protein,
.dark .product-brand-pill-zdravy-protein {
  background: rgb(95 143 62);
  color: #fff;
}

.product-taxonomy-pill-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: 9999px;
  padding: 1px 4px;
  color: #000;
  font-size: 8px;
  font-weight: 600;
  line-height: 10px;
  white-space: nowrap;
}

.product-color-swatch {
  display: inline-flex;
  width: 0.875rem;
  height: 0.875rem;
  border: 1px solid rgb(0 0 0 / 0.18);
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28);
}

.product-color-code {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 9999px;
  background: var(--ui-color-surface);
  padding: 0.25rem 0.625rem;
  color: var(--ui-color-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
}

.dark .product-color-code {
  border-color: rgb(55 65 81);
  background: rgb(17 24 39);
  color: rgb(229 231 235);
}

.product-old-logo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9999px;
  background: rgb(34 197 94);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.dark .product-old-logo-pill {
  background: rgb(22 163 74);
  color: #fff;
}

/* „TO DO“ (owner 2026-09-04): parked product, e.g. missing price. */
.product-todo-pill {
  width: auto;
  padding: 0 0.45rem;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgb(251 191 36);
  color: rgb(69 26 3);
}
.dark .product-todo-pill {
  background: rgb(217 119 6);
  color: #fff;
}

.product-prefix-pill {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border: 1px solid var(--ui-color-border);
  border-radius: 9999px;
  background: var(--ui-color-surface-subtle);
  color: var(--ui-color-text);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  overflow-wrap: anywhere;
}

.dark .product-prefix-pill {
  border-color: rgb(75 85 99);
  background: rgb(31 41 55);
  color: rgb(229 231 235);
}

.product-prefix-panel {
  border: 1px solid var(--ui-color-border);
  border-radius: 0.5rem;
  background: var(--ui-color-surface-subtle);
  padding: 1rem;
}

.dark .product-prefix-panel {
  border-color: rgb(55 65 81);
  background: rgb(15 23 42);
}

.product-online-status-available {
  color: rgb(22 163 74);
}

.dark .product-online-status-available {
  color: rgb(74 222 128);
}

.product-online-status-missing {
  color: rgb(220 38 38);
}

.dark .product-online-status-missing {
  color: rgb(248 113 113);
}

.inventory-table tbody tr.inventory-row-group {
  background: rgb(249 250 251);
}

.dark .inventory-table tbody tr.inventory-row-group {
  background: rgb(15 23 42);
}

.inventory-summary-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 8.5rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.5rem;
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-xs);
  padding: 1rem 1.125rem;
}

.inventory-summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
}

.inventory-summary-card[data-tone="primary"]::before {
  background: rgb(59 130 246);
}

.inventory-summary-card[data-tone="info"]::before {
  background: rgb(14 165 233);
}

.inventory-summary-card[data-tone="success"]::before {
  background: rgb(16 185 129);
}

.inventory-summary-card[data-tone="danger"]::before {
  background: rgb(239 68 68);
}

.inventory-summary-card[data-tone="neutral"]::before {
  background: rgb(100 116 139);
}

.inventory-summary-label {
  display: block;
  color: var(--ui-color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  text-transform: uppercase;
}

.inventory-summary-value {
  display: block;
  color: var(--ui-color-text);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 2.25rem;
  margin-top: 0.25rem;
}

.inventory-summary-meta {
  display: block;
  color: var(--ui-color-text-muted);
  cursor: default;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  margin-top: 0.25rem;
}

.inventory-summary-track {
  overflow: hidden;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--ui-color-surface-strong);
  margin-top: 0.875rem;
}

.inventory-summary-track-placeholder {
  opacity: 0;
}

.inventory-summary-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-color-primary);
}

.inventory-summary-card[data-tone="info"] .inventory-summary-bar {
  background: rgb(14 165 233);
}

.inventory-summary-card[data-tone="success"] .inventory-summary-bar {
  background: var(--ui-color-success);
}

.inventory-summary-card[data-tone="danger"] .inventory-summary-bar {
  background: var(--ui-color-danger);
}

.inventory-product-cell,
.inventory-variant-cell,
.inventory-sales-cell,
.inventory-stock-combined,
.inventory-sales-inline,
.inventory-stock-info-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.inventory-product-cell,
.inventory-variant-cell {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

.inventory-product-cell-wide {
  position: relative;
  width: 100%;
}

.inventory-product-connector {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  position: relative;
}

.inventory-product-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgb(148 163 184 / 0.26);
  transform: translateY(-50%);
}

.inventory-row-type {
  color: var(--ui-color-text-muted);
  font-size: 0.75rem;
  line-height: 1rem;
}

.inventory-stock-missing-label {
  color: var(--ui-color-danger);
  cursor: default;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
}

.inventory-stock-number,
.inventory-sales-value {
  color: var(--ui-color-text);
  cursor: default;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
}

.inventory-stock-number-large {
  font-size: 1rem;
  line-height: 1.5rem;
}

.inventory-sales-inline {
  color: var(--ui-color-text-muted);
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
}

.inventory-sales-inline .inventory-sales-value {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.ui-static-indicator,
.ui-status-icon,
.inventory-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
}

.ui-status-icon-ok,
.inventory-status-ok {
  border: 1px solid var(--ui-color-success-border);
  background: var(--ui-color-success-bg);
  color: var(--ui-color-success);
}

.ui-status-icon-danger,
.inventory-status-danger {
  border: 1px solid var(--ui-color-danger-border);
  background: var(--ui-color-danger-bg);
  color: var(--ui-color-danger);
}

.ui-quick-toggle,
.inventory-status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.25rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ui-quick-toggle-on,
.inventory-status-toggle-on {
  border-color: var(--ui-color-success-border);
  background: var(--ui-color-success-bg);
  color: var(--ui-color-success);
}

.ui-quick-toggle-off,
.inventory-status-toggle-off {
  border-color: var(--ui-color-danger-border);
  background: var(--ui-color-danger-bg);
  color: var(--ui-color-danger);
}

.ui-quick-toggle:disabled,
.inventory-status-toggle:disabled {
  cursor: wait;
  opacity: 0.65;
}

.ui-quick-toggle:hover,
.ui-quick-toggle:focus-visible,
.inventory-status-toggle:hover,
.inventory-status-toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--ui-color-primary-soft);
}

.inventory-quantity-modal {
  max-width: 28rem;
}

.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1.25rem;
}

.inspiration-empty-state {
  padding: 4rem 1.5rem;
}

.inspiration-filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.5rem;
  background: var(--ui-color-surface);
  color: var(--ui-color-text-muted);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding: 0.625rem 0.875rem;
}

.inspiration-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in srgb, var(--ui-color-border) 82%, transparent);
  border-radius: 1rem;
  background: var(--ui-color-surface-subtle);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 10px 30px rgb(15 23 42 / 0.06);
  cursor: pointer;
  isolation: isolate;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.inspiration-card:hover {
  border-color: color-mix(in srgb, var(--ui-color-primary) 45%, var(--ui-color-border));
  box-shadow: 0 16px 38px rgb(15 23 42 / 0.12);
  transform: translateY(-4px);
}

.inspiration-card-dragging {
  cursor: grabbing;
  opacity: 0.58;
  transform: scale(0.96);
}

.inspiration-card-drop-before,
.inspiration-card-drop-after {
  border-color: var(--ui-color-primary);
  box-shadow: 0 14px 28px var(--ui-color-primary-soft);
}

.inspiration-card-drop-before {
  transform: translateX(0.85rem);
}

.inspiration-card-drop-after {
  transform: translateX(-0.85rem);
}

.inspiration-card-drop-before::before,
.inspiration-card-drop-after::after {
  content: "";
  position: absolute;
  top: 0.625rem;
  bottom: 0.625rem;
  z-index: 4;
  width: 0.25rem;
  border-radius: 9999px;
  background: var(--ui-color-primary);
  box-shadow: 0 0 0 4px var(--ui-color-primary-soft);
  pointer-events: none;
}

.inspiration-card-drop-before::before {
  left: 0.35rem;
}

.inspiration-card-drop-after::after {
  right: 0.35rem;
}

.inspiration-card-image,
.inspiration-upload-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inspiration-card-image {
  transition: transform 280ms ease;
}

.inspiration-card:hover .inspiration-card-image {
  transform: scale(1.035);
}

.inspiration-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.75rem;
  background: linear-gradient(180deg, transparent 45%, rgb(17 24 39 / 0.52));
  pointer-events: none;
}

.inspiration-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  pointer-events: auto;
}

.inspiration-card-control {
  cursor: pointer;
}

.inspiration-tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.inspiration-card-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 2;
  width: max-content;
  max-width: 12rem;
  border-radius: 0.375rem;
  background: rgb(17 24 39);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1rem;
  opacity: 0;
  padding: 0.35rem 0.5rem;
  pointer-events: none;
  text-align: center;
  transform: translateY(0.25rem);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  visibility: hidden;
  white-space: normal;
}

.inspiration-card-tooltip::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  top: 100%;
  border: 5px solid transparent;
  border-top-color: rgb(17 24 39);
}

.inspiration-tooltip-wrap:hover .inspiration-card-tooltip,
.inspiration-tooltip-wrap:focus-within .inspiration-card-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.inspiration-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgb(255 255 255 / 0.46);
  border-radius: 0.625rem;
  background: rgb(15 23 42 / 0.66);
  color: rgb(255 255 255 / 0.92);
  cursor: grab;
  line-height: 1;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgb(15 23 42 / 0.18);
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.inspiration-drag-handle:hover,
.inspiration-drag-handle:focus-visible {
  border-color: rgb(255 255 255 / 0.8);
  background: rgb(15 23 42 / 0.84);
  transform: translateY(-1px);
  outline: none;
}

.inspiration-drag-handle:active {
  cursor: grabbing;
}

.inspiration-drag-handle-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  animation: none;
}

.inspiration-drag-handle-disabled:hover,
.inspiration-drag-handle-disabled:focus-visible {
  transform: none;
}

@keyframes inspiration-info-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(37 99 235 / 0.35);
  }

  50% {
    box-shadow: 0 0 0 7px rgb(37 99 235 / 0);
  }
}

.inspiration-task-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 0.625rem;
  background: rgb(255 255 255 / 0.88);
  color: rgb(17 24 39);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgb(15 23 42 / 0.12);
}

.inspiration-analysis-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--ui-color-primary) 88%, white);
  color: white;
  box-shadow: 0 6px 18px rgb(15 23 42 / 0.18);
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.inspiration-analysis-info:hover,
.inspiration-analysis-info:focus-visible {
  background: var(--ui-color-primary);
  box-shadow: 0 0 0 3px var(--ui-color-primary-soft), 0 8px 20px rgb(15 23 42 / 0.22);
  outline: none;
  transform: translateY(-1px);
}

.inspiration-analysis-hover {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.875rem;
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
  box-shadow: 0 24px 60px rgb(15 23 42 / 0.24);
}

.inspiration-analysis-hover-header {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.5rem;
  border-bottom: 1px solid var(--ui-color-border);
  background: var(--ui-color-surface-subtle);
  color: var(--ui-color-primary);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.7rem 0.85rem;
}

.inspiration-analysis-panel {
  width: min(54rem, 100%);
  margin: 0.875rem auto 0;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  text-align: left;
}

.inspiration-analysis-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  border-radius: 0.75rem;
  color: var(--ui-color-text);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 800;
  padding: 0.75rem 0.875rem;
}

.inspiration-analysis-toggle:hover,
.inspiration-analysis-toggle:focus-visible {
  background: var(--ui-color-surface-hover);
  color: var(--ui-color-primary);
  outline: none;
}

.inspiration-analysis-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ui-color-text-muted);
  font-size: 0.8125rem;
  padding: 0.75rem 0.875rem;
}

.inspiration-analysis-content {
  border-top: 1px solid var(--ui-color-border);
  padding: 0.75rem;
}

.inspiration-analysis-json {
  overflow: auto;
  max-height: 24rem;
  border: 1px solid color-mix(in srgb, var(--ui-color-border) 84%, transparent);
  border-radius: 0.625rem;
  background: var(--ui-color-surface-strong);
  color: var(--ui-color-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  line-height: 1.55;
  margin: 0;
  padding: 0.875rem;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

.inspiration-analysis-json-hover {
  flex: 1 1 auto;
  max-height: none;
  border: 0;
  border-radius: 0;
}

.inspiration-analysis-loading {
  color: var(--ui-color-text-muted);
  font-size: 0.75rem;
  padding: 1rem;
  text-align: center;
}

.inspiration-analysis-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.inspiration-detail-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  max-width: 100%;
  border: 1px solid var(--ui-color-border);
  border-radius: 9999px;
  background: var(--ui-color-surface-subtle);
  color: var(--ui-color-text);
  cursor: default;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  margin: 0.875rem auto 0;
  padding: 0.375rem 0.75rem;
  text-align: center;
}

.inspiration-graphic-task-button {
  border-color: rgb(217 119 6);
  background: rgb(245 158 11);
  color: rgb(17 24 39);
  box-shadow: 0 10px 22px rgb(245 158 11 / 0.24);
}

.inspiration-graphic-task-button:hover,
.inspiration-graphic-task-button:focus-visible {
  border-color: rgb(180 83 9);
  background: rgb(217 119 6);
  color: rgb(17 24 39);
  box-shadow: 0 0 0 3px rgb(245 158 11 / 0.18), 0 12px 26px rgb(245 158 11 / 0.26);
  outline: none;
}

.inspiration-graphic-task-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.inspiration-create-modal {
  max-width: 34rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.inspiration-detail-modal {
  display: flex;
  flex-direction: column;
  height: min(90vh, 54rem);
  height: min(90dvh, 54rem);
  max-width: min(72rem, calc(100vw - 2rem));
}

.inspiration-detail-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.inspiration-detail-preview {
  display: grid;
  flex: 1 1 auto;
  /* The image row keeps a floor so tiny viewports never collapse the
     preview to 0px — the preview scrolls instead (overflow-y below). */
  grid-template-rows: minmax(6rem, 1fr) auto;
  gap: 0.875rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 1.5rem 1.5rem 1rem;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.inspiration-detail-close {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 2;
  box-shadow: 0 4px 14px rgb(16 24 40 / 0.14);
}

.inspiration-detail-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.75rem;
  background: var(--ui-color-surface-strong);
}

.inspiration-detail-actions,
.inspiration-create-actions,
.inspiration-delete-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.inspiration-detail-actions {
  flex: 0 0 auto;
  padding: 1rem 1.5rem max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-color-border);
  background: var(--ui-color-surface-raised);
}

.inspiration-create-actions {
  padding-top: 0.5rem;
}

.inspiration-delete-modal {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.inspiration-delete-actions {
  margin-top: 1.5rem;
}

@media (max-width: 639px) {
  .inspiration-modal-root {
    align-items: flex-start;
    padding:
      max(0.5rem, env(safe-area-inset-top))
      max(0.5rem, env(safe-area-inset-right))
      max(0.5rem, env(safe-area-inset-bottom))
      max(0.5rem, env(safe-area-inset-left));
  }

  .inspiration-create-modal,
  .inspiration-delete-modal {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - max(1rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: 1rem;
    border-radius: 1rem;
  }

  .inspiration-detail-modal {
    height: calc(100vh - 1rem);
    height: calc(100dvh - max(1rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - max(1rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    max-width: 100%;
    border-radius: 1rem;
  }

  .inspiration-detail-preview {
    gap: 0.625rem;
    padding: 1rem 1rem 0.75rem;
  }

  .inspiration-detail-actions {
    gap: 0.5rem;
    padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
  }

  .inspiration-detail-actions .ui-btn {
    flex: 1 1 10rem;
    min-width: 0;
    white-space: normal;
  }

  .inspiration-analysis-hover {
    left: 0.75rem !important;
    right: 0.75rem;
    width: auto !important;
  }

  .inspiration-analysis-empty {
    align-items: stretch;
    flex-direction: column;
  }

  .inspiration-create-actions,
  .inspiration-delete-actions {
    gap: 0.5rem;
  }

  .inspiration-create-actions .ui-btn,
  .inspiration-delete-actions .ui-btn {
    flex: 1 1 8rem;
    min-width: 0;
  }
}

@media (max-height: 560px) {
  .inspiration-modal-root {
    align-items: flex-start;
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .inspiration-detail-modal {
    height: calc(100vh - 1rem);
    height: calc(100dvh - max(1rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - max(1rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  }

  .inspiration-create-modal .inspiration-upload-box {
    width: min(12rem, 100%);
  }
}

.inspiration-upload-box {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: min(18rem, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 1px dashed var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.inspiration-upload-box:hover,
.inspiration-upload-box-active {
  border-color: var(--ui-color-primary);
  background: var(--ui-color-surface-hover);
}

.inspiration-upload-box-active {
  box-shadow: 0 0 0 3px var(--ui-color-primary-soft);
}

.inspiration-upload-empty {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--ui-color-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  padding: 1rem;
  text-align: center;
}

.inspiration-upload-drop-text,
.inspiration-upload-paste-text {
  font-size: 0.75rem;
  font-weight: 600;
}

.inspiration-upload-drop-text {
  color: var(--ui-color-primary);
}

.inspiration-upload-paste-text {
  color: var(--ui-color-text-subtle);
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  min-height: 2.25rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
  white-space: nowrap;
  line-height: 1.25rem;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.ui-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ui-btn-xs {
  min-height: 2rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
}

.ui-btn-sm {
  min-height: 2.25rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
}

.ui-btn-md {
  min-height: 2.5rem;
  padding: 0.5625rem 0.875rem;
  font-size: 0.875rem;
}

.ui-btn-lg {
  min-height: 2.75rem;
  padding: 0.6875rem 1rem;
  font-size: 0.875rem;
}

.ui-btn-primary {
  background: var(--ui-color-primary);
  color: var(--ui-color-on-primary);
  box-shadow: var(--ui-shadow-xs);
}

.ui-btn-primary:hover {
  background: var(--ui-color-primary-hover);
}

.ui-btn-secondary {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-xs);
}

.ui-btn-secondary:hover {
  background: var(--ui-color-surface-hover);
  border-color: var(--ui-color-border-strong);
}

.ui-btn-info {
  border-color: var(--ui-color-info-border);
  background: var(--ui-color-info-bg);
  color: var(--ui-color-info);
}

.ui-btn-info:hover {
  background: var(--ui-color-info-hover);
}

.ui-btn-success {
  border-color: var(--ui-color-success-border);
  background: var(--ui-color-success-bg);
  color: var(--ui-color-success);
}

.ui-btn-success:hover {
  background: var(--ui-color-success-hover);
}

.ui-btn-warning {
  border-color: var(--ui-color-warning-border);
  background: var(--ui-color-warning-bg);
  color: var(--ui-color-warning);
}

.ui-btn-warning:hover {
  background: var(--ui-color-warning-hover);
}

.ui-btn-danger {
  border-color: var(--ui-color-danger-border);
  background: var(--ui-color-danger-bg);
  color: var(--ui-color-danger);
}

.ui-btn-danger:hover {
  background: var(--ui-color-danger-hover);
}

.ui-btn-danger-solid {
  background: var(--ui-color-danger-solid);
  color: var(--ui-color-on-danger);
  box-shadow: var(--ui-shadow-xs);
}

.ui-btn-danger-solid:hover {
  background: var(--ui-color-danger-solid-hover);
}

.ui-btn-danger-outline {
  border-color: var(--ui-color-danger-outline);
  background: transparent;
  color: var(--ui-color-danger-outline);
  box-shadow: var(--ui-shadow-xs);
}

.ui-btn-danger-outline:hover {
  background: var(--ui-color-danger-bg);
}

.ui-btn-ghost {
  background: transparent;
  color: var(--ui-color-text);
}

.ui-btn-ghost:hover {
  background: var(--ui-color-surface-hover);
}

.prompt-attachment-panel {
  border-top: 1px solid var(--ui-color-border);
  padding-top: 1rem;
}

.prompt-attachment-card {
  display: flex;
  gap: 0.875rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.875rem;
  background: var(--ui-color-surface);
  padding: 0.875rem;
  box-shadow: var(--ui-shadow-xs);
}

.prompt-attachment-preview {
  display: flex;
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  color: var(--ui-color-text-muted);
}

.prompt-attachment-preview:not(:disabled) {
  cursor: pointer;
}

.prompt-attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prompt-attachment-upload {
  border: 1px dashed var(--ui-color-border);
  border-radius: 0.875rem;
  background: var(--ui-color-surface-subtle);
  padding: 0.875rem;
}

.prompt-file-picker {
  display: flex;
  min-height: 2.75rem;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--ui-shadow-xs);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.prompt-file-picker:hover {
  border-color: var(--ui-color-border-strong);
  background: var(--ui-color-surface-hover);
}

.prompt-file-picker-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-primary);
}

.prompt-file-picker-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  color: var(--ui-color-text);
}

.prompt-file-picker-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--ui-color-text-muted);
}

.prompt-attachment-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--ui-color-border);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--ui-color-text);
  background: var(--ui-color-surface-subtle);
}

.automation-action-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .automation-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.automation-action-card {
  display: flex;
  min-height: 5rem;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 0.875rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.875rem;
  background: var(--ui-color-surface);
  padding: 1rem;
  text-align: left;
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-xs);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.automation-action-card:hover:not(:disabled) {
  border-color: var(--ui-color-border-strong);
  background: var(--ui-color-surface-hover);
  transform: translateY(-1px);
}

.automation-action-card:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.automation-action-card-primary {
  border-color: rgb(70 95 255 / 0.3);
  background: var(--ui-color-primary-soft);
}

.automation-action-card-primary:hover:not(:disabled) {
  border-color: var(--ui-color-primary);
  background: rgb(70 95 255 / 0.14);
}

.automation-action-icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--ui-color-surface-strong);
  color: var(--ui-color-primary);
}

.automation-action-card-primary .automation-action-icon {
  background: var(--ui-color-primary);
  color: var(--ui-color-on-primary);
}

.automation-action-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: var(--ui-color-text);
}

.automation-action-meta {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--ui-color-text-muted);
}

.automation-modal-list {
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  padding-right: 0.125rem;
}

.ui-link-action,
.ui-text-action {
  color: var(--ui-color-link);
  font-weight: 600;
  transition: color 150ms ease;
}

.ui-link-action:hover,
.ui-text-action:hover {
  color: var(--ui-color-link-hover);
}

.ui-danger-text-action {
  color: var(--ui-color-danger);
  font-weight: 600;
  transition: color 150ms ease;
}

.ui-danger-text-action:hover {
  color: var(--ui-color-danger-outline);
}

.ui-panel {
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface);
}

.ui-panel-lg {
  border-radius: 1rem;
}

.ui-panel-header {
  border-bottom: 1px solid var(--ui-color-border);
  padding: 1rem 1.25rem;
}

.ui-panel-body {
  padding: 1.25rem;
}

.ui-panel-body-compact {
  padding: 1rem;
}

.ui-stat-card {
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface);
  padding: 1rem;
}

.ui-stat-card-lg {
  padding: 1.25rem;
}

.ui-stat-card-compact {
  padding: 0.75rem;
}

.ui-inset-card {
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface);
  padding: 1rem;
}

.ui-inset-card-compact {
  padding: 0.75rem;
}

.ui-muted-box {
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  padding: 1rem;
  color: var(--ui-color-text-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ui-empty-box {
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  padding: 1.5rem 1rem;
  color: var(--ui-color-text-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

.ui-code-block {
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  padding: 1rem;
  color: var(--ui-color-text);
  font-size: 0.875rem;
  line-height: 1.5rem;
}

/* Shared range slider (Overview scenario, 2026-09-25). */
.ui-range {
  width: 100%;
  accent-color: var(--ui-color-primary);
}

.ui-checkbox {
  height: 1rem;
  width: 1rem;
  border-radius: 0.25rem;
  border: 1px solid rgb(209 213 219);
  color: var(--ui-color-primary);
  accent-color: var(--ui-color-primary);
}

.ui-checkbox:focus {
  box-shadow: 0 0 0 3px var(--ui-color-primary-soft);
  outline: none;
}

.dark .ui-checkbox {
  border-color: rgb(75 85 99);
}

.ui-radio {
  height: 1rem;
  width: 1rem;
  border: 1px solid rgb(209 213 219);
  color: var(--ui-color-primary);
  accent-color: var(--ui-color-primary);
}

.ui-radio:focus {
  box-shadow: 0 0 0 3px var(--ui-color-primary-soft);
  outline: none;
}

.dark .ui-radio {
  border-color: rgb(75 85 99);
}

.ui-checkbox:disabled,
.ui-radio:disabled {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.55;
}

.ui-state-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  padding: 0.5rem 0.75rem;
  color: var(--ui-color-text-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ui-state-pill-active {
  border-color: rgb(147 197 253);
  background: rgb(239 246 255);
  color: rgb(29 78 216);
}

.dark .ui-state-pill-active {
  border-color: rgb(59 130 246 / 0.3);
  background: rgb(59 130 246 / 0.12);
  color: rgb(147 197 253);
}

.ui-selectable-card {
  width: 100%;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface);
  padding: 0.75rem 1rem;
  text-align: left;
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.ui-selectable-card:hover {
  border-color: rgb(147 197 253);
  background: rgb(239 246 255 / 0.5);
}

.ui-selectable-card:disabled,
.ui-selectable-card-disabled {
  cursor: not-allowed;
  background: var(--ui-color-surface-subtle);
  opacity: 0.6;
}

.dark .ui-selectable-card:hover {
  border-color: rgb(59 130 246 / 0.4);
  background: rgb(59 130 246 / 0.1);
}

.ui-round-media-button {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--ui-color-border);
  border-radius: 9999px;
  background: var(--ui-color-surface-strong);
  color: var(--ui-color-text-muted);
  transition: border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.ui-round-media-button:hover {
  border-color: var(--ui-color-primary);
  color: var(--ui-color-primary);
}

.ui-menu {
  border: 1px solid var(--ui-color-border);
  border-radius: 1rem;
  background: var(--ui-color-surface-raised);
  padding: 0.5rem;
  box-shadow: var(--ui-shadow-lg);
}

.ui-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  color: var(--ui-color-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.ui-menu-item:hover {
  background: var(--ui-color-surface-hover);
}

.ui-menu-item-danger {
  color: rgb(220 38 38);
}

.ui-menu-item-danger:hover {
  background: rgb(254 242 242);
}

.ui-menu-divider {
  margin: 0.375rem 0;
  border-color: var(--ui-color-border);
}

.dark .ui-menu-item-danger {
  color: rgb(252 165 165);
}

.dark .ui-menu-item-danger:hover {
  background: rgb(239 68 68 / 0.1);
}

.sidebar-department-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: rgb(70 95 255);
  box-shadow: 0 0 0 3px rgb(70 95 255 / 0.12);
}

.sidebar-department-dot[data-department="creative"] { background: rgb(168 85 247); }
.sidebar-department-dot[data-department="warehouse"] { background: rgb(34 197 94); }
.sidebar-department-dot[data-department="finance"] { background: rgb(14 165 233); }
.sidebar-department-dot[data-department="ppc"] { background: rgb(249 115 22); }
.sidebar-department-dot[data-department="analytics"] { background: rgb(6 182 212); }
.sidebar-department-dot[data-department="steward"] { background: rgb(100 116 139); }
.sidebar-department-dot[data-department="administrator"] { background: rgb(70 95 255); }
.sidebar-department-dot[data-department="global"] { background: rgb(148 163 184); }

.dark .sidebar-department-dot {
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.08);
}

@media (max-width: 1279px) {
  .app-sidebar {
    transform: translateX(-100%);
  }

  .app-sidebar.is-open {
    transform: translateX(0);
  }
}

@media (min-width: 1280px) {
  .app-sidebar {
    transform: translateX(0);
  }
}

.department-preview-select {
  width: 7rem;
  min-width: 0;
}

/* Keep the current brand and view readable on laptop-sized admin screens. */
.workspace-header .department-preview-group {
  display: none;
}

.workspace-header-controls > * {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .workspace-brand-switcher select {
    min-width: 9rem;
  }
}

@media (min-width: 1600px) {
  .workspace-header .department-preview-select {
    display: none;
  }

  .workspace-header .department-preview-group {
    display: flex;
  }
}

@media (max-width: 767px) {
  .workspace-header-inner {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .workspace-header-controls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .workspace-header .department-preview-select {
    width: 10rem;
    max-width: 48%;
  }

  .workspace-header .workspace-account,
  .workspace-header .workspace-notifications {
    position: absolute;
    top: 0.75rem;
  }

  .workspace-header .workspace-account {
    right: 1rem;
  }

  .workspace-header .workspace-notifications {
    right: 4rem;
  }
}

@media (min-width: 640px) {
  .department-preview-select {
    width: auto;
    max-width: 11.25rem;
  }
}

.style-profile-select {
  width: auto;
  min-width: 0;
  max-width: 11.25rem;
}

/* Marketing solutions: the KTO → ČO → PREČO → AKO story blocks */
.solution-block {
  border-radius: 0.75rem;
  border-left: 3px solid var(--ui-color-border);
  background: var(--ui-color-surface-subtle);
  padding: 0.875rem 1rem;
}

.solution-block-label {
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-color-text-muted);
}

.solution-block-who { border-left-color: rgb(59 130 246); }
.solution-block-who .solution-block-label { color: rgb(37 99 235); }
.solution-block-what { border-left-color: rgb(16 185 129); }
.solution-block-what .solution-block-label { color: rgb(5 150 105); }
.solution-block-why { border-left-color: rgb(245 158 11); }
.solution-block-why .solution-block-label { color: rgb(180 83 9); }
.solution-block-how { border-left-color: var(--ui-color-primary); }
.solution-block-how .solution-block-label { color: var(--ui-color-primary); }

.dark .solution-block-who .solution-block-label { color: rgb(96 165 250); }
.dark .solution-block-what .solution-block-label { color: rgb(52 211 153); }
.dark .solution-block-why .solution-block-label { color: rgb(251 191 36); }

/* Departments page: per-page access tree (category → pages, view/edit) */
.dept-tree-category {
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.dept-tree-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--ui-color-surface-subtle);
  border-bottom: 1px solid var(--ui-color-border);
  padding: 0.625rem 0.875rem;
}

.dept-tree-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--ui-color-border);
}

.dept-tree-page:last-child {
  border-bottom: none;
}

.dept-tree-page:hover {
  background: var(--ui-color-surface-hover);
}

/* Departments page: navigation layout editor (drag & drop) */
.nav-layout-category {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.nav-layout-category-drop {
  border-color: var(--ui-color-primary) !important;
  box-shadow: 0 0 0 2px var(--ui-color-primary-soft);
}

.nav-layout-page {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.625rem;
  background: var(--ui-color-surface);
  padding: 0.5rem 0.75rem;
  cursor: grab;
}

.nav-layout-page:active {
  cursor: grabbing;
}

.nav-layout-page-dragging {
  opacity: 0.4;
}

.nav-layout-page-locked {
  opacity: 0.6;
}

.nav-layout-drag-handle {
  color: var(--ui-color-text-muted);
  cursor: grab;
  user-select: none;
  font-size: 0.875rem;
  line-height: 1;
}

/* Department preview switcher (desktop pill group in the header).
   Standardized here so style profiles can retheme it as one component. */
.department-preview-group {
  align-items: center;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.5rem;
  padding: 0.25rem;
}

.dark .department-preview-group {
  border-color: rgb(31 41 55);
}

.department-preview-pill {
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(75 85 99);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.department-preview-pill:hover {
  background: rgb(243 244 246);
}

.dark .department-preview-pill {
  color: rgb(209 213 219);
}

.dark .department-preview-pill:hover {
  background: rgb(255 255 255 / 0.05);
}

.department-preview-pill-active,
.dark .department-preview-pill-active {
  background: var(--ui-color-primary);
  color: #fff;
  box-shadow: var(--ui-shadow-xs), 0 0 0 1px var(--ui-color-primary);
}

.department-preview-pill-active:hover,
.dark .department-preview-pill-active:hover {
  background: var(--ui-color-primary);
}

.ui-tab-list {
  display: flex;
  overflow-x: auto;
  border-radius: 0.5rem;
  background: var(--ui-color-surface-subtle);
  padding: 0.25rem;
}

.ui-tab-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  color: var(--ui-color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.ui-tab-pill:hover {
  color: var(--ui-color-text);
}

.ui-tab-pill-active {
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-xs);
}

.ui-form-actions {
  margin-top: 1.5rem;
  border-top: 1px solid var(--ui-color-border);
  padding-top: 1rem;
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--ui-color-border);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ui-input,
.ui-select {
  min-height: 2.25rem;
  padding: 0.4375rem 0.75rem;
}

.ui-input-compact,
.ui-select-compact {
  min-height: 2rem;
  padding: 0.375rem 0.5rem;
}

.ui-btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: ui-spin 0.75s linear infinite;
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

.ui-textarea {
  min-height: 7rem;
  padding: 0.75rem 0.875rem;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--ui-color-text-muted);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  border-color: var(--ui-color-primary);
  box-shadow: 0 0 0 3px rgb(70 95 255 / 0.14);
  outline: none;
}

/*
 * Disabled controls are still controls, but are temporarily unavailable.
 * Permanent or permission-based values use .ui-static-field instead.
 */
.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled,
.ui-input[aria-disabled="true"],
.ui-select[aria-disabled="true"],
.ui-textarea[aria-disabled="true"],
.ui-input[readonly],
.ui-select[readonly],
.ui-textarea[readonly] {
  cursor: not-allowed;
  border-color: var(--ui-color-control-disabled-border);
  background: var(--ui-color-control-disabled-bg);
  color: var(--ui-color-control-disabled-text);
  box-shadow: inset 0 1px 2px rgb(16 24 40 / 0.04);
  opacity: 1;
}

.ui-input:disabled::placeholder,
.ui-textarea:disabled::placeholder,
.ui-input[readonly]::placeholder,
.ui-textarea[readonly]::placeholder {
  color: var(--ui-color-control-disabled-text);
  opacity: 0.72;
}

.ui-color-input {
  height: 2.75rem;
  width: 3.5rem;
  flex: 0 0 auto;
  cursor: pointer;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.5rem;
  background: var(--ui-color-surface);
  padding: 0.25rem;
}

.ui-color-input-compact {
  width: 3rem;
}

.ui-color-input:focus-visible {
  border-color: var(--ui-color-primary);
  box-shadow: 0 0 0 3px rgb(70 95 255 / 0.14);
  outline: none;
}

.ui-color-input:disabled {
  cursor: not-allowed;
  border-color: var(--ui-color-control-disabled-border);
  background: var(--ui-color-control-disabled-bg);
  filter: grayscale(0.45);
  opacity: 0.62;
}

.ui-field-invalid {
  border-color: var(--ui-color-danger-outline);
}

.ui-field-invalid:focus {
  border-color: var(--ui-color-danger-outline);
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.14);
}

.ui-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--ui-color-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

/* Editable counterpart of .ui-static-field: a <label> that stacks .ui-label
   over its control. Used 30× in storefront-content.hbs / storefront-texts.hbs,
   where a <label> without it stayed inline and glued the caption to the input. */
.ui-field {
  display: grid;
  min-width: 0;
  gap: 0.375rem;
  align-content: start;
}

.ui-static-field {
  display: grid;
  min-width: 0;
  gap: 0.375rem;
  align-content: start;
}

.ui-static-field-value {
  min-height: 1.5rem;
  overflow-wrap: anywhere;
  color: var(--ui-color-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.ui-static-field-value-empty {
  color: var(--ui-color-text-muted);
  font-style: italic;
  font-weight: 400;
}

.ui-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  padding: 1rem;
}

@media (min-width: 768px) {
  .ui-filter-toolbar {
    grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 14rem) minmax(10rem, 14rem) auto;
    align-items: end;
  }
}

.ui-field-help {
  margin-top: 0.375rem;
  color: var(--ui-color-text-muted);
  font-size: 0.75rem;
  line-height: 1rem;
}

.ui-upload-dropzone {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1.5px dashed var(--ui-color-border-strong);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  padding: 1.5rem;
  color: var(--ui-color-text-muted);
  text-align: center;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.ui-upload-dropzone:hover {
  border-color: var(--ui-color-primary);
  background: var(--ui-color-primary-soft);
}

.ui-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.ui-thumbnail-card {
  overflow: hidden;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface);
}

.ui-thumbnail-preview {
  display: flex;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  background: var(--ui-color-surface-strong);
  color: var(--ui-color-text-muted);
}

.ui-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  border-bottom: 1px solid var(--ui-color-border);
  padding: 1rem 0;
}

.ui-setting-row:last-child {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .ui-setting-row {
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

.ui-access-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.ui-access-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface);
  padding: 0.875rem;
}

.ui-confirm-box {
  border: 1px solid var(--ui-color-danger-border);
  border-radius: 0.75rem;
  background: var(--ui-color-danger-bg);
  padding: 1rem;
}

.ui-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: var(--ui-color-text-muted);
  font-weight: 600;
  transition: background-color 150ms ease, color 150ms ease;
}

.ui-tab:hover {
  background: var(--ui-color-surface-hover);
  color: var(--ui-color-text);
}

.ui-tab-active {
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-link);
}

.ui-tab-underline {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding-bottom: 0.75rem;
}

.ui-tab-underline.ui-tab-active {
  background: transparent;
  border-bottom-color: var(--ui-color-link);
}

.ui-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-color-text-muted);
  transition: color 150ms ease;
}

.ui-tooltip-trigger:hover {
  color: var(--ui-color-link);
}

.ui-alert {
  border: 1px solid var(--ui-alert-border);
  border-radius: 0.75rem;
  background: var(--ui-alert-bg);
  padding: 1rem;
}

.ui-alert-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.ui-alert-icon {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--ui-alert-icon);
}

.ui-alert-icon svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.ui-alert-title {
  margin-bottom: 0.25rem;
  color: var(--ui-color-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.ui-alert-message {
  color: var(--ui-color-text-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ui-alert-success {
  --ui-alert-bg: var(--ui-color-success-bg);
  --ui-alert-border: var(--ui-color-success-border);
  --ui-alert-icon: var(--ui-color-success);
}

.ui-alert-error {
  --ui-alert-bg: var(--ui-color-danger-bg);
  --ui-alert-border: var(--ui-color-danger-border);
  --ui-alert-icon: var(--ui-color-danger);
}

.ui-alert-warning {
  --ui-alert-bg: var(--ui-color-warning-bg);
  --ui-alert-border: var(--ui-color-warning-border);
  --ui-alert-icon: var(--ui-color-warning);
}

.ui-alert-info {
  --ui-alert-bg: rgb(239 246 255);
  --ui-alert-border: rgb(147 197 253);
  --ui-alert-icon: rgb(37 99 235);
}

.dark .ui-alert-info {
  --ui-alert-bg: rgb(59 130 246 / 0.12);
  --ui-alert-border: rgb(59 130 246 / 0.25);
  --ui-alert-icon: rgb(96 165 250);
}

.ui-data-table-wrap {
  overflow: hidden;
  border: 1px solid var(--ui-color-border);
  border-radius: 1rem;
  background: var(--ui-color-surface-raised);
}

.ui-data-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.jobs-table-toolbar {
  align-items: flex-end;
}

.jobs-stat-value,
.jobs-table-primary-text {
  color: var(--ui-color-text);
}

.jobs-running-count {
  display: inline-flex;
  min-width: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--ui-color-primary) 28%, transparent);
  border-radius: 0.75rem;
  background: var(--ui-color-primary-soft);
  padding: 0.2rem 0.7rem 0.3rem;
  color: rgb(54 74 210);
  line-height: 1.15;
}

.jobs-status-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ui-color-border);
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  background: var(--ui-color-surface-subtle);
  color: var(--ui-color-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
}

.jobs-status-pill-running {
  border-color: color-mix(in srgb, var(--ui-color-primary) 32%, transparent);
  background: var(--ui-color-primary-soft);
  color: rgb(54 74 210);
}

.jobs-status-pill-warning {
  border-color: var(--ui-color-warning-border);
  background: var(--ui-color-warning-bg);
  color: var(--ui-color-warning);
}

.jobs-status-pill-success {
  border-color: var(--ui-color-success-border);
  background: var(--ui-color-success-bg);
  color: var(--ui-color-success);
}

.jobs-status-pill-error {
  border-color: var(--ui-color-danger-border);
  background: var(--ui-color-danger-bg);
  color: var(--ui-color-danger);
}

.jobs-status-pill-neutral {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-subtle);
  color: var(--ui-color-text-muted);
}

.dark .jobs-running-count,
.dark .jobs-status-pill-running {
  border-color: rgb(129 140 248 / 0.35);
  background: rgb(99 102 241 / 0.18);
  color: rgb(199 210 254);
}

.jobs-delete-all-button {
  align-self: flex-end;
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

.jobs-status-filter {
  display: block;
  width: max-content;
  max-width: 100%;
}

.jobs-status-filter .ui-select {
  width: max-content;
  min-width: 10rem;
  max-width: 100%;
}

.ui-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.ui-data-table thead {
  background: var(--ui-color-surface-subtle);
}

.ui-data-table th {
  padding: 0.625rem 0.875rem;
  color: var(--ui-color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  text-transform: none;
  letter-spacing: normal;
}

.ui-data-table tbody tr {
  border-bottom: 1px solid rgb(243 244 246);
  transition: background-color 150ms ease;
}

.ui-data-table tbody tr:last-child {
  border-bottom: 0;
}

.ui-data-table td {
  padding: 0.625rem 0.875rem;
  vertical-align: middle;
}

.ui-data-table tbody tr:hover,
table tbody tr:hover {
  background: rgb(248 250 252);
}

.ui-data-table-sort,
.product-table-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  transition: color 150ms ease;
}

.ui-data-table-sort:hover,
.ui-data-table-sort:focus-visible,
.product-table-sort:hover,
.product-table-sort:focus-visible {
  color: var(--ui-color-text);
  outline: none;
}

.ui-data-table-sort-center,
.product-table-sort-center {
  justify-content: center;
}

.ui-data-table-sort-indicator {
  display: inline-grid;
  width: 0.75rem;
  height: 1rem;
  flex: 0 0 auto;
  grid-template-rows: 0.5rem 0.5rem;
  align-items: center;
  color: rgb(156 163 175);
  line-height: 1;
}

.ui-data-table-sort-arrow {
  display: block;
  height: 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 0.5rem;
  text-align: center;
}

.ui-data-table-sort-indicator[data-sort-state="asc"],
.ui-data-table-sort-indicator[data-sort-state="desc"] {
  color: var(--ui-color-primary);
}

.ui-data-table-sort-indicator[data-sort-state="asc"] .ui-data-table-sort-arrow-down,
.ui-data-table-sort-indicator[data-sort-state="desc"] .ui-data-table-sort-arrow-up {
  display: none;
}

.ui-data-table-sort-indicator[data-sort-state="asc"],
.ui-data-table-sort-indicator[data-sort-state="desc"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dark .ui-data-table-sort-indicator {
  color: rgb(107 114 128);
}

.dark .ui-data-table-sort-indicator[data-sort-state="asc"],
.dark .ui-data-table-sort-indicator[data-sort-state="desc"] {
  color: rgb(96 165 250);
}

.product-online-link,
.product-offline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
}

.product-online-link {
  border: 1px solid rgb(187 247 208);
  background: rgb(240 253 244);
  color: rgb(22 163 74);
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.product-online-link:hover {
  border-color: rgb(34 197 94);
  background: rgb(220 252 231);
  transform: translateY(-1px);
}

.product-offline-icon {
  border: 1px solid rgb(254 202 202);
  background: rgb(254 242 242);
  color: rgb(220 38 38);
}

.dark .ui-data-table thead {
  background: rgb(3 7 18 / 0.85);
}

.dark .ui-data-table tbody tr {
  border-bottom-color: rgb(31 41 55);
}

.dark .ui-data-table tbody tr:hover,
.dark table tbody tr:hover {
  background: rgb(10 17 31 / 0.96) !important;
}

.dark .product-online-link {
  border-color: rgb(34 197 94 / 0.34);
  background: rgb(22 101 52 / 0.22);
  color: rgb(134 239 172);
}

.dark .product-online-link:hover {
  border-color: rgb(74 222 128 / 0.7);
  background: rgb(22 101 52 / 0.34);
}

.dark .product-offline-icon {
  border-color: rgb(248 113 113 / 0.34);
  background: rgb(127 29 29 / 0.22);
  color: rgb(252 165 165);
}

.env-status-panel {
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
  padding: 1rem;
}

.dark .env-status-panel {
  border-color: rgb(55 65 81);
  background: rgb(2 6 23);
}

.env-status-code {
  border-radius: 0.375rem;
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  box-shadow: inset 0 0 0 1px var(--ui-color-border);
}

.dark .env-status-code {
  background: rgb(15 23 42);
  color: rgb(226 232 240);
  box-shadow: inset 0 0 0 1px rgb(51 65 85);
}

.ui-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--ui-color-surface-hover);
  color: var(--ui-color-text);
  transition: background-color 150ms ease, color 150ms ease;
}

.ui-icon-btn:hover {
  background: var(--ui-color-border);
  color: var(--ui-color-primary);
}

.ui-icon-btn-sm {
  height: 2rem;
  width: 2rem;
}

.ui-action-icon,
.product-detail-action {
  position: relative;
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(191 219 254);
  border-radius: 9999px;
  background: rgb(239 246 255);
  color: rgb(37 99 235);
  box-shadow: var(--ui-shadow-xs);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.ui-action-icon:hover,
.product-detail-action:hover {
  border-color: rgb(59 130 246);
  background: rgb(219 234 254);
  color: rgb(29 78 216);
  transform: translateY(-1px);
}

.dark .ui-action-icon,
.dark .product-detail-action {
  border-color: rgb(59 130 246 / 0.28);
  background: rgb(59 130 246 / 0.14);
  color: rgb(147 197 253);
}

.dark .ui-action-icon:hover,
.dark .product-detail-action:hover {
  border-color: rgb(96 165 250 / 0.6);
  background: rgb(59 130 246 / 0.22);
  color: rgb(191 219 254);
}

.ui-action-icon-compact {
  height: 1.75rem;
  width: 1.75rem;
}

.ui-action-icon-danger {
  border-color: rgb(254 202 202);
  background: rgb(254 242 242);
  color: rgb(220 38 38);
}

.ui-action-icon-danger:hover {
  border-color: rgb(248 113 113);
  background: rgb(254 226 226);
  color: rgb(185 28 28);
}

.dark .ui-action-icon-danger {
  border-color: rgb(248 113 113 / 0.28);
  background: rgb(248 113 113 / 0.14);
  color: rgb(252 165 165);
}

.dark .ui-action-icon-danger:hover {
  border-color: rgb(248 113 113 / 0.6);
  background: rgb(248 113 113 / 0.22);
  color: rgb(254 202 202);
}

.ui-action-tooltip,
.product-detail-tooltip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 20;
  margin-bottom: 0.5rem;
  transform: translateX(-50%) translateY(0.25rem);
  border-radius: 0.5rem;
  background: rgb(17 24 39);
  color: #fff;
  opacity: 0;
  padding: 0.375rem 0.625rem;
  pointer-events: none;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
  visibility: hidden;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.ui-action-tooltip::after,
.product-detail-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgb(17 24 39);
}

.ui-action-icon:hover .ui-action-tooltip,
.ui-action-icon:focus-visible .ui-action-tooltip,
.product-detail-action:hover .product-detail-tooltip,
.product-detail-action:focus-visible .product-detail-tooltip {
  opacity: 1;
  transform: translateX(-50%);
  visibility: visible;
}

.dark .ui-action-tooltip,
.dark .product-detail-tooltip {
  background: rgb(243 244 246);
  color: rgb(17 24 39);
}

.dark .ui-action-tooltip::after,
.dark .product-detail-tooltip::after {
  border-top-color: rgb(243 244 246);
}

.product-variation-summary {
  display: inline-flex;
  min-width: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ui-info-dot,
.product-variation-info {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(191 219 254);
  border-radius: 9999px;
  background: rgb(239 246 255);
  color: rgb(37 99 235);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.ui-info-dot:hover,
.ui-info-dot:focus-visible,
.ui-info-dot[aria-expanded="true"],
.product-variation-info:hover,
.product-variation-info:focus-visible,
.product-variation-info[aria-expanded="true"] {
  border-color: rgb(59 130 246);
  background: rgb(219 234 254);
  color: rgb(29 78 216);
  outline: none;
  transform: translateY(-1px);
}

.dark .ui-info-dot,
.dark .product-variation-info {
  border-color: rgb(59 130 246 / 0.28);
  background: rgb(59 130 246 / 0.14);
  color: rgb(147 197 253);
}

.dark .ui-info-dot:hover,
.dark .ui-info-dot:focus-visible,
.dark .ui-info-dot[aria-expanded="true"],
.dark .product-variation-info:hover,
.dark .product-variation-info:focus-visible,
.dark .product-variation-info[aria-expanded="true"] {
  border-color: rgb(96 165 250 / 0.6);
  background: rgb(59 130 246 / 0.22);
  color: rgb(191 219 254);
}

.product-variation-tooltip {
  position: fixed;
  z-index: 60;
  max-height: min(22rem, calc(100vh - 1.5rem));
  overflow-y: auto;
  border: 1px solid rgb(31 41 55);
  border-radius: 0.5rem;
  background: rgb(17 24 39);
  box-shadow: 0 16px 40px rgb(16 24 40 / 0.18);
  color: #fff;
  padding: 0.75rem;
  text-align: left;
}

.product-variation-tooltip-title {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  text-transform: uppercase;
}

.product-variation-tooltip-list {
  display: grid;
  gap: 0.375rem;
}

.product-variation-tooltip-item,
.product-variation-tooltip-empty {
  color: rgb(229 231 235);
  font-size: 0.8125rem;
  line-height: 1.15rem;
}

.product-variation-tooltip-item {
  padding-left: 0.625rem;
  border-left: 2px solid rgb(96 165 250);
}

.dark .product-variation-tooltip {
  border-color: rgb(229 231 235);
  background: rgb(243 244 246);
  color: rgb(17 24 39);
}

.dark .product-variation-tooltip-item,
.dark .product-variation-tooltip-empty {
  color: rgb(31 41 55);
}

.product-visual-empty {
  border: 1px dashed rgb(209 213 219);
  background: rgb(243 244 246);
  color: rgb(156 163 175);
  cursor: default;
}

.product-visual-header {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  line-height: 1rem;
}

.product-visual-header-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: var(--ui-color-text);
  font-weight: 700;
  text-transform: none;
}

.product-visual-brand-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}

.product-visual-brand-dot-fit4you {
  background: #7356A6;
}

.product-visual-brand-dot-zdravy-protein {
  background: rgb(95 143 62);
}

.product-visual-brand-dot-zdrowe-bialko {
  background: rgb(220 38 38);
}

.product-visual-brand-dot-both {
  background: linear-gradient(90deg, rgb(250 204 21) 0 50%, rgb(95 143 62) 50% 100%);
}

.product-visual-thumb {
  height: 3rem;
  width: 3rem;
}

.product-visual-thumb-retouched {
  height: 2.1rem;
  width: 2.1rem;
}

.dark .product-visual-empty {
  border-color: rgb(75 85 99);
  background: rgb(31 41 55);
  color: rgb(107 114 128);
}

.product-asset-modal-panel {
  max-width: 64rem;
  max-height: calc(100vh - 2rem);
}

.product-detail-edit-panel {
  max-width: 47.5rem;
  max-height: calc(100vh - 3rem);
}

.product-delete-modal-panel {
  max-width: 35rem;
}

.product-delete-confirm-box {
  border-color: rgb(254 202 202);
  background: rgb(254 242 242);
  color: rgb(185 28 28);
}

.dark .product-delete-confirm-box {
  border-color: rgb(127 29 29 / 0.55);
  background: rgb(127 29 29 / 0.22);
  color: rgb(254 202 202);
}

.product-asset-modal-media {
  flex: 1 1 auto;
  min-height: 0;
  background: rgb(248 250 252);
}

.dark .product-asset-modal-media {
  background: rgb(2 6 23);
}

.product-asset-modal-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 14rem);
  object-fit: contain;
}

@media (max-width: 640px) {
  .product-asset-modal-panel {
    max-height: calc(100vh - 1rem);
  }

  .product-detail-edit-panel {
    max-height: calc(100vh - 3rem);
  }

  .product-asset-modal-image {
    max-height: calc(100vh - 16rem);
  }
}

@media (max-height: 560px) {
  .product-asset-modal-image {
    max-height: calc(100vh - 11rem);
  }
}

.ui-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 0.5rem;
  padding-inline: 0.75rem;
  color: var(--ui-color-text);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 150ms ease, color 150ms ease;
}

.ui-page-btn:hover {
  background: var(--ui-color-surface-hover);
}

.ui-page-btn-active {
  background: var(--ui-color-primary);
  color: var(--ui-color-on-primary);
}

.ui-page-btn-active:hover {
  background: var(--ui-color-primary-hover);
}

.ui-toggle {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
}

.ui-toggle-control {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  border-radius: 9999px;
  background: rgb(229 231 235);
  transition: background-color 150ms ease;
}

.ui-toggle-control::after {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.125rem;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(16 24 40 / 0.15);
  transition: transform 150ms ease;
}

.ui-toggle input:checked + .ui-toggle-control {
  background: rgb(70 95 255);
}

.ui-toggle input:checked + .ui-toggle-control::after {
  transform: translateX(1.25rem);
}

.ui-toggle input:focus-visible + .ui-toggle-control {
  outline: 3px solid rgb(70 95 255 / 0.2);
  outline-offset: 2px;
}

.ui-toggle input:disabled + .ui-toggle-control {
  cursor: not-allowed;
  opacity: 0.6;
}

.ui-toggle:has(input:disabled) {
  cursor: not-allowed;
}

.dark .ui-toggle-control {
  background: rgb(255 255 255 / 0.1);
}

.dark .ui-toggle input:checked + .ui-toggle-control {
  background: rgb(70 95 255);
}

.form-required-marker {
  display: inline-block;
  margin-left: 0.25rem;
}

.ui-toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2147483647;
  display: flex;
  width: min(100% - 2rem, 22rem);
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.ui-toast {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-toast-border);
  border-bottom-width: 4px;
  border-bottom-color: var(--ui-toast-accent);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-raised);
  box-shadow: 0 4px 16px rgb(16 24 40 / 0.12);
  pointer-events: auto;
}

.ui-toast-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
}

.ui-toast-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}

.ui-toast-icon {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--ui-toast-icon-bg);
  color: var(--ui-toast-accent);
}

.ui-toast-icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.ui-toast-message {
  min-width: 0;
  color: var(--ui-color-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.ui-toast-details {
  margin-top: 0.375rem;
  display: grid;
  gap: 0.125rem;
  color: var(--ui-color-text-muted);
  font-size: 0.75rem;
  line-height: 1rem;
}

.ui-toast-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-toast-close {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: var(--ui-color-text-muted);
  transition: background-color 150ms ease, color 150ms ease;
}

.ui-toast-close:hover {
  background: var(--ui-color-surface-hover);
  color: var(--ui-color-text);
}

.ui-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.1875rem;
  background: var(--ui-toast-accent);
  opacity: 0.35;
}

.ui-toast-success {
  --ui-toast-accent: rgb(34 197 94);
  --ui-toast-border: rgb(187 247 208);
  --ui-toast-icon-bg: rgb(240 253 244);
}

.ui-toast-error {
  --ui-toast-accent: rgb(239 68 68);
  --ui-toast-border: rgb(254 202 202);
  --ui-toast-icon-bg: rgb(254 242 242);
}

.ui-toast-warning {
  --ui-toast-accent: rgb(234 179 8);
  --ui-toast-border: rgb(254 240 138);
  --ui-toast-icon-bg: rgb(254 252 232);
}

.ui-toast-info {
  --ui-toast-accent: rgb(59 130 246);
  --ui-toast-border: rgb(191 219 254);
  --ui-toast-icon-bg: rgb(239 246 255);
}

.dark .ui-toast {
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.32);
}

.dark .ui-toast-success {
  --ui-toast-border: rgb(34 197 94 / 0.3);
  --ui-toast-icon-bg: rgb(34 197 94 / 0.15);
}

.dark .ui-toast-error {
  --ui-toast-border: rgb(239 68 68 / 0.3);
  --ui-toast-icon-bg: rgb(239 68 68 / 0.15);
}

.dark .ui-toast-warning {
  --ui-toast-border: rgb(234 179 8 / 0.3);
  --ui-toast-icon-bg: rgb(234 179 8 / 0.15);
}

.dark .ui-toast-info {
  --ui-toast-border: rgb(59 130 246 / 0.3);
  --ui-toast-icon-bg: rgb(59 130 246 / 0.15);
}

.styles-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}

.styles-status-active {
  background: rgb(220 252 231);
  color: rgb(21 128 61);
}

.styles-status-pending {
  background: rgb(254 249 195);
  color: rgb(133 77 14);
}

.styles-status-draft {
  background: rgb(243 244 246);
  color: rgb(75 85 99);
}

.styles-status-archived {
  background: rgb(241 245 249);
  color: rgb(71 85 105);
}

.styles-status-in-review {
  background: rgb(219 234 254);
  color: rgb(29 78 216);
}

.dark .styles-status-active {
  background: rgb(34 197 94 / 0.15);
  color: rgb(134 239 172);
}

.dark .styles-status-pending {
  background: rgb(234 179 8 / 0.2);
  color: #fff;
}

.dark .styles-status-draft {
  background: rgb(255 255 255 / 0.08);
  color: rgb(229 231 235);
}

.dark .styles-status-archived {
  background: rgb(148 163 184 / 0.18);
  color: rgb(226 232 240);
}

.dark .styles-status-in-review {
  background: rgb(59 130 246 / 0.18);
  color: #fff;
}

.styles-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 9999px;
  transition: width 150ms ease;
}

.styles-progress-good {
  background: rgb(34 197 94);
}

.styles-progress-warning {
  background: rgb(234 179 8);
}

.styles-progress-danger {
  background: rgb(239 68 68);
}

.styles-progress-w-0 { width: 0; }
.styles-progress-w-10 { width: 10%; }
.styles-progress-w-20 { width: 20%; }
.styles-progress-w-25 { width: 25%; }
.styles-progress-w-30 { width: 30%; }
.styles-progress-w-40 { width: 40%; }
.styles-progress-w-50 { width: 50%; }
.styles-progress-w-60 { width: 60%; }
.styles-progress-w-65 { width: 65%; }
.styles-progress-w-70 { width: 70%; }
.styles-progress-w-75 { width: 75%; }
.styles-progress-w-80 { width: 80%; }
.styles-progress-w-85 { width: 85%; }
.styles-progress-w-90 { width: 90%; }
.styles-progress-w-95 { width: 95%; }
.styles-progress-w-100 { width: 100%; }

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.preview-grid-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: rgb(243 244 246);
  cursor: pointer;
  text-align: left;
}

.preview-grid-cell {
  position: relative;
}

.preview-grid-cell-selected .preview-grid-item {
  outline: 3px solid var(--ui-color-primary);
  outline-offset: -3px;
}

.preview-grid-check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
  cursor: pointer;
}

.preview-grid-check input {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.preview-selection-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Compare mode (owner 2026-09-14): one row per product, 3 source views + 3 result views. */
.preview-compare-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.preview-compare-row-title {
  margin-bottom: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(55 65 81);
}

.dark .preview-compare-row-title {
  color: rgb(209 213 219);
}

.preview-compare-row-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.preview-compare-row-grid > .preview-grid-cell:nth-child(4) {
  margin-left: 10px;
}

.preview-compare-row-grid-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
}

.preview-compare-row-grid-pair img {
  object-fit: contain;
}

.preview-compare-result {
  position: relative;
}

/* Regenerated images (owner 2026-09-14): lifted to the top and badged until marked seen. */
.preview-new-tag {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgb(22 163 74);
  color: rgb(255 255 255);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  pointer-events: none;
}

.preview-grid-cell-new .preview-grid-item {
  outline: 3px solid rgb(22 163 74);
  outline-offset: -3px;
}

.preview-grid-cell-new.preview-grid-cell-selected .preview-grid-item {
  outline-color: var(--ui-color-primary);
}

.preview-compare-row-new .preview-compare-row-title {
  color: rgb(21 128 61);
}

.preview-new-count {
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgb(220 252 231);
  color: rgb(21 128 61);
  font-size: 0.75rem;
  font-weight: 600;
}

.dark .preview-new-count {
  background: rgb(20 83 45);
  color: rgb(187 247 208);
}

.preview-compare-source {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: rgb(243 244 246);
}

.dark .preview-compare-source {
  background: rgb(17 24 39);
}

.preview-compare-tag {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgb(15 23 42 / 78%);
  color: rgb(255 255 255);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  pointer-events: none;
}

.preview-compare-name {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.35rem 0.625rem;
  background: rgb(15 23 42 / 72%);
  color: rgb(255 255 255);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  pointer-events: none;
}

.preview-compare-missing {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: rgb(107 114 128);
  font-size: 0.8125rem;
  text-align: center;
}

.preview-grid-item:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
}

.dark .preview-grid-item {
  background: rgb(17 24 39);
}

.preview-grid-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  min-height: 2.5rem;
  padding: 1rem 0.625rem 0.45rem;
  background: linear-gradient(to top, rgb(15 23 42 / 92%), rgb(15 23 42 / 72%) 62%, transparent);
  color: rgb(255 255 255);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgb(0 0 0 / 72%);
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.dark .preview-grid-caption {
  background: linear-gradient(to top, rgb(0 0 0 / 94%), rgb(3 7 18 / 76%) 62%, transparent);
}

.preview-grid-item:hover .preview-grid-caption,
.preview-grid-item:focus-visible .preview-grid-caption {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .preview-grid-caption {
    opacity: 1;
    transform: translateY(0);
  }
}

.preview-modal-stage {
  position: relative;
}

.preview-modal-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 9999px;
  background: rgb(17 24 39 / 78%);
  color: white;
  box-shadow: 0 8px 24px rgb(15 23 42 / 28%);
  transition: background-color 150ms ease, transform 150ms ease;
}

.preview-modal-nav:hover {
  background: var(--ui-color-primary);
  transform: translateY(-50%) scale(1.05);
}

.preview-modal-nav:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.preview-modal-nav-previous {
  left: 0.75rem;
}

.preview-modal-nav-next {
  right: 0.75rem;
}

.preview-modal-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 9999px;
  background: rgb(17 24 39 / 78%);
  padding: 0.25rem 0.65rem;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  pointer-events: none;
}

@media (max-width: 639px) {
  .preview-modal-nav {
    width: 2.5rem;
    height: 2.5rem;
  }

  .preview-modal-nav-previous {
    left: 0.5rem;
  }

  .preview-modal-nav-next {
    right: 0.5rem;
  }
}

@media (min-width: 768px) {
  .preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .preview-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.persona-card-layout {
  display: grid;
  gap: 1.25rem;
}

.persona-surface,
.persona-card {
  border: 1px solid var(--ui-color-border);
  border-radius: 1rem;
  background: var(--ui-color-surface);
}

.persona-avatar-panel {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(145deg, rgb(238 244 227) 0%, rgb(250 247 240) 100%);
  box-shadow: inset 0 0 0 1px rgb(95 143 62 / 8%);
}

.persona-avatar-panel img {
  display: block;
}

.persona-card {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.persona-card:hover {
  border-color: rgb(95 143 62 / 28%);
  box-shadow: 0 12px 30px rgb(16 24 40 / 8%);
}

.persona-copy-block,
.persona-needs-panel {
  background: var(--ui-color-surface-subtle);
}

.persona-age-badge {
  border: 1px solid var(--ui-color-border);
  background: var(--ui-color-surface-subtle);
}

.persona-priority-badge {
  border: 1px solid rgb(95 143 62 / 18%);
  background: rgb(250 247 240 / 94%);
  color: rgb(47 53 36);
}

.persona-generator-note {
  border: 1px solid rgb(95 143 62 / 22%);
  background: rgb(238 244 227);
  color: rgb(47 53 36);
}

.persona-needs-grid,
.persona-profile-grid,
.persona-three-column,
.persona-facts-grid {
  display: grid;
  gap: 0.75rem;
}

.persona-need-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface);
}

.persona-need-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgb(95 143 62 / 12%);
  color: rgb(70 112 42);
  font-size: 0.75rem;
  font-weight: 700;
}

.persona-need-key {
  margin-top: 0.2rem;
  color: rgb(70 112 42);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 0.9rem;
  text-transform: uppercase;
}

.persona-profile-section {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.875rem;
  background: var(--ui-color-surface);
}

.persona-profile-section-brand {
  background: linear-gradient(145deg, rgb(238 244 227 / 72%), var(--ui-color-surface) 72%);
}

.persona-profile-section-accent {
  background: linear-gradient(145deg, rgb(255 247 237 / 82%), var(--ui-color-surface) 72%);
}

.persona-section-title {
  color: var(--ui-color-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.25rem;
  text-transform: uppercase;
}

.persona-subsection-title,
.persona-fact dt,
.persona-validation-grid dt {
  color: var(--ui-color-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1rem;
  text-transform: uppercase;
}

.persona-fact {
  min-width: 0;
}

/* Title + list block inside a profile section. Without min-width it stretched
   the .persona-three-column / .persona-profile-grid tracks on long items. */
.persona-subsection {
  min-width: 0;
}

.persona-fact dd,
.persona-validation-grid dd,
.persona-paragraph {
  margin-top: 0.25rem;
  color: var(--ui-color-text);
  font-size: 0.8125rem;
  line-height: 1.35rem;
}

.persona-compact-list,
.persona-quote-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
  padding: 0;
  list-style: none;
}

.persona-compact-list li,
.persona-quote-list li {
  position: relative;
  padding-left: 0.9rem;
  color: var(--ui-color-text);
  font-size: 0.8125rem;
  line-height: 1.3rem;
}

.persona-compact-list li::before {
  position: absolute;
  top: 0.48rem;
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 9999px;
  background: rgb(95 143 62 / 70%);
  content: '';
}

.persona-quote-list li {
  padding: 0.65rem 0.75rem 0.65rem 1.65rem;
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 58%);
}

.persona-quote-list li::before {
  position: absolute;
  top: 0.35rem;
  left: 0.6rem;
  color: rgb(95 143 62 / 68%);
  font-size: 1.25rem;
  font-weight: 700;
  content: '\201C';
}

.persona-highlight {
  padding: 0.75rem;
  border-left: 3px solid rgb(95 143 62 / 68%);
  border-radius: 0 0.65rem 0.65rem 0;
  background: rgb(255 255 255 / 58%);
}

.persona-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.persona-data-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 9999px;
  background: rgb(255 255 255 / 72%);
  color: var(--ui-color-text);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1rem;
}

.persona-data-pill-muted {
  background: var(--ui-color-surface-subtle);
}

.persona-validation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.persona-validation-grid > div {
  padding: 0.75rem;
  border-radius: 0.65rem;
  background: var(--ui-color-surface-subtle);
}

.dark .persona-avatar-panel {
  background: linear-gradient(145deg, rgb(31 41 55) 0%, rgb(17 24 39) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
}

.dark .persona-card:hover {
  border-color: rgb(95 143 62 / 38%);
  box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
}

.dark .persona-priority-badge {
  border-color: rgb(169 207 139 / 25%);
  background: rgb(17 24 39 / 90%);
  color: rgb(229 231 235);
}

.dark .persona-generator-note {
  border-color: rgb(95 143 62 / 34%);
  background: rgb(95 143 62 / 14%);
  color: rgb(209 231 191);
}

.dark .persona-need-priority {
  background: rgb(95 143 62 / 20%);
  color: rgb(169 207 139);
}

.dark .persona-need-key {
  color: rgb(169 207 139);
}

.dark .persona-profile-section-brand {
  background: linear-gradient(145deg, rgb(95 143 62 / 12%), var(--ui-color-surface) 76%);
}

.dark .persona-profile-section-accent {
  background: linear-gradient(145deg, rgb(224 141 90 / 11%), var(--ui-color-surface) 76%);
}

.dark .persona-quote-list li,
.dark .persona-highlight,
.dark .persona-data-pill {
  background: rgb(255 255 255 / 4%);
}

@media (min-width: 1024px) {
  .persona-card-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }

  /* The persona summary follows while scrolling long detail columns,
     so it's always clear which persona the content belongs to. */
  .persona-card-layout > aside,
  .persona-insight-aside {
    position: sticky;
    top: 5.5rem;
    align-self: start;
  }
}

@media (min-width: 640px) {
  .persona-needs-grid,
  .persona-profile-grid,
  .persona-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .persona-profile-section-wide {
    grid-column: 1 / -1;
  }

  .persona-compact-list-two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .persona-three-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ── Flavor icons ─────────────────────────────────────────────────────
   One generated photo per unique flavor (see flavorImages.service). Round
   thumbnails shown wherever a flavor/variation name appears. */
.flavor-icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
  border-radius: 9999px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
  vertical-align: middle;
}

.flavor-icon-lg {
  width: 2.25rem;
  height: 2.25rem;
}

.flavor-icon-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  font-size: 0.7rem;
  font-weight: 700;
  background: #f2f4f7;
}

.dark .flavor-icon {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14);
}

.dark .flavor-icon-empty {
  background: rgb(255 255 255 / 0.08);
}

/* Round product avatar in data tables (productImageProduct2 with fallbacks),
   slightly larger than flavor icons. */
.product-avatar {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 9999px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}

.product-avatar-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  background: #f2f4f7;
  font-size: 0.75rem;
  font-weight: 700;
}

.dark .product-avatar {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14);
}

.dark .product-avatar-empty {
  background: rgb(255 255 255 / 0.08);
}

.inventory-product-cell--with-avatar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inventory-product-cell--with-avatar .inventory-product-cell__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Flavor icon and variation name sit on ONE line. */
.inventory-variant-cell__main {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* ── Product name cell (shared partial) ───────────────────────────────
   Photo left spanning two text rows, name right, aligned to the top-left.
   Price/commerce data intentionally excluded — belongs in extra columns. */
.product-name-cell-td {
  vertical-align: middle;
}

.product-name-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  text-align: left;
}

.product-name-cell__media {
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}

.product-avatar-xl {
  width: 2.75rem;
  height: 2.75rem;
}

.product-name-cell__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
}

/* ── Shared image lightbox ────────────────────────────────────────── */
.image-lightbox-panel {
  position: relative;
  z-index: 1;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: min(90vw, 640px);
  cursor: zoom-out;
}

.image-lightbox-panel img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}

.image-lightbox-panel figcaption {
  color: #fff;
  font-size: 0.85rem;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}

/* ── Graphic work creation wizard: numbered cascading steps ─────────── */
.gw-step {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.gw-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: var(--color-brand-50, #ecf3ff);
  color: var(--color-brand-600, #3641f5);
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

.gw-step__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Steps that cannot be filled yet (or whose researched options were
   invalidated by a custom upstream step) fade out. */
.gw-step--muted {
  opacity: 0.45;
}

.dark .gw-step__number {
  background: rgb(70 95 255 / 0.15);
  color: var(--color-brand-400, #7592ff);
}

/* Brand identity drag&drop zone */
.brand-identity-dropzone {
  border: 2px dashed #d0d5dd;
  border-radius: 0.75rem;
  padding: 1.25rem;
  text-align: center;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.brand-identity-dropzone--active {
  border-color: var(--color-brand-500, #465fff);
  background: var(--color-brand-50, #ecf3ff);
}

.dark .brand-identity-dropzone {
  border-color: rgb(255 255 255 / 0.16);
}

.dark .brand-identity-dropzone--active {
  background: rgb(70 95 255 / 0.1);
}

/* Graphic work cascade pills: brand → audience → problem → solution → product */
.gw-cascade-pill {
  display: inline-flex;
  align-items: center;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 9999px;
  padding: 0.15rem 0.6rem;
  background: #f2f4f7;
  color: #475467;
  font-weight: 500;
}

.gw-cascade-pill--brand {
  background: var(--color-brand-50, #ecf3ff);
  color: var(--color-brand-600, #3641f5);
  font-weight: 700;
}

.gw-cascade-pill--product {
  background: var(--color-success-50, #ecfdf3);
  color: var(--color-success-700, #027a48);
  font-weight: 600;
}

.gw-cascade-pill--muted {
  background: transparent;
  border: 1px dashed #d0d5dd;
  color: #98a2b3;
}

.gw-cascade-arrow {
  color: #98a2b3;
}

.dark .gw-cascade-pill { background: rgb(255 255 255 / 0.08); color: #d0d5dd; }
.dark .gw-cascade-pill--brand { background: rgb(70 95 255 / 0.15); color: var(--color-brand-400, #7592ff); }
.dark .gw-cascade-pill--product { background: rgb(18 183 106 / 0.12); color: #6ce9a6; }
.dark .gw-cascade-arrow { color: #667085; }

/* Graphic work detail sections: 1 · content, 2 · static, 3 · formats */
.gw-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475467;
  border-bottom: 1px solid #e4e7ec;
  padding-bottom: 0.375rem;
}
.dark .gw-section-title { color: #d0d5dd; border-color: #344054; }

/* Inspiration pill on work cards: hovering reveals WHICH inspiration it is */
.gw-inspiration-hover { position: relative; display: inline-flex; }
.gw-inspiration-hover__img {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  margin-top: 0.25rem;
  height: 11rem;
  width: 11rem;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid #e4e7ec;
  background: #fff;
  box-shadow: 0 12px 24px rgb(16 24 40 / 0.18);
}
.gw-inspiration-hover:hover .gw-inspiration-hover__img { visibility: visible; }
.dark .gw-inspiration-hover__img { border-color: #344054; background: #101828; }

/* Inspiration style-category badge on cards */
.inspiration-category-badge {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 2;
  border-radius: 9999px;
  background: rgb(16 24 40 / 0.72);
  color: #fff;
  padding: 0.15rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* A-19/A-13 (P19): zdielane nastroje nad tabulkou — hladanie, pocitadlo,
   „zobrazit dalsie“. Kreslia sa nad tabulkou a nikde nerezervuju miesto,
   ked ich stranka nepouziva. */
.ui-table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ui-table-tools__search {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 22rem;
}

.ui-table-tools__count {
  font-size: 0.8125rem;
  color: rgb(107 114 128);
}

/* Shared operator patterns. Every pattern is demonstrated on /admin/styles. */
:root {
  --ui-font-body: 0.875rem;
  --ui-font-compact: 0.8125rem;
  --ui-font-caption: 0.75rem;
  --ui-heading-page: 1.5rem;
  --ui-heading-section: 1.125rem;
  --ui-heading-card: 1rem;
}

.ui-heading-1, .ui-heading-2, .ui-heading-3,
.ui-heading-4, .ui-heading-5, .ui-heading-6 {
  color: var(--ui-color-text);
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.ui-heading-1 { font-size: var(--ui-heading-page); }
.ui-heading-2 { font-size: var(--ui-heading-section); }
.ui-heading-3 { font-size: var(--ui-heading-card); }
.ui-heading-4, .ui-heading-5 { font-size: var(--ui-font-body); }
.ui-heading-6 { font-size: var(--ui-font-caption); }
.ui-caption { font-size: var(--ui-font-caption); color: var(--ui-color-text-muted); }
.ui-money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-money-original { display: block; font-size: var(--ui-font-caption); color: var(--ui-color-text-muted); }

.ui-toolbar, .ui-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.ui-toolbar { justify-content: space-between; }
.ui-actions > .ui-select { width: auto; min-width: 8rem; }
.ui-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.75rem;
  background: var(--ui-color-surface-subtle);
}
.ui-filters > .ui-field { flex: 1 1 9rem; max-width: 15rem; }
.ui-filters > .ui-field-search { flex: 2 1 16rem; max-width: none; }
.ui-check-label { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 2.25rem; cursor: pointer; font-size: var(--ui-font-compact); }
.ui-save-state { min-height: 1.25rem; font-size: var(--ui-font-caption); color: var(--ui-color-text-muted); }
.ui-save-state[data-state="error"] { color: var(--ui-color-danger); }
.ui-save-state[data-state="saved"] { color: var(--ui-color-success); }
.ui-toggle-input:focus-visible ~ div { outline: 2px solid var(--ui-color-primary); outline-offset: 3px; }
.ui-toggle-input:disabled ~ div { opacity: 0.55; cursor: not-allowed; }

.ui-media-button { display: block; overflow: hidden; cursor: pointer; border-radius: 0.5rem; }
.ui-disclosure { cursor: pointer; font-size: var(--ui-font-body); }
.ui-action-card { cursor: pointer; font-size: var(--ui-font-body); }
.ui-icon-btn { min-width: 2rem; min-height: 2rem; flex-shrink: 0; cursor: pointer; }
.ui-btn:focus-visible, .ui-icon-btn:focus-visible, .ui-text-action:focus-visible,
.ui-media-button:focus-visible, .ui-disclosure:focus-visible, .ui-action-card:focus-visible {
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 3px;
}
.ui-btn[aria-busy="true"] { cursor: progress; }
.ui-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; }

.ui-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0.5rem;
  border: 1px solid var(--ui-color-border);
  border-radius: 0.5rem;
  background: #fff;
}
.ui-logo-frame img { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.ui-logo-frame-sm { width: 5.5rem; height: 2.5rem; padding: 0.25rem; }
.ui-logo-frame-fluid { width: 100%; min-width: 0; height: 4rem; }
.ui-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-color, var(--ui-color-primary)) 40%, var(--ui-color-border));
  background: color-mix(in srgb, var(--ui-brand-color, var(--ui-color-primary)) 10%, var(--ui-color-surface));
  color: var(--ui-color-text);
  font-size: var(--ui-font-caption);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.ui-brand-pill::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ui-brand-color, var(--ui-color-primary)); }
/* Štítok značky + vlajka trhu = jeden komponent (partial shared/brand-market-chip, FIT4YOU-PLAN F1.4).
   Farba ide z Brand.colors[0] (inline premenná); data-brand je len záložná farba, kým DB farby chýbajú. */
.ui-brand-chip { display: inline-flex; align-items: center; gap: 0.375rem; vertical-align: middle; white-space: nowrap; }
.ui-brand-chip-compact .ui-brand-pill { gap: .25rem; padding: .0625rem .5rem; font-size: 11px; }
.ui-brand-chip-compact .ui-brand-pill::before { width: .375rem; height: .375rem; }
.ui-brand-chip-compact .ui-market-pill { min-width: 1.75rem; padding: 0 .375rem; font-size: 10.5px; }
.ui-brand-pill[data-brand="fit4you"] { --ui-brand-color: #7356A6; }
.ui-brand-pill[data-brand="zdravy-protein"] { --ui-brand-color: #559829; }
/* Spoločné (dáta bez poľa značky, BOUI-6): neutrálna šedá bodka, nikdy farba značky. */
.ui-brand-pill[data-brand="shared"] { --ui-brand-color: #64748b; color: var(--ui-color-text-muted, #64748b); }
/* Len bodka značky (skupina „predáva sa na“: bodka + vlajky). */
.ui-brand-pill-dot { gap: 0; padding: .25rem; }
.ui-brand-chip-compact .ui-brand-pill-dot { padding: .1875rem; }
/* BO audit H-05 / S-02, 7. 10.: odznak „interná“ pri značke s visibility=internal (skrytý web). */
.ui-brand-internal { display: inline-flex; align-items: center; padding: 0 .375rem; border: 1px dashed var(--ui-color-border-strong, #94a3b8);
  border-radius: .25rem; color: var(--ui-color-text-muted, #64748b); font-size: 10.5px; font-weight: 600; line-height: 1.5;
  letter-spacing: .02em; white-space: nowrap; }
.ui-brand-chip-compact .ui-brand-internal { padding: 0 .3125rem; font-size: 10px; }
/* BO audit S-02, 7. 10.: ETIKETA (logo na obale, MaximProduct.brand) ≠ predajná značka (web).
   Etiketa = hranatý štítok so štvorčekom; predajná značka = okrúhla pilulka s bodkou + vlajka trhu. */
.ui-brand-pill.product-label-pill { border-radius: .375rem; border-style: dashed; background: var(--ui-color-surface); }
.ui-brand-pill.product-label-pill::before { border-radius: 1px; }
/* Globálny prepínač značky v hlavičke (BO audit S-01, 7. 10.): „Zdravý proteín | Fit4You | Obe“.
   Tlačidlá = zdieľaný segmentový vzor .ui-segment-btn (aria-pressed; farba bodky z data-brand-color). */
.ui-brand-switch { display: none; align-items: center; gap: .125rem; padding: .125rem; border: 1px solid var(--ui-color-border);
  border-radius: 999px; background: var(--ui-color-surface); }
.ui-segment-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .75rem; border: 1px solid transparent;
  border-radius: 999px; background: transparent; color: var(--ui-color-text-muted); font-size: 13px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
.ui-segment-btn:hover { color: var(--ui-color-text); background: var(--ui-color-surface-strong); }
.ui-segment-btn:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: 1px; }
.ui-segment-btn[aria-pressed="true"] { color: var(--ui-color-text);
  border-color: color-mix(in srgb, var(--ui-brand-color, var(--ui-color-primary)) 45%, var(--ui-color-border));
  background: color-mix(in srgb, var(--ui-brand-color, var(--ui-color-primary)) 12%, var(--ui-color-surface)); }
.ui-segment-btn[data-brand-switch=""] { --ui-brand-color: var(--ui-color-primary); }
.ui-brand-switch-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ui-brand-color, var(--ui-color-primary)); }
.ui-segment-btn:disabled { cursor: progress; opacity: .7; }
.ui-brand-switch-select { display: block; }
@media (min-width: 1024px) {
  .ui-brand-switch { display: inline-flex; }
  .ui-brand-switch-select { display: none; }
}
/* Text vo farbe značky (napr. upozornenie „cena značky“ na /admin/product-prices): farba z Brand.colors[0]
   cez --ui-brand-color, zmiešaná s farbou textu témy — v tmavom režime sa sama zosvetlí. */
.ui-brand-text { color: color-mix(in srgb, var(--ui-brand-color, var(--ui-color-primary)) 80%, var(--ui-color-text)); }
/* E-mailový workspace: záložka per značka + pás nad náhľadom (FIT4YOU-PLAN F7.5, partial admin/email-workspace). */
.ui-email-brand-tab { display:inline-flex; flex-direction:column; align-items:flex-start; gap:.3rem; min-width:14rem; text-align:left; }
.ui-email-brand-tab .ui-email-brand-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.375rem; font-size:12px; color:var(--ui-color-text-muted); }
.ui-email-brand-band { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; padding:.75rem 1rem; border-radius:.75rem;
  border:1px solid color-mix(in srgb, var(--ui-brand-color, var(--ui-color-primary)) 35%, var(--ui-color-border));
  background:color-mix(in srgb, var(--ui-brand-color, var(--ui-color-primary)) 10%, var(--ui-color-surface)); }
.ui-email-brand-band::before { content:''; align-self:stretch; width:.375rem; border-radius:999px; background:var(--ui-brand-color, var(--ui-color-primary)); }
.ui-email-brand-band img { display:block; height:28px; width:auto; max-width:140px; }
.ui-email-brand-band .ui-caption { margin:0; }
.ui-book-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); }
.ui-catalog-card { border: 1px solid var(--ui-color-border); border-radius: 0.75rem; padding: 1rem; background: var(--ui-color-surface); }
.ui-catalog-title { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.ui-catalog-thumb { width: 4rem; height: 4rem; object-fit: contain; flex: 0 0 auto; }
.ui-catalog-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(10rem, 0.7fr); gap: 1.5rem; margin-top: 1rem; font-size: var(--ui-font-compact); }
.ui-catalog-description { margin-top: 0.5rem; white-space: pre-line; overflow-wrap: anywhere; }
.ui-component-list { display: grid; gap: 0.5rem; margin: 0.5rem 0; }
.ui-component-list li { display: flex; gap: 0.5rem; align-items: baseline; }
.ui-price-list { display: grid; gap: 0.4rem; margin: 0.5rem 0; }
.ui-price-list > div { display: flex; gap: 0.75rem; justify-content: space-between; }
@media (max-width: 1100px) { .ui-catalog-details { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.ui-book-cover { display: flex; align-items: start; justify-content: center; background: var(--ui-color-surface-subtle); padding: 1rem 0.625rem; }
.ui-book-cover img { width: 100%; max-height: 15rem; height: auto; object-fit: contain; border-radius: 0.25rem; }
.ui-recipe-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); min-height: 13rem; }
.ui-component-code { display: block; margin-top: 0.5rem; font: 0.75rem/1.5 monospace; color: var(--ui-color-text-muted); }
.ui-data-table thead :is(th, button, span) { text-transform: none; letter-spacing: normal; }
.ui-link-action { color: var(--ui-color-primary); border: 0; background: transparent; padding: 2px 0; font: inherit; cursor: pointer; text-align: inherit; }
.ui-link-action:hover { text-decoration: underline; }
.ui-link-action:focus-visible { outline: 2px solid var(--ui-color-primary); outline-offset: 3px; }

@media (max-width: 640px) {
  .ui-toolbar { align-items: stretch; }
  .ui-toolbar > .ui-actions { width: 100%; }
  .ui-filters > .ui-field { max-width: none; }
  .ui-book-row { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .ui-recipe-row { grid-template-columns: 6rem minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .ui-btn, .ui-icon-btn, .ui-check-label { min-height: 2.75rem; }
  .ui-icon-btn { min-width: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-icon-btn, .ui-input, .ui-select, .ui-disclosure, .ui-media-button { transition: none; }
}

/* Shared compact actions used by status chips and small text actions. */
.ui-pill-button { min-height: 32px; cursor: pointer; justify-content: center; }
.ui-pill-button:focus-visible, .ui-text-action:focus-visible, .ui-danger-text-action:focus-visible { outline: 2px solid var(--ui-color-link); outline-offset: 3px; }
.ui-pill-button:disabled { cursor: not-allowed; opacity: .5; }
.ui-text-action, .ui-danger-text-action { font-size: 13px; line-height: 1.4; }
@media (pointer: coarse) { .ui-pill-button { min-height: 44px; } }

/* Explicit image element for every logo frame, including SVG uploads. */
.ui-logo-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }

.ui-domain-identity { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.ui-domain-identity > a { overflow-wrap:anywhere; }
.ui-integration-badges { display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-width:145px; max-width:210px; }
.ui-integration-badges .status-pill { font-size:11px; padding:3px 7px; }

/* Launch/readiness checklist; examples live in the Styles catalogue. */
.ui-launch-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.ui-launch-tier { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  padding:1rem; border:1px solid var(--ui-color-border); border-radius:.75rem;
  background:var(--ui-color-surface); text-align:left; color:var(--ui-color-text); cursor:pointer; }
.ui-launch-tier[aria-pressed="true"] { border-color:var(--ui-color-primary); box-shadow:0 0 0 1px var(--ui-color-primary); }
.ui-launch-tier:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:3px; }
.ui-launch-row { border:1px solid var(--ui-color-border); border-radius:.75rem; background:var(--ui-color-surface); }
.ui-launch-row-head { display:flex; align-items:flex-start; gap:.875rem; padding:1rem; }
.ui-launch-row-head > .ui-checkbox { margin-top:.2rem; flex-shrink:0; }
.ui-launch-row-main { flex:1; min-width:0; overflow-wrap:anywhere; }
.ui-launch-row-body { border-top:1px solid var(--ui-color-border); padding:1rem; }
.ui-launch-row-done .ui-launch-row-head { background:var(--ui-color-surface-subtle); border-radius:.75rem; }
.ui-launch-evidence { margin-top:.5rem; font-size:13px; line-height:1.5; font-weight:500; }
.ui-launch-verdict { display:block; }
@media (max-width:767px) {
  .ui-launch-summary { grid-template-columns:minmax(0,1fr); }
  .ui-launch-row-head { flex-wrap:wrap; }
  .ui-launch-row-head > .ui-actions { width:100%; padding-left:2rem; }
  .ui-launch-row-head > .ui-launch-row-main { flex-basis:calc(100% - 3rem); }
}

/* Malé stavové štítky (reálny obsah: všeobecné / produkt / osoba / licencia). */
.ui-badge { display:inline-flex; align-items:center; gap:.25rem; border-radius:9999px;
  padding:.125rem .625rem; font-size:12px; font-weight:500; line-height:1.5;
  background:var(--ui-color-surface-strong); color:var(--ui-color-text); }
.ui-badge-info { background:var(--ui-color-info-bg); color:var(--ui-color-info); }
.ui-badge-warning { background:var(--ui-color-warning-bg); color:var(--ui-color-warning); }
.ui-badge-success { background:var(--ui-color-success-bg); color:var(--ui-color-success); }

/* Keep the selected request below the sticky operator toolbar. */
#assistant-review { scroll-margin-top: 6rem; }
.ui-dev-review { margin:1rem 1.5rem 0; padding:1rem 1.25rem; border:1px solid var(--ui-color-primary);
  border-left-width:4px; border-radius:.75rem; background:var(--ui-color-surface); color:var(--ui-color-text); }

/* Rýchly tooltip bez oneskorenia: <span class="ui-tip" data-tip="…">. Text
   nesie aj aria-label na prvku; pseudo-element je iba vizuálny. */
.ui-tip { position:relative; cursor:help; text-decoration:underline dotted; text-underline-offset:3px; }
.ui-tip::after { content:attr(data-tip); position:absolute; bottom:calc(100% + .5rem); right:0; z-index:40;
  width:max-content; max-width:18rem; padding:.375rem .625rem; border-radius:.5rem;
  background:rgb(17 24 39); color:#fff; font-size:12px; font-weight:400; line-height:1.4;
  text-align:left; white-space:normal; pointer-events:none; opacity:0; transform:translateY(2px);
  transition:opacity 80ms ease, transform 80ms ease; }
.ui-tip:hover::after, .ui-tip:focus-visible::after { opacity:1; transform:none; }
.dark .ui-tip::after { background:rgb(243 244 246); color:rgb(17 24 39); }
/* Tooltip pri ľavom okraji (prvý stĺpec tabuľky) a viac viet pod sebou. */
.ui-tip--start::after { left:0; right:auto; white-space:pre-line; max-width:22rem; }

/* Objednávka, pri ktorej niečo neprebehlo, ako malo (majiteľ 2026-09-26):
   červený „!“, vysvetlenie v tooltipe (.ui-tip). */
.ui-order-issue { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:1.125rem; height:1.125rem; margin-left:.375rem; border-radius:9999px; text-decoration:none;
  background:var(--ui-color-danger); color:#fff; font-size:12px; font-weight:700; line-height:1; vertical-align:middle; }
.ui-order-alert .ui-order-issue { margin-left:0; }
.ui-order-issue-list { flex-basis:100%; margin:0 0 0 1.125rem; list-style:disc; }

/* Third Party (majiteľ 2026-09-27): súhrn stavov a skupiny podľa kategórie. */
.ui-third-party-summary { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.75rem; }
.ui-third-party-group th { padding-top:1rem; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; text-align:left;
  color:var(--ui-color-muted, rgb(107 114 128)); }
.ui-third-party-count { font-weight:700; color:var(--ui-color-warning); }
.ui-third-party-facts { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:.375rem 1rem; margin:0; padding:0 1.25rem 1.25rem; font-size:13px; }
.ui-third-party-facts dt { color:var(--ui-color-muted, rgb(107 114 128)); }
.ui-third-party-facts dd { margin:0; font-weight:600; }

/* Výber obdobia od–do (shared/date-range + /backend/js/ui-date-range.js). */
.ui-date-range { position:relative; }
.ui-date-range-trigger { display:flex; width:100%; min-height:2.25rem; align-items:center; gap:.5rem;
  padding:.4375rem .75rem; border:1px solid var(--ui-color-border); border-radius:.5rem;
  background:var(--ui-color-surface); color:var(--ui-color-text-muted); font-size:.875rem; line-height:1.25rem;
  text-align:left; transition:border-color 150ms ease, box-shadow 150ms ease; }
.ui-date-range-trigger:hover { border-color:var(--ui-color-border-strong); }
.ui-date-range-trigger:focus-visible, .ui-date-range-trigger[aria-expanded="true"] { outline:none;
  border-color:var(--ui-color-primary); box-shadow:0 0 0 3px var(--ui-color-primary-soft); }
.ui-date-range-trigger.is-set { color:var(--ui-color-text); font-weight:500; }
.ui-date-range-trigger > .truncate { flex:1 1 auto; min-width:0; }
.ui-date-range-chevron { transition:transform 150ms ease; }
.ui-date-range-trigger[aria-expanded="true"] .ui-date-range-chevron { transform:rotate(180deg); }
.ui-date-range-panel { position:absolute; top:calc(100% + .375rem); right:0; z-index:50; display:flex;
  border:1px solid var(--ui-color-border); border-radius:1rem; background:var(--ui-color-surface-raised);
  box-shadow:var(--ui-shadow-lg, 0 12px 24px rgb(16 24 40 / .12)); overflow:hidden; }
.ui-date-range-presets { display:flex; flex-direction:column; gap:.125rem; min-width:10rem; padding:.5rem;
  border-right:1px solid var(--ui-color-border); background:var(--ui-color-surface-subtle); }
.ui-date-range-preset { padding:.5rem .75rem; border-radius:.5rem; color:var(--ui-color-text); font-size:.875rem;
  text-align:left; white-space:nowrap; }
.ui-date-range-preset:hover { background:var(--ui-color-surface-hover); }
.ui-date-range-preset[aria-pressed="true"] { background:var(--ui-color-primary-soft); color:var(--ui-color-primary); font-weight:600; }
.ui-date-range-calendar { padding:.75rem; width:17.5rem; }
.ui-date-range-month { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem;
  color:var(--ui-color-text); font-size:.875rem; }
.ui-date-range-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); row-gap:.125rem; }
.ui-date-range-weekday { padding:.25rem 0; color:var(--ui-color-text-muted); font-size:11px; font-weight:600;
  text-align:center; text-transform:uppercase; }
.ui-date-range-day { height:2.25rem; color:var(--ui-color-text); font-size:.8125rem; border-radius:.5rem;
  transition:background-color 80ms ease; }
.ui-date-range-day:hover { background:var(--ui-color-surface-strong); }
.ui-date-range-day.is-outside { color:var(--ui-color-text-muted); opacity:.55; }
.ui-date-range-day.is-today { font-weight:700; box-shadow:inset 0 0 0 1px var(--ui-color-border-strong); }
.ui-date-range-day.is-between { border-radius:0; background:var(--ui-color-primary-soft); }
.ui-date-range-day.is-start, .ui-date-range-day.is-end { background:var(--ui-color-primary); color:var(--ui-color-on-primary); font-weight:600; opacity:1; }
.ui-date-range-hint { margin-top:.5rem; color:var(--ui-color-text-muted); font-size:12px; }
.ui-date-range-actions { display:flex; justify-content:space-between; gap:.5rem; margin-top:.75rem;
  padding-top:.75rem; border-top:1px solid var(--ui-color-border); }
@media (max-width:639px) {
  .ui-date-range-panel { left:0; right:auto; flex-direction:column; }
  .ui-date-range-presets { flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--ui-color-border); }
}

/* Zoznam objednávok (majiteľ 2026-09-24). */
.ui-orders-filters { display:grid; gap:.75rem; grid-template-columns:minmax(0, 1fr); }
@media (min-width:768px) { .ui-orders-filters { grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); } }
.ui-orders-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.75rem; }
.ui-orders-switches { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; margin-left:auto; }
.ui-orders-switch { display:inline-flex; align-items:center; gap:.5rem; color:var(--ui-color-text); font-size:.875rem; }
.ui-orders-switch.is-alert { color:var(--ui-color-danger); font-weight:500; }
.ui-filter-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.ui-filter-chip { display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .75rem; border-radius:9999px;
  border:1px solid var(--ui-color-border); background:var(--ui-color-surface); color:var(--ui-color-text); font-size:12px; }
.ui-filter-chip:hover { border-color:var(--ui-color-border-strong); }
.ui-filter-chip[aria-pressed="true"] { border-color:var(--ui-color-primary); background:var(--ui-color-primary-soft); color:var(--ui-color-primary); font-weight:600; }
.ui-filter-chip strong { font-variant-numeric:tabular-nums; }
.ui-order-date { white-space:nowrap; line-height:1.3; }
.ui-order-date strong { display:block; color:var(--ui-color-text); font-weight:600; }
.ui-order-date span { display:block; color:var(--ui-color-text-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.ui-market-pill { display:inline-flex; min-width:2.25rem; justify-content:center; padding:.125rem .5rem;
  border-radius:.375rem; background:var(--ui-color-surface-strong); color:var(--ui-color-text);
  font-size:12px; font-weight:600; letter-spacing:.04em; }
/* Detail objednávky (majiteľ 2026-09-30): modré „i“ v krúžku, bublina hneď pri prejdení myšou. */
.ui-detail-btn.ui-tip { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:999px;
  border:0; background:rgb(0 122 255 / .1); color:#007aff; cursor:pointer; text-decoration:none; transition:background 120ms ease, color 120ms ease; }
.ui-detail-btn.ui-tip:hover, .ui-detail-btn.ui-tip:focus-visible { background:#007aff; color:#fff; }
/* Naživo (majiteľ 2026-09-30): zoznam sa obnovuje sám; bodka pulzuje, nová objednávka sa na chvíľu zvýrazní. */
.ui-live-button { display:inline-flex; align-items:center; gap:.45rem; }
.ui-live-dot { width:.5rem; height:.5rem; border-radius:50%; background:#34c759; box-shadow:0 0 8px #34c759; animation:ui-live-pulse 2s ease-in-out infinite; }
.ui-live-dot.is-off { background:#ff9500; box-shadow:0 0 8px #ff9500; animation:none; }
@keyframes ui-live-pulse { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
.ui-row-fresh > td { animation:ui-row-fresh 8s ease-out; }
@keyframes ui-row-fresh { 0%, 30% { background:rgb(0 122 255 / .1); } 100% { background:transparent; } }
@media (prefers-reduced-motion: reduce) { .ui-live-dot, .ui-row-fresh > td { animation:none; } }
/* Logá zdroja objednávky (majiteľ 2026-09-30): „Meta PPC“ s logom Mety, Google s logom Googlu …; ďalšie
   platformy = nový riadok s data-source. Vlastné malé SVG (ako vlajočky), žiadne externé súbory. */
.status-pill[data-source="meta"], .status-pill[data-source="google"], .status-pill[data-source="sklik"], .status-pill[data-source="tiktok"], .status-pill[data-source="microsoft"] { display:inline-flex; align-items:center; gap:.3rem; }
.status-pill[data-source="meta"]::before, .status-pill[data-source="google"]::before, .status-pill[data-source="sklik"]::before, .status-pill[data-source="tiktok"]::before, .status-pill[data-source="microsoft"]::before {
  content:''; flex:0 0 auto; width:.8125rem; height:.8125rem; background:center / contain no-repeat; }
.status-pill[data-source="meta"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230081fb' d='M6.9 6C4.2 6 2 9.4 2 12.9 2 15.6 3.4 18 5.8 18c1.9 0 3.2-1.5 4.9-4.4l1.3-2.2 1.3 2.2c1.7 2.9 3 4.4 4.9 4.4 2.4 0 3.8-2.4 3.8-5.1C22 9.4 19.8 6 17.1 6c-2 0-3.5 1.6-5.1 4.1C10.4 7.6 8.9 6 6.9 6zm0 2.3c1.2 0 2.2 1.2 3.7 3.7l-1.3 2.2c-1.4 2.4-2.3 3.4-3.3 3.4-1.1 0-1.8-1.1-1.8-3 0-2.6 1.3-6.3 2.7-6.3zm10.2 0c1.4 0 2.7 3.7 2.7 6.3 0 1.9-.7 3-1.8 3-1 0-1.9-1-3.3-3.4l-1.3-2.2c1.5-2.5 2.5-3.7 3.7-3.7z'/%3E%3C/svg%3E"); }
.status-pill[data-source="google"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23ffc107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23ff3d00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234caf50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976d2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E"); }
.status-pill[data-source="sklik"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23cc0000'/%3E%3Cpath fill='%23fff' d='M15.6 8.2c-.9-.7-2.1-1.1-3.4-1.1-2.1 0-3.7 1.1-3.7 2.9 0 3.6 5.6 2.5 5.6 4.4 0 .8-.8 1.3-2 1.3-1.1 0-2.2-.5-3-1.2l-1 1.6c1 .9 2.5 1.4 4 1.4 2.4 0 4-1.2 4-3.2 0-3.7-5.6-2.6-5.6-4.4 0-.7.7-1.1 1.7-1.1.9 0 1.8.3 2.5.9z'/%3E%3C/svg%3E"); }
.status-pill[data-source="tiktok"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%23111113'/%3E%3Cpath fill='%23fff' d='M13.5 5h2.2c.2 1.6 1.3 2.8 2.8 3v2.2c-1.1 0-2.1-.3-2.9-.9v5c0 2.6-2 4.2-4.2 4.2S7.3 17 7.3 14.7c0-2.5 2.2-4.3 4.7-3.9v2.3c-1.2-.3-2.4.5-2.4 1.6 0 1 .8 1.8 1.8 1.8 1.1 0 2-.8 2-2.1z'/%3E%3C/svg%3E"); }
.status-pill[data-source="microsoft"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f25022' d='M1 1h10v10H1z'/%3E%3Cpath fill='%237fba00' d='M13 1h10v10H13z'/%3E%3Cpath fill='%2300a4ef' d='M1 13h10v10H1z'/%3E%3Cpath fill='%23ffb900' d='M13 13h10v10H13z'/%3E%3C/svg%3E"); }
/* Vlajočky trhov (majiteľ 2026-09-30): vľavo vlajka, vpravo skratka. Vlastné SVG — emoji vlajky
   Windows nekreslí (ukáže len písmená). Kód trhu nesie atribút data-market. */
.ui-market-pill[data-market="CZ"], .ui-market-pill[data-market="SK"], .ui-market-pill[data-market="PL"],
.ui-filter-chip[data-market="CZ"], .ui-filter-chip[data-market="SK"], .ui-filter-chip[data-market="PL"] { align-items:center; gap:.3rem; }
.ui-filter-chip[data-market] { display:inline-flex; }
.ui-market-pill[data-market="CZ"]::before, .ui-market-pill[data-market="SK"]::before, .ui-market-pill[data-market="PL"]::before,
.ui-filter-chip[data-market="CZ"]::before, .ui-filter-chip[data-market="SK"]::before, .ui-filter-chip[data-market="PL"]::before {
  content:''; flex:0 0 auto; width:1rem; height:.6875rem; border-radius:2px; background:center / cover no-repeat;
  outline:1px solid rgb(0 0 0 / .12); outline-offset:-1px; }
.ui-market-pill[data-market="CZ"]::before, .ui-filter-chip[data-market="CZ"]::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Cpath fill='%23fff' d='M0 0h6v2H0z'/%3E%3Cpath fill='%23d7141a' d='M0 2h6v2H0z'/%3E%3Cpath fill='%2311457e' d='M0 0l3 2-3 2z'/%3E%3C/svg%3E"); }
.ui-market-pill[data-market="SK"]::before, .ui-filter-chip[data-market="SK"]::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23fff' d='M0 0h9v2H0z'/%3E%3Cpath fill='%230b4ea2' d='M0 2h9v2H0z'/%3E%3Cpath fill='%23ee1c25' d='M0 4h9v2H0z'/%3E%3Cpath fill='%23fff' d='M1.9 1.1h2.6v2.3c0 1-.7 1.5-1.3 1.8-.6-.3-1.3-.8-1.3-1.8z'/%3E%3Cpath fill='%23ee1c25' d='M2.15 1.35h2.1v2.05c0 .8-.55 1.2-1.05 1.45-.5-.25-1.05-.65-1.05-1.45z'/%3E%3Cpath fill='%23fff' d='M3.05 1.7h.3v2.6h-.3zM2.6 2.2h1.2v.3H2.6zM2.45 2.8h1.5v.3h-1.5z'/%3E%3C/svg%3E"); }
.ui-market-pill[data-market="PL"]::before, .ui-filter-chip[data-market="PL"]::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23fff' d='M0 0h8v2.5H0z'/%3E%3Cpath fill='%23dc143c' d='M0 2.5h8V5H0z'/%3E%3C/svg%3E"); }
.ui-pay-method { display:block; color:var(--ui-color-text-muted); font-size:11px; line-height:1.3; white-space:nowrap; }
.ui-invoice-waiting { color:var(--ui-color-text-muted); font-size:12px; white-space:nowrap; }
/* Vyhľadávacie pole s lupou vľavo (ikona je prvok za inputom). */
.ui-search-field { position:relative; display:block; }
.ui-search-field > .ui-input { padding-left:2.5rem; }
.ui-search-field > svg { position:absolute; left:.875rem; top:50%; transform:translateY(-50%); color:var(--ui-color-text-muted); pointer-events:none; }

/* Zoznam objednávok, kolo 2 (majiteľ 2026-09-24). */
.status-pill-violet { background:rgb(237 233 254); color:rgb(109 40 217); }
.dark .status-pill-violet { background:rgb(139 92 246 / .15); color:rgb(167 139 250); }
.ui-orders-divider { width:1px; height:1.25rem; margin:0 .25rem; background:var(--ui-color-border); }
.ui-filter-chip-market { font-weight:600; letter-spacing:.04em; }
/* Kompaktnejšie pilulky v tabuľke, aby sa stĺpce zmestili. */
.ui-orders-table .ui-brand-pill { gap:.25rem; padding:.0625rem .5rem; font-size:11px; white-space:nowrap; }
.ui-orders-table .ui-brand-pill::before { width:.375rem; height:.375rem; }
.ui-orders-table .ui-market-pill { min-width:1.75rem; padding:0 .375rem; font-size:10.5px; }
.ui-orders-table .status-pill { padding:0 .5rem; font-size:11px; white-space:nowrap; }
.ui-shipment-cell { display:inline-flex; align-items:center; gap:.25rem; }
.ui-shipment-track { display:inline-flex; color:var(--ui-color-text-muted); }
.ui-shipment-track:hover { color:var(--ui-color-primary); }
/* Prilepená hlavička: tabuľka má vlastný zvislý scroll. */
.ui-orders-table-scroll { max-height:calc(100vh - 8rem); overflow:auto; }
.ui-orders-table thead th { position:sticky; top:0; z-index:2; background:var(--ui-color-surface-subtle); box-shadow:inset 0 -1px 0 var(--ui-color-border); }
.ui-orders-table tbody tr.is-current { background:var(--ui-color-primary-soft); box-shadow:inset 3px 0 0 var(--ui-color-primary); }
/* Detail ako panel sprava; zoznam za ním ostáva viditeľný. */
.ui-drawer-root { align-items:stretch; justify-content:flex-end; padding:0; overflow:hidden; }
.ui-drawer-backdrop { position:fixed; inset:0; background:rgb(17 24 39 / .18); }
.ui-modal-panel.ui-drawer-panel { width:min(46rem, 100vw); max-width:none; height:100vh; max-height:100vh;
  border-radius:1rem 0 0 1rem; overflow:hidden auto; animation:ui-drawer-in 180ms ease-out; }
@keyframes ui-drawer-in { from { opacity:0; transform:translateX(2rem); } }
.ui-drawer-nav { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:.5rem; background:var(--ui-color-surface-raised); }
.ui-drawer-nav .ui-icon-btn:disabled { opacity:.4; cursor:not-allowed; }
.ui-drawer-hint { margin-left:auto; color:var(--ui-color-text-muted); font-size:11px; }
@media (prefers-reduced-motion: reduce) { .ui-modal-panel.ui-drawer-panel { animation:none; } }
/* Stav platby: malý štvorček pred sumou, text v tooltipe (.ui-tip). */
.ui-pay-state.ui-tip { display:inline-flex; width:.8125rem; height:.8125rem; margin-right:.375rem; align-items:center;
  justify-content:center; vertical-align:-1px; border:1.5px solid currentColor; border-radius:.25rem; text-decoration:none; cursor:default; }
.ui-pay-state.is-paid { border-color:rgb(22 163 74); background:rgb(22 163 74); color:#fff; }
.ui-pay-state.is-awaiting { color:rgb(234 88 12); }
.ui-pay-state.is-awaiting svg { visibility:hidden; }
.dark .ui-pay-state.is-awaiting { color:rgb(251 146 60); }
/* Stav platby nad sumou, na stred (majiteľ 2026-09-24). */
.ui-pay-state-row { display:block; margin-bottom:.25rem; line-height:1; }
.ui-pay-state-row .ui-pay-state.ui-tip { margin-right:0; }
.ui-orders-table .ui-shipment-cell { justify-content:center; }
.ui-orders-table .ui-pay-method { text-align:center; }

/* Detail objednávky v paneli: zóny podľa ORDER-DETAIL-AUDIT §3.1. */
.ui-order-head { position:sticky; top:0; z-index:3; background:var(--ui-color-surface-raised); border-bottom:1px solid var(--ui-color-border); }
.ui-order-head .ui-drawer-nav { position:static; padding:.5rem 1.25rem; border-bottom:1px solid var(--ui-color-border); }
.ui-order-head-main { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.875rem 1.25rem .5rem; }
.ui-order-head-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.25rem; color:var(--ui-color-text-muted); font-size:12px; }
.ui-order-head-meta .ui-brand-pill { gap:.25rem; padding:.0625rem .5rem; font-size:11px; }
.ui-order-head-meta .ui-brand-pill::before { width:.375rem; height:.375rem; }
.ui-order-head-total { display:flex; flex-direction:column; align-items:flex-end; white-space:nowrap; }
.ui-order-head-total strong { color:var(--ui-color-text); font-size:1.125rem; font-weight:700; }
.ui-order-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:.25rem 1.25rem .875rem; }
.ui-order-chip { display:flex; flex-direction:column; gap:.25rem; min-width:0; padding:.375rem .625rem; border:1px solid var(--ui-color-border);
  border-radius:.625rem; background:var(--ui-color-surface); }
.ui-order-chip dt { color:var(--ui-color-text-muted); font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.ui-order-chip dd { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; margin:0; color:var(--ui-color-text); font-size:12px; }
.ui-order-chip .status-pill { padding:0 .5rem; font-size:11px; }
.ui-order-chip .ui-pay-method { display:inline; }
.ui-order-alert { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 1.25rem .875rem; padding:.5rem .75rem;
  border:1px solid var(--ui-color-danger-border); border-radius:.5rem; background:var(--ui-color-danger-bg); color:var(--ui-color-danger); font-size:12px; }
/* Súčty v detaile: medzisúčet po zľave a spolu oddelené čiarou (majiteľ 2026-09-29). */
.ui-order-totals-sub td, .ui-order-totals-grand td { border-top:1px solid var(--ui-color-border); }
.ui-order-totals-grand td { font-size:15px; }
.ui-order-zones { display:grid; gap:1rem; grid-template-columns:minmax(0, 1fr); }
@media (min-width:640px) { .ui-order-zones { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.ui-order-facts { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:.375rem .875rem; margin:0; font-size:13px; }
.ui-order-facts dt { color:var(--ui-color-text-muted); font-size:12px; }
.ui-order-facts dd { display:flex; flex-wrap:wrap; align-items:center; gap:.375rem; min-width:0; margin:0; color:var(--ui-color-text); overflow-wrap:anywhere; }
.ui-order-facts .status-pill { padding:0 .5rem; font-size:11px; }
.ui-order-fact-note { display:block; width:100%; color:var(--ui-color-text-muted); font-size:11px; }
.ui-order-link { color:var(--ui-color-link); font-size:12px; }
.ui-order-link:hover { color:var(--ui-color-link-hover); text-decoration:underline; }
.ui-order-zone-actions { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.625rem .75rem; margin-top:.875rem; padding-top:.75rem;
  border-top:1px solid var(--ui-color-border); }
.ui-order-zone-actions > div { max-width:15rem; }
/* Menšie tlačidlá v paneli detailu; vysvetlenie pod nimi ostáva (audit §6). */
.ui-drawer-panel .ui-btn-sm { min-height:1.875rem; padding:.25rem .75rem; gap:.375rem; font-size:12.5px; }
.ui-drawer-panel [id^="order-action-"] { font-size:11px; line-height:1.35; }
.ui-order-note { min-height:3.5rem; }

/* Odosielanie v štýle Objednávok (majiteľ 2026-09-24). */
.ui-dispatch-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; }
.ui-dispatch-stages { display:flex; flex-wrap:wrap; gap:.5rem; }
.ui-filter-chip.ui-dispatch-stage { padding:.375rem .875rem; font-size:13px; }
.ui-dispatch-search { flex:1 1 18rem; max-width:26rem; }
.ui-pack-list { display:grid; gap:.375rem; margin:0; padding:0; list-style:none; font-size:13px; }
.ui-pack-list li { display:flex; align-items:flex-start; gap:.5rem; }
.ui-pack-qty { display:inline-flex; min-width:2rem; justify-content:center; padding:.0625rem .375rem; border-radius:.375rem;
  background:var(--ui-color-primary-soft); color:var(--ui-color-primary); font-weight:700; font-variant-numeric:tabular-nums; }
/* Príchuť na novom riadku, mierne odsadená (majiteľ 2026-09-24). */
.ui-pack-variant { display:block; margin:.125rem 0 .25rem .5rem; color:var(--ui-color-text-muted); font-size:12px; }
.ui-pack-list-lg { gap:.75rem; font-size:1rem; }
.ui-pack-list-lg .ui-pack-qty { min-width:2.75rem; padding:.125rem .5rem; font-size:1.125rem; }
.ui-pack-list-lg .ui-pack-variant { font-size:13px; }
.ui-label-cell { display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.ui-other-cell { display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem; }
.ui-dispatch-table tbody tr.is-last-print { background:rgb(139 92 246 / .07); box-shadow:inset 3px 0 0 rgb(139 92 246); }
.ui-dispatch-table tbody tr.is-last-print.is-current { background:var(--ui-color-primary-soft); }
.ui-dispatch-drawer { width:min(40rem, 100vw); }
.ui-pack-total { display:block; margin-top:.375rem; color:var(--ui-color-text-muted); font-size:11px; font-weight:600; }
.ui-orders-switch { white-space:nowrap; }
/* Zabalená tyrkysovo — odlíšená od „Čaká na zabalenie“ (fialová) aj od odoslanej (modrá). */
.status-pill-teal { background:rgb(204 251 241); color:rgb(15 118 110); }
.dark .status-pill-teal { background:rgb(20 184 166 / .15); color:rgb(45 212 191); }
/* Odosielanie: „Čo zabaliť“ berie všetko voľné miesto, ostatné stĺpce sú tesné. */
.ui-dispatch-table .ui-col-fit { width:1%; white-space:nowrap; }
.ui-dispatch-table .ui-col-grow { width:auto; min-width:18rem; }
.ui-dispatch-table .ui-pack-list { white-space:nowrap; }
/* Súčet produktov a kusov nad položkami — prvé, čo balič vidí. */
.ui-pack-summary { display:inline-flex; margin-bottom:.5rem; padding:.125rem .625rem; border-radius:9999px; background:var(--ui-color-info-bg); color:var(--ui-color-info); font-size:11.5px; font-weight:700; white-space:nowrap; }
.ui-dispatch-number { display:block; margin-top:.25rem; font-size:11px; }
/* Stav na dva riadky a malé „i“ pre originálny štítok (majiteľ 2026-09-24). */
.ui-dispatch-table .status-pill.ui-status-stack { display:inline-flex; flex-direction:column; align-items:center; text-align:center; padding:.125rem .5rem; line-height:1.2; white-space:nowrap; border-radius:.5rem; }
.ui-label-actions { display:inline-flex; align-items:center; gap:.25rem; }
.ui-label-original { width:1.25rem; height:1.25rem; color:var(--ui-color-text-muted); }
.ui-label-original:disabled { opacity:.4; }
/* Prepínač stavu balenia v detaile Odosielania. */
.ui-dispatch-status-switch { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:0 1.25rem .875rem; }
.ui-dispatch-status-switch .ui-label { margin:0 .25rem 0 0; }
/* QR kódy (majiteľ 2026-09-24): náhľad kódu, krátka adresa a stav uloženia riadku. */
.ui-qr-total { margin-left:.5rem; color:var(--ui-color-text-muted); font-size:13px; font-weight:500; }
.ui-qr-table td { vertical-align:top; }
.ui-qr-code { display:inline-flex; flex-direction:column; align-items:center; gap:.25rem; white-space:nowrap; }
.ui-qr-number { width:1%; color:var(--ui-color-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-qr-preview { width:64px; height:64px; flex:none; border-radius:.375rem; background:#fff; }
.ui-qr-code__value { display:block; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:12px; font-weight:600; letter-spacing:.08em; }
.ui-qr-field { min-width:16rem; }
.ui-qr-state { display:block; min-height:1rem; margin-top:.25rem; color:var(--ui-color-text-muted); font-size:11.5px; }
.ui-qr-state--saved { color:var(--ui-color-success); font-weight:600; }
.ui-qr-state--error { color:var(--ui-color-danger); font-weight:600; }
/* História QR kódu: pôvodná hodnota prečiarknutá, nová zvýraznená. */
.ui-qr-history__change { max-width:26rem; word-break:break-all; }
.ui-qr-history__from { color:var(--ui-color-text-muted); text-decoration:line-through; }
.ui-qr-history__to { font-weight:600; }
.ui-qr-test { margin-top:.375rem; }

/* Sociálne správy (majiteľ 2026-09-27): zoznam vlákien vľavo, detail s návrhom vpravo. */
.ui-social-layout { display:grid; gap:1.5rem; grid-template-columns:minmax(16rem, 22rem) minmax(0, 1fr); align-items:start; }
@media (max-width: 900px) { .ui-social-layout { grid-template-columns:1fr; } }
.ui-social-accounts { display:flex; flex-wrap:wrap; gap:.75rem; }
.ui-social-account { display:flex; gap:.5rem; align-items:flex-start; padding:.5rem .75rem; border:1px solid var(--ui-color-border); border-radius:.75rem; cursor:pointer; }
.ui-social-account.is-off { opacity:.6; }
.ui-social-warn { color:var(--ui-color-danger, #b42318); }
.ui-social-list { display:flex; flex-direction:column; gap:.25rem; max-height:70vh; overflow:auto; }
.ui-social-item { width:100%; text-align:left; display:flex; flex-direction:column; gap:.125rem; padding:.625rem .75rem; border-radius:.625rem; border:1px solid transparent; }
.ui-social-item:hover { background:var(--ui-color-surface-muted, #f5f5f7); }
.ui-social-item.is-active { border-color:var(--ui-color-primary, #465fff); }
.ui-social-item.is-unread strong { font-weight:700; }
.ui-social-item__top { display:flex; justify-content:space-between; gap:.5rem; }
.ui-social-item__meta { color:var(--ui-color-text-muted); }
.ui-social-item__preview { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.ui-social-badges { display:flex; flex-wrap:wrap; gap:.25rem; }
.ui-social-post { padding:.5rem .75rem; border-left:3px solid var(--ui-color-border); color:var(--ui-color-text-muted); font-size:13px; }
.ui-social-thread { display:flex; flex-direction:column; gap:.5rem; max-height:50vh; overflow:auto; padding:.25rem; }
.ui-social-message { max-width:80%; padding:.5rem .75rem; border-radius:.875rem; display:flex; flex-direction:column; gap:.125rem; white-space:pre-wrap; word-break:break-word; }
.ui-social-message small { color:var(--ui-color-text-muted); font-size:11px; }
.ui-social-message.is-in { align-self:flex-start; background:var(--ui-color-surface-muted, #f2f4f7); }
.ui-social-message.is-out { align-self:flex-end; background:var(--ui-color-primary-soft, #ecf3ff); }
.ui-social-message.is-deleted .ui-social-message__text { text-decoration:line-through; opacity:.6; }
.ui-social-reply { display:flex; flex-direction:column; gap:.625rem; border-top:1px solid var(--ui-color-border); padding-top:1rem; }

/* Marketingový prehľad (majiteľ 2026-09-27): dlaždice súhrnov. */
.ui-mkt-kpis { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); }
.ui-mkt-kpi { display:flex; flex-direction:column; gap:.125rem; padding:.875rem 1rem; border:1px solid var(--ui-color-border); border-radius:.875rem; background:var(--ui-color-surface, #fff); }
.ui-mkt-kpi small { color:var(--ui-color-text-muted); font-size:12px; }
.ui-mkt-kpi strong { font-size:1.25rem; }
/* Živá kontrola služby (Third Party, majiteľ 2026-09-27). */
.ui-third-party-live-ok { color:var(--ui-color-success, #027a48); }
.ui-third-party-live-fail { color:var(--ui-color-danger, #b42318); font-weight:600; }
/* Zverejnené umiestnenia postu (runner kalendára, majiteľ 2026-09-28). */
.ui-organic-published { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.25rem; font-size:12px; }
.ui-organic-published__item { display:inline-flex; gap:.25rem; align-items:center; color:var(--ui-color-text-muted); text-decoration:none; }
.ui-organic-published__item.is-published { color:var(--ui-color-success, #027a48); font-weight:600; }