/* transitions.dev design system (převzato z Czech Diacritics Font Maker) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ── Tokens ── */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg:              #fdfdfd;
  --bg-soft:         #f9f9f9;
  --text:            #0d0d0d;
  --text-muted:      #6c6c6c;
  --text-subtle:     #767676;
  --text-faint:      #8f8f8f;
  --surface:         #ffffff;
  --surface-hover:   #f5f5f5;
  --surface-active:  #eae9e9;
  --card-bg:         #ffffff;
  --card-border:     rgba(0, 0, 0, 0.06);
  --card-shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 8px 28px 0 rgba(0, 0, 0, 0.09), 0 2px 8px 0 rgba(0, 0, 0, 0.05);
  --stage-bg:        #f9f9f9;
  --stage-border:    rgba(0, 0, 0, 0.04);
  --chip-bg:         #f4f4f4;
  --chip-bg-hover:   #f1f1f1;
  --chip-bg-pressed: #eae9e9;
  --hairline:        rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.18);
  --error:           #e02020;
  --scrim:           rgba(0, 0, 0, 0.5);
  --selection-bg:    #0d0d0d;
  --selection-fg:    #ffffff;
  --icon-color:      #0d0d0d;
  --icon-muted:      rgba(13, 13, 13, 0.55);
  --shadow-pop:
    0 4px 42px 0 rgba(0, 0, 0, 0.06),
    0 2px 6px 0  rgba(0, 0, 0, 0.05),
    0 0 0 1px    rgba(0, 0, 0, 0.06);
  --split-divider:   rgba(0, 0, 0, 0.18);
  --ring:            rgba(13, 13, 13, 0.10);

  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* transitions-dev tokens */
  --text-swap-dur: 150ms; --text-swap-translate-y: 4px; --text-swap-blur: 2px; --text-swap-ease: ease-in-out;
  --digit-dur: 420ms; --digit-distance: 6px; --digit-stagger: 50ms; --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1); --digit-dir-x: 0; --digit-dir-y: 1;
  --dropdown-open-dur: 220ms; --dropdown-close-dur: 130ms;
  --dropdown-pre-scale: 0.97; --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 260ms; --modal-close-dur: 160ms;
  --modal-scale: 0.95; --modal-scale-close: 0.97;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --icon-swap-dur: 200ms; --icon-swap-blur: 2px; --icon-swap-start-scale: 0.25; --icon-swap-ease: ease-in-out;
  --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1); --revert-hold: 4000ms; --revert-dur: 280ms;
  --avatar-lift: -5px; --avatar-dur: 420ms; --avatar-scale: 1.06;
  --avatar-falloff: 0.45; --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 1.6, 0.64, 1);

  --dur-xs:  80ms;
  --dur-sm: 140ms;
  --dur-md: 440ms;
  --dur-lg: 380ms;
  --dur-xl: 520ms;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:              #121212;
  --bg-soft:         #131313;
  --text:            #ffffff;
  --text-muted:      rgba(202, 202, 202, 0.7);
  --text-subtle:     #767676;
  --text-faint:      #8f8f8f;
  --surface:         #181818;
  --surface-hover:   #1e1e1e;
  --surface-active:  rgba(255, 255, 255, 0.08);
  --card-bg:         #181818;
  --card-border:     rgba(255, 255, 255, 0.06);
  --card-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0  rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px  rgba(0, 0, 0, 0.06),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px  rgba(196, 196, 196, 0.07);
  --card-shadow-hover:
    0 8px 32px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 0  rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px  rgba(0, 0, 0, 0.06);
  --stage-bg:        #131313;
  --stage-border:    rgba(255, 255, 255, 0.02);
  --chip-bg:         rgba(255, 255, 255, 0.07);
  --chip-bg-hover:   rgba(255, 255, 255, 0.11);
  --chip-bg-pressed: rgba(255, 255, 255, 0.08);
  --hairline:        rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --error:           #ff6b6b;
  --scrim:           rgba(0, 0, 0, 0.75);
  --selection-bg:    #ffffff;
  --selection-fg:    #000000;
  --icon-color:      #ededed;
  --icon-muted:      rgba(237, 237, 237, 0.6);
  --shadow-pop:
    0 1px 3px 0 rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0  rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px  rgba(0, 0, 0, 0.06),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px  rgba(196, 196, 196, 0.08);
  --split-divider:   rgba(255, 255, 255, 0.14);
  --ring:            rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #121212; --bg-soft: #131313; --text: #ffffff;
    --text-muted: rgba(202,202,202,0.7); --text-subtle: #767676; --text-faint: #8f8f8f;
    --surface: #181818; --surface-hover: #1e1e1e; --surface-active: rgba(255,255,255,0.08);
    --card-bg: #181818; --card-border: rgba(255,255,255,0.06);
    --card-shadow:
      0 1px 3px 0 rgba(0,0,0,0.12),
      inset 0 1px 0 0  rgba(255,255,255,0.04),
      inset 0 0 0 1px  rgba(0,0,0,0.06),
      inset 0 -1px 0 0 rgba(0,0,0,0.06),
      inset 0 0 0 1px  rgba(196,196,196,0.07);
    --card-shadow-hover:
      0 8px 32px 0 rgba(0,0,0,0.4),
      inset 0 1px 0 0  rgba(255,255,255,0.06),
      inset 0 0 0 1px  rgba(0,0,0,0.06);
    --stage-bg: #131313; --stage-border: rgba(255,255,255,0.02);
    --chip-bg: rgba(255,255,255,0.07); --chip-bg-hover: rgba(255,255,255,0.11); --chip-bg-pressed: rgba(255,255,255,0.08);
    --hairline: rgba(255,255,255,0.08); --hairline-strong: rgba(255,255,255,0.18);
    --error: #ff6b6b; --scrim: rgba(0,0,0,0.75);
    --selection-bg: #ffffff; --selection-fg: #000000;
    --icon-color: #ededed; --icon-muted: rgba(237,237,237,0.6);
    --shadow-pop:
      0 1px 3px 0 rgba(0,0,0,0.12),
      inset 0 1px 0 0  rgba(255,255,255,0.04),
      inset 0 0 0 1px  rgba(0,0,0,0.06),
      inset 0 -1px 0 0 rgba(0,0,0,0.06),
      inset 0 0 0 1px  rgba(196,196,196,0.08);
    --split-divider: rgba(255,255,255,0.14);
    --ring: rgba(255,255,255,0.12);
  }
}

