/* UZYTAK catalog layer (plan P2, 2026-10-05): grouped product mega-menu, mobile accordion, /pricing/ page, the
   Free vs Pro block and the dark theme for the PhotoPack-family product pages (pp- classes).
   Loaded last in <head> on every page by scripts/build-catalog.mjs. Uses the site theme tokens (--text, --surface,
   --line …) that switch with System / Light / Dark, so nothing here hard-codes a theme. */

/* ------------------------------------------------------------------ desktop mega-menu */
.product-menu-panel.uz-mega {
  position: fixed;
  top: calc(var(--header-height) - 4px);
  left: 50%;
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - var(--header-height) - 12px);
  padding: 16px 16px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  transform: translateX(-50%);
}
.product-menu-panel.uz-mega::before { display: none; }
.uz-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; }
.uz-mega-group { min-width: 0; }
.uz-mega-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 10px 4px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.uz-mega-title::before { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--uz-g, var(--text-muted)); content: ''; }
.uz-mega ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.product-menu-panel.uz-mega a.uz-mega-item {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
  grid-template-columns: 36px minmax(0, 1fr);
}
.product-menu-panel.uz-mega a.uz-mega-item:hover,
.product-menu-panel.uz-mega a.uz-mega-item:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); }
.product-menu-panel.uz-mega a.uz-mega-item[aria-current='page'] { background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: inset 3px 0 var(--uz-g, var(--text)); }
.uz-mega-item img { width: 36px; height: 36px; border-radius: 9px; }
.product-menu-panel.uz-mega strong { color: var(--text); font-size: 0.84rem; line-height: 1.3; }
.product-menu-panel.uz-mega small { margin-top: 1px; color: var(--text-muted); font-size: 0.72rem; line-height: 1.35; }
.product-menu-panel.uz-mega a.uz-mega-all {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding: 12px 10px 4px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 680;
  grid-template-columns: none;
}
.product-menu-panel.uz-mega a.uz-mega-all:hover { background: none; text-decoration: underline; }
.product-menu-panel.uz-mega a.uz-mega-all i { color: inherit; }
@media (max-width: 1099px) { .uz-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.desktop-nav { gap: 28px; }
@media (max-width: 1080px) { .desktop-nav { gap: 20px; } }

/* ------------------------------------------------------------------ mobile accordion */
.uz-macc { border-bottom: 1px solid var(--line); }
.uz-macc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 2px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.uz-macc > summary::-webkit-details-marker { display: none; }
.uz-macc > summary .uz-macc-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--uz-g, var(--text-muted)); }
.uz-macc > summary > span:first-child { display: flex; align-items: center; gap: 10px; }
.uz-macc > summary i { color: var(--text-muted); font-size: 1rem; transition: transform 180ms ease; }
.uz-macc[open] > summary i { transform: rotate(180deg); }
.uz-macc-list { display: grid; gap: 2px; padding: 0 0 12px; }
.mobile-navigation .uz-macc-list a {
  display: grid;
  align-items: center;
  justify-content: stretch;
  gap: 12px;
  padding: 9px 4px;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  grid-template-columns: 32px minmax(0, 1fr);
}
.mobile-navigation .uz-macc-list a[aria-current='page'] { background: color-mix(in srgb, var(--text) 9%, transparent); }
.uz-macc-list img { width: 32px; height: 32px; border-radius: 8px; }
.uz-macc-list strong, .uz-macc-list small { display: block; }
.uz-macc-list small { margin-top: 1px; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; line-height: 1.35; }

