/* ══════════════════════════════════════════════════════════════════
   Alasta v5.17.T166 — HarmonyOS Design System
   Unified design tokens + visual polish layer

   Co robi ten plik:
   ─ Ujednolica CSS variables — zastępuje rozbite wartości z t130–t165
   ─ Przepisuje buttony na pill-shape (border-radius: 999px)
   ─ Nadaje kartom większy border-radius i miękkę cień
   ─ Ujednolica animacje modali (zastępuje 7× duplikaty alastaT149–T165)
   ─ Naprawia inputy: spójny focus ring, zaokrąglenie
   ─ Dodaje smooth view-entry animation
   ─ Poprawia scrollbary, ikony, KPI tiles
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS — nadpisują obie stare warstwy (styles.css + patches)
   ───────────────────────────────────────────────────────────── */
:root {
  /* Motion */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out:    cubic-bezier(.25, 0, 0, 1);
  --dur-xs:  80ms;
  --dur-sm:  150ms;
  --dur-md:  240ms;
  --dur-lg:  360ms;

  /* Radius — HarmonyOS scale (większe = bardziej "soft") */
  --r-xs:   6px;
  --r-sm:   10px;
  --r:      14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* Button heights */
  --btn-h:    36px;
  --btn-h-sm: 28px;
  --btn-h-lg: 44px;
}

/* LIGHT THEME */
:root,
:root[data-theme="light"] {
  --bg:          #f3f6fa;
  --bg-2:        #ffffff;
  --surface:     #ffffff;
  --surface-2:   #f8f9fb;
  --surface-3:   #f0f2f7;
  --surface-hover: rgba(15,23,42,.04);

  --border:        #e2e8f0;
  --border-2:      #d0d8e8;
  --border-strong: #b8c4d8;

  --text:   #0f172a;
  --text-2: #1e293b;
  --muted:  #64748b;
  --muted-2: #94a3b8;

  --accent:        #4f46e5;
  --accent-2:      #4338ca;
  --accent-soft:   #eef2ff;
  --accent-soft-2: #e0e7ff;
  --accent-glow:   rgba(79,70,229,.16);

  --green:      #059669;
  --green-soft: #ecfdf5;
  --red:        #dc2626;
  --red-soft:   #fef2f2;
  --amber:      #d97706;
  --amber-soft: #fffbeb;
  --blue:       #2563eb;
  --blue-soft:  #eff6ff;

  /* Layered shadows — miękkość HarmonyOS */
  --shadow-xs: 0 1px 3px rgba(15,23,42,.05);
  --shadow-sm: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 6px 20px rgba(15,23,42,.07), 0 1px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 16px 44px rgba(15,23,42,.09), 0 4px 12px rgba(15,23,42,.04);
  --shadow-xl: 0 30px 64px rgba(15,23,42,.12), 0 8px 20px rgba(15,23,42,.06);

  --ring: 0 0 0 3px var(--accent-glow);
}

/* DARK THEME */
:root[data-theme="dark"] {
  --bg:          #0b0d13;
  --bg-2:        #10141e;
  --surface:     #141922;
  --surface-2:   #191f2d;
  --surface-3:   #1e2536;
  --surface-hover: rgba(255,255,255,.055);

  --border:        #232b3c;
  --border-2:      #2d3750;
  --border-strong: #3a4560;

  --text:   #f0f4fa;
  --text-2: #c8d3e8;
  --muted:  #8a9bb8;
  --muted-2: #5e7094;

  --accent:        #818cf8;
  --accent-2:      #a5b4fc;
  --accent-soft:   rgba(129,140,248,.13);
  --accent-soft-2: rgba(129,140,248,.20);
  --accent-glow:   rgba(129,140,248,.26);

  --green:      #34d399;
  --green-soft: rgba(52,211,153,.13);
  --red:        #f87171;
  --red-soft:   rgba(248,113,113,.13);
  --amber:      #fbbf24;
  --amber-soft: rgba(251,191,36,.12);
  --blue:       #60a5fa;
  --blue-soft:  rgba(96,165,250,.12);

  --shadow-xs: 0 1px 3px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.28);
  --shadow:    0 6px 20px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.28);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.30);
  --shadow-xl: 0 30px 64px rgba(0,0,0,.60), 0 8px 20px rgba(0,0,0,.35);

  --ring: 0 0 0 3px var(--accent-glow);
}