/* ── Reset & base ── */
* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  transition: background-color 0.5s ease, color 0.5s ease;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid var(--icon-color);
  outline-offset: 2px;
  transition: outline-offset var(--dur-xs) var(--ease-out);
}

.container { padding: 48px 80px 72px; }

.muted  { color: var(--text-muted); }
.sm     { font-size: 13px; }
.hidden { display: none !important; }

/* ── Header ── */
.header { margin-bottom: 28px; animation: fadeUp var(--dur-xl) var(--ease-out) both; }
.header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.header-titles { min-width: 0; }

.header h1 {
  margin: 0;
  font-size: 29px; font-weight: 500; letter-spacing: -0.02em; line-height: 38px;
}
.header h1 span {
  color: var(--text-muted);
  font-weight: 500;
  transition: color var(--dur-md) var(--ease-out);
}
.header .muted {
  margin: 4px 0 0; max-width: 560px; font-size: 15px; line-height: 22px;
  transition: color var(--dur-md) var(--ease-out);
}

/* ── Theme switcher ── */
.theme-switch {
  position: relative; display: inline-flex; gap: 2px; flex: none; padding: 3px;
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: border-color var(--dur-md) var(--ease-out), background var(--dur-md) var(--ease-out);
}
.theme-switch:hover { border-color: var(--hairline-strong); }

.theme-ind {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0;
  background: var(--chip-bg-pressed); border-radius: var(--r-sm);
  transition: transform 340ms var(--ease-out), width 340ms var(--ease-out), background var(--dur-md) var(--ease-out);
}
.theme-seg {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 30px; min-width: 34px; padding: 0 8px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; border-radius: var(--r-sm); font: inherit;
  font-size: 13px; font-weight: 500;
  transition: color var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out);
}
.theme-seg svg { width: 16px; height: 16px; transition: transform 380ms var(--ease-out); }
.theme-seg-text { padding: 0 12px; }
.theme-seg:hover { color: var(--text); }
.theme-seg.active { color: var(--text); }
.theme-seg.active svg { transform: rotate(360deg); }
.theme-seg:active { transform: scale(0.88); }

/* ── Card surface ── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  transition:
    background var(--dur-md) var(--ease-out),
    border-color var(--dur-md) var(--ease-out),
    box-shadow var(--dur-md) var(--ease-out);
}

/* ── Border-beam sunset (full perimeter, 1px wide) — @property declarations ── */
@property --beam-angle-dz   { syntax: "<angle>";  initial-value: 0deg; inherits: true; }
@property --beam-opacity-dz { syntax: "<number>"; initial-value: 0;    inherits: true; }

