/* themes.css */
/* THEME ENGINE (CSS side).
   The compiled UI is built on Tailwind v4, which reads --color-white / --color-black everywhere (text, borders and every
   "white/NN" tint). The theme engine (src/app/useTheme.js) sets these variables on <html>, so changing a theme re-tints
   the interface. Everything that used to be a hard-coded gray (cards, section backgrounds, body, buttons, scrollbar ...)
   is mapped to the same variables below, so EVERY section follows the theme - not only the top of the page. */
:root {
  --kz-bg-deep: #050505; --kz-accent: #65f6d1; --kz-accent-2: #ff6b4a;
  --kz-glow: rgba(255,255,255,0); --kz-tint: #ffffff; --kz-tint-strength: 1; --kz-cosmos-opacity: 1; --kz-motion: 1;

  /* derived surfaces (recomputed automatically whenever the theme variables change) */
  --kz-cosmos-core: color-mix(in srgb, var(--kz-tint) calc(7% * var(--kz-tint-strength)), var(--kz-bg-deep));
  --kz-cosmos-mid:  color-mix(in srgb, var(--kz-tint) calc(2.5% * var(--kz-tint-strength)), var(--kz-bg-deep));

  /* the compiled stylesheet's own palette (cards, text, borders) -> theme */
  --v-bg: var(--color-black, #000);
  --v-text: var(--color-white, #fff);
  --v-muted: color-mix(in srgb, var(--color-white, #fff) 62%, transparent);
  --v-subtle: color-mix(in srgb, var(--color-white, #fff) 42%, transparent);
  --v-border: color-mix(in srgb, var(--color-white, #fff) 10%, transparent);
  --v-panel-a: color-mix(in srgb, var(--kz-tint) calc(8% * var(--kz-tint-strength)), var(--kz-bg-deep));
  --v-panel-b: color-mix(in srgb, var(--kz-tint) calc(2% * var(--kz-tint-strength)), var(--color-black, #000));
  --v-panel-c: color-mix(in srgb, var(--kz-tint) calc(5% * var(--kz-tint-strength)), var(--kz-bg-deep));
  --v-teal: var(--kz-accent); --v-orange: var(--kz-accent-2);
}
html { background: var(--color-black, #000); }
html body {
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--kz-tint) calc(7% * var(--kz-tint-strength)), transparent), transparent 26%),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--kz-accent-2) calc(4% * var(--kz-tint-strength)), transparent), transparent 24%),
    var(--v-bg);
  margin: 0;
}
/* Only when a theme sets fontFamily (useTheme adds data-custom-font): */
html[data-custom-font] body { font-family: var(--kz-font-family); }

/* Solid section panels and gradient accents that were hard-coded in the compiled CSS: */
.bg-\[\#020508\] { background-color: var(--kz-bg-deep); }
.bg-\[\#111\] { background-color: color-mix(in srgb, var(--color-white, #fff) 7%, var(--color-black, #000)); }
.from-\[\#65f6d1\] { --tw-gradient-from: var(--kz-accent); }
.to-\[\#ff6b4a\] { --tw-gradient-to: var(--kz-accent-2); }

/* Cards, soft panels and buttons from the compiled stylesheet */
.panel-card { box-shadow: inset 0 1px color-mix(in srgb, var(--color-white, #fff) 4%, transparent), 0 18px 44px rgba(0,0,0,.32); }
.panel-card-soft { background: color-mix(in srgb, var(--color-white, #fff) 3%, transparent); border-color: color-mix(in srgb, var(--color-white, #fff) 8%, transparent); }
.cta-primary { color: var(--color-black, #000); background: var(--color-white, #fff); border-color: color-mix(in srgb, var(--color-white, #fff) 92%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--kz-accent) 22%, transparent); }
.cta-primary:hover { background: color-mix(in srgb, var(--color-white, #fff) 94%, transparent); }
.cta-secondary { color: var(--color-white, #fff); background: color-mix(in srgb, var(--color-white, #fff) 4%, transparent); border-color: color-mix(in srgb, var(--color-white, #fff) 14%, transparent); }
.cta-secondary:hover { background: color-mix(in srgb, var(--color-white, #fff) 8%, transparent); }
::selection { color: var(--color-white, #fff); background: color-mix(in srgb, var(--kz-accent) 38%, transparent); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--color-white, #fff) 40%, transparent); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--kz-accent) 38%, transparent); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--kz-accent) 62%, transparent); }

/* Shades / glows that used to be arbitrary hard-coded gradients in the markup */
.kz-video-shade { background: linear-gradient(180deg, color-mix(in srgb, var(--kz-bg-deep) 18%, transparent) 0%, color-mix(in srgb, var(--kz-bg-deep) 5%, transparent) 30%, color-mix(in srgb, var(--kz-bg-deep) 48%, transparent) 100%); }
.kz-card-sheen { background: linear-gradient(180deg, color-mix(in srgb, var(--color-white, #fff) 4%, transparent) 0%, transparent 22%, rgba(0,0,0,.14) 100%); }
.kz-card-glow { background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--kz-tint) calc(8% * var(--kz-tint-strength)), transparent), transparent 24%); }
.kz-vignette { background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.5) 100%); }

/* Animated space background: strength + colored glow */
.kz-cosmos { opacity: var(--kz-cosmos-opacity); }
.kz-cosmos::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, var(--kz-glow), transparent 65%); pointer-events: none; }

/* Switching theme: colors cross-fade instead of snapping (class is added for ~0.7s by useTheme) */
html.kz-theme-switching, html.kz-theme-switching *, html.kz-theme-switching *::before, html.kz-theme-switching *::after {
  transition: background-color .55s ease, border-color .55s ease, color .55s ease, fill .55s ease, stroke .55s ease, box-shadow .55s ease, opacity .4s ease !important;
}
:focus-visible { outline: 2px solid var(--kz-accent); outline-offset: 2px; }

/* motion.css */
/* MOTION (CSS side) - see src/app/motion.js for the JavaScript half (reveal / pop / slide springs). */

/* Phone background (src/components/MobileBackdrop.jsx): themed gradient + two slowly drifting glows + star artwork. */
.kz-mbg__base { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, var(--kz-cosmos-core) 0%, var(--kz-cosmos-mid) 38%, var(--kz-bg-deep) 68%, var(--color-black, #000) 100%); }
.kz-mbg__glow { position: absolute; width: 120vw; height: 120vw; border-radius: 50%; will-change: transform; opacity: var(--kz-cosmos-opacity); transform: translate3d(0,0,0); }
.kz-mbg__glow--a { left: -45vw; top: -22vw; background: radial-gradient(circle, color-mix(in srgb, var(--kz-tint) calc(8% * var(--kz-tint-strength)), transparent) 0%, transparent 62%); animation: kz-drift-a 24s ease-in-out infinite alternate; }
.kz-mbg__glow--b { right: -55vw; bottom: -12vw; background: radial-gradient(circle, color-mix(in srgb, var(--kz-tint) calc(6% * var(--kz-tint-strength)), transparent) 0%, transparent 62%); animation: kz-drift-b 30s ease-in-out infinite alternate; }
.kz-mbg__art { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; mix-blend-mode: screen; opacity: .9; }
@keyframes kz-drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(16vw, 14vw, 0) scale(1.14); } }
@keyframes kz-drift-b { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-18vw, -12vw, 0) scale(.94); } }

/* Smoothness on phones.
   The old rules forced `will-change:auto` + `backface-visibility:visible` on every reveal, which stopped the browser
   from promoting animated cards to their own layer (= choppy slides). Layers are now requested by motion.js only while
   an element is animating, and released afterwards. */
.mobile-reveal, .mobile-video-card, .mobile-nav-panel { transform-style: flat; -webkit-transform-style: flat; }
/* Large live blurs behind many moving cards are the #1 cause of dropped frames on phones. The page behind the cards is
   a calm dark gradient, so the blur is invisible there - drop it for cards (the header and menus keep theirs). */
@media (max-width: 767px), (pointer: coarse) {
  main .backdrop-blur-2xl, main .backdrop-blur-xl, main .backdrop-blur-lg, main .backdrop-blur-md { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Accessibility: reduced motion (OS setting; switch off in site.config.js -> motion.respectReducedMotion) */
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }

/* On phones the animated MobileBackdrop is the page background, so solid section panels must not cover it (no seams). */
@media (max-width: 767px), (pointer: coarse) {
  section.bg-\[\#020508\], footer.bg-\[\#020508\] { background-color: transparent; }
}

/* Mobile input responsiveness and compositor hints for frequently animated header controls. */
.kz-menu-toggle { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; will-change: transform; }
.kz-menu-toggle > span, .kz-menu-toggle > span > span { transform: translateZ(0); }
@media (pointer: coarse) { .kz-menu-toggle { min-width: 48px; min-height: 48px; } }

/* components.css */
/* Styles for the NEW components: ads, announcement, cards, filters, debug panel.
   Everything uses theme variables so every theme restyles them. */
.kz-ad-slot { position: relative; z-index: 2; margin: 0 auto; max-width: 72rem; padding: 0 1rem; }
.kz-ad-slot--between, .kz-ad-slot--footer, .kz-ad-slot--hero { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.kz-ad { position: relative; border: 1px dashed color-mix(in oklab, var(--color-white) 22%, transparent); border-radius: 18px; background: color-mix(in oklab, var(--color-white) 4%, transparent); overflow: hidden; }
.kz-ad__label { position: absolute; top: 8px; left: 10px; z-index: 3; font: 600 10px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: rgba(0,0,0,.65); color: var(--color-white); opacity: .85; }
.kz-ad__link { display: block; color: inherit; text-decoration: none; }
.kz-ad__media { width: 100%; background: color-mix(in oklab, var(--color-white) 6%, transparent); }
.kz-ad__media img, .kz-ad__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kz-ad--card .kz-ad__media, .kz-ad--text .kz-ad__media { aspect-ratio: 16 / 7; }
.kz-ad__text { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 1.25rem 1.1rem; }
.kz-ad--has-media .kz-ad__text { padding-top: 1rem; }
.kz-ad__headline { font-size: 1.05rem; color: var(--color-white); }
.kz-ad__desc { font-size: .9rem; color: color-mix(in oklab, var(--color-white) 68%, transparent); }
.kz-ad__cta { align-self: flex-start; margin-top: .3rem; font-size: .85rem; padding: .45rem .9rem; border-radius: 999px; color: #000; background: linear-gradient(90deg, var(--kz-accent), var(--kz-accent-2)); font-weight: 600; }
.kz-ad__link:hover .kz-ad__cta { filter: brightness(1.1); }
.kz-grid-ad { grid-column: 1 / -1; }
@media (max-width: 767px) { .kz-ad-slot { padding: 0 .75rem; } }

.kz-announce { position: fixed; z-index: 45; top: 68px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; max-width: min(36rem, calc(100vw - 1.5rem)); padding: .45rem .5rem .45rem .9rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--color-white) 18%, transparent); background: rgba(0,0,0,.78); backdrop-filter: blur(14px); color: var(--color-white); font-size: .85rem; }
.kz-announce__img { height: 22px; width: auto; border-radius: 4px; }
.kz-announce__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-announce__link { color: var(--kz-accent); text-decoration: underline; white-space: nowrap; }
.kz-announce__close { width: 26px; height: 26px; border-radius: 50%; border: 0; background: color-mix(in oklab, var(--color-white) 12%, transparent); color: var(--color-white); cursor: pointer; font-size: 16px; line-height: 1; }
.kz-announce-section { position: relative; z-index: 2; padding: 1.5rem 1rem; }
.kz-announce-section__inner { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; padding: 1rem 1.25rem; border-radius: 18px; border: 1px solid color-mix(in oklab, var(--kz-accent) 45%, transparent); background: color-mix(in oklab, var(--kz-accent) 10%, transparent); color: var(--color-white); }

.kz-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: -1.5rem 0 2rem; }
.kz-filter { border: 1px solid color-mix(in oklab, var(--color-white) 16%, transparent); background: transparent; color: color-mix(in oklab, var(--color-white) 70%, transparent); padding: .4rem .9rem; border-radius: 999px; cursor: pointer; font-size: .85rem; }
.kz-filter.is-active { color: #000; background: var(--color-white); border-color: var(--color-white); }
.kz-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--kz-cols, 3), minmax(0, 1fr)); }
@media (max-width: 1023px) { .kz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .kz-grid { grid-template-columns: minmax(0, 1fr); } }
.kz-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent); background: color-mix(in oklab, var(--color-white) 4.5%, transparent); color: var(--color-white); text-decoration: none; }
.kz-card--link:hover { border-color: color-mix(in oklab, var(--kz-accent) 55%, transparent); }
.kz-card__thumb { position: relative; aspect-ratio: var(--kz-thumb-ratio, 16 / 9); background: color-mix(in oklab, var(--color-white) 6%, transparent); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kz-card__thumb img { width: 100%; height: 100%; object-fit: var(--kz-thumb-fit, cover); object-position: center; }
.kz-card__thumb--auto { aspect-ratio: auto; }
.kz-card__thumb--auto img { height: auto; }
.kz-card__thumb--contain { background: color-mix(in oklab, var(--kz-bg-deep, #000) 70%, transparent); }
.kz-grid--single > .kz-card { width: 100%; max-width: 26rem; margin-inline: auto; }
.kz-card__placeholder { font: 600 .8rem ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in oklab, var(--color-white) 45%, transparent); }
.kz-card__body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem 1.25rem; }
.kz-card__title { font-size: 1.15rem; color: var(--color-white); }
.kz-card__desc { font-size: .92rem; color: color-mix(in oklab, var(--color-white) 62%, transparent); }
.kz-card__actions { margin-top: auto; padding-top: .4rem; display: flex; }
.kz-card__actions--split { justify-content: space-between; align-items: center; }
.kz-chips, .kz-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.kz-chip { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; padding: .32rem .6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--kz-accent) 24%, transparent); background: color-mix(in srgb, var(--kz-accent) 6%, rgba(0,0,0,.4)); color: color-mix(in srgb, var(--kz-accent) 40%, #fff); }
.kz-chip--type { border-color: color-mix(in srgb, var(--kz-accent) 50%, transparent); background: color-mix(in srgb, var(--kz-accent) 12%, rgba(0,0,0,.4)); color: color-mix(in srgb, var(--kz-accent) 55%, #fff); text-shadow: 0 0 8px color-mix(in srgb, var(--kz-accent) 60%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--kz-accent) 22%, transparent); }
.kz-chip--date { opacity: .7; }
.kz-tags span { font-size: .75rem; color: var(--kz-accent); }
.kz-badge { position: absolute; top: 10px; right: 10px; z-index: 2; padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--kz-accent); color: #000; }
.kz-price { font-size: 1.2rem; color: var(--color-white); }
.kz-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; color: #000; background: linear-gradient(90deg, var(--kz-accent), var(--kz-accent-2)); border: 0; cursor: pointer; }
.kz-btn:hover { filter: brightness(1.1); }
/* Original dark (OG): premium monochrome resource actions; scoped to this theme only. */
html[data-theme="Original dark"] .kz-card .kz-btn:not(.kz-btn--disabled) { color: #f5f5f5; background: linear-gradient(135deg, #242424 0%, #383838 48%, #171717 100%); border: 1px solid rgba(255,255,255,.20); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 16px rgba(0,0,0,.24); transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .16s ease; }
html[data-theme="Original dark"] .kz-card .kz-btn:not(.kz-btn--disabled):hover { filter: none; background: linear-gradient(135deg, #333 0%, #454545 48%, #202020 100%); border-color: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 7px 20px rgba(0,0,0,.32); }
html[data-theme="Original dark"] .kz-card .kz-btn:not(.kz-btn--disabled):active { transform: translateY(1px) scale(.985); }
.kz-btn--lg { padding: .8rem 1.6rem; font-size: 1rem; }
.kz-btn--disabled { background: color-mix(in oklab, var(--color-white) 10%, transparent); color: color-mix(in oklab, var(--color-white) 45%, transparent); cursor: not-allowed; filter: none; }
.kz-prose { max-width: 48rem; margin: 0 auto 2rem; color: color-mix(in oklab, var(--color-white) 74%, transparent); line-height: 1.7; display: grid; gap: 1rem; }
.kz-prose--with-image { max-width: 64rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; }
@media (max-width: 767px) { .kz-prose--with-image { grid-template-columns: 1fr; } }
.kz-prose p + p { margin-top: 1rem; }
.kz-prose__img img { width: 100%; border-radius: 18px; }
.kz-center { display: flex; justify-content: center; margin-top: 2rem; }
/* Theme button + pop-up (src/components/ThemeSwitcher.jsx) - letters are the logo, like the old EN/RU pill */
.kz-theme-menu { position: absolute; z-index: 70; right: 0; top: calc(100% + 12px); width: min(15.5rem, calc(100vw - 1.5rem)); transform-origin: top right; display: flex; flex-direction: column; gap: 2px; padding: .4rem; border-radius: 20px; border: 1px solid color-mix(in oklab, var(--color-white) 12%, transparent); background: color-mix(in oklab, var(--kz-bg-deep) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 56px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, var(--kz-accent) 10%, transparent); }
.kz-theme-option { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 14px; background: transparent; color: color-mix(in oklab, var(--color-white) 76%, transparent); text-align: left; font-size: .9rem; cursor: pointer; transition: background-color .2s, color .2s; }
.kz-theme-option:hover, .kz-theme-option.is-active { background: color-mix(in oklab, var(--color-white) 8%, transparent); color: var(--color-white); }
.kz-theme-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-theme-check { color: var(--kz-accent); font-size: .95rem; }
.kz-section-error { margin: 1rem auto; max-width: 48rem; padding: .8rem 1rem; border: 1px dashed #f55; border-radius: 12px; color: #f99; font: 12px/1.4 ui-monospace, monospace; }

/* Debug panel (only mounted when debug is on) */
.kz-dbg { position: fixed; z-index: 2147483000; left: 8px; right: 8px; bottom: 8px; max-height: 55vh; overflow: auto; padding: 10px; border-radius: 10px; border: 1px solid #0f0; background: #0b0b0b; color: #8f8; font: 12px/1.45 ui-monospace, monospace; }
.kz-dbg__head { display: flex; gap: .75rem; align-items: center; margin-bottom: .4rem; }
.kz-dbg__head button, .kz-dbg-toggle { background: #131; color: #8f8; border: 1px solid #0f0; border-radius: 6px; padding: 2px 8px; font: inherit; cursor: pointer; }
.kz-dbg-toggle { position: fixed; z-index: 2147483000; left: 8px; bottom: 8px; }
.kz-dbg__row { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem; } .kz-dbg__row b { color: #bfb; font-weight: 600; } .kz-dbg__row span { word-break: break-word; }
.kz-dbg__log { margin-top: .5rem; border-top: 1px solid #0a0; padding-top: .4rem; }
.kz-dbg__line--error { color: #ff7b7b; } .kz-dbg__line--warn { color: #ffd66b; } .kz-dbg__line--info { color: #9cf; }

/* Theme bubble: dark glass pill, letters centered, soft glow in the selected theme's color (--b is set per theme). */
.kz-theme-btn { --b: var(--kz-accent); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 2.9rem; height: 2rem; padding: 0 .8rem 0 calc(.8rem + .09em); border-radius: 999px; cursor: pointer; line-height: 1; border: 1px solid color-mix(in srgb, var(--b) 42%, transparent); background: color-mix(in srgb, var(--b) 7%, rgba(0,0,0,.35)); color: color-mix(in srgb, var(--b) 55%, #fff); font: 600 .8rem/1 inherit; letter-spacing: .09em; text-shadow: 0 0 7px color-mix(in srgb, var(--b) 38%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--b) 16%, transparent), inset 0 0 8px color-mix(in srgb, var(--b) 6%, transparent); -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: box-shadow .4s ease, border-color .4s ease, background-color .4s ease, color .4s ease; }
.kz-theme-btn:hover, .kz-theme-btn[aria-expanded="true"] { box-shadow: 0 0 15px color-mix(in srgb, var(--b) 26%, transparent), inset 0 0 10px color-mix(in srgb, var(--b) 8%, transparent); border-color: color-mix(in srgb, var(--b) 48%, transparent); }
.kz-theme-code { display: block; text-align: center; }
.kz-theme-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 28px; padding-left: .08em; border-radius: 10px; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--b) 34%, transparent); background: color-mix(in srgb, var(--b) 8%, rgba(0,0,0,.4)); color: color-mix(in srgb, var(--b) 55%, #fff); text-shadow: 0 0 8px color-mix(in srgb, var(--b) 70%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--b) 13%, transparent); font: 700 .72rem/1 ui-monospace, monospace; letter-spacing: .08em; transition: box-shadow .35s ease, border-color .35s ease; }
.kz-theme-option { --b: var(--kz-accent); }
.kz-theme-option.is-active .kz-theme-badge { border-color: color-mix(in srgb, var(--b) 55%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--b) 25%, transparent), inset 0 0 8px color-mix(in srgb, var(--b) 10%, transparent); }
.kz-theme-check { color: color-mix(in srgb, var(--b) 60%, #fff); text-shadow: 0 0 8px var(--b); }

/* Stats cards (config/stats.config.js): columns follow the number of visible cards; an odd last card spans both phone columns. */
.kz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kz-stats > .kz-stat-wide { grid-column: span 2; }
@media (min-width: 1024px) { .kz-stats { grid-template-columns: repeat(var(--kz-stat-n, 4), minmax(0, 1fr)); } .kz-stats > .kz-stat-wide { grid-column: auto; } }

/* contact form feedback (assets/contact-client.js) */
.contact-msg { border-radius: 16px; padding: 12px 16px; font-size: 14px; line-height: 1.5; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(255,255,255,.9); }
.contact-msg--error { border-color: rgba(255,90,90,.55); background: rgba(255,60,60,.12); color: #ffd6d6; }
.contact-msg--warn { border-color: rgba(255,190,60,.55); background: rgba(255,170,30,.12); color: #ffe6b3; }
.contact-msg--success { border-color: rgba(80,220,140,.55); background: rgba(40,200,110,.12); color: #c9f7de; }
#contact form { position: relative; }

/* ---- chooser sheet (download sources / checkout options): bottom sheet on phones, popover on desktop ---- */
html.kz-sheet-open { scrollbar-gutter: stable; }
.kz-sheet-root { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: kz-fade .18s ease-out both; }
.kz-sheet { width: 100%; max-height: min(86vh, 40rem); overflow: auto; overscroll-behavior: contain; outline: none; padding: .5rem 1rem calc(1.1rem + env(safe-area-inset-bottom)); border: 1px solid color-mix(in oklab, var(--color-white) 14%, transparent); border-bottom: 0; border-radius: 26px 26px 0 0; color: var(--color-white);
  background: color-mix(in oklab, var(--kz-bg-deep) 90%, var(--color-white) 5%); box-shadow: 0 -20px 60px rgba(0,0,0,.5); animation: kz-rise .26s cubic-bezier(.2,.8,.2,1) both; }
.kz-sheet__grab { width: 42px; height: 4px; border-radius: 4px; margin: .25rem auto .7rem; background: color-mix(in oklab, var(--color-white) 25%, transparent); }
.kz-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.kz-sheet__title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.kz-sheet__sub { margin-top: .2rem; font-size: .84rem; line-height: 1.45; opacity: .62; }
.kz-sheet__close { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 999px; font-size: 1.4rem; line-height: 1; color: inherit; cursor: pointer; border: 1px solid color-mix(in oklab, var(--color-white) 14%, transparent); background: color-mix(in oklab, var(--color-white) 6%, transparent); }
.kz-sheet__body { display: grid; gap: .6rem; }
.kz-sheet__row { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; padding: .8rem .9rem; border-radius: 18px; color: inherit; text-decoration: none; cursor: pointer; font: inherit;
  border: 1px solid color-mix(in oklab, var(--color-white) 11%, transparent); background: color-mix(in oklab, var(--color-white) 4.5%, transparent); transition: border-color .18s, background .18s, transform .18s; }
.kz-sheet__row:hover, .kz-sheet__row:focus-visible { border-color: color-mix(in srgb, var(--kz-accent) 60%, transparent); background: color-mix(in srgb, var(--kz-accent) 9%, transparent); outline: none; }
.kz-sheet__row:active { transform: scale(.985); }
.kz-sheet__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 14px; color: var(--kz-accent); background: color-mix(in srgb, var(--kz-accent) 12%, rgba(0,0,0,.35)); border: 1px solid color-mix(in srgb, var(--kz-accent) 35%, transparent); }
.kz-sheet__txt { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.kz-sheet__txt strong { font-size: .95rem; font-weight: 650; }
.kz-sheet__txt small { font-size: .8rem; line-height: 1.4; opacity: .62; }
.kz-sheet__meta, .kz-sheet__go { flex: none; font: 600 .7rem/1 ui-monospace, monospace; letter-spacing: .08em; opacity: .6; }
.kz-sheet__go { font-size: 1.3rem; }
.kz-pay { display: grid; gap: .8rem; }
.kz-pay__back { justify-self: start; cursor: pointer; font: inherit; font-size: .85rem; color: var(--kz-accent); background: none; border: 0; padding: .1rem 0; }
.kz-pay__sum { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding: .7rem .9rem; border-radius: 16px; background: color-mix(in oklab, var(--color-white) 5%, transparent); }
.kz-pay__method { display: grid; gap: .5rem; padding: .9rem; border-radius: 18px; border: 1px solid color-mix(in oklab, var(--color-white) 11%, transparent); background: color-mix(in oklab, var(--color-white) 4.5%, transparent); }
.kz-pay__method h4 { font-size: .95rem; font-weight: 700; }
.kz-pay__line { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .86rem; }
.kz-pay__line span { opacity: .6; } .kz-pay__line b { font-weight: 650; overflow-wrap: anywhere; word-break: normal; }
.kz-pay__line > div { min-width: 0; }
.kz-pay__copy { flex: none; cursor: pointer; font: 600 .74rem/1 inherit; padding: .4rem .7rem; border-radius: 999px; color: var(--kz-accent); background: color-mix(in srgb, var(--kz-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--kz-accent) 40%, transparent); }
.kz-pay__qr { width: 9rem; max-width: 100%; border-radius: 14px; background: #fff; padding: .4rem; justify-self: center; }
.kz-pay__note { font-size: .82rem; line-height: 1.5; opacity: .66; }
.kz-pay__proof { display: flex; flex-wrap: wrap; gap: .5rem; }
@keyframes kz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kz-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) and (pointer: fine) {
  .kz-sheet-root { align-items: center; padding: 1.5rem; }
  .kz-sheet { width: min(30rem, 100%); max-height: min(92vh, 46rem); border-bottom: 1px solid color-mix(in oklab, var(--color-white) 14%, transparent); border-radius: 26px; padding-bottom: 1.2rem; box-shadow: 0 30px 80px rgba(0,0,0,.55); animation-name: kz-pop; }
  .kz-sheet__grab { display: none; }
}
@keyframes kz-pop { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kz-sheet-root, .kz-sheet { animation: none; } .kz-sheet__row { transition: none; } }

.kz-sheet__instructions { white-space: pre-line; font-size: .86rem; line-height: 1.55; padding: .75rem .9rem; border-radius: 16px; color: color-mix(in oklab, var(--color-white) 82%, transparent);
  background: color-mix(in srgb, var(--kz-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--kz-accent) 28%, transparent); }