/* ХИТ.ру design system (TMB-UI-SYSTEM-001). One file for every mini-app screen.
 * Colours come from Telegram themeParams (set by ui.js as --tg-*), with light/dark
 * fallbacks for MAX and the web. Pages use only the --ui-* tokens and the classes below. */

:root {
  /* brand */
  --ui-accent: #7c3aed;
  --ui-accent-text: #ffffff;
  /* light fallback */
  --ui-bg: var(--tg-bg, #ffffff);
  --ui-surface: var(--tg-surface, #f3f2f7);
  --ui-text: var(--tg-text, #16151a);
  --ui-hint: var(--tg-hint, #6b6878);
  --ui-line: rgba(0, 0, 0, .09);
  --ui-danger: #d92d43;
  --ui-ok: #168a4a;
  --ui-link: var(--tg-link, var(--ui-accent));

  /* type scale */
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-fs-xs: 12px; --ui-fs-s: 14px; --ui-fs-m: 16px; --ui-fs-l: 20px; --ui-fs-xl: 24px;
  /* spacing and shape */
  --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 24px; --ui-s6: 32px;
  --ui-r1: 8px; --ui-r2: 12px; --ui-r3: 16px;
  --ui-tap: 44px;
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .06);
}

:root[data-scheme="dark"] {
  --ui-bg: var(--tg-bg, #0f0e13);
  --ui-surface: var(--tg-surface, #1b1a22);
  --ui-text: var(--tg-text, #f2f1f6);
  --ui-hint: var(--tg-hint, #9d9aab);
  --ui-line: rgba(255, 255, 255, .1);
  --ui-danger: #ff5c70;
  --ui-ok: #3ccf7f;
  --ui-accent: #7c3aed;
  --ui-link: var(--tg-link, #b794ff);
  --ui-shadow: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ui {
  margin: 0; background: var(--ui-bg); color: var(--ui-text);
  font: var(--ui-fs-m)/1.45 var(--ui-font);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
.ui a { color: var(--ui-link); }
.ui :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* layout */
.ui-page { max-width: 640px; margin: 0 auto; padding: var(--ui-s4); }
.ui-stack > * + * { margin-top: var(--ui-s3); }
.ui-row { display: flex; align-items: center; gap: var(--ui-s2); }
.ui-grow { flex: 1; min-width: 0; }

/* text */
.ui-h1 { font-size: var(--ui-fs-xl); font-weight: 700; margin: 0 0 var(--ui-s2); line-height: 1.2; }
.ui-h2 { font-size: var(--ui-fs-l); font-weight: 650; margin: var(--ui-s5) 0 var(--ui-s3); line-height: 1.25; }
.ui-hint { color: var(--ui-hint); font-size: var(--ui-fs-s); }
.ui-small { font-size: var(--ui-fs-xs); color: var(--ui-hint); }

/* surfaces */
.ui-card { background: var(--ui-surface); border-radius: var(--ui-r3); padding: var(--ui-s4); }
.ui-list { background: var(--ui-surface); border-radius: var(--ui-r3); overflow: hidden; }
.ui-list-row {
  display: flex; align-items: center; gap: var(--ui-s3); min-height: var(--ui-tap);
  padding: var(--ui-s3) var(--ui-s4); border: 0; background: none; width: 100%;
  color: inherit; font: inherit; text-align: left;
}
.ui-list-row + .ui-list-row { border-top: 1px solid var(--ui-line); }
button.ui-list-row { cursor: pointer; }

/* buttons */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-s2);
  min-height: var(--ui-tap); padding: 0 var(--ui-s4); border-radius: var(--ui-r2);
  border: 0; font: 600 var(--ui-fs-m)/1 var(--ui-font); cursor: pointer;
  background: var(--ui-accent); color: var(--ui-accent-text); text-decoration: none;
}
.ui-btn--secondary { background: var(--ui-surface); color: var(--ui-text); }
.ui-btn--ghost { background: none; color: var(--ui-link); }
.ui-btn--danger { background: none; color: var(--ui-danger); }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn[disabled] { opacity: .45; cursor: default; }
.ui-icon-btn {
  width: var(--ui-tap); height: var(--ui-tap); border-radius: 50%; border: 0;
  background: none; color: inherit; display: inline-grid; place-items: center; cursor: pointer;
}

/* chips */
.ui-chips { display: flex; gap: var(--ui-s2); overflow-x: auto; scrollbar-width: none; }
.ui-chips::-webkit-scrollbar { display: none; }
.ui-chip {
  flex: none; min-height: 36px; padding: 0 var(--ui-s3); border-radius: 999px;
  border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-text);
  font: 500 var(--ui-fs-s)/1 var(--ui-font); cursor: pointer;
}
.ui-chip[aria-pressed="true"] { background: var(--ui-accent); color: var(--ui-accent-text); border-color: transparent; }

/* forms */
.ui-field { display: block; }
.ui-field > span { display: block; font-size: var(--ui-fs-s); color: var(--ui-hint); margin-bottom: var(--ui-s1); }
.ui-input, .ui-textarea, .ui-select {
  width: 100%; min-height: var(--ui-tap); padding: var(--ui-s3); border-radius: var(--ui-r2);
  border: 1px solid var(--ui-line); background: var(--ui-bg); color: var(--ui-text);
  font: var(--ui-fs-m)/1.4 var(--ui-font);
}
.ui-textarea { min-height: 112px; resize: vertical; }
.ui-check { display: flex; gap: var(--ui-s3); align-items: flex-start; font-size: var(--ui-fs-s); }
.ui-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ui-accent); flex: none; }

/* tab bar (max 5 items) */
.ui-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--ui-bg); border-top: 1px solid var(--ui-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.ui-tab {
  min-height: 56px; border: 0; background: none; color: var(--ui-hint); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 500 11px/1.1 var(--ui-font);
}
.ui-tab i { font-size: 22px; }
.ui-tab[aria-selected="true"] { color: var(--ui-accent); }

/* bottom sheet */
.ui-sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; }
.ui-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 90vh; overflow: auto;
  background: var(--ui-bg); border-radius: var(--ui-r3) var(--ui-r3) 0 0;
  padding: var(--ui-s4) var(--ui-s4) calc(var(--ui-s4) + env(safe-area-inset-bottom));
}

/* states */
.ui-empty, .ui-error { text-align: center; padding: var(--ui-s6) var(--ui-s4); color: var(--ui-hint); }
.ui-error { color: var(--ui-danger); }
.ui-badge { display: inline-block; padding: 2px var(--ui-s2); border-radius: 999px; font-size: var(--ui-fs-xs); background: var(--ui-surface); color: var(--ui-hint); }
.ui-badge--ok { color: var(--ui-ok); }
.ui-badge--accent { background: var(--ui-accent); color: var(--ui-accent-text); }
.ui-toast {
  position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 32px); z-index: 60; padding: var(--ui-s3) var(--ui-s4); border-radius: var(--ui-r2);
  background: var(--ui-text); color: var(--ui-bg); font-size: var(--ui-fs-s); box-shadow: var(--ui-shadow);
}
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .ui * { transition: none !important; animation: none !important; } }

/* ── ХИТ.ру v3 skins (HITRU-PLAYER-V3-INTEGRATION-001) ─────────────────────────────
 * ui.js puts data-skin="gold|lime" and data-lite="true|false" on <html> (localStorage
 * hitru.skin / hitru.lite, shared with the player and its frames). Without ui.js (the
 * legal pages) nothing below applies. Fonts: Unbounded (display) + Golos Text (body). */
:root[data-skin] {
  --ui-font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --v3-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --v3-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-r1: 10px; --ui-r2: 14px; --ui-r3: 20px;
  color-scheme: dark;
}
:root[data-skin="gold"] {
  --ui-bg: #120c07; --v3-bg2: #1b130b; --ui-surface: rgba(255, 255, 255, .06); --ui-line: rgba(255, 255, 255, .14);
  --ui-text: #f6ead8; --ui-hint: #b9a58a; --ui-accent: #e3b45a; --ui-accent-text: #1a1206; --ui-link: #f3d38a;
  --v3-accent2: #8a5a24; --v3-glow: 227, 180, 90; --ui-danger: #ff8f8f; --ui-ok: #8fdcae; --ui-shadow: none;
}
:root[data-skin="lime"] {
  --ui-bg: #0d0d12; --v3-bg2: #15151d; --ui-surface: rgba(255, 255, 255, .06); --ui-line: rgba(255, 255, 255, .14);
  --ui-text: #f2f2f6; --ui-hint: #9a9aab; --ui-accent: #c8f169; --ui-accent-text: #0d0d12; --ui-link: #d9f79a;
  --v3-accent2: #8b5cf6; --v3-glow: 200, 241, 105; --ui-danger: #ff8f8f; --ui-ok: #8fdcae; --ui-shadow: none;
}
:root[data-skin] body.ui {
  background:
    radial-gradient(120% 55% at 15% -10%, rgba(var(--v3-glow), .16), transparent 60%),
    radial-gradient(90% 50% at 110% 20%, color-mix(in srgb, var(--v3-accent2) 22%, transparent), transparent 60%),
    var(--ui-bg);
  background-attachment: fixed;
}
:root[data-skin] .ui-h1, :root[data-skin] .ui-h2 { font-family: var(--v3-display); letter-spacing: .01em; }
:root[data-skin] .ui-h1 { font-size: 22px; }
:root[data-skin] .ui-h2 { font-size: 17px; }
:root[data-skin] .ui-card, :root[data-skin] .ui-list, :root[data-skin] .tier, :root[data-skin] .item, :root[data-skin] .doc {
  border: 1px solid var(--ui-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
:root[data-skin] .tier { border-width: 2px; transition: transform 300ms var(--v3-ease), border-color 300ms ease; }
:root[data-skin] .tier.sel { border-color: var(--ui-accent); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(var(--v3-glow), .22); }
:root[data-skin] .ui-btn { border-radius: 999px; box-shadow: 0 8px 24px rgba(var(--v3-glow), .28); transition: transform 120ms ease; }
:root[data-skin] .ui-btn--secondary, :root[data-skin] .ui-btn--ghost, :root[data-skin] .ui-btn--danger { box-shadow: none; border: 1px solid var(--ui-line); }
:root[data-skin] .ui-btn:active { transform: scale(.94); }
:root[data-skin] .ui-input, :root[data-skin] .ui-textarea, :root[data-skin] .ui-select { background: rgba(0, 0, 0, .28); }
:root[data-skin] .ui-chip, :root[data-skin] .chip { border-radius: 999px; }
/* Lite mode: no blur, solid glass, one light spot */
:root[data-lite="true"] .ui-card, :root[data-lite="true"] .ui-list, :root[data-lite="true"] .tier,
:root[data-lite="true"] .item, :root[data-lite="true"] .doc { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(28, 20, 12, .94); }
:root[data-lite="true"][data-skin="lime"] .ui-card, :root[data-lite="true"][data-skin="lime"] .ui-list,
:root[data-lite="true"][data-skin="lime"] .tier, :root[data-lite="true"][data-skin="lime"] .item { background: rgba(22, 22, 30, .94); }
:root[data-lite="true"] body.ui { background: radial-gradient(120% 55% at 15% -10%, rgba(var(--v3-glow), .12), transparent 60%), var(--ui-bg); }

/* «Песня на заказ | Лицензии»: two separate pages, one segmented switch on both */
.v3-seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 0 0 var(--ui-s4);
  border-radius: 999px; background: var(--ui-surface); border: 1px solid var(--ui-line);
}
.v3-seg::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-accent) 70%, #fff), var(--ui-accent));
  box-shadow: 0 6px 18px rgba(var(--v3-glow, 124, 58, 237), .35);
  transition: transform 350ms var(--v3-ease, ease);
}
.v3-seg[data-active="1"]::before { transform: translateX(100%); }
.ui .v3-seg a, .v3-seg a {
  position: relative; z-index: 1; min-height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--ui-hint); text-decoration: none; font-weight: 600; font-size: var(--ui-fs-s);
}
.ui .v3-seg a[aria-current="page"], .v3-seg a[aria-current="page"] { color: var(--ui-accent-text); }
@media (prefers-reduced-motion: reduce) { .v3-seg::before, :root[data-skin] .tier { transition: none; } :root[data-skin] .tier.sel { transform: none; } }