@keyframes beam-spin-dz     { to   { --beam-angle-dz: 360deg; } }
@keyframes beam-fade-in-dz  { to   { --beam-opacity-dz: 1; } }
@keyframes beam-fade-out-dz { to   { --beam-opacity-dz: 0; } }
@keyframes beam-hue-shift-dz {
  0%  { filter: hue-rotate(-30deg) brightness(1.30) saturate(1.20); }
  50% { filter: hue-rotate(30deg)  brightness(1.30) saturate(1.20); }
  100%{ filter: hue-rotate(-30deg) brightness(1.30) saturate(1.20); }
}
@keyframes beam-hue-shift-bloom-dz {
  0%  { filter: blur(24px) hue-rotate(-30deg) brightness(1.30) saturate(1.20); }
  50% { filter: blur(24px) hue-rotate(30deg)  brightness(1.30) saturate(1.20); }
  100%{ filter: blur(24px) hue-rotate(-30deg) brightness(1.30) saturate(1.20); }
}

/* ── Dropzone ── */
.dropzone {
  padding: 52px 24px; text-align: center; cursor: pointer;
  border-style: dashed; border-color: var(--hairline-strong);
  transition:
    border-color 200ms var(--ease-out),
    background   200ms var(--ease-out),
    transform    200ms var(--ease-out),
    box-shadow   200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dropzone:not([data-beam-active]):hover {
    border-color: var(--text-muted);
    background: var(--stage-bg);
    box-shadow: var(--card-shadow-hover);
  }
  .dropzone[data-beam-active]:hover {
    background: var(--stage-bg);
    box-shadow: var(--card-shadow-hover);
  }
  .dropzone:hover .drop-icon { transform: translateY(-3px) scale(1.08); color: var(--text); }
}
.dropzone:active { transform: scale(0.995); }
.dropzone.dragover {
  border-color: var(--text);
  background: var(--stage-bg);
  box-shadow: var(--card-shadow-hover);
}
.dropzone[data-beam-active].dragover { border-color: transparent; }
.dropzone.dragover .drop-icon { transform: translateY(-4px) scale(1.12); color: var(--text); }

.drop-inner { display: flex; flex-direction: column; align-items: center; }
.drop-icon {
  width: 36px; height: 36px; color: var(--text-muted); margin-bottom: 8px;
  transition: transform 240ms var(--ease-spring), color 200ms var(--ease-out);
}
.drop-title { font-size: 15px; font-weight: 500; margin: 4px 0 4px; color: var(--text); }
.drop-title, .dropzone .muted { transition: color var(--dur-md) var(--ease-out); }

/* ── Border-beam sunset (full perimeter, 1px stroke, 24px bloom) ── */
.dropzone[data-beam-active] {
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  animation: beam-spin-dz 5s linear infinite, beam-fade-in-dz 0.6s ease forwards;
}
.dropzone[data-beam-active].beam-hiding {
  animation: beam-spin-dz 5s linear infinite, beam-fade-out-dz 0.6s ease forwards;
}