/* ─────────────────────────────────────────────────────────────
   2. LAYOUT BASE
   ───────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
}

/* ─────────────────────────────────────────────────────────────
   3. CARDS
   ───────────────────────────────────────────────────────────── */
.card {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  transition:
    box-shadow var(--dur-sm) var(--ease-out),
    transform  var(--dur-sm) var(--ease-out),
    border-color var(--dur-sm) var(--ease-out) !important;
}
.card:hover {
  box-shadow: var(--shadow-lg) !important;
}

/* Form-card nie unosi się — tylko wizualna karta */
.form-card:hover,
.assistant-card:hover {
  transform: none !important;
}

/* Stat-card z delikatnym uniesieniem */
.stat-card {
  cursor: default;
  transition:
    box-shadow var(--dur-sm) var(--ease-out),
    transform  var(--dur-sm) var(--ease-spring) !important;
}
.stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ─────────────────────────────────────────────────────────────
   4. BUTTONS — pill shape (HarmonyOS)
   ───────────────────────────────────────────────────────────── */
.btn,
button.btn {
  height: var(--btn-h);
  padding: 0 16px;
  border-radius: var(--r-pill) !important;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background     var(--dur-xs) var(--ease-out),
    border-color   var(--dur-xs) var(--ease-out),
    box-shadow     var(--dur-sm) var(--ease-out),
    transform      var(--dur-xs) var(--ease-out),
    opacity        var(--dur-xs) linear,
    color          var(--dur-xs) var(--ease-out) !important;
}
.btn:active { transform: scale(.97) !important; }
.btn:disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}

/* Primary */
.btn.primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 10px var(--accent-glow) !important;
}
.btn.primary:hover {
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  box-shadow: 0 6px 20px var(--accent-glow) !important;
}

/* Ghost */
.btn.ghost {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.btn.ghost:hover {
  background: var(--surface-3) !important;
  border-color: var(--border-2) !important;
}

/* Danger */
.btn.danger {
  background: var(--red-soft) !important;
  color: var(--red) !important;
  border-color: rgba(220,38,38,.20) !important;
}
.btn.danger:hover {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}

/* Success */
.btn.success {
  background: var(--green-soft) !important;
  color: var(--green) !important;
  border-color: rgba(5,150,105,.20) !important;
}
.btn.success:hover {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
}

/* Sizes */
.btn-sm,
.btn.btn-sm {
  height: var(--btn-h-sm) !important;
  padding: 0 11px !important;
  font-size: 12px !important;
}
.btn-lg,
.btn.btn-lg {
  height: var(--btn-h-lg) !important;
  padding: 0 24px !important;
  font-size: 14.5px !important;
}

/* Focus ring */
.btn:focus-visible {
  outline: none !important;
  box-shadow: var(--ring) !important;
}

/* ─────────────────────────────────────────────────────────────
   5. INPUTS & FORMS
   ───────────────────────────────────────────────────────────── */
.input {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-sm) !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text);
  font-size: 13.5px;
  transition:
    border-color var(--dur-xs) var(--ease-out),
    box-shadow   var(--dur-xs) var(--ease-out) !important;
}
.input:hover:not(:focus):not(:disabled) {
  border-color: var(--border-2) !important;
}
.input:focus,
.input:focus-visible {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: var(--ring) !important;
}
select.input { cursor: pointer; }
textarea.input {
  height: auto;
  padding: 9px 12px;
  resize: vertical;
}

/* ─────────────────────────────────────────────────────────────
   6. SIDEBAR
   ───────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--bg-2) !important;
  border-right: 1px solid var(--border) !important;
}

/* Nav pills — zaokrąglone, nie pełna pigułka (dla nawigacji lepsza czytelność) */
.pill,
button.pill {
  border-radius: var(--r-sm) !important;
  padding: 7px 10px !important;
  min-height: 34px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
  transition:
    background  var(--dur-xs) var(--ease-out),
    color       var(--dur-xs) var(--ease-out) !important;
}
.pill.active,
button.pill.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.pill:hover:not(.active),
button.pill:hover:not(.active) {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
}
.pill .nav-icon { opacity: .65; }
.pill.active .nav-icon { opacity: 1 !important; }