/* ------------------------------------------------------------------ /pricing/ */
.uz-pricing { padding: calc(var(--header-height) + 56px) 0 96px; color: var(--text); }
.uz-wrap { width: min(calc(100% - 40px), 1180px); margin-inline: auto; }
.uz-eyebrow { margin: 0 0 12px; color: var(--text-muted); font-size: 0.78rem; font-weight: 760; letter-spacing: 0.12em; text-transform: uppercase; }
.uz-pricing h1 { max-width: 20ch; margin: 0; font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; }
.uz-lead { max-width: 64ch; margin: 18px 0 0; color: var(--text-soft); font-size: 1.12rem; line-height: 1.6; }
.uz-vat { display: flex; gap: 12px; align-items: flex-start; max-width: 860px; margin: 28px 0 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; }
.uz-vat i { margin-top: 2px; color: var(--text); font-size: 1.15rem; }
.uz-pricing h2 { margin: 72px 0 8px; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 650; letter-spacing: -0.03em; }
.uz-group-label { display: flex; align-items: center; gap: 10px; margin: 34px 0 10px; color: var(--text-soft); font-size: 0.8rem; font-weight: 760; letter-spacing: 0.1em; text-transform: uppercase; }
.uz-group-label::before { width: 10px; height: 10px; border-radius: 50%; background: var(--uz-g); content: ''; }
.uz-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.uz-row {
  display: grid;
  align-items: center;
  gap: 18px 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr) 190px;
}
.uz-app { display: grid; align-items: center; gap: 14px; grid-template-columns: 48px minmax(0, 1fr); }
.uz-app img { width: 48px; height: 48px; border-radius: 12px; }
.uz-app h3 { margin: 0; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.uz-app h3 a { color: var(--text); }
.uz-app h3 a:hover { text-decoration: underline; }
.uz-app p { margin: 2px 0 0; color: var(--text-soft); font-size: 0.86rem; line-height: 1.4; }
.uz-cell-label { display: block; margin-bottom: 3px; color: var(--text-muted); font-size: 0.7rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; }
.uz-cell p { margin: 0; color: var(--text-soft); font-size: 0.9rem; line-height: 1.45; }
.uz-price { display: block; color: var(--text); font-family: var(--font-display); font-size: 1.2rem; font-weight: 750; }
.uz-price.uz-price-na { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; }
.uz-cell .uz-sub { margin-top: 2px; font-size: 0.84rem; }
.uz-side { display: grid; justify-items: start; gap: 8px; }
.uz-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); font-size: 0.76rem; font-weight: 650; white-space: nowrap; }
.uz-status::before { width: 8px; height: 8px; border-radius: 50%; background: #e0a32e; content: ''; }
.uz-status.is-live::before { background: #2fbf71; }
.uz-more { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 0.86rem; font-weight: 700; }
.uz-more:hover { text-decoration: underline; }
.uz-co { display: grid; gap: 18px; margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uz-co-card { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.uz-co-top { display: flex; align-items: center; gap: 14px; }
.uz-co-top img { width: 56px; height: 56px; border-radius: 14px; }
.uz-co-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.uz-co-card > p, .uz-co-top p { margin: 0; color: var(--text-soft); font-size: 0.95rem; line-height: 1.55; }
.uz-pill { align-self: flex-start; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 0.76rem; font-weight: 700; }
.uz-plans { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.uz-plans li { display: grid; align-items: baseline; gap: 2px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; grid-template-columns: minmax(0, 1fr) auto; }
.uz-plans strong { color: var(--text); font-size: 1rem; }
.uz-plans .uz-plan-sub { color: var(--text-muted); font-size: 0.82rem; }
.uz-plans .uz-plan-price { color: var(--text); font-family: var(--font-display); font-size: 1.25rem; font-weight: 750; text-align: right; }
.uz-plans .uz-plan-alt { color: var(--text-muted); font-size: 0.8rem; text-align: right; }
.uz-notes { display: grid; gap: 6px; margin: 0; padding: 0; color: var(--text-soft); font-size: 0.88rem; list-style: none; }
.uz-notes li { display: flex; gap: 8px; }
.uz-notes i { margin-top: 3px; color: var(--text); }
.uz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; min-height: 46px; margin-top: auto; padding: 10px 20px; border-radius: 10px; background: var(--text); color: var(--ink); font-weight: 750; }
.uz-btn:hover { opacity: 0.9; }
@media (max-width: 980px) {
  .uz-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .uz-app { grid-column: 1 / -1; }
  .uz-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .uz-co { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .uz-pricing { padding-top: calc(var(--header-height) + 36px); }
  .uz-wrap { width: calc(100% - 32px); }
  .uz-row { padding: 16px; grid-template-columns: 1fr; }
  .uz-co-card { padding: 20px; }
}

/* ------------------------------------------------------------------ Free vs Pro block (app pages without one) */
.uz-fp {
  --uzfp-card: var(--jp-card, var(--pp-card, var(--surface)));
  --uzfp-text: var(--jp-text, var(--pp-ink, var(--text)));
  --uzfp-muted: var(--jp-muted, var(--pp-muted, var(--text-soft)));
  --uzfp-line: var(--jp-line, var(--pp-line, var(--line)));
  --uzfp-accent: var(--jp-accent, var(--pp-blue-text, var(--text)));
  display: grid;
  gap: 16px;
  margin: 26px 0 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.uz-fp-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--uzfp-line); border-radius: 18px; background: var(--uzfp-card); }
.uz-fp-card.is-pro { border: 2px solid var(--uzfp-accent); }
.uz-fp-card h3 { margin: 0; color: var(--uzfp-text); font-size: 1.15rem; }
.uz-fp-price { margin: 0; color: var(--uzfp-text) !important; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
.uz-fp-price small { color: var(--uzfp-muted); font-size: 0.85rem; font-weight: 600; }
.uz-fp-card p:not(.uz-fp-price) { margin: 0; color: var(--uzfp-muted); line-height: 1.6; }
@media (max-width: 700px) { .uz-fp { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ PhotoPack-family pages follow the theme switch */
/* photopack.css draws these pages light only. The rules below route its fixed light colours through tokens (same values
   in light, so the light pages stay byte-for-byte the same visually) and the token blocks after them switch to dark. */
:root {
  --pp-blue-text: #2a63d6; --pp-strong: #0b1533; --pp-soft: #f8faff; --pp-soft-hover: #eef3ff; --pp-drop-line: #b9c6e4;
  --pp-thumb: #e9edf5; --pp-remove: #eef1f6; --pp-chip-pro: #f6f7fa; --pp-dashed: #c9d2e3; --pp-profeat-bg: #fbfcfe;
  --pp-result-bg: #e8f8f7; --pp-result-line: #b7e9e7; --pp-soon-bg: #e4e8f0; --pp-support-a: #fff7ec; --pp-support-b: #fff;
  --pp-support-line: #f1dcc0; --pp-scheme: light;
}
.pp-page { color-scheme: var(--pp-scheme); }
.pp-lang, .pp-badges li, .pp-chip, .pp-seg button, .pp-card, .pp-table, .pp-faq details { background: var(--pp-card); }
.ho-pair, .mt-pair, .ms-pair, .tl-pair, .wr-pair, .tm-teams { background: var(--pp-card); }
.pp-origin, .pp-partners { color: var(--pp-strong); }
.pp-eyebrow, .pp-tool h3, .pp-story .pp-story-sign, .pp-steps .pp-card::before, .pp-legal a { color: var(--pp-blue-text); }
.pp-drop { border-color: var(--pp-drop-line); background: var(--pp-soft); }
.pp-drop:hover, .pp-drop:focus-visible, .pp-drop.is-over { background: var(--pp-soft-hover); }
.pp-file img { background: var(--pp-thumb); }
.pp-remove { background: var(--pp-remove); color: var(--pp-ink); }
.pp-chip.is-pro { background: var(--pp-chip-pro); }
.pp-profeat button, .pp-fav-pro { border-color: var(--pp-dashed); background: var(--pp-profeat-bg); }
.pp-result { background: var(--pp-result-bg); border-color: var(--pp-result-line); color: var(--pp-ink); }
.pp-buy.pp-soon { background: var(--pp-soon-bg) !important; }
.pp-support { background: linear-gradient(135deg, var(--pp-support-a), var(--pp-support-b)); border-color: var(--pp-support-line); }
.pp-fav-controls input[type='color'] { background: var(--pp-card); }
.pp-upsell { background: var(--pp-card); color: var(--pp-ink); }
html:root[data-ft-theme='dark'] {
  --pp-bg: #0b1533; --pp-card: #151f36; --pp-line: #34435f; --pp-ink: #f3f5f8; --pp-muted: #b9c6df; --pp-faint: #9aa6bd;
  --pp-teal-text: #5ee0d8; --pp-blue-text: #8fb4ff; --pp-strong: #f3f5f8; --pp-soft: #101b35; --pp-soft-hover: #18264a;
  --pp-drop-line: #4a5a78; --pp-thumb: #22304d; --pp-remove: #22304d; --pp-chip-pro: #1c2943; --pp-dashed: #4a5a78;
  --pp-profeat-bg: #101b35; --pp-result-bg: #0f3a40; --pp-result-line: #1f6b70; --pp-soon-bg: #26324d;
  --pp-support-a: #2a2112; --pp-support-b: #151f36; --pp-support-line: #5a4628; --pp-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-ft-theme='light']) {
    --pp-bg: #0b1533; --pp-card: #151f36; --pp-line: #34435f; --pp-ink: #f3f5f8; --pp-muted: #b9c6df; --pp-faint: #9aa6bd;
    --pp-teal-text: #5ee0d8; --pp-blue-text: #8fb4ff; --pp-strong: #f3f5f8; --pp-soft: #101b35; --pp-soft-hover: #18264a;
    --pp-drop-line: #4a5a78; --pp-thumb: #22304d; --pp-remove: #22304d; --pp-chip-pro: #1c2943; --pp-dashed: #4a5a78;
    --pp-profeat-bg: #101b35; --pp-result-bg: #0f3a40; --pp-result-line: #1f6b70; --pp-soon-bg: #26324d;
    --pp-support-a: #2a2112; --pp-support-b: #151f36; --pp-support-line: #5a4628; --pp-scheme: dark;
  }
}

/* ------------------------------------------------------------------ "Support the team" made visible (2026-10-05) */
/* Header "♥ Support" link (desktop + mobile menu), homepage support block (.uz-give) and the small card at the end of
   app pages and /pricing/ (.uz-tip). All open the existing support window (support.js, [data-uzytak-support]). */
:root {
  --uz-rose: #ff9fb2; --uz-rose-strong: #ffb3c1; --uz-rose-ink: #2a0a12; --uz-rose-bg: rgb(255 159 178 / 0.12);
  --uz-rose-line: rgb(255 159 178 / 0.32); --uz-warm-a: rgb(255 143 163 / 0.16); --uz-warm-b: rgb(255 198 107 / 0.09);
}
html:root[data-ft-theme='light'] {
  --uz-rose: #b4233f; --uz-rose-strong: #b4233f; --uz-rose-ink: #fff; --uz-rose-bg: rgb(180 35 63 / 0.07);
  --uz-rose-line: rgb(180 35 63 / 0.3); --uz-warm-a: rgb(255 143 163 / 0.2); --uz-warm-b: rgb(255 198 107 / 0.22);
}
@media (prefers-color-scheme: light) {
  html:root:not([data-ft-theme='dark']) {
    --uz-rose: #b4233f; --uz-rose-strong: #b4233f; --uz-rose-ink: #fff; --uz-rose-bg: rgb(180 35 63 / 0.07);
    --uz-rose-line: rgb(180 35 63 / 0.3); --uz-warm-a: rgb(255 143 163 / 0.2); --uz-warm-b: rgb(255 198 107 / 0.22);
  }
}
.desktop-nav > a.uz-give-nav { gap: 6px; color: var(--uz-rose); }
.desktop-nav > a.uz-give-nav:hover, .desktop-nav > a.uz-give-nav.is-active { color: var(--uz-rose); }
.desktop-nav > a.uz-give-nav::after { background: var(--uz-rose); }
.uz-give-nav svg { width: 15px; height: 15px; flex: none; }
.uz-give-nav:focus-visible { outline: 2px solid var(--uz-rose); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 1023px) {
  .uz-give-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .desktop-nav > a.uz-give-nav { min-width: 32px; justify-content: center; }
  .desktop-nav > a.uz-give-nav svg { width: 17px; height: 17px; }
}
.mobile-navigation a.uz-give-mnav > span { display: inline-flex; align-items: center; gap: 10px; color: var(--uz-rose); }
.uz-give-mnav svg { width: 20px; height: 20px; flex: none; }

/* Homepage block — sits in .pr-page after the closing call to action. */
.pr-final:has(+ .uz-give) { padding-bottom: 28px; }
.uz-give { padding: 0 0 104px; }
.uz-give-box {
  display: grid;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--uz-rose-line);
  border-radius: 28px;
  background: radial-gradient(520px 260px at 0 0, var(--uz-warm-a), transparent 70%), radial-gradient(420px 240px at 100% 100%, var(--uz-warm-b), transparent 70%), var(--surface-raised);
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
}
.uz-give-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px !important; color: var(--uz-rose); font: 700 0.78rem/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.uz-give-eyebrow svg { width: 16px; height: 16px; }
.pr-page .uz-give h2 { max-width: 22ch; font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; }
.pr-page .uz-give-text { margin-top: 14px !important; color: var(--text-soft); font-size: 1.1rem; line-height: 1.6; }
.uz-give-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pr-btn.uz-give-primary { background: var(--uz-rose-strong); color: var(--uz-rose-ink); }
.pr-btn.uz-give-primary:hover { filter: brightness(1.05); }
.uz-give-actions svg { width: 16px; height: 16px; flex: none; }
.pr-page .uz-give-trust { margin-top: 16px !important; color: var(--text-muted); font-size: 0.86rem; line-height: 1.5; }
.uz-give-goal { padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.pr-page .uz-give-goal-word { color: var(--text-muted); font-size: 0.74rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.pr-page .uz-give-goal-name { margin-top: 8px !important; color: var(--text); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.pr-page .uz-give-goal-sum { margin-top: 4px !important; color: var(--text); font-family: var(--font-display); font-size: clamp(2.4rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.uz-give-goal-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--uz-rose); font-size: 0.92rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.uz-give-goal-link:hover { text-decoration-thickness: 2px; }
.uz-give :is(a):focus-visible { outline: 3px solid var(--ft-focus, #8fd3ff); outline-offset: 3px; }
@media (max-width: 860px) { .uz-give-box { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .uz-give { padding-bottom: 72px; }
  .uz-give-actions .pr-btn { width: 100%; }
  .uz-give-goal { padding: 20px; }
}

/* Small card at the end of app pages and /pricing/. Self-contained colours (site tokens), so it reads on every template.
   The wrapper's padding (not a margin) keeps the spacing inside <main>, so the page background continues under it. */
.uz-tip-wrap { display: block; padding: 12px 0 72px; }
.uz-pricing .uz-tip-wrap { padding-top: 48px; }
.uz-tip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  box-sizing: border-box;
  width: min(calc(100% - 32px), 880px);
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid var(--uz-rose-line);
  border-radius: 18px;
  background: radial-gradient(360px 160px at 0 0, var(--uz-warm-a), transparent 70%), var(--surface);
  color: var(--text);
  font-family: var(--font-body);
}
.uz-tip-ico { display: inline-grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--uz-rose-bg); color: var(--uz-rose); }
.uz-tip-ico svg { width: 20px; height: 20px; }
.uz-tip .uz-tip-text { flex: 1 1 240px; margin: 0; color: var(--text); font-size: 1rem; font-weight: 650; line-height: 1.45; }
.uz-tip .uz-tip-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--uz-rose-line); border-radius: 999px; background: var(--uz-rose-bg); color: var(--uz-rose); font-size: 0.92rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.uz-tip .uz-tip-btn:hover { border-color: var(--uz-rose); }
.uz-tip .uz-tip-btn:focus-visible { outline: 3px solid var(--ft-focus, #8fd3ff); outline-offset: 2px; }
@media (max-width: 480px) { .uz-tip .uz-tip-btn { width: 100%; } }
/* Cleaner is always dark: keep the card dark there too. */
.cl .uz-tip {
  --text: #f3f5f8; --surface: #151f36; --uz-rose: #ff9fb2; --uz-rose-bg: rgb(255 159 178 / 0.12);
  --uz-rose-line: rgb(255 159 178 / 0.32); --uz-warm-a: rgb(255 143 163 / 0.16);
}