/* Beam stroke (::after) — conic, masked to 1px border strip, sunset colors */
.dropzone[data-beam-active]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 1px;
  clip-path: inset(0 round var(--r-lg));
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--beam-opacity-dz) * 0.72);
  animation: beam-hue-shift-dz 12s ease-in-out infinite;
  background:
    conic-gradient(
      from var(--beam-angle-dz),
      transparent 0%, transparent 54%,
      rgba(255,255,255,0.10) 57%, rgba(255,255,255,0.30) 60%,
      rgba(255,255,255,0.60) 63%, rgba(255,255,255,0.75) 66%,
      rgba(255,255,255,0.60) 69%, rgba(255,255,255,0.30) 72%,
      rgba(255,255,255,0.10) 75%, transparent 78%, transparent 100%
    ),
    radial-gradient(ellipse 70px 40px  at 33%   -7.4%, rgb(255,80,50),  transparent),
    radial-gradient(ellipse 60px 35px  at 12%   -5%,   rgb(255,160,40), transparent),
    radial-gradient(ellipse 40px 70px  at 2.1%  68.3%, rgb(255,120,60), transparent),
    radial-gradient(ellipse 20px 35px  at 2.1%  68.3%, rgb(255,200,50), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%,  rgb(255,100,80), transparent),
    radial-gradient(ellipse 85px 26px  at 55%   100%,  rgb(255,180,60), transparent),
    radial-gradient(ellipse 74px 32px  at 93.9% 0%,    rgb(255,60,60),  transparent),
    radial-gradient(ellipse 26px 42px  at 100%  27.1%, rgb(255,140,50), transparent),
    radial-gradient(ellipse 52px 48px  at 100%  27.1%, rgb(255,90,70),  transparent);
  -webkit-mask:
    conic-gradient(from var(--beam-angle-dz),
      transparent 0%, transparent 30%,
      rgba(255,255,255,0.10) 36%, rgba(255,255,255,0.35) 44%,
      white 52%, white 80%,
      rgba(255,255,255,0.35) 86%, rgba(255,255,255,0.10) 92%,
      transparent 95%, transparent 100%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    conic-gradient(from var(--beam-angle-dz),
      transparent 0%, transparent 30%,
      rgba(255,255,255,0.10) 36%, rgba(255,255,255,0.35) 44%,
      white 52%, white 80%,
      rgba(255,255,255,0.35) 86%, rgba(255,255,255,0.10) 92%,
      transparent 95%, transparent 100%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
}

/* Inner glow (::before) — soft sunset spots following the beam */
.dropzone[data-beam-active]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  clip-path: inset(0 round var(--r-lg));
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--beam-opacity-dz) * 0.70);
  animation: beam-hue-shift-dz 12s ease-in-out infinite;
  background:
    radial-gradient(ellipse 63px 36px  at 33%   -7.4%, rgba(255,80,50,0.45),  transparent),
    radial-gradient(ellipse 54px 32px  at 12%   -5%,   rgba(255,160,40,0.45), transparent),
    radial-gradient(ellipse 36px 63px  at 2.1%  68.3%, rgba(255,120,60,0.45), transparent),
    radial-gradient(ellipse 18px 32px  at 2.1%  68.3%, rgba(255,200,50,0.45), transparent),
    radial-gradient(ellipse 162px 29px at 74.4% 100%,  rgba(255,100,80,0.45), transparent),
    radial-gradient(ellipse 77px 23px  at 55%   100%,  rgba(255,180,60,0.45), transparent),
    radial-gradient(ellipse 67px 29px  at 93.9% 0%,    rgba(255,60,60,0.45),  transparent),
    radial-gradient(ellipse 23px 38px  at 100%  27.1%, rgba(255,140,50,0.45), transparent),
    radial-gradient(ellipse 47px 43px  at 100%  27.1%, rgba(255,90,70,0.45),  transparent);
  box-shadow: inset 0 0 9px 1px rgba(255,255,255,0.27);
  -webkit-mask-image:
    conic-gradient(from var(--beam-angle-dz),
      transparent 0%, transparent 30%,
      rgba(255,255,255,0.10) 36%, rgba(255,255,255,0.35) 44%,
      white 52%, white 80%,
      rgba(255,255,255,0.35) 86%, rgba(255,255,255,0.10) 92%,
      transparent 95%, transparent 100%),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    conic-gradient(from var(--beam-angle-dz),
      transparent 0%, transparent 30%,
      rgba(255,255,255,0.10) 36%, rgba(255,255,255,0.35) 44%,
      white 52%, white 80%,
      rgba(255,255,255,0.35) 86%, rgba(255,255,255,0.10) 92%,
      transparent 95%, transparent 100%),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  mask-composite: intersect, add;
}

/* Light theme — darker conic stroke */
:root[data-theme="light"] .dropzone[data-beam-active]::after,
:root:not([data-theme="dark"]):not([data-theme="auto"]) .dropzone[data-beam-active]::after {
  background:
    conic-gradient(
      from var(--beam-angle-dz),
      transparent 0%, transparent 54%,
      rgba(0,0,0,0.08) 57%, rgba(0,0,0,0.20) 60%,
      rgba(0,0,0,0.40) 63%, rgba(0,0,0,0.55) 66%,
      rgba(0,0,0,0.40) 69%, rgba(0,0,0,0.20) 72%,
      rgba(0,0,0,0.08) 75%, transparent 78%, transparent 100%
    ),
    radial-gradient(ellipse 70px 40px  at 33%   -7.4%, rgb(255,80,50),  transparent),
    radial-gradient(ellipse 60px 35px  at 12%   -5%,   rgb(255,160,40), transparent),
    radial-gradient(ellipse 40px 70px  at 2.1%  68.3%, rgb(255,120,60), transparent),
    radial-gradient(ellipse 20px 35px  at 2.1%  68.3%, rgb(255,200,50), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%,  rgb(255,100,80), transparent),
    radial-gradient(ellipse 85px 26px  at 55%   100%,  rgb(255,180,60), transparent),
    radial-gradient(ellipse 74px 32px  at 93.9% 0%,    rgb(255,60,60),  transparent),
    radial-gradient(ellipse 26px 42px  at 100%  27.1%, rgb(255,140,50), transparent),
    radial-gradient(ellipse 52px 48px  at 100%  27.1%, rgb(255,90,70),  transparent);
}
:root[data-theme="light"] .dropzone[data-beam-active]::before,
:root:not([data-theme="dark"]):not([data-theme="auto"]) .dropzone[data-beam-active]::before {
  box-shadow: inset 0 0 9px 1px rgba(0,0,0,0.14);
}