/* Nav group head */
.nav-group-head {
  border-radius: var(--r-sm) !important;
  transition: background var(--dur-xs) var(--ease-out) !important;
}
.nav-group-head:hover {
  background: var(--surface-hover) !important;
}

/* Brand name refinement */
.brand-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  color: var(--text) !important;
}

/* ─────────────────────────────────────────────────────────────
   7. TOPBAR
   ───────────────────────────────────────────────────────────── */
.topbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
}

.page-title {
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--text) !important;
}

/* Icon buttons */
.iconbtn {
  border-radius: var(--r-sm) !important;
  width: 34px !important;
  height: 34px !important;
  transition:
    background var(--dur-xs) var(--ease-out),
    color      var(--dur-xs) var(--ease-out) !important;
}
.iconbtn:hover {
  background: var(--surface-3) !important;
  color: var(--accent) !important;
}
.iconbtn:focus-visible {
  outline: none !important;
  box-shadow: var(--ring) !important;
}

/* ─────────────────────────────────────────────────────────────
   8. FINANCE KPI TILES
   ───────────────────────────────────────────────────────────── */
.finance-kpi-tile {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    transform   var(--dur-sm) var(--ease-spring),
    box-shadow  var(--dur-sm) var(--ease-out) !important;
}
.finance-kpi-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow) !important;
}

/* ─────────────────────────────────────────────────────────────
   9. TABLES
   ───────────────────────────────────────────────────────────── */
.table-card {
  padding: 0 !important;
  overflow: hidden;
}
.table-wrap {
  border-radius: var(--r-xl) !important;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   10. MODALS — UNIFIED ANIMATIONS
       Zastępuje 7 identycznych kopii: alastaT149–T154 i T156–T165
   ───────────────────────────────────────────────────────────── */
@keyframes alasta-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes alasta-dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

@keyframes alasta-content-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Nadpisanie duplikatów — wszystkie dialogi używają wspólnej animacji */
dialog[open]:is(
  .mes-events-dialog-t149,
  .mes-events-dialog-t150,
  .mes-events-dialog-t151,
  .mes-events-dialog-t152,
  .mes-events-dialog-t153,
  .mes-events-dialog-t154,
  .mes-events-dialog-t156,
  .mes-events-dialog-t157,
  .mes-events-dialog-t158,
  .mes-events-dialog-t159,
  .mes-events-dialog-t160,
  .mes-events-dialog-t161,
  .mes-events-dialog-t162,
  .mes-events-dialog-t163,
  .mes-events-dialog-t164,
  .mes-events-dialog-t165
),
dialog[open]:is(
  [data-mes-events-t149],
  [data-mes-events-t150],
  [data-mes-events-t151],
  [data-mes-events-t152],
  [data-mes-events-t153],
  [data-mes-events-t154],
  [data-mes-events-t156]
) {
  animation: alasta-dialog-in var(--dur-md) var(--ease-spring) both !important;
  transform-origin: 50% 28% !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xl) !important;
}

dialog[open]:is(
  .mes-events-dialog-t149,
  .mes-events-dialog-t150,
  .mes-events-dialog-t151,
  .mes-events-dialog-t152,
  .mes-events-dialog-t153,
  .mes-events-dialog-t154,
  .mes-events-dialog-t156
)::backdrop,
dialog[open]:is(
  [data-mes-events-t149],
  [data-mes-events-t150],
  [data-mes-events-t151],
  [data-mes-events-t152],
  [data-mes-events-t153],
  [data-mes-events-t154],
  [data-mes-events-t156]
)::backdrop {
  animation: alasta-backdrop-in var(--dur-md) var(--ease-out) both !important;
  background: rgba(15,23,42,.45) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
}

/* Body animations inside dialogs */
:is(
  .mes-events-body-t149,
  .mes-events-body-t150,
  .mes-events-body-t151,
  .mes-events-body-t152,
  .mes-events-body-t153,
  .mes-events-body-t154,
  .mes-events-body-t156,
  .mes-events-body-t157,
  .mes-events-body-t158,
  .mes-events-body-t159,
  .mes-events-body-t160
) {
  animation: alasta-content-in var(--dur-md) var(--ease-spring) .03s both !important;
}