/* Outer bloom — 24px blur, conic following the beam */
.dropzone[data-beam-active] > [data-beam-bloom] {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 1px;
  clip-path: inset(0 round var(--r-lg));
  pointer-events: none;
  z-index: 3;
  opacity: calc(var(--beam-opacity-dz) * 0.80);
  animation: beam-hue-shift-bloom-dz 12s ease-in-out infinite;
  background:
    conic-gradient(
      from var(--beam-angle-dz),
      transparent 0%, transparent 58%,
      rgba(255,255,255,0.03) 62%, rgba(255,255,255,0.08) 65%,
      rgba(255,255,255,0.20) 67%, rgba(255,255,255,0.45) 69%,
      rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.85) 70.5%,
      rgba(255,255,255,0.45) 71.5%, rgba(255,255,255,0.20) 73%,
      rgba(255,255,255,0.08) 75%, rgba(255,255,255,0.03) 78%,
      transparent 82%
    );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: blur(24px) brightness(1.30) saturate(1.20);
}

/* Light theme bloom */
:root[data-theme="light"] .dropzone[data-beam-active] > [data-beam-bloom],
:root:not([data-theme="dark"]):not([data-theme="auto"]) .dropzone[data-beam-active] > [data-beam-bloom] {
  background:
    conic-gradient(
      from var(--beam-angle-dz),
      transparent 0%, transparent 58%,
      rgba(0,0,0,0.02) 62%, rgba(0,0,0,0.08) 65%,
      rgba(0,0,0,0.20) 67%, rgba(0,0,0,0.40) 69%,
      rgba(0,0,0,0.60) 70%, rgba(0,0,0,0.60) 70.5%,
      rgba(0,0,0,0.40) 71.5%, rgba(0,0,0,0.20) 73%,
      rgba(0,0,0,0.08) 75%, rgba(0,0,0,0.02) 78%,
      transparent 82%
    );
}

@media (prefers-reduced-motion: reduce) {
  .dropzone[data-beam-active] { animation: none; --beam-opacity-dz: 1; }
  .dropzone[data-beam-active]::after,
  .dropzone[data-beam-active]::before,
  .dropzone[data-beam-active] > [data-beam-bloom] { animation: none; }
}

.link {
  background: none; border: none; color: var(--text); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0;
  transition: text-underline-offset var(--dur-sm) var(--ease-out), opacity var(--dur-sm) var(--ease-out);
}
.link:hover { text-underline-offset: 5px; opacity: 0.75; }
.link:active { opacity: 0.5; }

/* ── Alert ── */
.alert {
  margin-top: 18px; padding: 13px 16px; border-radius: var(--r-md); font-size: 14px;
  background: transparent; border: 1px solid var(--error); color: var(--error);
  animation: slideDown 300ms var(--ease-out) both;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
}

/* ── Summary ── */
.summary {
  margin-top: 22px; padding: 14px 16px 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  animation: fadeUp var(--dur-lg) var(--ease-out) both;
  position: relative; z-index: 10;
}
.summary-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.summary-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.summary-name { font-weight: 700; font-size: 15px; }
.summary-counts { display: flex; gap: 7px; flex-wrap: wrap; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500;
  padding: 2px 9px; border-radius: var(--r-sm); border: 1px solid var(--hairline);
  white-space: nowrap; color: var(--text-muted); background: transparent;
  font-family: var(--font-mono);
  transition:
    border-color var(--dur-sm) var(--ease-out),
    color        var(--dur-sm) var(--ease-out),
    background   var(--dur-sm) var(--ease-out),
    transform    var(--dur-sm) var(--ease-out);
}
.badge b { font-weight: 700; color: var(--text); margin-right: 3px; transition: color var(--dur-sm) var(--ease-out); }
.badge-outline { text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.badge-missing { border-color: var(--error); color: var(--error); }
.badge-missing b { color: var(--error); }
.badge.badge-composed { animation: badgePop 400ms var(--ease-spring) both; }
@keyframes badgePop { from { opacity: 0; transform: scale(0.85); } }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit;
  font-size: 14px; font-weight: 500; height: 36px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition:
    background     var(--dur-sm) var(--ease-out),
    border-color   var(--dur-sm) var(--ease-out),
    transform      var(--dur-xs) var(--ease-out),
    opacity        var(--dur-sm) var(--ease-out),
    color          var(--dur-sm) var(--ease-out),
    box-shadow     var(--dur-sm) var(--ease-out);
}
.btn:focus-visible { outline: 2px solid var(--icon-color); outline-offset: 2px; }
.btn:not(:disabled):hover { transform: scale(1.015); }
.btn:active { transform: scale(0.96); }

.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover:not(:disabled) { opacity: 0.82; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18); }
.btn-primary:active:not(:disabled) { opacity: 1; box-shadow: none; transform: scale(0.96); }
.btn-primary:disabled { opacity: .35; cursor: default; transform: none; }

.btn-outline {
  background: transparent; border-color: var(--hairline-strong);
  color: var(--text); font-weight: 500;
}
.btn-outline:hover { background: var(--chip-bg); border-color: var(--hairline-strong); }
.btn-outline:active { background: var(--chip-bg-pressed); }

.btn-ico { width: 16px; height: 16px; flex: none; transition: transform 260ms var(--ease-out); }
.btn-primary:hover:not(:disabled) .btn-ico { transform: translateY(2px); }

/* ── Split button ── */
.dl { position: relative; z-index: 100; }
.split-btn { display: inline-flex; }
.split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-caret {
  width: 36px; padding: 0;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  box-shadow: inset 1px 0 0 var(--split-divider);
}
.split-caret:active { transform: scale(0.96); }
.split-caret svg { width: 16px; height: 16px; transition: transform 220ms var(--ease-out); }
.split-caret[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── Dropdown menu ── */
.menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 290px; z-index: 20;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 6px; box-shadow: var(--shadow-pop); z-index: 200;
}
.menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; padding: 9px 10px; border-radius: var(--r-sm); font: inherit;
  color: var(--text);
  transition: background var(--dur-sm) var(--ease-out), transform var(--dur-xs) var(--ease-out);
}
.menu-item:hover  { background: var(--surface-hover); }
.menu-item:active { background: var(--surface-active); transform: scale(0.99); }
.menu-item-title { display: block; font-size: 13px; font-weight: 500; }
.menu-item-desc  { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; transition: color var(--dur-md) var(--ease-out); }

/* ── Legend ── */
.legend {
  display: flex; gap: 18px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px;
  margin: 22px 2px 4px;
  animation: fadeIn 520ms ease 80ms both;
}
.legend span { transition: color var(--dur-md) var(--ease-out); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: currentColor; }
.d-present  { color: var(--text-muted); }
.d-composed { color: var(--text); }
.d-base     { color: var(--hairline-strong); }

.section-title {
  font-size: 13px; font-weight: 500; color: var(--text-faint);
  margin: 28px 2px 12px;
  transition: color var(--dur-md) var(--ease-out);
  animation: fadeIn 400ms ease both;
}

/* ── Footnote ── */
.footnote {
  margin-top: 28px; padding: 16px 18px; font-size: 13px; color: var(--text-muted);
  transition: background var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out);
}
.footnote p { margin: 0 0 9px; line-height: 1.65; }
.footnote p:last-child { margin-bottom: 0; }
.footnote b { color: var(--text); font-weight: 500; transition: color var(--dur-md) var(--ease-out); }

.footer {
  margin-top: 40px; text-align: center;
  animation: fadeIn 600ms ease 200ms both;
}
.footer .muted { transition: color var(--dur-md) var(--ease-out); }

/* ── Dialog ── */
.dialog {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms;
}
.dialog.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 240ms var(--ease-out), visibility 0s;
}
.dialog-overlay {
  position: absolute; inset: 0; background: var(--scrim);
  transition: background var(--dur-md) var(--ease-out);
}
.dialog-content {
  position: relative; width: 100%; max-width: 600px; padding: 24px; z-index: 1;
}

.dialog-close {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; padding: 6px;
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  border-radius: var(--r-sm);
  transition:
    background var(--dur-sm) var(--ease-out),
    color      var(--dur-sm) var(--ease-out),
    transform  var(--dur-xs) var(--ease-out);
}
.dialog-close:hover { background: var(--chip-bg); color: var(--text); transform: scale(1.1); }
.dialog-close:active { transform: scale(0.88); }
.dialog-close svg { width: 100%; height: 100%; }

.dialog-header { margin-bottom: 20px; padding-right: 28px; }
.dialog-title {
  margin: 0 0 4px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
  transition: color var(--dur-md) var(--ease-out);
}
.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

.editor-controls { display: flex; flex-direction: column; gap: 17px; justify-content: center; }
.control-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.control-row label { font-size: 13px; font-weight: 500; transition: color var(--dur-sm) var(--ease-out); }
.control-val {
  font-size: 12px; color: var(--text-muted); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-sm) var(--ease-out), transform var(--dur-xs) var(--ease-out);
}

/* value-changed flash */
.control-val.bump {
  animation: valBump 280ms var(--ease-spring);
}
@keyframes valBump { 0% { transform: scale(1.18); color: var(--text); } 100% { transform: scale(1); } }

/* ── Sliders ── */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: var(--r-pill);
  background: var(--hairline-strong); cursor: pointer; outline: none;
  transition: background var(--dur-sm) var(--ease-out);
}
.slider:hover { background: var(--text-faint); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text); border: none; cursor: pointer;
  transition: box-shadow 180ms var(--ease-out), transform 140ms var(--ease-spring);
}
.slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px var(--ring); transform: scale(1.08); }
.slider:active::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 8px var(--ring); }
.slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text); border: none; cursor: pointer;
}
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--ring); }