/* Ogólne modale (.modal class) */
.modal {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  animation: alasta-dialog-in var(--dur-md) var(--ease-spring) both;
}
.modal-backdrop,
.backdrop {
  animation: alasta-backdrop-in var(--dur-md) var(--ease-out) both;
  backdrop-filter: blur(8px) saturate(1.2) !important;
}

/* ─────────────────────────────────────────────────────────────
   11. VIEW TRANSITIONS
       Miękkie wejście widoku przy przełączaniu zakładek
   ───────────────────────────────────────────────────────────── */
.view.active {
  animation: alasta-view-in var(--dur-md) var(--ease-spring) both;
}

@keyframes alasta-view-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ─────────────────────────────────────────────────────────────
   12. TOAST / NOTIFICATIONS
   ───────────────────────────────────────────────────────────── */
.toast {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(16px) !important;
}

/* ─────────────────────────────────────────────────────────────
   13. STATUS PILL / BADGES
   ───────────────────────────────────────────────────────────── */
.status-pill {
  border-radius: var(--r-pill) !important;
}

/* ─────────────────────────────────────────────────────────────
   14. SCROLLBARS (Webkit)
   ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 6px;  height: 6px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: var(--border-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
::-webkit-scrollbar-corner     { background: transparent; }

/* ─────────────────────────────────────────────────────────────
   15. CODE & MONO
   ───────────────────────────────────────────────────────────── */
code {
  border-radius: var(--r-xs) !important;
  font-size: .85em;
}

/* ─────────────────────────────────────────────────────────────
   16. FOCUS RING — globalny, spójny
   ───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ─────────────────────────────────────────────────────────────
   17. AUTH SCREEN refinements
   ───────────────────────────────────────────────────────────── */
.auth-card {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-xl) !important;
}
.auth-submit {
  border-radius: var(--r-pill) !important;
}

/* ─────────────────────────────────────────────────────────────
   18. MES STATION app
   ───────────────────────────────────────────────────────────── */
.mes-qty-modal {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ─────────────────────────────────────────────────────────────
   19. CONNECTOR / INTEGRATION cards (t163, t165)
       Ujednolicamy ich border-radius z nowym systemem
   ───────────────────────────────────────────────────────────── */
.connector-card-t163,
.connector-center-t165,
.connector-center-t163 {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow) !important;
  border-color: var(--border) !important;
}
.connector-card-t163:hover {
  box-shadow: var(--shadow-lg) !important;
}
.t165-category {
  border-radius: var(--r-lg) !important;
  border-color: var(--border) !important;
}
.t165-connector-row {
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  border-color: transparent !important;
  transition:
    background    var(--dur-xs) var(--ease-out),
    border-color  var(--dur-xs) var(--ease-out),
    transform     var(--dur-sm) var(--ease-spring),
    box-shadow    var(--dur-sm) var(--ease-out) !important;
}
.t165-connector-row:hover {
  background: var(--surface-2) !important;
  border-color: var(--accent-soft-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow) !important;
}
.t165-connector-row.is-selected {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

/* ─────────────────────────────────────────────────────────────
   20. MES ORDER ROWS hover
   ───────────────────────────────────────────────────────────── */
.mes-order-row:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow) !important;
  transition:
    transform   var(--dur-sm) var(--ease-spring),
    box-shadow  var(--dur-sm) var(--ease-out),
    background  var(--dur-xs) var(--ease-out) !important;
}

/* ─────────────────────────────────────────────────────────────
   21. CHART WRAP
   ───────────────────────────────────────────────────────────── */