/* ── Results reveal ── */
#results.reveal > * { animation: fadeUp 400ms var(--ease-out) both; }
#results.reveal > *:nth-child(1) { animation-delay:   0ms; }
#results.reveal > *:nth-child(2) { animation-delay:  40ms; }
#results.reveal > *:nth-child(3) { animation-delay:  80ms; }
#results.reveal > *:nth-child(4) { animation-delay: 120ms; }
#results.reveal > *:nth-child(5) { animation-delay: 160ms; }
#results.reveal > *:nth-child(6) { animation-delay: 200ms; }
#results.reveal > *:nth-child(7) { animation-delay: 240ms; }

/* ── Keyframes ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ── View Transitions (theme fade) ── */
::view-transition-old(root) { animation: themeFadeOut 380ms ease; }
::view-transition-new(root) { animation: themeFadeIn  380ms ease; }
@keyframes themeFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes themeFadeIn  { from { opacity: 0; } to { opacity: 1; } }

/* ── Responsive ── */
@media (max-width: 900px) {
  .container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 600px) {
  .header-top { flex-direction: column; }
  .summary-right { width: 100%; justify-content: space-between; }
  .ed-stages { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   transitions-dev snippets
   ═══════════════════════════════════════════ */

/* 04 — Text states swap */
.t-text-swap {
  display: inline-block;
  transform: translateY(0); filter: blur(0); opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur)); opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur)); opacity: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) { .t-text-swap { transition: none !important; } }

/* 02 — Number pop-in */
@keyframes t-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0; filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
.t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }
@media (prefers-reduced-motion: reduce) { .t-digit-group .t-digit { animation: none !important; } }

/* 05 — Menu dropdown */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0; pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }
.t-dropdown.is-open  { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale)); opacity: 0; pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}
@media (prefers-reduced-motion: reduce) { .t-dropdown { transition: none !important; } }

/* 06 — Modal */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0; pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open  { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close)); opacity: 0; pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}
@media (prefers-reduced-motion: reduce) { .t-modal { transition: none !important; } }

/* 09 — Icon swap */
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1; filter: blur(0); transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}
@media (prefers-reduced-motion: reduce) { .t-icon-swap .t-icon { transition: none !important; } }

/* 12 — Error state shake */
.t-shake {
  transition: border-color 150ms ease-out;
  will-change: transform;
}
.t-shake.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-shake.is-shaking {
  animation: t-shake-anim calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-shake-anim {
  0%     { transform: translateX(0);                                  animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance));              animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1));   animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot));             animation-timing-function: var(--shake-ease); }
  100%   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .t-shake { animation: none !important; transform: none !important; }
}

/* 11 — Avatar group hover */
.t-avatar {
  transform-origin: center;
  transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1));
  transition: transform var(--avatar-dur) var(--avatar-ease-in);
}

@media (prefers-reduced-motion: reduce) {
  .t-avatar { transition: none !important; transform: none !important; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .theme-ind { transition: none; }
  .header, .dropzone, .summary, .legend, .footer,
  .section-title, #results.reveal > * { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .logo-card.enter { animation: none; }
  .dialog-content { transition: opacity 160ms ease; transform: none; }
  .dialog.open .dialog-content { transform: none; }
  .menu { transition: opacity 120ms ease, visibility 0s linear 120ms; transform: none; }
  .menu.open { transform: none; }
  .split-caret[aria-expanded="true"] svg { transform: none; }
  .btn:active, .dropzone:active, .logo-stage:active,
  .theme-seg:active, .dialog-close:active { transform: none; }
}

/* ═══════════════════════════════════════════
   Logo Grid Maker
   ═══════════════════════════════════════════ */

.client-badge { vertical-align: middle; margin-left: 8px; position: relative; top: -3px; }
.header .muted { max-width: 640px; }

.badge-warn { border-color: rgba(212, 102, 10, 0.45); color: #d4660a; }
.badge-warn b { color: #d4660a; }

.btn-sm { height: 30px; padding: 0 11px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--error); background: var(--chip-bg); }
.spacer { flex: 1; }

.summary-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.summary-name b { font-weight: 700; }

/* ── Nastavení (interní režim) ── */
.settings { padding: 20px 22px 22px; margin-bottom: 18px; animation: fadeUp var(--dur-lg) var(--ease-out) both; }
.settings-head { margin-bottom: 16px; }
.settings-title { margin: 0 0 2px; font-size: 15px; font-weight: 500; }
.settings-head .muted { margin: 0; max-width: 620px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; min-width: 0; }
.field > span:first-child { color: var(--text-muted); transition: color var(--dur-md) var(--ease-out); }
.field-wide { grid-column: span 2; }
.input {
  width: 100%; height: 36px; padding: 0 11px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--bg); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur-sm) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out), background var(--dur-md) var(--ease-out);
}
.input:hover { border-color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--ring); }
.input.mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap i { position: absolute; right: 11px; font-style: normal; font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); pointer-events: none; }
.input-wrap .input { padding-right: 34px; }
.color-wrap { gap: 10px; height: 36px; }
.color-wrap input[type="color"] {
  width: 36px; height: 36px; padding: 3px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  background: var(--bg); cursor: pointer;
}
.color-wrap code { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; }
.settings-link { display: flex; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.settings-link .input { flex: 1; min-width: 0; }

/* ── Grid log ── */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 14px; }