.chart-wrap {
  border-radius: var(--r-lg) !important;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   22. PAGINATION
   ───────────────────────────────────────────────────────────── */
.pagination .btn {
  border-radius: var(--r-pill) !important;
}

/* ─────────────────────────────────────────────────────────────
   23. LIST FILTERS toolbar
   ───────────────────────────────────────────────────────────── */
.list-filters .btn,
.toolbar .btn {
  border-radius: var(--r-pill) !important;
}

/* ─────────────────────────────────────────────────────────────
   24. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   25. PEACOCK LOGO ANIMATION
   ───────────────────────────────────────────────────────────── */
.brand-peacock .pf {
  animation: pf-spread .9s cubic-bezier(.22,1,.36,1) both;
  transform-origin: 20px 27px;
}
.brand-peacock .pf1 { animation-delay: .05s }
.brand-peacock .pf2 { animation-delay: .10s }
.brand-peacock .pf3 { animation-delay: .15s }
.brand-peacock .pf4 { animation-delay: .20s }
.brand-peacock .pf5 { animation-delay: .25s }

@keyframes pf-spread {
  from { opacity: 0; transform: rotate(0deg) scaleY(.1); }
  to   { opacity: 1; transform: none; }
}

.brand-peacock .pb {
  animation: pb-in .35s .55s cubic-bezier(.22,1,.36,1) both;
}

@keyframes pb-in {
  from { opacity: 0; transform: scaleY(.5) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ─── "A" logo mark — black square ──────────────────────────── */
.brand-a-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #0a0a0a;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
  line-height: 1;
  /* 'a' w system-ui ma baseline nisko — przesuwamy wizualnie ku górze */
  padding-bottom: 4px;
  flex-shrink: 0;
  user-select: none;
  animation: a-mark-in .45s .05s cubic-bezier(.22,1,.36,1) both;
}
@keyframes a-mark-in {
  from { opacity: 0; transform: scale(.75); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Pixel boot animation ───────────────────────────────────── */
.boot-pixel-grid {
  position: relative;
  flex-shrink: 0;
}
.boot-pixel {
  position: absolute;
  background: #ffffff;
  border-radius: 3px;
}
/* Migający piksel "serce" po złożeniu litery */
@keyframes boot-heart {
  0%   { opacity: 1;    transform: scale(1); }
  8%   { opacity: 0.15; transform: scale(.7); }
  16%  { opacity: 1;    transform: scale(1.15); }
  24%  { opacity: 0.15; transform: scale(.7); }
  34%  { opacity: 1;    transform: scale(1); }
  100% { opacity: 1;    transform: scale(1); }
}
.boot-pixel-heart {
  animation: boot-heart 1.1s ease-in-out infinite;
  transform-origin: center;
  z-index: 1;
}

/* ─── Boot screen — ciemne tło dla białej animacji pikseli ─────────── */
#boot-screen {
  background: #0a0a0a !important;
}

/* ─── Boot screen hold — trzyma widoczność podczas animacji pikseli ─ */
body.t167-pixel-hold #boot-screen {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   Pixel Refresh Overlay — pojawia się przy kliknięciu "Odśwież"
   ═══════════════════════════════════════════════════════════════ */
#pixel-refresh-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
#pixel-refresh-overlay.pix-ov-visible {
  opacity: 1;
}
.pix-ov-grid {
  position: relative;
  flex-shrink: 0;
}
.pix-ov-dot {
  position: absolute;
  background: #ffffff;
  border-radius: 2px;
}
@keyframes pix-ov-heart {
  0%   { opacity: 1;    transform: scale(1); }
  10%  { opacity: 0.15; transform: scale(.72); }
  22%  { opacity: 1;    transform: scale(1.2); }
  34%  { opacity: 0.15; transform: scale(.72); }
  46%  { opacity: 1;    transform: scale(1); }
  100% { opacity: 1;    transform: scale(1); }
}
.pix-ov-heart {
  animation: pix-ov-heart 0.95s ease-in-out 2;
  transform-origin: center;
}

/* ═══════════════════════════════════════════════════════════════
   Logo heartbeat — bicie serca .brand-a-mark przy zmianie widoku
   ═══════════════════════════════════════════════════════════════ */
@keyframes logo-beat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.32); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.2); }
  60%  { transform: scale(1); }
  100% { transform: scale(1); }
}
.brand-a-mark {
  transform-origin: center; /* nie nadpisuj inline-flex ze stylu bazowego */
}
.brand-a-mark.logo-beat {
  animation: logo-beat 0.62s ease-out !important;
}

/* ═══════════════════════════════════════════════════════════════
   Live-sync dialog — nieprzezroczyste tło
   (styles.css ma `dialog { background: transparent !important }`)
   ═══════════════════════════════════════════════════════════════ */
.live-sync-dialog {
  background: #ffffff !important;
  overflow: hidden !important;
}
.lsd-body {
  background: #ffffff;
}
/* Popup inline (lsi-popup) — wzmocnienie białego tła */
.lsi-popup {
  background: #ffffff !important;
}