.logo-card { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.logo-card.enter { animation: cellIn 420ms var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 24) * 28ms); }
@keyframes cellIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
.logo-card.is-busy .logo-stage img { opacity: 0.35; }

/* Buňka gridu z webu klienta: poměr stran i pozadí se nastavují z JS. */
.logo-stage {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%;
  aspect-ratio: var(--cell-ratio, 2.32); background: var(--cell-bg, #fff);
  border: 1px dashed rgba(128, 128, 128, 0.35); border-radius: var(--r-sm); overflow: hidden;
  padding: 0; font: inherit; color: inherit;
  transition: border-color var(--dur-sm) var(--ease-out), box-shadow var(--dur-md) var(--ease-out), transform var(--dur-sm) var(--ease-out);
}
button.logo-stage { cursor: pointer; }
.logo-stage img { display: block; width: var(--img-w, 100%); height: auto; max-height: 100%; transition: opacity var(--dur-sm) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  button.logo-stage:hover { border-color: rgba(128, 128, 128, 0.8); box-shadow: var(--card-shadow-hover); }
}
button.logo-stage:active { transform: scale(0.985); }

.logo-meta { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 2px; }
.logo-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.logo-edited {
  font-size: 9.5px; font-weight: 500; letter-spacing: .02em; color: #d4660a; background: rgba(212, 102, 10, 0.12);
  padding: 1px 6px; border-radius: var(--r-pill); animation: badgeIn 280ms var(--ease-spring);
}
@keyframes badgeIn { from { opacity: 0; transform: scale(0.7) translateY(-2px); } }

.logo-warn {
  margin: 0 2px; padding: 8px 10px; font-size: 12px; line-height: 1.5; color: #b85708;
  background: rgba(212, 102, 10, 0.08); border-radius: var(--r-sm);
}
:root[data-theme="dark"] .logo-warn { color: #f0a35c; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .logo-warn { color: #f0a35c; } }
.logo-warns { display: flex; flex-direction: column; gap: 6px; }
.logo-warns:empty { display: none; }

.logo-actions { display: flex; gap: 6px; margin-top: auto; padding: 0 2px; }
.logo-actions .btn { flex: 1; min-width: 0; }
.bitmap-note { margin: 12px 0 0; font-size: 13px; }
.logo-card .logo-warn { padding: 6px 9px; }

/* ── Dialog ── */
.dialog-content { max-width: 680px; max-height: calc(100vh - 40px); overflow-y: auto; }
.ed-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.ed-stage-wrap { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.ed-stage-wrap figcaption { text-align: center; }
.editor-controls { gap: 18px; }
.ed-warnings { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.ed-warnings:empty { display: none; }
.ed-warnings .logo-warn { margin: 0; font-size: 13px; }
.dialog-footer { align-items: center; }

@media (max-width: 600px) {
  .settings-link { flex-direction: column; }
  .field-wide { grid-column: auto; }
  .dialog-footer { flex-wrap: wrap; }
}

/* ── Náhled na webu klienta ── */
.site-preview { margin-top: 34px; animation: fadeUp var(--dur-lg) var(--ease-out) both; }
.site-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 2px 12px; }
.site-preview-head .section-title { margin: 0; animation: none; }
.site-preview-head .section-title span { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; margin-left: 4px; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; }
.check input { accent-color: var(--text); width: 14px; height: 14px; margin: 0; cursor: pointer; }
.site-preview-box { overflow: hidden; background: #fff; }
.site-preview-wrap { position: relative; overflow: hidden; width: 100%; }
.site-preview-wrap iframe { display: block; border: 0; transform-origin: 0 0; background: #fff; }
.site-preview-status { margin: 0; padding: 22px; color: #6c6c6c; }
.site-preview-note { margin: 10px 2px 0; }
.web-hint {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 10px 12px;
  font-size: 13px; color: var(--text-muted); background: var(--chip-bg); border-radius: var(--r-sm);
}
.web-hint b { color: var(--text); font-weight: 500; }
.web-hint.is-match .btn { display: none; }