*, *::before, *::after { box-sizing: border-box; }

/* Self-hosted Akrobat (the real Figma typeface) + Bebas Neue Cyrillic
   for the display headings. Files are embedded via go:embed and served
   from /static/fonts/. One family "Akrobat" with proper weights so the
   browser picks the right .otf by font-weight; the figma-* vars below
   just set the family + weight. */
@font-face { font-family: "Akrobat"; src: url(/static/fonts/Akrobat-ExtraLight.otf) format("opentype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url(/static/fonts/Akrobat-Light.otf) format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url(/static/fonts/Akrobat-Regular.otf) format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url(/static/fonts/Akrobat-SemiBold.otf) format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url(/static/fonts/Akrobat-Bold.otf) format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url(/static/fonts/Akrobat-ExtraBold.otf) format("opentype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url(/static/fonts/Akrobat-Black.otf) format("opentype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Bebas Neue Cyrillic"; src: url(/static/fonts/BebasNeueCyrillic.ttf) format("truetype"); font-weight: 400; font-display: swap; }
/* Back-compat aliases: older rules reference these explicit names. */
@font-face { font-family: "Akrobat-Bold"; src: url(/static/fonts/Akrobat-Bold.otf) format("opentype"); font-display: swap; }
@font-face { font-family: "Akrobat-Regular"; src: url(/static/fonts/Akrobat-Regular.otf) format("opentype"); font-display: swap; }
@font-face { font-family: "Akrobat-Light"; src: url(/static/fonts/Akrobat-Light.otf) format("opentype"); font-display: swap; }
@font-face { font-family: "Akrobat-ExtraLight"; src: url(/static/fonts/Akrobat-ExtraLight.otf) format("opentype"); font-display: swap; }
:root {
  --bg: #eef3ff;
  --bg-soft: rgba(255,255,255,0.82);
  --text: #172036;
  --muted: #66708d;
  --line: rgba(145, 161, 204, 0.3);
  --line-strong: rgba(124, 147, 206, 0.45);
  --blue: #7298ff;
  --blue-strong: #4169d8;
  --blue-soft: #edf3ff;
  --green-soft: #edf6e9;
  --green-line: #afc6a7;
  --shadow: 0 18px 48px rgba(73, 96, 149, 0.14);
}
body {
  margin: 0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(136, 167, 255, 0.35), transparent 28%),
    radial-gradient(circle at top right, rgba(146, 215, 198, 0.25), transparent 22%),
    linear-gradient(180deg, var(--bg) 0%, #f9fbff 100%);
  color: var(--text);
  min-height: 100dvh;
  position: relative;
}
.admin-page {
  background: #f3f4f6;
}
.admin-page .page-glow { display: none; }
.admin-page .admin-shell {
  width: min(1180px, calc(100vw - 32px));
  padding: 28px 0 56px;
}
.admin-page .topbar,
.admin-page .panel,
.admin-page .track-row,
.admin-page .checkout-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
}
.admin-page .topbar {
  align-items: flex-end;
}
.admin-page .brand-block { max-width: 720px; }
.admin-page .eyebrow { color: #6b7280; }
.admin-page .muted,
.admin-page .hashtags { color: #6b7280; }
.admin-page .primary-btn {
  background: #2563eb;
  box-shadow: none;
}
.admin-page .secondary-btn {
  background: #f3f4f6;
  color: #111827;
}
.admin-page .pro-btn {
  background: #eef6ef;
  color: #1f5130;
  border: 1px solid #cde2d1;
}
.admin-page .primary-btn:hover,
.admin-page .secondary-btn:hover,
.admin-page .pro-btn:hover {
  transform: none;
}
.admin-page .search-input,
.admin-page .textarea,
.admin-page .token-input,
.admin-page select {
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #ffffff;
}
.admin-page .search-input:focus,
.admin-page .textarea:focus,
.admin-page .token-input:focus,
.admin-page select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.admin-page .admin-grid {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.admin-page .admin-create-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.admin-page .admin-create-content {
  display: grid;
  gap: 12px;
  align-content: start;
}
.admin-page .admin-create-card h2 {
  min-height: 40px;
  display: flex;
  align-items: center;
  margin: 0;
}
.admin-page .admin-action-row {
  padding-top: 4px;
}
.admin-page .admin-action-row .primary-btn,
.admin-page .admin-action-row .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-page .asset-preview,
.admin-page .preview-card,
.admin-page .track-preview-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f9fafb;
  padding: 14px;
}
.admin-page .asset-preview {
  margin: 8px 0 0;
  min-height: 128px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.admin-page .hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-page .file-upload-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px dashed #d1d5db;
  border-radius: 14px;
  background: #f9fafb;
  min-height: 88px;
  max-width: 100%;
  overflow: hidden;
  min-width: 0;
}
.admin-page #asset-file-button {
  flex: 0 0 auto;
}
.admin-page .file-upload-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
  width: 0;
  overflow: hidden;
}
.admin-page .file-upload-name {
  display: block;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.admin-page .admin-preview-grid {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 14px;
}
.admin-page .preview-image {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #ffffff;
}
.admin-page .preview-label {
  display: inline-block;
  margin-bottom: 10px;
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.admin-page .preview-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.admin-page .compact-meta span {
  font-size: 13px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-page .preview-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #6b7280;
  background: #ffffff;
}
.admin-page .compact-empty {
  min-height: 72px;
}
.admin-page .preview-audio {
  width: 100%;
}
.admin-page .admin-pack-card {
  border-radius: 16px;
}
.admin-page .admin-track-row {
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.admin-page .track-preview-card {
  min-width: 240px;
  display: grid;
  gap: 10px;
}
.admin-page .admin-inline-create {
  border-top: 1px solid #e5e7eb;
}
.admin-page .code-block {
  background: #111827;
  color: #e5eefb;
  min-height: 180px;
  margin: 0;
}
.admin-page #asset-result.hidden {
  display: none;
}
.admin-page .section-title-row strong,
.admin-page h1,
.admin-page h2,
.admin-page h3 {
  color: #111827;
}
.admin-page .checkbox-row {
  margin: 0;
}
.admin-page .topbar-actions {
  align-items: stretch;
}
.admin-page .token-input {
  min-width: 320px;
}
.admin-page .panel {
  padding: 20px;
}
.admin-page .admin-pack-card .topbar-actions,
.admin-page .admin-track-row .track-actions {
  flex-wrap: wrap;
}
.page-glow {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none;
}
.page-glow-left { background: rgba(114, 152, 255, 0.24); top: 30px; left: -80px; }
.page-glow-right { background: rgba(142, 210, 194, 0.22); top: 160px; right: -90px; }
.toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
  display: grid;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
}
.toast {
  border-radius: 14px;
  padding: 12px 14px;
  color: #111827;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(145, 161, 204, 0.24);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast-visible {
  opacity: 1;
  transform: translateY(0);
}
.toast-success { border-left: 4px solid #22c55e; }
.toast-error { border-left: 4px solid #ef4444; }
.toast-info { border-left: 4px solid #3b82f6; }
.app-shell, .admin-shell {
  width: min(960px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 20px 0 52px;
  position: relative;
  z-index: 1;
}
.topbar, .panel, .pack-card, .track-row, .checkout-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.topbar {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar h1, .panel h2, .hero-panel h2 { margin: 0; }
.brand-block { max-width: 620px; }
.topbar-actions, .search-row, .section-title-row, .track-actions, .checkout-actions { display: flex; gap: 10px; align-items: center; }
.panel { margin-top: 16px; padding: 18px; }
.search-box { position: relative; flex: 1; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.hero-copy { display: flex; flex-direction: column; gap: 10px; }
.hero-copy h2 { font-size: clamp(24px, 4vw, 34px); line-height: 1.08; }
.hero-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.stat-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.6);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card strong { font-size: 18px; }
.badge-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  color: var(--blue-strong);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.search-input, .textarea, .token-input, select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #d7dff1;
  background: rgba(255,255,255,.95);
  padding: 12px 14px;
  font: inherit;
}
.search-input:focus, .textarea:focus, .token-input:focus, select:focus {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(114, 152, 255, 0.12);
}
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 12;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 48px rgba(69, 91, 141, 0.18);
}
.suggestion-item {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(145, 161, 204, 0.18);
  background: transparent;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: rgba(114, 152, 255, 0.1); }
.suggestion-kind {
  text-transform: uppercase;
  color: var(--blue-strong);
  font-size: 12px;
  letter-spacing: .08em;
}
.textarea { min-height: 90px; resize: vertical; }
.primary-btn, .secondary-btn, .pro-btn {
  border: none;
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.primary-btn:hover, .secondary-btn:hover, .pro-btn:hover { transform: translateY(-1px); }
.primary-btn { background: linear-gradient(135deg, var(--blue), var(--blue-strong)); color: #fff; box-shadow: 0 10px 24px rgba(79, 114, 214, .26); }
.secondary-btn { background: var(--blue-soft); color: #24428a; }
.pro-btn { background: var(--green-soft); color: #3d6d3c; border: 1px solid var(--green-line); }
.packs-grid, .admin-packs-list { display: grid; gap: 14px; margin-top: 18px; }
.pack-card {
  padding: 16px;
  display: grid;
  gap: 16px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pack-card:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(64, 90, 153, 0.16); }
.pack-card-summary {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  cursor: pointer;
}
.pack-card-expanded {
  border-color: rgba(114, 152, 255, 0.36);
}
.pack-inline-detail {
  border-top: 1px solid rgba(145, 161, 204, 0.22);
  padding-top: 16px;
}
.cover-thumb {
  width: 112px;
  height: 112px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #2958d8, #9db6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.cover-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hashtags, .muted { color: var(--muted); }
.pack-card-header, .track-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pack-card-header h3 { margin: 0 0 6px; font-size: 28px; }
.pack-card-header p { margin: 0; }
.status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.status-row p { margin: 0; }
.track-row {
  padding: 14px 16px;
  margin-top: 10px;
  border-radius: 20px;
  border: 1px solid rgba(138, 155, 195, 0.24);
}
.search-track-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(138, 155, 195, 0.24);
  background: rgba(255,255,255,.76);
}
/* Visual affordance for cards that act as a single click target. The
   whole search-track card opens its pack on click; the hover/focus
   styles tell the user that's a real action and not just a label. */
.clickable-card { cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.clickable-card:hover { background: rgba(255,255,255,.92); border-color: rgba(74, 110, 224, 0.45); }
.clickable-card:focus-visible { outline: 2px solid var(--blue-strong); outline-offset: 2px; }
.clickable-card:active { transform: scale(0.997); }
/* Single composite Create-pack form: stacked input slots, native file
   pickers (no fancy custom buttons -- the client wanted "open, upload,
   post and that's it"). The price row uses two-column grid that
   collapses on narrow screens. */
.create-pack-form { gap: 14px; }
.upload-slot { display: grid; gap: 6px; }
.upload-slot-label { font-size: 13px; font-weight: 600; color: #1f2937; display: grid; gap: 6px; }
.upload-slot input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(138, 155, 195, 0.42);
  background: rgba(255,255,255,.86);
  font: inherit;
}
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .price-row { grid-template-columns: 1fr; } }
/* Minimal pack row: thumbnail | meta | actions. No nested editors. */
.admin-pack-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
}
.admin-pack-row .preview-image { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.admin-pack-row .preview-empty { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(138,155,195,.15); font-size: 12px; color: #6b7280; }
.admin-pack-row-meta { display: grid; gap: 4px; min-width: 0; }
.admin-pack-row-meta strong { font-size: 16px; }
.admin-pack-row-actions { display: flex; gap: 8px; }
.admin-pack-detail { grid-column: 1 / -1; }
.admin-pack-detail .admin-track-list { margin-top: 12px; }
.admin-pack-detail .admin-track-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px; }
@media (max-width: 540px) {
  .admin-pack-row { grid-template-columns: 64px minmax(0, 1fr); }
  .admin-pack-row .preview-image,
  .admin-pack-row .preview-empty { width: 64px; height: 64px; }
  .admin-pack-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .admin-pack-detail .admin-track-row { display: grid; }
}
.search-tracks-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.track-main { flex: 1; }
.track-main strong { display: block; margin-bottom: 4px; }
.track-progress {
  width: 100%;
  accent-color: var(--blue-strong);
  margin-top: 10px;
}
.hidden { display: none; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.admin-pack-card { display: grid; gap: 16px; }
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.admin-wide { grid-column: 1 / -1; }
.admin-track-list { display: grid; gap: 12px; }
.admin-track-row { align-items: flex-start; }
.admin-track-fields {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.admin-inline-create {
  border-top: 1px solid rgba(145, 161, 204, 0.24);
  padding-top: 14px;
}
.payment-return {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(145, 161, 204, 0.24);
  border-radius: 20px;
  padding: 18px 20px;
  background: rgba(255,255,255,.78);
}
.payment-return h2 { margin-bottom: 6px; }
.payment-return-paid { color: #205b2d; }
.payment-return-pending { color: #2f4e8a; }
.payment-return-failed, .payment-return-canceled { color: #892f2f; }
.payment-return-actions { display: flex; gap: 10px; }
.payment-return-copy { display: grid; gap: 8px; }
.payment-return-topline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.payment-return-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.payment-return-badge-paid { background: rgba(34, 197, 94, 0.12); color: #166534; }
.payment-return-badge-pending { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.payment-return-badge-failed,
.payment-return-badge-canceled { background: rgba(239, 68, 68, 0.12); color: #991b1b; }
.subscription-sheet {
  position: fixed;
  inset: 0;
  z-index: 25;
}
.subscription-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
}
.subscription-sheet-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px));
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(145, 161, 204, 0.24);
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
}
.subscription-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.subscription-plan {
  border: 1px solid rgba(145, 161, 204, 0.24);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.subscription-plan:hover {
  border-color: rgba(114, 152, 255, 0.42);
  box-shadow: 0 12px 30px rgba(79, 114, 214, .12);
}
.code-block {
  white-space: pre-wrap;
  background: #101728;
  color: #d3ddff;
  border-radius: 16px;
  padding: 12px;
  min-height: 120px;
}
.checkbox-row { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.search-panel { position: sticky; top: 12px; z-index: 3; }
.section-title-row { justify-content: space-between; }
.checkout-card h1 { margin-top: 6px; }
.checkout-page { min-height: 100dvh; display: grid; place-items: center; }
.checkout-card { padding: 24px; width: min(420px, calc(100vw - 24px)); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; color: #6a79a6; font-size: 12px; }
@media (max-width: 640px) {
  .hero-panel { grid-template-columns: 1fr; }
  .pack-card-summary { grid-template-columns: 1fr; }
  .cover-thumb { width: 100%; height: 180px; }
  .search-row, .topbar, .track-row, .status-row, .pack-card-header, .payment-return, .search-track-card { flex-direction: column; align-items: stretch; }
  .subscription-plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .admin-page .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-page .admin-preview-grid {
    grid-template-columns: 1fr;
  }
  .admin-page .token-input {
    min-width: 0;
    width: 100%;
  }
}

body:not(.admin-page) {
  --bg-color: #3b4252;
  --shadow-light: #4c556a;
  --shadow-dark: #252b36;
  --text: #eceff4;
  --muted: #a4b0c2;
  --line: rgba(236, 239, 244, 0.08);
  --line-strong: rgba(235, 203, 139, 0.34);
  --accent-blue: #0044cc;
  --accent-orange: #ebcb8b;
  --blue: #0044cc;
  --blue-strong: #1f62ff;
  --blue-soft: #384257;
  --green-soft: #3f4656;
  --green-line: rgba(235, 203, 139, 0.35);
  --shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
  background:
    radial-gradient(circle at 12% 10%, rgba(76, 85, 106, 0.42), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(235, 203, 139, 0.10), transparent 25%),
    linear-gradient(135deg, #434c5e 0%, #2e3440 100%);
  color: var(--text);
  overflow-x: hidden;
}
body:not(.admin-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  z-index: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.24) 1px, transparent 0),
    radial-gradient(circle at 3px 5px, rgba(0,0,0,.18) 1px, transparent 0);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: soft-light;
}
body:not(.admin-page) .page-glow-left { background: rgba(0, 68, 204, 0.22); }
body:not(.admin-page) .page-glow-right { background: rgba(235, 203, 139, 0.14); }
body:not(.admin-page) .app-shell {
  width: min(430px, calc(100vw - 28px));
  padding: 18px 0 34px;
}
body:not(.admin-page) .neu-outset,
body:not(.admin-page) .topbar,
body:not(.admin-page) .panel,
body:not(.admin-page) .pack-card,
body:not(.admin-page) .track-row,
body:not(.admin-page) .checkout-card {
  background: var(--bg-color);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
  backdrop-filter: none;
}
body:not(.admin-page) .neu-inset,
body:not(.admin-page) .search-box {
  background: var(--bg-color);
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}
body:not(.admin-page) .topbar {
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  border-radius: 28px;
}
body:not(.admin-page) .brand-lockup {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: start;
}
body:not(.admin-page) .mono-logo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 82px;
  min-height: 92px;
  color: #c2cad8;
  text-shadow: 1px 1px 0 rgba(255,255,255,.18), -1px -1px 0 rgba(23,27,36,.78);
  filter: drop-shadow(4px 5px 6px rgba(21,25,33,.45));
}
body:not(.admin-page) .mono-word {
  grid-column: 1 / -1;
  font-weight: 900;
  font-size: 36px;
  line-height: .82;
  letter-spacing: -.12em;
  text-transform: lowercase;
}
body:not(.admin-page) .mono-play {
  width: 36px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 34px;
  transform: translateY(-2px);
}
body:not(.admin-page) .brand-block h1 {
  margin: 2px 0 8px;
  color: var(--text);
  font-size: 30px;
  letter-spacing: -.04em;
}
body:not(.admin-page) .brand-block .muted {
  font-size: 13px;
  line-height: 1.45;
}
body:not(.admin-page) .eyebrow {
  color: #c8d0dd;
  font-size: 10px;
  letter-spacing: .18em;
}
body:not(.admin-page) .muted,
body:not(.admin-page) .hashtags {
  color: var(--muted);
}
body:not(.admin-page) .topbar-actions {
  align-items: center;
  gap: 8px;
}
body:not(.admin-page) .primary-btn,
body:not(.admin-page) .secondary-btn,
body:not(.admin-page) .pro-btn {
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.06);
  background: var(--bg-color);
  color: var(--text);
  box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease;
}
body:not(.admin-page) .primary-btn:hover,
body:not(.admin-page) .secondary-btn:hover,
body:not(.admin-page) .pro-btn:hover,
body:not(.admin-page) .pack-card:hover {
  transform: translateY(-2px);
  box-shadow: 7px 7px 14px var(--shadow-dark), -7px -7px 14px var(--shadow-light);
}
body:not(.admin-page) .primary-btn:active,
body:not(.admin-page) .secondary-btn:active,
body:not(.admin-page) .pro-btn:active,
body:not(.admin-page) .pack-card:active {
  transform: translateY(0);
  box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
}
body:not(.admin-page) .pro-btn {
  color: var(--accent-orange);
  font-weight: 800;
}
body:not(.admin-page) .search-action-btn,
body:not(.admin-page) .secondary-btn.icon-action-btn,
body:not(.admin-page) .track-download-btn {
  color: #d9e4ff;
  background: linear-gradient(145deg, #064fd9, #0039aa);
}
body:not(.admin-page) .primary-btn,
body:not(.admin-page) .buy-pack-btn,
body:not(.admin-page) .track-buy-btn {
  color: #2e3440;
  background: linear-gradient(145deg, #f1d79c, var(--accent-orange));
  font-weight: 900;
}
body:not(.admin-page) .panel {
  border-radius: 26px;
  padding: 18px;
  margin-top: 16px;
}
body:not(.admin-page) .hero-panel {
  grid-template-columns: 1fr;
  gap: 18px;
}
body:not(.admin-page) .hero-copy h2 {
  color: var(--text);
  font-size: 24px;
}
body:not(.admin-page) .badge-pill {
  background: var(--bg-color);
  color: var(--accent-orange);
  border-color: rgba(235,203,139,.25);
  box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
}
body:not(.admin-page) .stat-card {
  border-radius: 20px;
  padding: 16px;
  color: var(--text);
}
body:not(.admin-page) .stat-card strong {
  color: var(--accent-orange);
}
body:not(.admin-page) .search-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  top: 10px;
}
body:not(.admin-page) .search-row {
  gap: 12px;
}
body:not(.admin-page) .search-box {
  display: flex;
  align-items: center;
  min-height: 54px;
  border-radius: 18px;
  padding: 0 12px;
}
body:not(.admin-page) .search-icon {
  color: #d6deea;
  font-size: 23px;
  line-height: 1;
  margin-right: 6px;
}
body:not(.admin-page) .search-input {
  border: none;
  background: transparent;
  color: var(--text);
  padding: 14px 8px;
}
body:not(.admin-page) .search-input::placeholder {
  color: #c4cedd;
  text-transform: none;
}
body:not(.admin-page) .search-input:focus {
  box-shadow: none;
}
body:not(.admin-page) .search-suggestions {
  background: #343b4a;
  border-color: rgba(255,255,255,.08);
  box-shadow: 8px 8px 16px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
}
body:not(.admin-page) .suggestion-item {
  color: var(--text);
}
body:not(.admin-page) .suggestion-item:hover {
  background: rgba(0,68,204,.24);
}
body:not(.admin-page) .status-row {
  display: grid;
  gap: 6px;
  border-radius: 20px;
  padding: 14px 16px;
  margin-top: 14px;
}
body:not(.admin-page) .status-row p:first-child {
  color: var(--text);
  font-weight: 800;
}
body:not(.admin-page) .packs-grid {
  gap: 16px;
  margin-top: 18px;
}
body:not(.admin-page) .pack-card {
  border-radius: 22px;
  padding: 15px;
  overflow: hidden;
}
body:not(.admin-page) .pack-card-free {
  background: linear-gradient(145deg, rgba(0,68,204,.92), rgba(34,79,176,.72));
  box-shadow: 5px 5px 12px #1f2633, -5px -5px 12px rgba(79,92,119,.95);
}
body:not(.admin-page) .pack-card-pro {
  background: linear-gradient(180deg, #666e7d 0%, #3d4148 100%);
}
body:not(.admin-page) .pack-card-summary {
  grid-template-columns: 106px 1fr;
  gap: 16px;
  align-items: center;
}
body:not(.admin-page) .cover-thumb {
  width: 106px;
  height: 106px;
  border-radius: 12px;
  box-shadow: inset 3px 3px 7px rgba(23,27,36,.4), inset -2px -2px 6px rgba(255,255,255,.16);
}
body:not(.admin-page) .cover-thumb-free {
  background: #0044cc;
}
body:not(.admin-page) .cover-thumb-pro {
  background: linear-gradient(145deg, #0b1522, #8d9cad);
}
body:not(.admin-page) .cover-thumb span {
  color: rgba(255,255,255,.82);
}
body:not(.admin-page) .pack-card-header {
  align-items: center;
}
body:not(.admin-page) .pack-copy {
  min-width: 0;
}
body:not(.admin-page) .pack-card-header h3,
body:not(.admin-page) .pack-title {
  color: var(--text);
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
body:not(.admin-page) .pack-card-header p {
  margin: 0;
  font-size: 13px;
}
body:not(.admin-page) .hashtags {
  margin-top: 20px !important;
}
body:not(.admin-page) .badge-free {
  color: #fff;
  font-weight: 900;
}
body:not(.admin-page) .icon-action-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
}
body:not(.admin-page) .buy-pack-btn {
  white-space: nowrap;
  font-size: 12px;
}
body:not(.admin-page) .pack-inline-detail {
  border-top: 1px solid rgba(0, 68, 204, .55);
  margin-top: 14px;
  padding-top: 14px;
}
body:not(.admin-page) .pack-detail-header {
  align-items: start;
}
body:not(.admin-page) .pack-detail-header h2 {
  color: var(--text);
  margin-bottom: 8px;
  font-size: 21px;
  text-transform: uppercase;
}
body:not(.admin-page) .track-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
body:not(.admin-page) .track-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 16px;
  padding: 10px 0;
  background: transparent;
  box-shadow: none;
}
body:not(.admin-page) .track-play-btn {
  width: 26px;
  min-height: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
  color: #fff;
  font-size: 19px;
}
body:not(.admin-page) .track-play-btn:disabled {
  opacity: .42;
}
body:not(.admin-page) .track-main strong {
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .03em;
}
body:not(.admin-page) .track-main .hashtags {
  display: none;
}
body:not(.admin-page) .track-progress {
  accent-color: #aab2bf;
  height: 4px;
  margin-top: 8px;
}
body:not(.admin-page) .track-buy-btn {
  min-height: 28px;
  padding: 6px 0 6px 10px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: 10px;
}
body:not(.admin-page) .track-download-btn {
  width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 0;
  border-radius: 10px;
  box-shadow: none;
  background: transparent;
  color: #dce4ef;
  font-size: 18px;
}
body:not(.admin-page) .search-track-card {
  color: var(--text);
  background: var(--bg-color);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
}
body:not(.admin-page) .subscription-sheet {
  background: rgba(22,25,33,.72);
}
body:not(.admin-page) .subscription-card {
  background: var(--bg-color);
  color: var(--text);
  border-color: rgba(255,255,255,.08);
  box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 16px var(--shadow-light);
}
@media (max-width: 640px) {
  body:not(.admin-page) .topbar {
    grid-template-columns: 1fr;
  }
  body:not(.admin-page) .brand-lockup {
    grid-template-columns: 82px 1fr;
  }
  body:not(.admin-page) .topbar-actions {
    justify-content: flex-end;
  }
  body:not(.admin-page) .search-row {
    flex-direction: row;
    align-items: center;
  }
  body:not(.admin-page) .pack-card-summary {
    grid-template-columns: 106px 1fr;
  }
  body:not(.admin-page) .cover-thumb {
    width: 106px;
    height: 106px;
  }
  body:not(.admin-page) .track-row {
    grid-template-columns: 28px 1fr auto;
  }
}

body:not(.admin-page) {
  --bg-color: #3f485b;
  --card-bg: rgba(128, 139, 159, .72);
  --card-bg-strong: rgba(115, 126, 147, .82);
  --text: #f1f3f7;
  --muted: #d1d7e1;
  --accent-orange: #ebcb8b;
  --shadow-light: rgba(118, 130, 153, .72);
  --shadow-dark: rgba(20, 25, 34, .72);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.6), transparent 38%),
    radial-gradient(circle at 90% 90%, rgba(178,184,196,.55), transparent 42%),
    #f1f2f4;
  min-height: 100dvh;
}
body:not(.admin-page)::before {
  opacity: .18;
  z-index: 1;
}
body:not(.admin-page) .page-glow {
  display: none;
}
body:not(.admin-page) .app-shell {
  position: relative;
  z-index: 2;
  width: min(420px, calc(100vw - 36px));
  min-height: calc(100dvh - 48px);
  margin: 24px auto;
  padding: 30px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 6%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, #424b5d 0%, #28313d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 20px 34px rgba(11, 14, 20, .32);
  overflow: hidden;
}
body:not(.admin-page) .app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.25) 1px, transparent 0),
    radial-gradient(circle at 2px 4px, rgba(0,0,0,.28) 1px, transparent 0);
  background-size: 5px 5px, 9px 9px;
  mix-blend-mode: soft-light;
}
body:not(.admin-page) .topbar,
body:not(.admin-page) .search-panel,
body:not(.admin-page) .panel,
body:not(.admin-page) .packs-grid {
  position: relative;
  z-index: 2;
}
body:not(.admin-page) .topbar {
  display: grid;
  grid-template-columns: 136px 1fr;
  align-items: center;
  gap: 18px;
  padding: 0;
  margin: 0 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body:not(.admin-page) .mono-logo {
  width: 122px;
  height: 114px;
  display: grid;
  grid-template-columns: 70px 52px;
  grid-template-rows: 48px 62px;
  align-items: center;
  justify-items: start;
  color: #b8c1d2;
  filter: drop-shadow(4px 5px 4px rgba(12, 16, 24, .36));
}
body:not(.admin-page) .mono-letter {
  font-size: 45px;
  line-height: .75;
  font-weight: 900;
  letter-spacing: -.16em;
  color: #bcc5d5;
  text-shadow: 2px 2px 2px rgba(20, 24, 32, .55), -1px -1px 1px rgba(255,255,255,.45);
}
body:not(.admin-page) .mono-m {
  grid-column: 1;
  grid-row: 1;
}
body:not(.admin-page) .mono-o {
  grid-column: 2;
  grid-row: 1;
  margin-left: -28px;
}
body:not(.admin-page) .mono-n {
  grid-column: 2;
  grid-row: 2;
  margin-left: -13px;
  align-self: end;
}
body:not(.admin-page) .mono-play {
  grid-column: 1;
  grid-row: 2;
  width: 54px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #bcc5d5;
  font-size: 47px;
  line-height: 1;
  text-shadow: 2px 2px 2px rgba(20, 24, 32, .55), -1px -1px 1px rgba(255,255,255,.45);
}
body:not(.admin-page) .topbar-actions {
  justify-content: end;
  align-items: center;
  gap: 10px;
}
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pro-btn,
body:not(.admin-page) .secondary-btn,
body:not(.admin-page) .primary-btn {
  min-height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, #8d96a8, #737d91);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.22), 5px 6px 10px rgba(21,26,36,.28), -2px -2px 7px rgba(255,255,255,.14);
}
body:not(.admin-page) .pro-btn {
  color: #f1d59b;
}
body:not(.admin-page) .search-panel {
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body:not(.admin-page) .search-row {
  display: block;
}
body:not(.admin-page) .search-box {
  min-height: 40px;
  border-radius: 6px;
  padding: 0 16px;
  background: rgba(137, 149, 170, .74);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.08), inset 3px 3px 7px rgba(36,42,54,.22);
}
body:not(.admin-page) .search-icon {
  font-size: 22px;
  color: #d9dfe9;
  opacity: .8;
  margin-right: 12px;
}
body:not(.admin-page) .search-input {
  padding: 10px 0;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
body:not(.admin-page) .search-input::placeholder {
  color: #eef2f7;
  font-size: 10px;
  font-weight: 800;
}
body:not(.admin-page) .status-row {
  display: none;
}
body:not(.admin-page) .packs-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
body:not(.admin-page) .pack-card {
  border-radius: 7px;
  padding: 15px;
  border: 0;
  background: linear-gradient(160deg, rgba(141,153,174,.78), rgba(106,116,136,.78));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.12), 5px 7px 14px rgba(20,24,33,.26);
}
body:not(.admin-page) .pack-card-pro {
  background: linear-gradient(180deg, rgba(125,136,156,.74) 0%, rgba(48,52,55,.86) 100%);
}
body:not(.admin-page) .pack-card-free {
  background: linear-gradient(160deg, rgba(141,153,174,.80), rgba(116,127,148,.84));
}
body:not(.admin-page) .pack-card-summary {
  grid-template-columns: 104px 1fr;
  gap: 16px;
  align-items: start;
}
body:not(.admin-page) .cover-thumb {
  width: 104px;
  height: 104px;
  border-radius: 7px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.16), 3px 4px 9px rgba(17,21,29,.24);
}
body:not(.admin-page) .pack-card-content {
  position: relative;
  min-height: 104px;
}
body:not(.admin-page) .pack-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
body:not(.admin-page) .pack-title,
body:not(.admin-page) .pack-card-header h3 {
  color: #fff;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
body:not(.admin-page) .pack-card-header p {
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.25;
}
body:not(.admin-page) .hashtags {
  color: rgba(255,255,255,.55);
  margin-top: 48px !important;
  font-size: 14px;
}
body:not(.admin-page) .pack-symbol-btn {
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(255,255,255,.76);
  font-size: 27px;
  line-height: 1;
  box-shadow: none;
}
body:not(.admin-page) .pack-pro-mark {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--figma-font-bold);
  color: var(--figma-fg);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
body:not(.admin-page) .pack-inline-detail {
  border-top: 0;
  margin-top: 22px;
  padding-top: 0;
}
body:not(.admin-page) .pack-detail-header {
  display: none;
}
body:not(.admin-page) .track-list {
  gap: 14px;
  margin-top: 0;
}
body:not(.admin-page) .track-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body:not(.admin-page) .track-play-btn {
  width: 20px;
  min-height: 20px;
  height: 20px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: 19px;
}
body:not(.admin-page) .track-main strong {
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
body:not(.admin-page) .track-progress {
  width: 100%;
  height: 5px;
  margin-top: 4px;
  accent-color: rgba(255,255,255,.66);
}
body:not(.admin-page) .track-buy-btn,
body:not(.admin-page) .track-download-btn {
  padding: 0;
  min-height: 20px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
}
body:not(.admin-page) .search-track-card {
  border-radius: 7px;
  background: rgba(128, 139, 159, .72);
}
body:not(.admin-page) .subscription-sheet {
  z-index: 50;
  background: rgba(13, 16, 22, .62);
}
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .subscription-card {
  width: min(390px, calc(100vw - 32px));
  border-radius: 20px;
  background: linear-gradient(180deg, #424b5d 0%, #303846 100%);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  box-shadow: 12px 16px 28px rgba(11,14,20,.38), inset 1px 1px 0 rgba(255,255,255,.11);
}
body:not(.admin-page) .guide-sheet-card h2 {
  margin-top: 16px;
  color: #fff;
}
body:not(.admin-page) .guide-stats {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
body:not(.admin-page) .stat-card {
  border-radius: 20px;
  padding: 16px;
  background: rgba(57,66,83,.72);
  box-shadow: 5px 7px 14px rgba(20,24,33,.28), inset 1px 1px 0 rgba(255,255,255,.08);
}
body:not(.admin-page) .stat-card strong {
  color: var(--accent-orange);
}
@media (min-width: 641px) {
  body:not(.admin-page) {
    display: grid;
    place-items: start center;
    padding: 36px 24px;
  }
  body:not(.admin-page) .app-shell {
    width: 440px;
    min-height: auto;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 24px 48px rgba(35, 42, 58, .22), 0 6px 12px rgba(35, 42, 58, .14);
  }
}
@media (max-width: 640px) {
  body:not(.admin-page) {
    background: linear-gradient(180deg, #424b5d 0%, #28313d 100%);
  }
  body:not(.admin-page) .app-shell {
    width: 100vw;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
    padding: 30px;
    box-shadow: none;
  }
  body:not(.admin-page) .topbar {
    grid-template-columns: 128px 1fr;
  }
  body:not(.admin-page) .topbar-actions {
    justify-content: end;
  }
  body:not(.admin-page) .guide-btn,
  body:not(.admin-page) .pro-btn {
    min-height: 38px;
    padding: 0 18px;
  }
  body:not(.admin-page) .pack-card-summary {
    grid-template-columns: 104px 1fr;
  }
}

/* cleanup overrides v3 start */
body:not(.admin-page) .mono-logo {
  width: 128px;
  height: 96px;
  display: grid;
  grid-template-columns: 62px 66px;
  grid-template-rows: 46px 50px;
  column-gap: 0;
  row-gap: 0;
  align-items: end;
  justify-items: center;
  color: #c0c8d6;
  filter: drop-shadow(3px 4px 3px rgba(12, 15, 22, .42));
  padding: 0;
}
body:not(.admin-page) .mono-letter,
body:not(.admin-page) .mono-play {
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #c0c8d6;
  text-shadow:
    2px 2px 0 rgba(20, 24, 32, .55),
    -1px -1px 0 rgba(255, 255, 255, .42);
  margin: 0;
  padding: 0;
}
body:not(.admin-page) .mono-m { grid-column: 1; grid-row: 1; justify-self: end; margin-right: -2px; }
body:not(.admin-page) .mono-o { grid-column: 2; grid-row: 1; justify-self: start; margin-left: -2px; }
body:not(.admin-page) .mono-play {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  font-size: 48px;
  line-height: .9;
  margin-right: -2px;
}
body:not(.admin-page) .mono-n { grid-column: 2; grid-row: 2; justify-self: start; margin-left: -2px; }

body:not(.admin-page) .topbar {
  grid-template-columns: 132px 1fr;
  gap: 18px;
  align-items: center;
}
body:not(.admin-page) .topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
body:not(.admin-page) #dev-auth-button {
  display: none;
}
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pro-btn {
  min-width: 80px;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e6ebf3;
  background: linear-gradient(180deg, #6d7585 0%, #4c5361 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .22),
    inset -1px -1px 0 rgba(0, 0, 0, .25),
    4px 5px 8px rgba(18, 22, 30, .35);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
body:not(.admin-page) .guide-btn:hover,
body:not(.admin-page) .pro-btn:hover {
  transform: translateY(-1px);
}
body:not(.admin-page) .guide-btn:active,
body:not(.admin-page) .pro-btn:active {
  transform: translateY(0);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, .35),
    inset -2px -2px 4px rgba(255, 255, 255, .14);
}
body:not(.admin-page) .pro-btn {
  color: #f2d59b;
  background: linear-gradient(180deg, #767b85 0%, #4d4c4a 100%);
}

body:not(.admin-page) .pack-symbol-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #d7dce5;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  user-select: none;
  pointer-events: none;
}

body:not(.admin-page) .pack-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 14px;
  margin-top: -6px;
}
body:not(.admin-page) .pack-detail-hashtags {
  color: var(--muted);
}
body:not(.admin-page) .pack-meta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e6ebf3;
  background: transparent;
  cursor: pointer;
}
body:not(.admin-page) .pack-download-chip {
  color: #d7dce5;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14);
}
body:not(.admin-page) .pack-unlock-chip {
  color: #1f2530;
  background: #e6ebf3;
}
body:not(.admin-page) .pack-pro-chip {
  color: #f2d59b;
  cursor: default;
}
/* cleanup overrides v3 end */

/* ---------------------------------------------------------------
   Mockup-match pass (reference image, 2026-05-04)
   Tightens logo kerning/emboss, adds gold halo to PRO button,
   normalises pack card spacing and track rows to the reference.
   --------------------------------------------------------------- */
body:not(.admin-page) .app-shell {
  background:
    radial-gradient(circle at 18% 6%, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(180deg, #3e4656 0%, #2a323f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 22px 38px rgba(9, 12, 18, .36);
  border-radius: 14px;
}
body:not(.admin-page) .app-shell::before {
  opacity: .18;
  background-size: 4px 4px, 7px 7px;
}

/* -- Logo: tighter letter pair "mo" / "▶n" with stronger emboss -- */
body:not(.admin-page) .mono-logo {
  width: 138px;
  height: 104px;
  grid-template-columns: 66px 72px;
  grid-template-rows: 50px 54px;
  align-items: center;
  justify-items: center;
  filter: drop-shadow(3px 4px 2px rgba(10, 13, 20, .5));
  margin-left: 4px;
}
body:not(.admin-page) .mono-letter,
body:not(.admin-page) .mono-play {
  font-size: 58px;
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .82;
  color: #b9c1d2;
  text-shadow:
    2px 2px 0 rgba(16, 20, 28, .65),
    -1px -1px 0 rgba(255, 255, 255, .45),
    1px 3px 3px rgba(10, 14, 20, .35);
}
body:not(.admin-page) .mono-m {
  justify-self: end;
  margin-right: -10px;
}
body:not(.admin-page) .mono-o {
  justify-self: start;
  margin-left: -10px;
}
body:not(.admin-page) .mono-play {
  justify-self: end;
  font-size: 52px;
  margin-right: -6px;
  line-height: .9;
}
body:not(.admin-page) .mono-n {
  justify-self: start;
  margin-left: -6px;
}

/* -- Top pills: GUIDE neutral, PRO with gold halo -- */
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pro-btn {
  min-width: 82px;
  height: 38px;
  padding: 0 22px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #e9edf4;
  background: linear-gradient(180deg, #7a8293 0%, #545c6c 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .22),
    inset -1px -1px 0 rgba(0, 0, 0, .28),
    3px 4px 7px rgba(14, 18, 26, .38);
}
body:not(.admin-page) .pro-btn {
  color: #f1d59b;
  background: linear-gradient(180deg, #7c8292 0%, #4c4b49 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 220, 160, .28),
    inset -1px -1px 0 rgba(0, 0, 0, .30),
    3px 4px 7px rgba(14, 18, 26, .38),
    0 0 0 1px rgba(235, 203, 139, .28),
    0 0 14px rgba(235, 203, 139, .22);
}
body:not(.admin-page) .pro-btn:hover {
  box-shadow:
    inset 1px 1px 0 rgba(255, 220, 160, .28),
    inset -1px -1px 0 rgba(0, 0, 0, .30),
    3px 4px 9px rgba(14, 18, 26, .38),
    0 0 0 1px rgba(235, 203, 139, .38),
    0 0 20px rgba(235, 203, 139, .32);
}

/* -- Search bar: slightly taller, rounder, muted text -- */
body:not(.admin-page) .search-box {
  min-height: 44px;
  border-radius: 10px;
  padding: 0 16px;
  background: rgba(132, 144, 166, .62);
  box-shadow:
    inset 2px 2px 5px rgba(20, 25, 34, .35),
    inset -1px -1px 0 rgba(255, 255, 255, .10);
}
body:not(.admin-page) .search-icon {
  font-size: 18px;
  opacity: .75;
}
body:not(.admin-page) .search-input,
body:not(.admin-page) .search-input::placeholder {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #e7ebf3;
}
body:not(.admin-page) .search-input::placeholder {
  color: rgba(231, 235, 243, .82);
}

/* -- Pack card: tighter spacing, hashtag pinned near bottom -- */
body:not(.admin-page) .pack-card {
  border-radius: 10px;
  padding: 14px;
}
body:not(.admin-page) .pack-card-summary {
  grid-template-columns: 104px 1fr;
  gap: 16px;
  align-items: stretch;
}
body:not(.admin-page) .cover-thumb {
  width: 104px;
  height: 104px;
  border-radius: 8px;
}
body:not(.admin-page) .pack-card-content {
  position: relative;
  min-height: 104px;
  display: flex;
  flex-direction: column;
}
body:not(.admin-page) .pack-card-header {
  align-items: start;
}
body:not(.admin-page) .pack-title,
body:not(.admin-page) .pack-card-header h3 {
  font-size: 17px;
  letter-spacing: .01em;
  margin-bottom: 4px;
}
body:not(.admin-page) .pack-card-header p {
  font-size: 13px;
  line-height: 1.28;
  color: rgba(255, 255, 255, .78);
}
body:not(.admin-page) .pack-copy {
  display: flex;
  flex-direction: column;
  min-height: 104px;
  min-width: 0;
}
body:not(.admin-page) .pack-copy .hashtags {
  margin-top: auto !important;
  padding-top: 14px;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}
body:not(.admin-page) .pack-symbol-btn,
body:not(.admin-page) .pack-symbol-toggle {
  color: rgba(255, 255, 255, .78);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

/* -- Expanded detail: meta row (hashtag + pack action) -- */
/* When a pack is expanded the mockup shows hashtag + action chip on a
   single row (replacing the summary hashtag), then the track list. */
body:not(.admin-page) .pack-card-expanded .pack-copy .hashtags {
  display: none;
}
body:not(.admin-page) .pack-inline-detail {
  margin-top: 0;
  padding-top: 0;
}
body:not(.admin-page) .pack-detail-meta {
  padding: 4px 2px 12px;
  margin-top: -28px;
}
body:not(.admin-page) .pack-detail-hashtags {
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}
body:not(.admin-page) .pack-pro-chip {
  color: #f1d59b;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .16em;
}
body:not(.admin-page) .pack-download-chip {
  color: #e6ebf3;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  letter-spacing: .12em;
  padding: 0;
}

/* -- Track rows: minimal, uppercase, download/buy on right -- */
body:not(.admin-page) .track-list {
  gap: 14px;
  margin-top: 6px;
}
body:not(.admin-page) .track-row {
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  padding: 0;
}
body:not(.admin-page) .track-play-btn {
  color: #f4f6fa;
  font-size: 16px;
}
body:not(.admin-page) .track-main strong {
  font-size: 11px;
  letter-spacing: .08em;
}
body:not(.admin-page) .track-progress {
  height: 3px;
  margin-top: 6px;
  accent-color: rgba(255, 255, 255, .55);
}
body:not(.admin-page) .track-buy-btn {
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  padding: 0;
}
body:not(.admin-page) .track-download-btn {
  color: #dde2ec;
  font-size: 16px;
  padding: 0;
  width: 22px;
  height: 22px;
  min-height: 22px;
  background: transparent;
  box-shadow: none;
}

/* -- Hide feedback/status noise on the WebApp shell (mockup shows none) -- */
body:not(.admin-page) #app-feedback,
body:not(.admin-page) #session-state {
  display: none;
}
body:not(.admin-page) .status-row {
  display: none;
}

/* ===============================================================
   v4 — Figma-accurate pass (file Артем, node 2076-215).
   Hard-overrides everything the earlier neumorphic/mockup passes
   got wrong:
     - solid dark background is replaced with a glassmorphic card
       stack on top of a single unified page gradient
     - pack/search cards use rgba(255,255,255,0.16) + backdrop-blur
     - GUIDE/PRO pills share the same translucent white pill, no
       gold halo; PRO gets the #FEE5C6 text colour only
     - logo is a 2×2 geometric composition of white silhouettes at
       ~30–55% opacity (Figma vectors)
     - track row: solid white square rotated 45° as "play", 11px
       progress bar at 43% white, uppercase bold title
   All sizes are scaled from 900px Figma → 440px WebApp shell
   (factor ≈ 0.49) with tap-target safe minimums (≥36px).
   =============================================================== */

:root {
  /* Exact tokens sampled from the Figma "ЦВЕТА ТЕМНАЯ ТЕМА" colour bar.
     Semantic names mirror the Russian labels in the spec:
       ФОН=bg  ТЕКСТ=text  ПЛАШКА=plate  ОБВОДКА=border
       ЗНАЧОК ПРОИГРЫВАТЕЛЯ=player  ЦВЕТ ДОРОЖКИ=track  */
  --c-bg: #0D1014;
  --c-text: #F2EEE6;
  /* Figma "плашки_темные" = #161B21 (was #151A20). */
  --c-plate: #161B21;
  --c-border: #505A68;
  /* Figma's card border is a thin 1.06px line on a blurred, semi-
     transparent panel — it reads as a faint hairline. On our opaque
     plate a full-alpha 1px is too heavy (doc #23), so surfaces use
     this softened token instead. */
  --c-border-soft: color-mix(in srgb, var(--c-border) 55%, transparent);
  --c-player: #A8A39A;
  --c-track: #565756;

  /* Back-compat aliases — every earlier rule references these. They now
     resolve to the exact Figma tokens, so the whole UI re-skins from
     one place and flips correctly in light mode (override block below). */
  --figma-fg: var(--c-text);
  --figma-gold: #fee5c6;
  --figma-orange: #e85d2b;
  --figma-card-bg: var(--c-plate);
  --figma-pill-bg: var(--c-plate);
  --figma-progress: var(--c-track);
  /* Catalog surfaces, scaled from Figma (catalog, dark) at ~0.49:
     card/cover 21.2px→10px, search 16.96px→8px. Less rounded than
     before per doc #1/#2. Cover tracks the card radius (identical
     in Figma). */
  --figma-radius-card: 10px;
  --figma-radius-cover: 0px;
  --figma-radius-search: 8px;
  --figma-blur: blur(50px) brightness(1.04) saturate(1.05);
  /* Real self-hosted typefaces. Body = Akrobat (weight picks the .otf);
     display headings = Bebas Neue Cyrillic (the tall caps in Figma). */
  --figma-font: 'Akrobat', system-ui, sans-serif;
  --figma-font-bold: 'Akrobat', system-ui, sans-serif;
  --figma-font-regular: 'Akrobat', system-ui, sans-serif;
  --figma-font-light: 'Akrobat', system-ui, sans-serif;
  --figma-font-extralight: 'Akrobat', system-ui, sans-serif;
  --figma-display: 'Bebas Neue Cyrillic', 'Akrobat', sans-serif;

  /* Icon sources — DARK theme pulls straight from the "тёмная тема"
     export folder. The light-theme block below retargets the same
     vars to "светлая тема". Used as CSS masks, so only the shape
     (alpha) matters; the element's background tints them per theme. */
  --ic-play: url("/static/icons/темная тема/Polygon 2.png");
  --ic-plus: url("/static/icons/темная тема/Black.png");
  --ic-minus: url("/static/icons/темная тема/Black-1.png");
  --ic-download: url("/static/icons/темная тема/Black-3.png");
  --ic-download-pack: url("/static/icons/темная тема/download-pack.svg");
  --ic-folder: url("/static/icons/темная тема/Black-4.png");
  --ic-search: url("/static/icons/темная тема/search.svg");
}

/* LIGHT theme = "ЦВЕТА СВЕТЛАЯ ТЕМА" colour bar, exact values. */
body.theme-light:not(.admin-page) {
  --c-bg: #FFFFF4;
  --c-text: #151A20;
  --c-plate: #FCFAF2;
  --c-border: #A79B8C;
  --c-player: #505A68;
  --c-track: #DDD6CA;
  /* Icon sources — LIGHT theme pulls from the "светлая тема" folder.
     Note the download/download-pack/play filenames differ from the
     dark export, so each is mapped explicitly. */
  --ic-play: url("/static/icons/светлая тема/Polygon 1.png");
  --ic-plus: url("/static/icons/светлая тема/Black.png");
  --ic-minus: url("/static/icons/светлая тема/Black-1.png");
  --ic-download: url("/static/icons/светлая тема/Black-2.png");
  --ic-download-pack: url("/static/icons/светлая тема/download-pack.svg");
  --ic-folder: url("/static/icons/светлая тема/Black-4.png");
  --ic-search: url("/static/icons/светлая тема/search.svg");
}

body:not(.admin-page) {
  font-family: var(--figma-font);
  /* Figma background image — dark blue-grey gradient with subtle
     grain texture. Falls back to a CSS gradient approximation
     if the image fails to load. */
  background:
    url(/static/bg.jpg) center top / cover no-repeat fixed,
    linear-gradient(175deg, #525e72 0%, #3a3f4d 28%, #232830 55%, #141618 100%);
  min-height: 100dvh;
}
body:not(.admin-page)::before {
  /* Fine grain noise matching the subtle texture in the bg image */
  opacity: .06;
  background-size: 3px 3px, 5px 5px;
}

body:not(.admin-page) .app-shell {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  /* v76: lift the top content higher — the 22px shell + 18px topbar
     top padding stacked to ~40px ("отступ сверху раздражает"). */
  padding: 12px 20px 32px;
  width: min(440px, 100vw);
  margin: 0 auto;
}
body:not(.admin-page) .app-shell::before {
  display: none;
}

/* ---------- Top bar: logo + GUIDE/PRO pills --------------------- */
body:not(.admin-page) .topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 4px 0 18px;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* Logo — inline SVG scaled from 221×191 Figma px.
   The SVG contains 4 vector paths: m (top-left), o (top-right ring),
   play triangle (bottom-left), and n (bottom-right). All white at
   30% opacity matching the Figma spec. */
body:not(.admin-page) .mono-logo {
  width: 108px;
  height: 93px;
  display: block;
  padding: 0;
  margin-left: 2px;
}
body:not(.admin-page) .mono-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Hide text-based logo elements if present (backwards compat) */
body:not(.admin-page) .mono-letter,
body:not(.admin-page) .mono-play {
  display: none;
}

/* Top-right pills: Figma spec says BOTH pills share the same
   translucent white bg. GUIDE text uses a sans (Manrope 600),
   PRO text uses the cream/gold #FEE5C6. No shadow, no glow. */
body:not(.admin-page) .topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
body:not(.admin-page) #dev-auth-button {
  display: none;
}
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pro-btn {
  min-width: 84px;
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--figma-pill-bg);
  backdrop-filter: var(--figma-blur);
  -webkit-backdrop-filter: var(--figma-blur);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.32),
    inset -1px 0 33px rgba(0, 0, 0, 0.11);
  font-family: var(--figma-font);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--figma-fg);
  cursor: pointer;
  transition: background .18s ease, transform .14s ease;
}
body:not(.admin-page) .guide-btn {
  font-family: 'Manrope-SemiBold', 'Manrope', sans-serif;
  font-weight: 600;
}
body:not(.admin-page) .pro-btn {
  font-family: var(--figma-font-bold);
  color: var(--figma-gold);
  font-weight: 700;
}
body:not(.admin-page) .guide-btn:hover,
body:not(.admin-page) .pro-btn:hover {
  background: rgba(255, 255, 255, 0.30);
  transform: translateY(-1px);
}
body:not(.admin-page) .guide-btn:active,
body:not(.admin-page) .pro-btn:active {
  background: rgba(255, 255, 255, 0.20);
  transform: translateY(0);
}

/* ---------- Search bar ----------------------------------------- */
body:not(.admin-page) .search-panel {
  /* Same gap below the search bar as between pack cards (.packs-grid
     gap) — Figma spaces search→card and card→card equally (doc #7). */
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body:not(.admin-page) .search-row {
  display: block;
}
body:not(.admin-page) .search-box {
  min-height: 42px;
  padding: 0 18px;
  gap: 12px;
  background: var(--figma-card-bg);
  backdrop-filter: var(--figma-blur);
  -webkit-backdrop-filter: var(--figma-blur);
  border: 0;
  border-radius: var(--figma-radius-search);
  box-shadow: none;
}
body:not(.admin-page) .search-icon {
  font-size: 16px;
  color: rgba(255, 255, 255, .68);
  opacity: 1;
  margin: 0 4px 0 0;
}
body:not(.admin-page) .search-icon {
  font-size: 14px;
  color: rgba(255, 255, 255, .68);
  opacity: 1;
  margin: 0;
}
body:not(.admin-page) .search-input,
body:not(.admin-page) .search-input::placeholder {
  font-family: var(--figma-font-regular);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--figma-fg);
  text-transform: uppercase;
}
body:not(.admin-page) .search-input::placeholder {
  color: var(--figma-fg);
}

/* ---------- Pack cards ---------------------------------------- */
body:not(.admin-page) .packs-grid {
  display: grid;
  gap: 12px;
  margin-top: 0;
}
body:not(.admin-page) .pack-card {
  padding: 16px;
  border: 0;
  border-radius: var(--figma-radius-card);
  background: var(--figma-card-bg);
  backdrop-filter: var(--figma-blur);
  -webkit-backdrop-filter: var(--figma-blur);
  box-shadow: none;
}
body:not(.admin-page) .pack-card-pro,
body:not(.admin-page) .pack-card-free {
  /* Both variants share the same glassmorphic panel per Figma —
     free vs. pro is communicated via the title badge, not the bg. */
  background: var(--figma-card-bg);
}
body:not(.admin-page) .pack-card-summary {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body:not(.admin-page) .cover-thumb {
  width: 108px;
  height: 108px;
  border-radius: var(--figma-radius-card);
  box-shadow: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.10);
}
body:not(.admin-page) .cover-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body:not(.admin-page) .pack-card-content {
  position: relative;
  min-height: 108px;
  display: flex;
  flex-direction: column;
}
body:not(.admin-page) .pack-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  flex: 1;
}
body:not(.admin-page) .pack-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 108px;
}
body:not(.admin-page) .pack-title,
body:not(.admin-page) .pack-card-header h3 {
  font-family: var(--figma-font-bold);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--figma-fg);
  text-transform: uppercase;
  margin: 0 0 6px;
}
body:not(.admin-page) .pack-title .badge-free {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  margin-left: 4px;
  text-transform: uppercase;
}
body:not(.admin-page) .pack-card-header p {
  font-family: var(--figma-font-light);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.1;
  color: var(--figma-fg);
  text-transform: none;
  margin: 0;
}
body:not(.admin-page) .pack-copy .hashtags {
  margin-top: auto !important;
  padding-top: 14px;
  font-family: var(--figma-font-extralight);
  font-weight: 200;
  font-size: 15px;
  line-height: 1;
  color: var(--figma-fg);
  text-transform: none;
}

/* Toggle (+ / −) at top-right of the card — two thin white lines */
body:not(.admin-page) .pack-symbol-btn,
body:not(.admin-page) .pack-symbol-toggle {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--figma-font);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
  padding: 0;
  box-shadow: none;
  user-select: none;
  pointer-events: none;
}

/* ---------- Expanded pack detail ------------------------------ */
/* When expanded, the Figma shows hashtag + pack action on the same
   row that the collapsed card had for its hashtag, then the track
   list continues below. The summary's hashtag is hidden so the
   detail-meta replaces it cleanly. */
body:not(.admin-page) .pack-card-expanded .pack-copy .hashtags {
  display: none;
}
body:not(.admin-page) .pack-card-expanded .pack-pro-mark {
  display: none;
}
body:not(.admin-page) .pack-inline-detail {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
body:not(.admin-page) .pack-detail-header {
  display: none;
}
body:not(.admin-page) .pack-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  margin-top: -26px;  /* align with hashtag row of summary */
  margin-bottom: 14px;
}
body:not(.admin-page) .pack-detail-hashtags {
  font-family: var(--figma-font-extralight);
  font-weight: 200;
  font-size: 15px;
  color: var(--figma-fg);
  text-transform: none;
}
body:not(.admin-page) .pack-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--figma-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--figma-fg);
  cursor: pointer;
}
body:not(.admin-page) .pack-pro-chip {
  color: var(--figma-fg);   /* Figma: #FFFFFF, not gold, inside expanded pack */
  font-weight: 700;
  cursor: default;
}
body:not(.admin-page) .pack-download-chip {
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--figma-fg);
}
body:not(.admin-page) .pack-unlock-chip {
  color: var(--figma-fg);
  background: rgba(255, 255, 255, 0.22);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}

/* ---------- Track rows ---------------------------------------- */
/* Layout per Figma:
       ▶  TITLE ........................ BUY TRACK | PRO
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Progress bar runs the FULL width of the row, including
   under the play icon and actions. We achieve this by making
   the row position-relative and absolutely-positioning the
   progress slider along its bottom edge. */
body:not(.admin-page) .track-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
}
body:not(.admin-page) .track-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Solid white triangle play (Figma: square rotated 90° with 3px
   radius -> a sharp right-pointing triangle). */
body:not(.admin-page) .track-play-btn {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--figma-fg);
  box-shadow: none;
  color: transparent;
  font-size: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  cursor: pointer;
  justify-self: start;
}
body:not(.admin-page) .track-play-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

body:not(.admin-page) .track-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
body:not(.admin-page) .track-main strong {
  font-family: var(--figma-font-bold);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--figma-fg);
  text-transform: uppercase;
}
body:not(.admin-page) .track-main .hashtags {
  /* Figma track rows don't show per-track hashtags. Hidden. */
  display: none;
}

/* Full-width progress bar pinned to the bottom of the row */
body:not(.admin-page) .track-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--figma-progress);
  border: 0;
  border-radius: 15px;
  accent-color: var(--figma-fg);
  outline: none;
  pointer-events: auto;
}
body:not(.admin-page) .track-progress::-webkit-slider-runnable-track {
  background: var(--figma-progress);
  height: 5px;
  border-radius: 15px;
}
body:not(.admin-page) .track-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  background: var(--figma-fg);
  border-radius: 50%;
  margin-top: -3px;
  border: 0;
  opacity: 0;            /* hidden until the user drags */
  transition: opacity .2s ease;
}
body:not(.admin-page) .track-row:hover .track-progress::-webkit-slider-thumb,
body:not(.admin-page) .track-progress:active::-webkit-slider-thumb {
  opacity: 1;
}
body:not(.admin-page) .track-progress::-moz-range-track {
  background: var(--figma-progress);
  height: 2px;
  border-radius: 0;
}
body:not(.admin-page) .track-progress::-moz-range-thumb {
  background: var(--figma-fg);
  border: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
}
body:not(.admin-page) .track-row:hover .track-progress::-moz-range-thumb {
  opacity: 1;
}

/* Right-side action: BUY TRACK | PRO (non-sub) or ⇩ (sub) */
body:not(.admin-page) .track-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
body:not(.admin-page) .track-buy-btn {
  padding: 0;
  min-height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--figma-font-bold);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--figma-fg);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
body:not(.admin-page) .track-download-btn {
  padding: 0;
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--figma-fg);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Search results & suggestions ---------------------- */
body:not(.admin-page) .search-tracks-panel,
body:not(.admin-page) #search-tracks-panel {
  padding: 14px 16px;
  border: 0;
  border-radius: var(--figma-radius-card);
  background: var(--figma-card-bg);
  backdrop-filter: var(--figma-blur);
  -webkit-backdrop-filter: var(--figma-blur);
  box-shadow: none;
  margin: 0 0 12px;
}
body:not(.admin-page) .search-tracks-panel .section-title-row h2 {
  font-family: var(--figma-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin: 0 0 10px;
}
body:not(.admin-page) .search-track-card {
  padding: 10px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
body:not(.admin-page) .search-track-card:last-child {
  border-bottom: 0;
}
body:not(.admin-page) .search-track-card strong {
  font-family: var(--figma-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--figma-fg);
  text-transform: uppercase;
}
body:not(.admin-page) .search-track-card .hashtags {
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  font-weight: 300;
  text-transform: lowercase;
}
body:not(.admin-page) .search-suggestions {
  background: rgba(30, 36, 48, .92);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  backdrop-filter: var(--figma-blur);
}

/* ---------- Hide leftover panels the Figma frame doesn't show -- */
body:not(.admin-page) .status-row,
body:not(.admin-page) #session-state,
body:not(.admin-page) #app-feedback {
  display: none;
}

/* ---------- Small-screen tuning (<= 420px) -------------------- */
@media (max-width: 420px) {
  body:not(.admin-page) {
    background:
      url(/static/bg.jpg) center top / cover no-repeat fixed,
      linear-gradient(175deg, #525e72 0%, #3a3f4d 28%, #232830 55%, #141618 100%);
  }
  body:not(.admin-page) .app-shell {
    width: 100vw;
    min-height: 100dvh;
    /* v76: less top padding so logo/GUIDE/PRO sit higher. */
    padding: 12px 18px 28px;
    border-radius: 0;
  }
  body:not(.admin-page) .pack-card-summary {
    grid-template-columns: 96px 1fr;
  }
  body:not(.admin-page) .cover-thumb {
    width: 96px;
    height: 96px;
  }
  body:not(.admin-page) .pack-card-content,
  body:not(.admin-page) .pack-copy {
    min-height: 96px;
  }
  body:not(.admin-page) .pack-title,
  body:not(.admin-page) .pack-card-header h3 {
    font-size: 18px;
  }
  body:not(.admin-page) .guide-btn,
  body:not(.admin-page) .pro-btn {
    min-width: 66px;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }
}
/* v4 end ========================================================= */

/* ===============================================================
   v5 — Interactive feedback (2026-05-09)
   - Search suggestions: fix contrast on the glass dropdown so the
     items, kind label, and dividers are readable against the dark
     blurred background.
   - Track play button: real visual state toggle. `.is-playing` flips
     the right-pointing triangle into a "pause" two-bar mark.
   - Track progress: filled portion shows via a CSS gradient driven
     by --progress (set from app.js on timeupdate / input). Without
     this the slider value moves but you don't *see* the bar fill.
   - Press feedback: every interactive control gets a quick scale +
     opacity dip on :active so the UI no longer feels "wooden".
   =============================================================== */

/* ---------- 1. Search suggestions dropdown ----------------------- */
body:not(.admin-page) .search-suggestions {
  background: rgba(20, 24, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: var(--figma-blur);
  -webkit-backdrop-filter: var(--figma-blur);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  padding: 4px;
}
body:not(.admin-page) .suggestion-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: transparent;
  color: var(--figma-fg);
  font-family: var(--figma-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.12s ease;
}
body:not(.admin-page) .suggestion-item:last-child {
  border-bottom: 0;
}
body:not(.admin-page) .suggestion-item:hover,
body:not(.admin-page) .suggestion-item:focus-visible {
  background: rgba(255, 255, 255, 0.10);
  outline: none;
}
body:not(.admin-page) .suggestion-item:active {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(0.985);
}
body:not(.admin-page) .suggestion-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--figma-font-bold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- 2. Track play / pause button ------------------------- */
/* The base v4 rule clips the button into a right-pointing triangle.
   When .is-playing is added we replace the clip-path with a two-bar
   "pause" mark using a linear-gradient mask, and flip the background
   to a slightly translucent white so it reads as "active". */
body:not(.admin-page) .track-play-btn {
  transition: transform 0.12s ease, background 0.16s ease, opacity 0.16s ease, clip-path 0.16s ease;
}
body:not(.admin-page) .track-play-btn:hover:not([disabled]) {
  background: #ffffff;
  opacity: 0.92;
}
body:not(.admin-page) .track-play-btn:active:not([disabled]) {
  transform: scale(0.88);
  opacity: 0.78;
}
body:not(.admin-page) .track-play-btn.is-playing {
  /* Two vertical bars => pause icon. Two thin rectangles cut from
     a single solid white square. */
  clip-path: polygon(
    0 0,    35% 0,    35% 100%,   0 100%,
    0 0,
    65% 0,  100% 0,   100% 100%,  65% 100%,
    65% 0
  );
  background: #ffffff;
}

/* ---------- 3. Track progress fill ------------------------------- */
/* --progress is updated by updateProgressFill() in app.js. We paint
   the filled and unfilled regions via a hard-edged linear-gradient
   so the slider has a visible "bar" that grows with audio time. */
body:not(.admin-page) .track-progress {
  background: linear-gradient(
    to right,
    var(--figma-fg) 0%,
    var(--figma-fg) var(--progress, 0%),
    var(--figma-progress) var(--progress, 0%),
    var(--figma-progress) 100%
  );
  cursor: pointer;
}
body:not(.admin-page) .track-progress::-webkit-slider-runnable-track {
  background: transparent; /* the input's own background paints the fill */
}
body:not(.admin-page) .track-progress::-moz-range-track {
  background: transparent;
}
/* No playhead dot: Figma shows the progress as a clean rounded line.
   Thumb collapsed to zero so the :hover opacity rules above can't
   resurrect it. */
body:not(.admin-page) .track-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  opacity: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body:not(.admin-page) .track-progress::-moz-range-thumb {
  width: 0;
  height: 0;
  opacity: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ---------- 4. Universal press feedback -------------------------- */
/* Make every interactive control feel pressable. Buttons and pill
   controls scale slightly down on :active; cards and rows just dim.
   Keep transitions short so the feedback is snappy, not laggy. */
body:not(.admin-page) .primary-btn,
body:not(.admin-page) .secondary-btn,
body:not(.admin-page) .pro-btn,
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pack-symbol-btn,
body:not(.admin-page) .pack-meta-chip,
body:not(.admin-page) .pack-download-chip,
body:not(.admin-page) .pack-unlock-chip,
body:not(.admin-page) .pack-pro-chip,
body:not(.admin-page) .track-buy-btn,
body:not(.admin-page) .track-download-btn,
body:not(.admin-page) .subscription-plan,
body:not(.admin-page) .badge-pill {
  transition: transform 0.12s ease, opacity 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
body:not(.admin-page) .primary-btn:not(:disabled):active,
body:not(.admin-page) .secondary-btn:not(:disabled):active,
body:not(.admin-page) .pro-btn:not(:disabled):active,
body:not(.admin-page) .guide-btn:not(:disabled):active,
body:not(.admin-page) .pack-symbol-btn:active,
body:not(.admin-page) .pack-meta-chip:active,
body:not(.admin-page) .pack-download-chip:active,
body:not(.admin-page) .pack-unlock-chip:active,
body:not(.admin-page) .track-buy-btn:active,
body:not(.admin-page) .track-download-btn:active,
body:not(.admin-page) .subscription-plan:active {
  transform: scale(0.96);
  opacity: 0.86;
}
body:not(.admin-page) .primary-btn:not(:disabled):hover,
body:not(.admin-page) .secondary-btn:not(:disabled):hover,
body:not(.admin-page) .pro-btn:not(:disabled):hover,
body:not(.admin-page) .guide-btn:not(:disabled):hover {
  filter: brightness(1.08);
}
/* Whole-card press states */
body:not(.admin-page) .pack-card-summary {
  transition: transform 0.16s ease, filter 0.16s ease;
  cursor: pointer;
}
body:not(.admin-page) .pack-card-summary:active {
  transform: scale(0.985);
  filter: brightness(0.94);
}
body:not(.admin-page) .search-track-card {
  transition: background 0.16s ease, transform 0.12s ease;
  cursor: pointer;
}
body:not(.admin-page) .search-track-card:active {
  transform: scale(0.99);
  background: rgba(255, 255, 255, 0.04);
}
/* Pack expand toggle */
body:not(.admin-page) .pack-symbol-toggle {
  transition: transform 0.18s ease, opacity 0.16s ease;
}
body:not(.admin-page) .pack-card-expanded .pack-symbol-toggle {
  transform: rotate(45deg);
}

/* Disabled controls should not look pressable */
body:not(.admin-page) .primary-btn:disabled,
body:not(.admin-page) .secondary-btn:disabled,
body:not(.admin-page) .pro-btn:disabled,
body:not(.admin-page) .guide-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Focus ring for keyboard nav (keeps a11y while we add :active) */
body:not(.admin-page) button:focus-visible,
body:not(.admin-page) .pack-card-summary:focus-visible,
body:not(.admin-page) .search-track-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}
/* v5 end ========================================================= */

/* ===============================================================
   v6 — Polish pass (2026-05-09)
   Fixes:
   1. Expanded pack toggle: keep '+' text, rotate via CSS into ×.
      v5 left a residual '−' from JS that rotated into '\'.
   2. Background sharpness: stop stretching bg.jpg with `cover` on
      huge desktop screens. Body now uses the gradient only; the
      image is anchored to a fixed-width pseudo-element behind the
      app shell, so it never upscales past its natural pixel size.
   3. Pack card hover: remove the neumorphic translateY+shadow that
      makes the card "jump and shimmer". Just a subtle brightness
      tick on hover; press is the existing scale(0.985).
   4. Track buy / download / play buttons: kill all hover lift on
      the row buttons. They sit inline; a small scale on press is
      enough.
   5. Search results panel: tighter typography, properly aligned
      action on the right, no harsh full-width borders.
   6. Subscription / PRO sheet: cleaner card, real typographic
      hierarchy, proper plan tiles.
   =============================================================== */

/* ---------- 1. Expanded toggle: rotate-only, keep '+' ----------- */
body:not(.admin-page) .pack-symbol-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--figma-font-light);
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.22s cubic-bezier(.2,.7,.2,1), opacity 0.16s ease;
}
body:not(.admin-page) .pack-card-expanded .pack-symbol-toggle {
  /* + rotated 45deg becomes × */
  transform: rotate(45deg);
}

/* ---------- 2. Sharper background on wide screens --------------- */
/* Disable the body's stretched cover background. Replace with a
   solid gradient. The image sits in a fixed pseudo-element sized
   to the natural app-shell width (440px) so it never upscales. */
body:not(.admin-page) {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(82, 94, 114, 0.6), transparent 70%),
    linear-gradient(175deg, #525e72 0%, #3a3f4d 28%, #232830 55%, #141618 100%) !important;
}
body:not(.admin-page)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url(/static/bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  /* Cap at 1.5× the shell so the image keeps its natural pixel
     density. Below that we still cover the shell area sharply. */
  background-size: min(660px, 100vw) auto;
  opacity: 0.85;
  /* Soft blend with the gradient so the seam isn't visible on
     ultrawide monitors. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
@media (min-width: 1100px) {
  body:not(.admin-page)::after {
    background-size: 720px auto;
  }
}

/* ---------- 3. Pack card hover: kill the lift ------------------- */
body:not(.admin-page) .pack-card,
body:not(.admin-page) .pack-card:hover,
body:not(.admin-page) .pack-card:active {
  transform: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.18);
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}
body:not(.admin-page) .pack-card:hover {
  filter: brightness(1.04);
}
/* Card *content* gets the press feedback, not the whole card. */
body:not(.admin-page) .pack-card-summary {
  transition: filter 0.16s ease, transform 0.14s ease;
}
body:not(.admin-page) .pack-card-summary:hover {
  filter: brightness(1.05);
}
body:not(.admin-page) .pack-card-summary:active {
  filter: brightness(0.95);
  transform: scale(0.992);
}

/* ---------- 4. Inline action buttons: no lift, just press ------- */
body:not(.admin-page) .track-play-btn,
body:not(.admin-page) .track-buy-btn,
body:not(.admin-page) .track-download-btn,
body:not(.admin-page) .pack-meta-chip,
body:not(.admin-page) .pack-download-chip,
body:not(.admin-page) .pack-unlock-chip {
  transform: none !important;
}
body:not(.admin-page) .track-play-btn:hover,
body:not(.admin-page) .track-buy-btn:hover,
body:not(.admin-page) .track-download-btn:hover,
body:not(.admin-page) .pack-meta-chip:hover,
body:not(.admin-page) .pack-download-chip:hover,
body:not(.admin-page) .pack-unlock-chip:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none;
  background: transparent;
  opacity: 0.78;
}
body:not(.admin-page) .track-play-btn.is-playing:hover {
  background: #ffffff;
  opacity: 0.92;
}
body:not(.admin-page) .track-buy-btn:active,
body:not(.admin-page) .track-download-btn:active,
body:not(.admin-page) .pack-meta-chip:active,
body:not(.admin-page) .pack-download-chip:active,
body:not(.admin-page) .pack-unlock-chip:active {
  transform: scale(0.92) !important;
  opacity: 0.7;
}
body:not(.admin-page) .track-play-btn:active:not([disabled]) {
  transform: scale(0.85) !important;
  opacity: 0.78;
}

/* Restore solid white play button color on hover (it was being
   reset to transparent above). */
body:not(.admin-page) .track-play-btn:hover:not([disabled]) {
  background: #ffffff;
  opacity: 0.88;
}

/* The pack chips (download / unlock free / PRO label) need their
   own visible background since v6 sets background:transparent on
   hover. Restore proper styling. */
body:not(.admin-page) .pack-meta-chip,
body:not(.admin-page) .pack-download-chip,
body:not(.admin-page) .pack-unlock-chip,
body:not(.admin-page) .pack-pro-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  color: var(--figma-fg);
  font-family: var(--figma-font-bold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: var(--figma-blur);
  -webkit-backdrop-filter: var(--figma-blur);
}
body:not(.admin-page) .pack-meta-chip:hover,
body:not(.admin-page) .pack-download-chip:hover,
body:not(.admin-page) .pack-unlock-chip:hover {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}

/* ---------- 5. Search results panel & list cards ---------------- */
body:not(.admin-page) #search-tracks-panel,
body:not(.admin-page) .search-tracks-panel {
  padding: 18px 20px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: var(--figma-blur);
  -webkit-backdrop-filter: var(--figma-blur);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
body:not(.admin-page) #search-tracks-panel .section-title-row,
body:not(.admin-page) .search-tracks-panel .section-title-row {
  margin-bottom: 6px;
  border: 0;
}
body:not(.admin-page) #search-tracks-panel h2,
body:not(.admin-page) .search-tracks-panel h2 {
  margin: 0 0 14px;
  font-family: var(--figma-font-bold);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--figma-fg);
}
body:not(.admin-page) #search-tracks-panel .search-track-card,
body:not(.admin-page) .search-tracks-panel .search-track-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
body:not(.admin-page) #search-tracks-panel .search-track-card:first-child,
body:not(.admin-page) .search-tracks-panel .search-track-card:first-child {
  border-top: 0;
  padding-top: 4px;
}
body:not(.admin-page) #search-tracks-panel .search-track-card strong,
body:not(.admin-page) .search-tracks-panel .search-track-card strong {
  display: block;
  font-family: var(--figma-font-bold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--figma-fg);
  margin-bottom: 4px;
}
body:not(.admin-page) #search-tracks-panel .search-track-card .hashtags,
body:not(.admin-page) .search-tracks-panel .search-track-card .hashtags {
  font-family: var(--figma-font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.55);
}
body:not(.admin-page) #search-tracks-panel .search-track-card .track-actions,
body:not(.admin-page) .search-tracks-panel .search-track-card .track-actions {
  display: flex;
  align-items: center;
  gap: 0;
}
body:not(.admin-page) #search-tracks-panel .search-track-card .track-buy-btn,
body:not(.admin-page) .search-tracks-panel .search-track-card .track-buy-btn {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--figma-font-bold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--figma-fg);
}
body:not(.admin-page) #search-tracks-panel .search-track-card .track-buy-btn:hover,
body:not(.admin-page) .search-tracks-panel .search-track-card .track-buy-btn:hover {
  opacity: 0.78;
  background: transparent;
}
body:not(.admin-page) #search-tracks-panel .search-track-card .track-download-btn,
body:not(.admin-page) .search-tracks-panel .search-track-card .track-download-btn {
  padding: 0 4px;
  background: transparent;
  font-size: 16px;
}
body:not(.admin-page) #search-tracks-panel .search-track-card:hover,
body:not(.admin-page) .search-tracks-panel .search-track-card:hover {
  background: transparent;
  transform: none;
}

/* ---------- 6. Subscription / PRO sheet ------------------------- */
/* IMPORTANT: this rule sets `display: grid`, which would clobber the
   global `.hidden { display: none }` utility because of higher
   specificity. We re-assert `display: none` for the hidden state at
   matching specificity right after, so the sheet stays hidden until
   the JS removes the .hidden class. */
body:not(.admin-page) .subscription-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(8, 11, 16, 0.55);
  backdrop-filter: blur(8px) saturate(0.95);
  -webkit-backdrop-filter: blur(8px) saturate(0.95);
}
body:not(.admin-page) .subscription-sheet.hidden {
  display: none;
}
body:not(.admin-page) .subscription-sheet-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card {
  position: relative;
  width: min(380px, calc(100vw - 28px));
  padding: 28px 24px 24px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
    rgba(20, 23, 30, 0.92);
  backdrop-filter: var(--figma-blur);
  -webkit-backdrop-filter: var(--figma-blur);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 1px 0 0 rgba(255, 255, 255, 0.18);
  color: var(--figma-fg);
}
body:not(.admin-page) .subscription-sheet-card .section-title-row,
body:not(.admin-page) .guide-sheet-card .section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  border: 0;
  padding: 0;
}
body:not(.admin-page) .subscription-sheet-card .eyebrow,
body:not(.admin-page) .subscription-sheet-card .badge-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--figma-font-bold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body:not(.admin-page) .subscription-sheet-card h2,
body:not(.admin-page) .guide-sheet-card h2 {
  margin: 0;
  font-family: var(--figma-font-bold);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--figma-fg);
}
body:not(.admin-page) .subscription-sheet-card .secondary-btn#subscription-close,
body:not(.admin-page) .guide-sheet-card .secondary-btn#guide-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: var(--figma-fg);
  font-size: 0;
  position: relative;
  cursor: pointer;
}
body:not(.admin-page) .subscription-sheet-card .secondary-btn#subscription-close::before,
body:not(.admin-page) .subscription-sheet-card .secondary-btn#subscription-close::after,
body:not(.admin-page) .guide-sheet-card .secondary-btn#guide-close::before,
body:not(.admin-page) .guide-sheet-card .secondary-btn#guide-close::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 12px;
  height: 1.5px;
  background: var(--figma-fg);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 1px;
}
body:not(.admin-page) .subscription-sheet-card .secondary-btn#subscription-close::after,
body:not(.admin-page) .guide-sheet-card .secondary-btn#guide-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
body:not(.admin-page) .subscription-sheet-card .secondary-btn#subscription-close:hover,
body:not(.admin-page) .guide-sheet-card .secondary-btn#guide-close:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: none;
  box-shadow: none;
}

body:not(.admin-page) .subscription-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}
body:not(.admin-page) .subscription-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: var(--figma-fg);
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.14s ease;
}
body:not(.admin-page) .subscription-plan strong {
  font-family: var(--figma-font-bold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
  margin-bottom: 4px;
}
body:not(.admin-page) .subscription-plan strong + span {
  font-family: var(--figma-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--figma-fg);
  line-height: 1;
}
body:not(.admin-page) .subscription-plan .muted {
  margin-top: 6px;
  font-family: var(--figma-font);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
}
body:not(.admin-page) .subscription-plan:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: none;
  transform: none;
}
body:not(.admin-page) .subscription-plan:active {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(0.985);
}
/* Highlight the yearly plan as "best value" — second tile */
body:not(.admin-page) .subscription-plan-grid > .subscription-plan:nth-child(2) {
  background: linear-gradient(180deg, rgba(232, 93, 43, 0.85), rgba(232, 93, 43, 0.55));
  border-color: rgba(254, 229, 198, 0.40);
}
body:not(.admin-page) .subscription-plan-grid > .subscription-plan:nth-child(2) strong {
  color: rgba(254, 229, 198, 0.92);
}
body:not(.admin-page) .subscription-plan-grid > .subscription-plan:nth-child(2):hover {
  background: linear-gradient(180deg, rgba(232, 93, 43, 0.95), rgba(232, 93, 43, 0.70));
}

/* Guide sheet inner: cleaner stat cards */
body:not(.admin-page) .guide-sheet-card .muted {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--figma-font);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 18px;
}
body:not(.admin-page) .guide-stats {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
body:not(.admin-page) .guide-stats .stat-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
body:not(.admin-page) .guide-stats .stat-card strong {
  font-family: var(--figma-font-bold);
  font-size: 13px;
  font-weight: 800;
  color: var(--figma-fg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body:not(.admin-page) .guide-stats .stat-card span {
  font-family: var(--figma-font);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}

/* v6 end ========================================================= */

/* ===============================================================
   v7 — Repaint stability (2026-05-09)
   - The white "line" in the search area and the flickers on the
     pack list during fast cursor moves were caused by two things:
       (a) `filter: brightness(...)` on `.pack-card` + on its inner
           `.pack-card-summary` simultaneously — nested filters
           create overlapping compositing layers, and during quick
           transitions the GPU briefly shows seams between them.
       (b) An `inset 0 1px 0 rgba(255,255,255,0.06)` shadow on every
           pack card — a 1px white top-edge that *brightens* with
           the filter, becoming the visible "line".
     We drop both. Cards stay calm on hover; press feedback alone
     gives the click a physical feel.
   - Body::after mask-gradient is replaced with a plain fade via
     opacity — masks force an extra raster pass that contributed
     to the same flicker on tall scrollable lists.
   =============================================================== */
body:not(.admin-page) .pack-card,
body:not(.admin-page) .pack-card:hover,
body:not(.admin-page) .pack-card:focus,
body:not(.admin-page) .pack-card:active {
  filter: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  transform: none !important;
  transition: none !important;
}
body:not(.admin-page) .pack-card-summary,
body:not(.admin-page) .pack-card-summary:hover,
body:not(.admin-page) .pack-card-summary:focus {
  filter: none !important;
  transform: none !important;
  transition: transform 0.12s ease;
}
body:not(.admin-page) .pack-card-summary:active {
  filter: none !important;
  transform: scale(0.992);
}

/* Stable backdrop: drop the mask gradient and use a soft opacity
   fade via a second linear-gradient layered on top of the image. */
body:not(.admin-page)::after {
  -webkit-mask-image: none;
          mask-image: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(20, 22, 24, 0.85) 100%),
    url(/static/bg.jpg) center top / min(660px, 100vw) auto no-repeat;
}

/* The search-tracks-panel had `inset 1px 0 0 rgba(255,255,255,0.18)`
   creating a left-edge white line. On certain DPIs that line could
   be the "white line" the user noticed when scrolling/hovering.
   Remove it; keep just the soft drop shadow. */
body:not(.admin-page) #search-tracks-panel,
body:not(.admin-page) .search-tracks-panel {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
/* v7 end ========================================================= */

/* ===============================================================
   v8 — Click hitbox + scroll-flicker fixes (2026-05-09)
   - The pause icon was rendered by clip-pathing the `<button>` itself
     into two vertical bars. The bounding box of the element is the
     visible bars only, so the GAP between them was a dead zone — a
     click landing in the gap missed the button. Visually it's "the
     pause button", in DOM it's nothing. We now leave the button as
     a full rectangular hitbox and draw the icon in a `::before`
     pseudo-element. The whole 28×28 area accepts the click.
   - Search-tracks-panel had `backdrop-filter` which forces a
     compositing layer that re-rasters on every scroll/click. On the
     first card click, the smooth-scroll briefly desynced this layer
     vs. the body::after image, producing the artifact the user
     reported. Drop the backdrop-filter; keep the soft glass tint.
   =============================================================== */

/* ---- Play / pause button: full-rectangle hitbox, ::before icon - */
body:not(.admin-page) .track-play-btn {
  position: relative;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent !important;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  /* Override v4: no clip-path on the button; drawn via ::before */
  clip-path: none !important;
  cursor: pointer;
  justify-self: start;
  /* Ensure the inner click target is the full square */
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.16s ease, transform 0.12s ease;
}
body:not(.admin-page) .track-play-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--figma-fg);
  transform: translate(-50%, -50%);
  /* Right-pointing triangle (play). */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: clip-path 0.16s ease;
  pointer-events: none;
}
body:not(.admin-page) .track-play-btn.is-playing::before {
  /* Two vertical bars (pause). The gap between them is the
     button's hitbox, NOT a hole in the click target. */
  clip-path: polygon(
    0 0,    35% 0,    35% 100%,   0 100%,
    0 0,
    65% 0,  100% 0,   100% 100%,  65% 100%,
    65% 0
  );
}
body:not(.admin-page) .track-play-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
}
body:not(.admin-page) .track-play-btn[disabled]::before {
  background: var(--figma-fg);
}
body:not(.admin-page) .track-play-btn:hover:not([disabled]) {
  opacity: 0.78;
  background: transparent !important;
}
body:not(.admin-page) .track-play-btn:hover:not([disabled])::before {
  background: var(--figma-fg);
}
body:not(.admin-page) .track-play-btn:active:not([disabled]) {
  transform: scale(0.86);
  opacity: 0.86;
}

/* The track row reserves 22px for the play column; widen so the
   bigger button doesn't get clipped by the grid track. */
body:not(.admin-page) .track-row {
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
}

/* ---- Search-tracks-panel: drop backdrop-filter for stable paint  */
body:not(.admin-page) #search-tracks-panel,
body:not(.admin-page) .search-tracks-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.06);
}
/* v8 end ========================================================= */

/* ===============================================================
   v9 — Seamless background (2026-05-09)
   The bg.jpg in body::after rendered at a fixed natural size and
   then "ended" abruptly. The cutoff was visible as a faint
   horizontal line between the search bar and the first pack card
   on certain viewport heights — a hard edge between "image visible"
   and "gradient only" regions.
   Fix: drop the raster image entirely. A radial highlight on top of
   the existing dark diagonal gradient gives the same "lit from
   above" feel as the Figma art without any seams, blur on large
   screens, or compositing flicker.
   =============================================================== */
body:not(.admin-page) {
  background:
    radial-gradient(ellipse 110% 60% at 50% -10%,
      rgba(124, 138, 158, 0.32) 0%,
      rgba(80, 90, 108, 0.18) 35%,
      transparent 70%),
    linear-gradient(175deg, #525e72 0%, #3a3f4d 28%, #232830 55%, #141618 100%) !important;
  min-height: 100dvh;
}
body:not(.admin-page)::after {
  /* Pseudo-element no longer needed; clear it so older overrides
     don't paint a duplicate / leftover layer. */
  display: none !important;
  content: none !important;
  background: none !important;
}
/* v9 end ========================================================= */

/* ===============================================================
   v10 — Smooth top highlight (2026-05-09)
   The v9 radial-gradient (ellipse 110% × 60%, transparent at 70%)
   ended its falloff at roughly 32% of viewport height — exactly
   where the search bar meets the first pack card on common shell
   heights. The α=0.18 → α=0 transition over that narrow band read
   as a faint horizontal "line". Replace with a vertical linear
   fade that smooths over the full upper half: no transition zone,
   no perceptible band, no matter the viewport height.
   =============================================================== */
body:not(.admin-page) {
  background:
    linear-gradient(180deg,
      rgba(124, 138, 158, 0.28) 0%,
      rgba(124, 138, 158, 0.18) 18%,
      rgba(124, 138, 158, 0.08) 36%,
      rgba(124, 138, 158, 0.02) 55%,
      transparent 75%
    ),
    linear-gradient(175deg, #525e72 0%, #3a3f4d 28%, #232830 55%, #141618 100%) !important;
}
/* v10 end ========================================================= */

/* ===============================================================
   v11 — True root-cause fix for the search/pack horizontal line
   (2026-05-09)

   Diagnosis (from live DOM inspection on the deployed page):
   - Search-panel bottom edge at y=187. First pack-card top at y=191.
     A 4px gap fully visible as body background.
   - Pack-card has `box-shadow: 0 8px 24px rgba(0,0,0,0.18)`. Blur
     radius 24 with offset-y 8 means the shadow's outer envelope
     starts at `y_top + 8 − 24 = y_top − 16`. So the shadow spreads
     **16px ABOVE** the card's top — directly into the 4px gap and
     beyond. Inside that gap the shadow contributes ~0.09–0.11 alpha
     of black overlay, which the body gradient's lighter region
     above paints as a perceptible darker horizontal band. The eye
     reads the contrast edge as a "line".
   - The v10 body gradient's 5 alpha stops (0.28→0.18→0.08→0.02→0)
     additionally encourage 8-bit color banding at the breakpoints.

   Fix:
   1. Constrain the pack-card shadow with negative spread so its
      visible envelope sits entirely AT or BELOW the card top edge.
      `0 14px 22px -10px` → shadow starts at y_top + 14 − 22 + 10 =
      y_top + 2. Positive offset, never bleeds above the card.
   2. Replace v10's 5-stop body gradient with a 3-stop curve
      (transparent → 0 → -1 transparent on the bottom). Two-stop
      transitions don't band.
   =============================================================== */
body:not(.admin-page) .pack-card,
body:not(.admin-page) .pack-card:hover,
body:not(.admin-page) .pack-card:focus,
body:not(.admin-page) .pack-card:active {
  /* Compact, fully below-the-card shadow. Cards look "lifted" but
     leave the gap above them clean. */
  box-shadow: 0 14px 22px -10px rgba(0, 0, 0, 0.28) !important;
}

body:not(.admin-page) {
  background:
    linear-gradient(180deg,
      rgba(124, 138, 158, 0.22) 0%,
      transparent 60%
    ),
    linear-gradient(175deg, #525e72 0%, #2a2f38 60%, #141618 100%) !important;
}
/* v11 end ========================================================= */

/* ===============================================================
   v12 — Subscription sheet centering + final line cleanup
   (2026-05-09)

   1. PRO+ / GUIDE popup snapped to bottom-right on wide screens.
      Cause: an early base rule `.subscription-sheet-card`
      (line ≈617) set `position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%)`. v6 changed `position` to
      `relative` but did NOT reset the offsets, so under `position:
      relative` `left:50% top:50%` shift the card by 50% of the
      VIEWPORT (the .subscription-sheet container is full screen),
      and the negative transform only shifts back by half the card
      size — net effect: card lands roughly at viewport_center +
      half_viewport, i.e., bottom-right. Reset `left/top/transform`
      so the parent grid actually centers the card.

   2. Remaining 1px-style line under the search bar: caused by the
      bottom edge of the search-box's `backdrop-filter` compositing
      layer (a known browser artifact on glass elements). We swap
      it for a plain translucent fill — the visual stays the same
      "glassy dark" look, but without the GPU layer seam.
   =============================================================== */
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 auto;
}

/* Drop the heavy backdrop-filter on the search box AND the pack-card.
   Each was a separate compositing layer with a hard edge at its
   bounding box; the bottom edge of the search-box (y≈187) and the
   top edge of the pack-card (y≈191) sat 4px apart with both layers
   ending right next to each other, producing a visible seam in the
   gap. Replace with plain translucent fills — visually almost
   identical, but no GPU layer boundary to render. Also drop the
   1px border I'd added on .search-box in the first attempt: that
   border itself became the next "line". */
body:not(.admin-page) .search-box {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 0 !important;
}
body:not(.admin-page) .pack-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* v12 end ========================================================= */

/* ===============================================================
   v13 — Doc доработки batch (2026-05-16)
   #3 Guide popup: WELCOME card layout (no MVP / auth text)
   #4 PRO popup: "PRO ДОСТУП" layout, no "+", numbered includes
   #6 Mobile: 16px search input → iOS won't auto-zoom on focus
   #8 BUY TRACK / PRO are two independent buttons with a divider
   =============================================================== */

/* ---- #6 stop iOS focus zoom (font must be ≥16px) -------------- */
body:not(.admin-page) .search-input,
body:not(.admin-page) #search-input {
  font-size: 16px !important;
}

/* ---- #8 split BUY TRACK / PRO --------------------------------- */
body:not(.admin-page) .track-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
body:not(.admin-page) .track-buy-btn,
body:not(.admin-page) .track-pro-btn {
  padding: 0 !important;
  min-height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--figma-font-bold);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--figma-fg);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
body:not(.admin-page) .track-action-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  user-select: none;
  pointer-events: none;
}
body:not(.admin-page) .track-buy-btn:hover,
body:not(.admin-page) .track-pro-btn:hover {
  opacity: 0.75;
  background: transparent !important;
}
body:not(.admin-page) .track-buy-btn:active,
body:not(.admin-page) .track-pro-btn:active {
  transform: scale(0.94);
  opacity: 0.6;
}

/* ---- shared sheet chrome: close (×) and CTA (ПОНЯТНО) --------- */
body:not(.admin-page) .sheet-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  z-index: 2;
}
body:not(.admin-page) .sheet-close-btn::before,
body:not(.admin-page) .sheet-close-btn::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 13px;
  height: 1.6px;
  background: var(--figma-fg);
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
body:not(.admin-page) .sheet-close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
body:not(.admin-page) .sheet-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
body:not(.admin-page) .sheet-cta-btn {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 15px 0;
  border: 0;
  border-radius: 999px;
  background: var(--figma-fg);
  color: #15171b;
  font-family: var(--figma-font-bold);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.16s ease, transform 0.12s ease;
}
body:not(.admin-page) .sheet-cta-btn:hover { opacity: 0.9; }
body:not(.admin-page) .sheet-cta-btn:active { transform: scale(0.98); }

/* ---- #3 Guide popup ------------------------------------------ */
body:not(.admin-page) .guide-sheet-card {
  padding: 30px 22px 24px;
  text-align: left;
}
body:not(.admin-page) .guide-title {
  margin: 4px 0 22px;
  font-family: var(--figma-display);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--figma-fg);
}
body:not(.admin-page) .guide-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body:not(.admin-page) .guide-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body:not(.admin-page) .guide-card {
  padding: 16px 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
body:not(.admin-page) .guide-card h3 {
  margin: 0 0 8px;
  font-family: var(--figma-font-bold);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--figma-fg);
}
body:not(.admin-page) .guide-card p {
  margin: 0;
  font-family: var(--figma-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- #4 PRO popup ("PRO ДОСТУП") ----------------------------- */
body:not(.admin-page) .pro-sheet-card {
  padding: 30px 22px 24px;
  text-align: left;
}
body:not(.admin-page) .pro-title {
  margin: 4px 0 10px;
  font-family: var(--figma-display);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--figma-fg);
}
body:not(.admin-page) .pro-subtitle {
  margin: 0 0 20px;
  font-family: var(--figma-font);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}
body:not(.admin-page) .pro-includes {
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 16px;
}
body:not(.admin-page) .pro-includes-title {
  display: block;
  margin-bottom: 14px;
  font-family: var(--figma-font-bold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--figma-fg);
}
body:not(.admin-page) .pro-includes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 10px;
}
body:not(.admin-page) .pro-include {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
body:not(.admin-page) .pro-include-num {
  font-family: var(--figma-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--figma-fg);
  opacity: 0.5;
}
body:not(.admin-page) .pro-include span:last-child {
  font-family: var(--figma-font);
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
}
body:not(.admin-page) .pro-sheet-card .subscription-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  text-align: center;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan strong {
  font-family: var(--figma-font-bold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
body:not(.admin-page) .pro-sheet-card .subscription-plan strong + span {
  font-family: var(--figma-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--figma-fg);
}
body:not(.admin-page) .subscription-plan-cta {
  margin-top: 8px;
  padding: 7px 0;
  width: 100%;
  border-radius: 999px;
  background: var(--figma-fg);
  color: #15171b;
  font-family: var(--figma-font-bold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan:active {
  transform: scale(0.985);
}
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  border-color: rgba(254, 229, 198, 0.45);
  background: linear-gradient(180deg, rgba(232,93,43,0.85), rgba(232,93,43,0.55));
}
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong {
  color: rgba(254, 229, 198, 0.92);
}
/* v13 end ========================================================= */

/* ===============================================================
   v14 — Payment-return screen styled for the dark theme (доработки
   #5). The panel had only the light base styles, so on the dark
   shell it rendered as unreadable light-on-light ("поломанный").
   Primary action is "Вернуться в бота".
   =============================================================== */
body:not(.admin-page) #payment-return-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  /* Breathing room so the "Платёж обрабатывается" panel isn't flush
     against the catalog below (client: "вплотную, не очень выглядит"). */
  margin: 6px 0 24px;
}
body:not(.admin-page) .payment-return {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--figma-fg);
}
body:not(.admin-page) .payment-return-copy {
  display: grid;
  gap: 10px;
}
body:not(.admin-page) .payment-return-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body:not(.admin-page) .payment-return-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--figma-font-bold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
body:not(.admin-page) .payment-return-badge-paid {
  background: rgba(34, 197, 94, 0.18);
  color: #6ee7a8;
}
body:not(.admin-page) .payment-return-badge-pending {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}
body:not(.admin-page) .payment-return-badge-failed,
body:not(.admin-page) .payment-return-badge-canceled,
body:not(.admin-page) .payment-return-badge-refunded {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}
body:not(.admin-page) .payment-return h2 {
  margin: 0;
  font-family: var(--figma-font-bold);
  font-size: 20px;
  font-weight: 800;
  color: var(--figma-fg);
}
body:not(.admin-page) .payment-return .muted {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.45;
}
body:not(.admin-page) .payment-return-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body:not(.admin-page) .payment-return-actions .sheet-cta-btn {
  margin-top: 0;
}
body:not(.admin-page) .payment-return-secondary {
  width: 100%;
  padding: 13px 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: transparent;
  color: var(--figma-fg);
  font-family: var(--figma-font-bold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.12s ease;
}
body:not(.admin-page) .payment-return-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}
body:not(.admin-page) .payment-return-secondary:active {
  transform: scale(0.985);
}
/* v14 end ========================================================= */

/* ===============================================================
   v15 — LIGHT / DARK theme system (Figma has both + a toggle).
   Dark stays the default (all earlier rules). The LIGHT variant is
   a scoped override keyed on body.theme-light. We retarget the
   shared --figma-* custom properties so the bulk of the UI flips
   automatically, then patch the handful of places that hard-coded
   dark values with !important in earlier passes.
   =============================================================== */

/* ---- The LIGHT/DARK toggle (Guide popup, per Figma) ----------- */
body:not(.admin-page) .theme-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}
body:not(.admin-page) .theme-toggle-opt {
  min-width: 64px;
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--figma-font-bold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
body:not(.admin-page) .theme-toggle-opt.is-active {
  background: var(--figma-fg);
  color: #15171b;
}
body.theme-light:not(.admin-page) .theme-toggle {
  background: rgba(0, 0, 0, 0.06);
}
body.theme-light:not(.admin-page) .theme-toggle-opt {
  color: rgba(0, 0, 0, 0.45);
}
body.theme-light:not(.admin-page) .theme-toggle-opt.is-active {
  background: #1c1f26;
  color: #f4f1e8;
}

/* ---- LIGHT theme variable retarget --------------------------- */
body.theme-light:not(.admin-page) {
  --figma-fg: #1c1f26;
  --figma-card-bg: rgba(0, 0, 0, 0.05);
  --figma-pill-bg: rgba(0, 0, 0, 0.07);
  --figma-progress: rgba(0, 0, 0, 0.18);
  /* Cream background matching the Figma LIGHT frames. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 55%),
    linear-gradient(175deg, #f4f1e8 0%, #ece7d8 60%, #e4ddca 100%) !important;
  color: #1c1f26;
}

/* Text + muted copy flips */
body.theme-light:not(.admin-page) .muted,
body.theme-light:not(.admin-page) .pack-card .muted,
body.theme-light:not(.admin-page) .hashtags,
body.theme-light:not(.admin-page) .guide-card p,
body.theme-light:not(.admin-page) .pro-subtitle,
body.theme-light:not(.admin-page) .payment-return .muted {
  color: rgba(0, 0, 0, 0.55) !important;
}
body.theme-light:not(.admin-page) .pack-title,
body.theme-light:not(.admin-page) .pack-card-header h3,
body.theme-light:not(.admin-page) .track-main strong,
body.theme-light:not(.admin-page) .guide-title,
body.theme-light:not(.admin-page) .pro-title,
body.theme-light:not(.admin-page) .guide-card h3,
body.theme-light:not(.admin-page) .search-track-card strong,
body.theme-light:not(.admin-page) .payment-return h2 {
  color: #1c1f26 !important;
}

/* Logo: dark fill instead of white-on-dark */
body.theme-light:not(.admin-page) .mono-logo svg path {
  fill: #1c1f26;
  fill-opacity: 0.32;
}

/* Cards: light surface + soft shadow (kills the dark v7 shadow) */
body.theme-light:not(.admin-page) .pack-card,
body.theme-light:not(.admin-page) .pack-card:hover,
body.theme-light:not(.admin-page) .pack-card:active {
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 14px 22px -12px rgba(40, 35, 20, 0.28) !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
body.theme-light:not(.admin-page) .search-box {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
body.theme-light:not(.admin-page) .search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
body.theme-light:not(.admin-page) #search-tracks-panel,
body.theme-light:not(.admin-page) .search-tracks-panel {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* GUIDE / PRO pills, sheets, CTA on light bg */
body.theme-light:not(.admin-page) .guide-btn,
body.theme-light:not(.admin-page) .pro-btn {
  background: rgba(0, 0, 0, 0.06);
  color: #1c1f26;
}
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.78)),
    #efeadd !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1c1f26;
}
body.theme-light:not(.admin-page) .guide-card,
body.theme-light:not(.admin-page) .pro-includes {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
body.theme-light:not(.admin-page) .sheet-close-btn {
  background: rgba(0, 0, 0, 0.08);
}
body.theme-light:not(.admin-page) .sheet-close-btn::before,
body.theme-light:not(.admin-page) .sheet-close-btn::after {
  background: #1c1f26;
}
body.theme-light:not(.admin-page) .sheet-cta-btn {
  background: #1c1f26;
  color: #f4f1e8;
}
body.theme-light:not(.admin-page) .subscription-plan {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.theme-light:not(.admin-page) .subscription-plan-cta {
  background: #1c1f26;
  color: #f4f1e8;
}
/* Keep the highlighted yearly plan orange in both themes. */
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  background: linear-gradient(180deg, rgba(232,93,43,0.92), rgba(232,93,43,0.7)) !important;
}
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong + span {
  color: #fff !important;
}

/* Track play triangle + buy/pro buttons */
body.theme-light:not(.admin-page) .track-play-btn::before {
  background: #1c1f26;
}
body.theme-light:not(.admin-page) .track-play-btn.is-playing::before {
  background: #1c1f26;
}
body.theme-light:not(.admin-page) .track-buy-btn,
body.theme-light:not(.admin-page) .track-pro-btn,
body.theme-light:not(.admin-page) .track-download-btn {
  color: #1c1f26;
}
body.theme-light:not(.admin-page) .track-action-sep {
  color: rgba(0, 0, 0, 0.3);
}

/* Payment-return panel on light */
body.theme-light:not(.admin-page) .payment-return {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #1c1f26;
}
body.theme-light:not(.admin-page) .payment-return-secondary {
  border-color: rgba(0, 0, 0, 0.2);
  color: #1c1f26;
}

/* ---- v15 light-mode contrast patches ------------------------- */
/* These three came from v13 rules that hard-coded white text; on the
   light tiles/cards that rendered invisible (the faint "01/02/03 …"
   includes block and the "1 МЕСЯЦ" plan label in the client's
   screenshot). Force dark ink in light theme. */
body.theme-light:not(.admin-page) .pro-include span:last-child {
  color: rgba(0, 0, 0, 0.62) !important;
}
body.theme-light:not(.admin-page) .pro-include-num {
  color: #1c1f26 !important;
  opacity: 0.65;
}
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan strong {
  color: rgba(0, 0, 0, 0.55) !important;
}
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan strong + span {
  color: #1c1f26 !important;
}
/* The orange "best value" tile keeps white text in BOTH themes —
   re-assert it after the dark-ink rules above so it isn't clobbered. */
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong + span {
  color: #fff !important;
}

/* The +/− (expand/collapse) glyph on each pack card hard-coded white
   (.pack-symbol-toggle color: rgba(255,255,255,.85)). Invisible on the
   light card surface — the client could not see the buttons at all in
   LIGHT. Flip to dark ink. */
body.theme-light:not(.admin-page) .pack-symbol-toggle,
body.theme-light:not(.admin-page) .pack-symbol-btn {
  color: #1c1f26 !important;
}
/* v15 end ========================================================= */

/* ===============================================================
   v17 — PRO popup rebuilt to match the Figma frame exactly
   (client: "когда нажимаешь купить про, дизайн отличается от
   фигмы, обязательно всё сверяй с фигмой"). Verified against the
   PRO ДОСТУП frame: everything is CENTER-aligned; subtitle is
   uppercase muted; "ЧТО ВХОДИТ" is a centered heading with no
   nested card; the 01/02/03 numbers are large and full-opacity;
   BOTH plan tiles share the same dark style (NO orange tile —
   that was my mistake); КУПИТЬ is a small pill inside each tile;
   "ПОНЯТНО" is a ghost/outline pill, not a solid fill.
   This block is authoritative and overrides the earlier v6/v13
   pro-sheet rules with matching specificity + ordering.
   =============================================================== */
body:not(.admin-page) .pro-sheet-card {
  text-align: center !important;
  padding: 30px 22px 24px !important;
}
body:not(.admin-page) .pro-title {
  margin: 4px 0 12px !important;
  text-align: center;
  font-family: var(--figma-display);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--figma-fg);
}
body:not(.admin-page) .pro-subtitle {
  margin: 0 auto 22px !important;
  max-width: 300px;
  text-align: center;
  font-family: var(--figma-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
/* "ЧТО ВХОДИТ" block: no nested card — open on the popup surface. */
body:not(.admin-page) .pro-includes {
  padding: 0 0 22px !important;
  margin: 0 0 6px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body:not(.admin-page) .pro-includes-title {
  display: block;
  text-align: center;
  margin: 0 0 18px !important;
  font-family: var(--figma-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--figma-fg);
}
body:not(.admin-page) .pro-includes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  text-align: left;
}
body:not(.admin-page) .pro-include {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
body:not(.admin-page) .pro-include-num {
  flex: 0 0 auto;
  font-family: var(--figma-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--figma-fg) !important;
  opacity: 1 !important;
}
body:not(.admin-page) .pro-include span:last-child {
  font-family: var(--figma-font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
}

/* Plan tiles — identical dark cards (NO orange). */
body:not(.admin-page) .pro-sheet-card .subscription-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 14px;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  text-align: center;
  cursor: pointer;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan strong,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong {
  font-family: var(--figma-font-bold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65) !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan strong + span,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong + span {
  font-family: var(--figma-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--figma-fg) !important;
  line-height: 1.05;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan-cta {
  margin-top: 10px;
  padding: 8px 22px;
  width: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: var(--figma-fg);
  font-family: var(--figma-font-bold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* "ПОНЯТНО" — ghost / outline pill, centered. */
body:not(.admin-page) .pro-sheet-card .sheet-cta-btn {
  display: block;
  width: 100%;
  margin: 4px auto 0;
  padding: 15px 0;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--figma-fg) !important;
  font-family: var(--figma-font-bold);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body:not(.admin-page) .pro-sheet-card .sheet-cta-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ---- LIGHT theme equivalents for the rebuilt PRO popup -------- */
body.theme-light:not(.admin-page) .pro-subtitle {
  color: rgba(0, 0, 0, 0.5);
}
body.theme-light:not(.admin-page) .pro-include span:last-child {
  color: rgba(0, 0, 0, 0.6) !important;
}
body.theme-light:not(.admin-page) .pro-include-num,
body.theme-light:not(.admin-page) .pro-includes-title,
body.theme-light:not(.admin-page) .pro-title {
  color: #1c1f26 !important;
}
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan strong,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan strong + span,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong + span {
  color: #1c1f26 !important;
}
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan-cta {
  background: rgba(0, 0, 0, 0.08);
  color: #1c1f26;
}
body.theme-light:not(.admin-page) .pro-sheet-card .sheet-cta-btn {
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  color: #1c1f26 !important;
}
body.theme-light:not(.admin-page) .pro-sheet-card .sheet-cta-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
/* v17 end ========================================================= */

/* ===============================================================
   v18 — 1:1 Figma pass: real assets + exact colour tokens
   (client shipped fonts/logo/icons + the colour bar; "сделай
   1 в 1 как в макетах").
   • Body background = flat ФОН token (Figma has no gradient)
   • Surfaces use ПЛАШКА, borders ОБВОДКА, track ЦВЕТ ДОРОЖКИ
   • Real Akrobat / Bebas Neue already wired via @font-face + vars
   • Logo = supplied PNG, theme-swapped
   • play / + / − / download = supplied icons, recoloured to the
     ЗНАЧОК / ТЕКСТ token via CSS mask so one asset serves both
     themes and always matches the colour bar.
   This block is authoritative (last in the cascade).
   =============================================================== */

/* ---- Flat background per ФОН token (both themes) ------------- */
body:not(.admin-page) {
  background: var(--c-bg) !important;
}
body:not(.admin-page)::after { display: none !important; content: none !important; }

/* ---- Logo: real wordmark, theme-swapped --------------------- */
body:not(.admin-page) .mono-logo {
  width: auto;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}
body:not(.admin-page) .mono-logo-img {
  height: 26px;
  width: auto;
  display: block;
}
body:not(.admin-page) .mono-logo-light { display: none; }
body:not(.admin-page) .mono-logo-dark { display: block; }
body.theme-light:not(.admin-page) .mono-logo-dark { display: none; }
body.theme-light:not(.admin-page) .mono-logo-light { display: block; }

/* ---- Surfaces: ПЛАШКА fill, ОБВОДКА hairline ---------------- */
body:not(.admin-page) .pack-card,
body:not(.admin-page) .pack-card:hover,
body:not(.admin-page) .pack-card:active,
body:not(.admin-page) .search-box,
body:not(.admin-page) #search-tracks-panel,
body:not(.admin-page) .search-tracks-panel,
body:not(.admin-page) .payment-return {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border-soft) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Nested cards inside sheets: slightly distinct from the plate via the
   border only (Figma keeps them on the same plate colour). */
body:not(.admin-page) .guide-card,
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
}
body:not(.admin-page) .subscription-sheet {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.theme-light:not(.admin-page) .subscription-sheet {
  background: rgba(120, 110, 90, 0.35);
}

/* ---- GUIDE / PRO pills + CTA/close on the plate -------------- */
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pro-btn {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
}
body:not(.admin-page) .theme-toggle { background: var(--c-plate) !important; border: 1px solid var(--c-border); }
body:not(.admin-page) .theme-toggle-opt { color: var(--c-text); opacity: .55; }
body:not(.admin-page) .theme-toggle-opt.is-active { background: var(--c-text) !important; color: var(--c-bg) !important; opacity: 1; }
body:not(.admin-page) .sheet-close-btn { background: transparent !important; border: 1px solid var(--c-border) !important; }
body:not(.admin-page) .sheet-close-btn::before,
body:not(.admin-page) .sheet-close-btn::after { background: var(--c-text) !important; }
body:not(.admin-page) .pro-sheet-card .sheet-cta-btn,
body:not(.admin-page) .guide-sheet-card .sheet-cta-btn,
body:not(.admin-page) .sheet-cta-btn {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan-cta {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
}

/* ---- Real icons via CSS mask (recoloured to a token) -------- */
/* Play: ЗНАЧОК ПРОИГРЫВАТЕЛЯ token. The button stays a full-size
   click target; the icon is painted by the mask. */
body:not(.admin-page) .track-play-btn {
  background: transparent !important;
  clip-path: none !important;
}
body:not(.admin-page) .track-play-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: var(--c-player) !important;
  clip-path: none !important;
  -webkit-mask: var(--ic-play) center / contain no-repeat;
          mask: var(--ic-play) center / contain no-repeat;
}
body:not(.admin-page) .track-play-btn.is-playing::before {
  /* pause = two bars; keep the mask approach with a CSS-drawn pair so
     we don't need a separate asset */
  -webkit-mask: none;
          mask: none;
  width: 13px;
  height: 15px;
  background:
    linear-gradient(var(--c-player), var(--c-player)) left / 35% 100% no-repeat,
    linear-gradient(var(--c-player), var(--c-player)) right / 35% 100% no-repeat !important;
}
/* + / − pack toggle: real plus/minus assets, ТЕКСТ token. */
body:not(.admin-page) .pack-symbol-toggle {
  font-size: 0 !important;
  color: transparent !important;
  position: relative;
}
body:not(.admin-page) .pack-symbol-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-text);
  -webkit-mask: var(--ic-plus) center / 16px 16px no-repeat;
          mask: var(--ic-plus) center / 16px 16px no-repeat;
  transition: transform 0.2s ease;
}
body:not(.admin-page) .pack-card-expanded .pack-symbol-toggle::after {
  -webkit-mask-image: var(--ic-minus);
          mask-image: var(--ic-minus);
  -webkit-mask-size: 16px 4px;
          mask-size: 16px 4px;
}
/* Download (track) icon: ТЕКСТ token. */
body:not(.admin-page) .track-download-btn {
  font-size: 0 !important;
  color: transparent !important;
  position: relative;
  width: 22px;
  height: 22px;
}
body:not(.admin-page) .track-download-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-text);
  -webkit-mask: var(--ic-download) center / 18px 18px no-repeat;
          mask: var(--ic-download) center / 18px 18px no-repeat;
}
/* Pack download chip keeps its text label; just tint via token. */
body:not(.admin-page) .pack-download-chip,
body:not(.admin-page) .pack-meta-chip,
body:not(.admin-page) .pack-unlock-chip {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  backdrop-filter: none !important;
}

/* ---- Progress track = ЦВЕТ ДОРОЖКИ, fill = ТЕКСТ ------------ */
body:not(.admin-page) .track-progress {
  background:
    linear-gradient(to right,
      var(--c-text) 0%, var(--c-text) var(--progress, 0%),
      var(--c-track) var(--progress, 0%), var(--c-track) 100%) !important;
}
body:not(.admin-page) .track-progress::-webkit-slider-thumb { background: var(--c-text); }
body:not(.admin-page) .track-progress::-moz-range-thumb { background: var(--c-text); }

/* ---- Text colours strictly to ТЕКСТ token ------------------- */
body:not(.admin-page) .pack-title,
body:not(.admin-page) .pack-card-header h3,
body:not(.admin-page) .track-main strong,
body:not(.admin-page) .guide-title,
body:not(.admin-page) .pro-title,
body:not(.admin-page) .pro-includes-title,
body:not(.admin-page) .pro-include-num,
body:not(.admin-page) .guide-card h3,
body:not(.admin-page) .search-track-card strong,
body:not(.admin-page) .payment-return h2,
body:not(.admin-page) .track-buy-btn,
body:not(.admin-page) .track-pro-btn {
  color: var(--c-text) !important;
}
body:not(.admin-page) .muted,
body:not(.admin-page) .pack-card .muted,
body:not(.admin-page) .hashtags,
body:not(.admin-page) .guide-card p,
body:not(.admin-page) .pro-subtitle,
body:not(.admin-page) .pro-include span:last-child,
body:not(.admin-page) .payment-return .muted {
  color: color-mix(in srgb, var(--c-text) 55%, transparent) !important;
}

/* Display headings MUST use Bebas Neue Cyrillic (the tall caps in
   Figma). An older `…sheet-card h2` rule (specificity 0,2,2) was
   beating the `.pro-title`/`.guide-title` rules (0,2,1) and forcing
   Akrobat. Force the display family with !important so the headings
   match the mockup exactly. */
body:not(.admin-page) .pro-title,
body:not(.admin-page) .guide-title,
body:not(.admin-page) .pro-includes-title,
body:not(.admin-page) .pro-include-num,
body:not(.admin-page) .subscription-sheet-card h2,
body:not(.admin-page) .guide-sheet-card h2 {
  font-family: var(--figma-display) !important;
  font-weight: 400 !important;
}

/* ---- LIGHT theme: token-driven, supersedes the old v15/v17
   hard-coded rgba() light overrides. Same specificity as those
   (body.theme-light:not(.admin-page) …) but later in source order,
   so these win and the whole light skin now comes 1:1 from the
   Figma colour bar. ------------------------------------------- */
body.theme-light:not(.admin-page) {
  background: var(--c-bg) !important;
}
body.theme-light:not(.admin-page) .pack-card,
body.theme-light:not(.admin-page) .pack-card:hover,
body.theme-light:not(.admin-page) .pack-card:active,
body.theme-light:not(.admin-page) .search-box,
body.theme-light:not(.admin-page) #search-tracks-panel,
body.theme-light:not(.admin-page) .search-tracks-panel,
body.theme-light:not(.admin-page) .payment-return,
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border-soft) !important;
  box-shadow: none !important;
}
body.theme-light:not(.admin-page) .guide-card,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2),
body.theme-light:not(.admin-page) .guide-btn,
body.theme-light:not(.admin-page) .pro-btn,
body.theme-light:not(.admin-page) .pack-meta-chip,
body.theme-light:not(.admin-page) .pack-download-chip,
body.theme-light:not(.admin-page) .pack-unlock-chip {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
}
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan-cta {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
}
body.theme-light:not(.admin-page) .sheet-cta-btn,
body.theme-light:not(.admin-page) .pro-sheet-card .sheet-cta-btn {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
}
body.theme-light:not(.admin-page) .theme-toggle-opt.is-active {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
}
/* Icons recolour to the light tokens automatically because they use
   var(--c-player)/var(--c-text), which flip via the token block. */
/* v18 end ========================================================= */

/* ===============================================================
   v19 — Client review fixes, strictly to the Figma mockup:
   1. Logo: kill ALL drop-shadow/text-shadow (legacy SVG-logo rules
      still applied a shadow to the new PNG; the real mark is flat).
   2. Topbar: real PNG wordmark is wide — old grid pushed the PRO
      pill off-screen. Flex layout + capped logo height so logo +
      GUIDE + PRO always fit.
   3. GUIDE/PRO pills: small thin outline pills as in Figma.
   4. Guide/PRO popups are NOT a bordered floating card. In the
      mockup they are a FULL-SCREEN panel — the ФОН colour fills the
      whole screen, content sits directly on it (only the inner
      cards keep a hairline border). Remove the outer frame, the
      max-width card, the dimmed/blurred backdrop.
   Authoritative: last in the cascade.
   =============================================================== */

/* 1. Logo — flat, no shadow, correct size ---------------------- */
body:not(.admin-page) .mono-logo,
body:not(.admin-page) .mono-logo-img {
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background: none !important;
}
body:not(.admin-page) .mono-logo {
  display: flex !important;
  align-items: center;
  height: 18px !important;
  min-height: 0 !important;
  max-height: 18px !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}
body:not(.admin-page) .mono-logo-img {
  height: 18px !important;
  width: auto !important;
  max-width: 190px;
  min-height: 0 !important;
  display: block;
}
body:not(.admin-page) .mono-logo-light { display: none; }
body:not(.admin-page) .mono-logo-dark  { display: block; }
body.theme-light:not(.admin-page) .mono-logo-dark  { display: none; }
body.theme-light:not(.admin-page) .mono-logo-light { display: block; }

/* 2. Topbar — flex, never clip the PRO pill -------------------- */
body:not(.admin-page) .topbar {
  display: flex !important;
  flex-direction: row !important;   /* a ≤640px media query forced column */
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
  padding: 4px 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}
body:not(.admin-page) .topbar-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px;
  flex: 0 0 auto;
}

/* 3. GUIDE / PRO pills — small thin outline (Figma) ------------ */
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pro-btn {
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  font-family: var(--figma-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body:not(.admin-page) .guide-btn:hover,
body:not(.admin-page) .pro-btn:hover {
  background: color-mix(in srgb, var(--c-text) 8%, transparent) !important;
}

/* 4. Guide / PRO popups — FULL-SCREEN, frameless --------------- */
body:not(.admin-page) .subscription-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90;
  display: block !important;
  background: var(--c-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body:not(.admin-page) .subscription-sheet.hidden {
  display: none !important;
}
/* No dimmed overlay — the panel itself IS the full screen. The
   backdrop element stays in the DOM for click-to-close but is
   visually inert. */
body:not(.admin-page) .subscription-sheet-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 0;
}
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 1;
  width: 100% !important;
  max-width: min(460px, 100vw) !important;
  min-height: 100dvh;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--c-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 22px 20px 32px !important;
}
/* Inner cards keep the hairline border on the flat ФОН (matches
   the mockup — outlined regions, no fill difference). */
body:not(.admin-page) .guide-card,
body:not(.admin-page) .pro-includes,
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}
/* "ПОНЯТНО" — full-width outline pill, sits at the bottom. */
body:not(.admin-page) .sheet-cta-btn,
body:not(.admin-page) .pro-sheet-card .sheet-cta-btn,
body:not(.admin-page) .guide-sheet-card .sheet-cta-btn {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 16px 0;
  border: 1px solid var(--c-border) !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--c-text) !important;
}
/* Close × — keep, minimal, on the flat ФОН (top-right). */
body:not(.admin-page) .sheet-close-btn {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
}
body:not(.admin-page) .sheet-close-btn::before,
body:not(.admin-page) .sheet-close-btn::after {
  background: var(--c-text) !important;
}
/* v19 end ========================================================= */

/* ===============================================================
   v20 — Fix the expand/collapse toggle glyph.
   Bug: legacy rules `.pack-card-expanded .pack-symbol-toggle {
   transform: rotate(45deg) }` existed to turn a TEXT "+" into "×".
   v18 replaced the glyph with the real plus.png / minus.png icons
   (minus = a 16×4 horizontal bar). The leftover 45° rotation then
   spun that bar into a broken diagonal "╲" — exactly what the
   client screenshotted. Kill the rotation; give the toggle a fixed
   box so the masked icon is always centred and crisp, both themes.
   Authoritative: last in the cascade.
   =============================================================== */
body:not(.admin-page) .pack-symbol-toggle,
body:not(.admin-page) .pack-symbol-btn.pack-symbol-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;            /* never rotate the icon */
  font-size: 0 !important;
  color: transparent !important;
  cursor: pointer;
}
body:not(.admin-page) .pack-card-expanded .pack-symbol-toggle,
body:not(.admin-page) .pack-card-expanded .pack-symbol-btn.pack-symbol-toggle {
  transform: none !important;            /* ← the actual fix */
}
body:not(.admin-page) .pack-symbol-toggle::after,
body:not(.admin-page) .pack-symbol-btn.pack-symbol-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: var(--c-text) !important;
  -webkit-mask: var(--ic-plus) center / 16px 16px no-repeat;
          mask: var(--ic-plus) center / 16px 16px no-repeat;
  transition: opacity 0.18s ease;
}
/* Expanded → real minus line. Thin (≈2px) per Figma — doc #18
   flagged the previous 4px bar as too bold. */
body:not(.admin-page) .pack-card-expanded .pack-symbol-toggle::after,
body:not(.admin-page) .pack-card-expanded .pack-symbol-btn.pack-symbol-toggle::after {
  width: 16px;
  height: 2px;
  -webkit-mask: var(--ic-minus) center / 16px 2px no-repeat;
          mask: var(--ic-minus) center / 16px 2px no-repeat;
}
/* v20 end ========================================================= */

/* ===============================================================
   v21 — Button interaction states + theme-toggle slider +
   search results with dotted leaders (per the supplied asset
   sets and the Figma search-active screen).

   Button state model taken 1:1 from кнопки/*/{default,hover,
   pressed}: Default = outline / plate; Hover = ОБВОДКА fill;
   Pressed = ТЕКСТ fill with ФОН ink. Implemented with tokens so
   it scales and themes correctly (the prompt allows styles in
   place of swapping the PNGs).
   Note: the Figma search-active screen uses the neutral ОБВОДКА
   border (NOT a blue glow) — so focus stays on-token, no accent.
   Authoritative: last in the cascade.
   =============================================================== */

/* 1. GUIDE / PRO — Default outline → Hover fill → Pressed invert */
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pro-btn {
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
body:not(.admin-page) .guide-btn:hover,
body:not(.admin-page) .pro-btn:hover {
  background: var(--c-border) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}
body:not(.admin-page) .guide-btn:active,
body:not(.admin-page) .pro-btn:active {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
  border-color: var(--c-text) !important;
  transform: scale(0.97);
}

/* КУПИТЬ (plan CTA) — Default plate → Hover ОБВОДКА → Pressed ТЕКСТ */
body:not(.admin-page) .subscription-plan-cta {
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan:hover .subscription-plan-cta {
  background: var(--c-border) !important;
  color: var(--c-text) !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan:active .subscription-plan-cta {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
  transform: scale(0.97);
}

/* ПОНЯТНО — Default outline → Hover ОБВОДКА → Pressed ТЕКСТ */
body:not(.admin-page) .sheet-cta-btn {
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
body:not(.admin-page) .sheet-cta-btn:hover {
  background: var(--c-border) !important;
  color: var(--c-text) !important;
}
body:not(.admin-page) .sheet-cta-btn:active {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
  transform: scale(0.99);
}

/* 2. Search field — pill, ПЛАШКА + ОБВОДКА (Figma uses no blue
      accent; focus just firms the border to ТЕКСТ at low alpha). */
body:not(.admin-page) .search-box {
  border-radius: 999px !important;
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border) !important;
  transition: border-color 0.15s ease;
}
body:not(.admin-page) .search-box:focus-within {
  border-color: color-mix(in srgb, var(--c-text) 60%, transparent) !important;
}
body:not(.admin-page) .search-input { color: var(--c-text) !important; }
body:not(.admin-page) .search-input::placeholder {
  color: color-mix(in srgb, var(--c-text) 45%, transparent) !important;
}
body:not(.admin-page) .search-icon {
  width: 17px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  font-size: 0 !important;
  margin: 0 4px 0 0 !important;
  background: color-mix(in srgb, var(--c-text) 68%, transparent) !important;
  -webkit-mask: var(--ic-search) center / 17px 16px no-repeat !important;
          mask: var(--ic-search) center / 17px 16px no-repeat !important;
}

/* 3. Search results — single list, dotted leader + folder icon
      (matches the Figma search-active screen; also resolves the
      old "two overlapping lists" дороботка). */
body:not(.admin-page) .search-suggestions {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  padding: 6px !important;
}
body:not(.admin-page) .suggestion-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--c-text) !important;
  font-family: var(--figma-font) !important;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
/* the label fills the row; a dotted leader bridges to the icon */
body:not(.admin-page) .suggestion-item > span:last-child {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
body:not(.admin-page) .suggestion-item > span:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  border-bottom: 1px dotted color-mix(in srgb, var(--c-text) 35%, transparent);
  z-index: -1;
}
body:not(.admin-page) .suggestion-item::after {
  content: "";
  width: 18px; height: 16px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--c-text) 70%, transparent);
  -webkit-mask: var(--ic-folder) center / 18px 16px no-repeat;
          mask: var(--ic-folder) center / 18px 16px no-repeat;
}
body:not(.admin-page) .suggestion-kind {
  flex: 0 0 auto;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  color: color-mix(in srgb, var(--c-text) 60%, transparent);
  background: transparent;
}
body:not(.admin-page) .suggestion-item:hover {
  background: color-mix(in srgb, var(--c-text) 7%, transparent) !important;
  border-radius: 10px;
}

/* 4. Theme toggle — custom slider (track + knob + LIGHT/DARK).
      Mirrors кнопка смены темы assets, fully tokenised. */
body:not(.admin-page) .theme-toggle {
  position: relative;
  display: inline-flex !important;
  align-items: stretch;
  padding: 3px !important;
  border-radius: 999px !important;
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border) !important;
  overflow: hidden;
}
/* sliding knob: covers the active half */
body:not(.admin-page) .theme-toggle::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--c-text);
  transition: transform 0.22s cubic-bezier(.4,.0,.2,1);
  z-index: 0;
}
/* dark active → knob on the right (DARK is 2nd opt) */
body:not(.admin-page):not(.theme-light) .theme-toggle::before {
  transform: translateX(100%);
}
body.theme-light:not(.admin-page) .theme-toggle::before {
  transform: translateX(0);
}
body:not(.admin-page) .theme-toggle-opt {
  position: relative;
  z-index: 1;
  min-width: 62px;
  padding: 8px 14px !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--figma-font) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease;
  color: color-mix(in srgb, var(--c-text) 50%, transparent) !important;
}
/* active label sits over the knob → use ФОН ink */
body:not(.admin-page) .theme-toggle-opt.is-active {
  background: transparent !important;
  color: var(--c-bg) !important;
}
/* v21 end ========================================================= */

/* ===============================================================
   v22 — PRO popup rebuilt to match the Figma PRO ДОСТУП frame
   exactly (client: "это окно сделано криво и не так как в макете").

   Verified from the dark PRO frame:
   • The popup is an OVERLAY on a darkened/blurred catalog (the
     catalog is faintly visible behind — NOT an opaque panel),
     content centred, no outer frame.
   • "ЧТО ВХОДИТ" is NOT a centred heading above a grid. It is the
     FIRST CELL of a 2×2 grid inside one bordered card:
        [ ЧТО ВХОДИТ ]            [ 02  Безлимитное… ]
        [ 01  Все муз. паки ]     [ 03  Новые релизы… ]
   • "ПОНЯТНО" is a narrow centred pill, not full-width.
   Authoritative: last in the cascade.
   =============================================================== */

/* Overlay: darkened + blurred backdrop, centred frameless content */
body:not(.admin-page) .subscription-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90;
  display: grid !important;
  place-items: center !important;
  padding: 24px 0 !important;
  background: rgba(0, 0, 0, 0.66) !important;
  -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
  overflow-y: auto;
}
body:not(.admin-page) .subscription-sheet.hidden { display: none !important; }
body:not(.admin-page) .subscription-sheet-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: transparent !important;
  z-index: 0;
}
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .pro-sheet-card,
body:not(.admin-page) .guide-sheet-card {
  position: relative !important;
  left: auto !important; top: auto !important; transform: none !important;
  z-index: 1;
  width: min(440px, calc(100vw - 32px)) !important;
  max-width: min(440px, calc(100vw - 32px)) !important;
  min-height: 0 !important;
  margin: auto !important;
  padding: 26px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  text-align: center;
}

/* Title + subtitle (centred) */
body:not(.admin-page) .pro-title {
  margin: 0 0 12px !important;
  font-family: var(--figma-display) !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-text) !important;
  text-align: center !important;
}
body:not(.admin-page) .pro-subtitle {
  margin: 0 auto 18px !important;
  max-width: 320px;
  font-family: var(--figma-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-text) 55%, transparent) !important;
  text-align: center !important;
}

/* "ЧТО ВХОДИТ" — one bordered card, 2×2 grid, heading = cell #1 */
body:not(.admin-page) .pro-includes {
  margin: 0 0 14px !important;
  padding: 18px 18px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 14px !important;
  background: transparent !important;
}
body:not(.admin-page) .pro-includes-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px 16px !important;
  align-items: start;
  text-align: left;
}
body:not(.admin-page) .pro-include {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
}
body:not(.admin-page) .pro-include-head {
  font-family: var(--figma-display) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  line-height: 0.95 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-text) !important;
  align-self: center;
}
body:not(.admin-page) .pro-include-num {
  flex: 0 0 auto;
  font-family: var(--figma-display) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  line-height: 0.95 !important;
  color: var(--c-text) !important;
  opacity: 1 !important;
}
body:not(.admin-page) .pro-include span:last-child {
  font-family: var(--figma-font) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--c-text) 62%, transparent) !important;
  text-transform: none;
}

/* Plan tiles — two equal bordered cards */
body:not(.admin-page) .pro-sheet-card .subscription-plan-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin: 0 0 14px !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 12px 15px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 14px !important;
  background: transparent !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan strong {
  font-family: var(--figma-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-text) 60%, transparent) !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan strong + span {
  font-family: var(--figma-display) !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  letter-spacing: 0.01em;
  color: var(--c-text) !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan-cta {
  margin-top: 9px;
  padding: 8px 20px !important;
  width: auto !important;
  border-radius: 999px !important;
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
  font-family: var(--figma-font) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* "ПОНЯТНО" — narrow centred outline pill (NOT full-width) */
body:not(.admin-page) .pro-sheet-card .sheet-cta-btn,
body:not(.admin-page) .guide-sheet-card .sheet-cta-btn {
  display: block !important;
  width: auto !important;
  min-width: 180px;
  margin: 4px auto 0 !important;
  padding: 13px 48px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--c-text) !important;
  font-family: var(--figma-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Close × stays top-right of the (now transparent) content block */
body:not(.admin-page) .pro-sheet-card .sheet-close-btn,
body:not(.admin-page) .guide-sheet-card .sheet-close-btn {
  position: absolute !important;
  top: 8px;
  right: 4px;
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
}
/* v22 end ========================================================= */

/* ===============================================================
   v23 — Overlay backdrop = frosted glass (per the supplied Figma
   Guide/PRO overlay frames). The catalog stays faintly visible
   behind a strong blur with only a light theme-tint — NOT a heavy
   black scrim. Applies to BOTH Guide and PRO. Authoritative.
   =============================================================== */
body:not(.admin-page) .subscription-sheet {
  background: color-mix(in srgb, var(--c-bg) 62%, transparent) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.05) !important;
          backdrop-filter: blur(26px) saturate(1.05) !important;
}
/* v23 end ========================================================= */

/* ===============================================================
   v24 — Client review batch (Guide/PRO overlays + misc), strictly
   to the supplied Figma overlay frames + asset for pack download.
   • Overlay = FULL-SCREEN frameless panel; content fills the width
     (not a narrow centred box). Backdrop is a LIGHT frosted scrim
     (small blur + low theme tint) so the catalog stays clearly
     recognisable behind — the popup is just prioritised on top.
   • Theme toggle centred at the top of the Guide panel.
   • Guide card headings (КАК ЭТО РАБОТАЕТ / PRO ПОДПИСКА /
     SEARCH / BUY) get the short underline accent from the mockup.
     First two centred, SEARCH/BUY left-aligned (as in Figma).
   • GUIDE / PRO pills: slightly larger text.
   • КУПИТЬ: NOT filled by default — outline; fills only on hover.
   • No × in Guide/PRO (removed in markup); ПОНЯТНО stays a pill.
   • pack ⇩ → real download-pack icon button.
   Authoritative: last in the cascade.
   =============================================================== */

/* Backdrop — light frosted, catalog clearly visible -------------- */
body:not(.admin-page) .subscription-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90;
  display: block !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--c-bg) 38%, transparent) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.02) !important;
          backdrop-filter: blur(3px) saturate(1.02) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body:not(.admin-page) .subscription-sheet.hidden { display: none !important; }
body:not(.admin-page) .subscription-sheet-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: transparent !important;
  z-index: 0;
}

/* Panel — FULL screen, frameless, content fills width ----------- */
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card {
  position: relative !important;
  left: auto !important; top: auto !important; transform: none !important;
  z-index: 1;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 30px 22px 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

/* Theme toggle: centred at the top of the Guide panel ----------- */
body:not(.admin-page) .guide-sheet-card .theme-toggle {
  align-self: center !important;
  margin: 0 auto 22px !important;
}

/* Guide title / cards ------------------------------------------- */
body:not(.admin-page) .guide-title {
  text-align: center !important;
  font-family: var(--figma-display) !important;
  font-weight: 400 !important;
  font-size: 34px !important;
  line-height: 1.02 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-text) !important;
  margin: 0 0 22px !important;
}
body:not(.admin-page) .guide-cards { display: flex; flex-direction: column; gap: 14px; }
body:not(.admin-page) .guide-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body:not(.admin-page) .guide-card {
  padding: 20px 18px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  background: transparent !important;
  text-align: center;
}
body:not(.admin-page) .guide-cards-row .guide-card { text-align: left; }
body:not(.admin-page) .guide-card h3 {
  display: inline-block;
  margin: 0 0 12px !important;
  padding-bottom: 6px;
  font-family: var(--figma-font) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text) !important;
  border-bottom: 2px solid var(--c-text);   /* the underline accent */
}
body:not(.admin-page) .guide-card p {
  margin: 0 !important;
  font-family: var(--figma-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--c-text) 60%, transparent) !important;
  text-transform: uppercase;
}

/* GUIDE / PRO pills — slightly larger text ---------------------- */
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pro-btn {
  height: 34px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
}

/* КУПИТЬ — outline by default, fills only on hover. Specificity
   matches the v22 `.pro-sheet-card .subscription-plan-cta` rule
   (0,3,1) and comes later, so the default is genuinely NOT white. */
body:not(.admin-page) .subscription-plan-cta,
body:not(.admin-page) .pro-sheet-card .subscription-plan-cta,
body:not(.admin-page) .pro-sheet-card .subscription-plan .subscription-plan-cta {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  transition: background 0.16s ease, color 0.16s ease, transform 0.1s ease;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan:hover .subscription-plan-cta,
body:not(.admin-page) .subscription-plan-cta:hover {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan:active .subscription-plan-cta,
body:not(.admin-page) .subscription-plan-cta:active {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
  transform: scale(0.97);
}

/* ПОНЯТНО — centred pill (full-screen panel, not a square box) --- */
body:not(.admin-page) .sheet-cta-btn,
body:not(.admin-page) .pro-sheet-card .sheet-cta-btn,
body:not(.admin-page) .guide-sheet-card .sheet-cta-btn {
  display: block !important;
  width: auto !important;
  min-width: 200px;
  margin: 24px auto 0 !important;
  padding: 15px 56px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--c-text) !important;
  font-family: var(--figma-font) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body:not(.admin-page) .sheet-cta-btn:hover {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
}

/* pack download chip → real download-pack icon button ----------- */
body:not(.admin-page) .pack-download-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  padding: 0 !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 50% !important;
  background: transparent !important;
  position: relative;
  font-size: 0 !important;
  color: transparent !important;
}
body:not(.admin-page) .pack-download-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-text);
  -webkit-mask: var(--ic-download-pack) center / 18px 20px no-repeat;
          mask: var(--ic-download-pack) center / 18px 20px no-repeat;
}
body:not(.admin-page) .pack-download-icon:hover {
  background: var(--c-text) !important;
}
body:not(.admin-page) .pack-download-icon:hover::after {
  background: var(--c-bg);
}
/* hashtags + pack action stay on the SAME row ------------------- */
body:not(.admin-page) .pack-detail-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
}
body:not(.admin-page) .pack-detail-meta .pack-detail-hashtags {
  flex: 1 1 auto;
  min-width: 0;
}
/* v24 end ========================================================= */

/* ===============================================================
   v25 — Readability per client request.
   • DARK: the frosted backdrop made copy hard to read. Keep the
     backdrop (catalog stays visible) but give the TEXT BLOCKS an
     OPAQUE ПЛАШКА fill so the text is crisp. Everything else
     unchanged.
   • LIGHT: leave it exactly as it used to be — a fully filled,
     opaque popup (no transparency, no blur), in Guide and PRO.
   Authoritative: last in the cascade.
   =============================================================== */

/* DARK (theme = no .theme-light) — opaque text blocks ----------- */
body:not(.admin-page):not(.theme-light) .guide-card,
body:not(.admin-page):not(.theme-light) .pro-includes,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2) {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border) !important;
}

/* LIGHT — solid filled popup, no transparency / no blur --------- */
body.theme-light:not(.admin-page) .subscription-sheet {
  background: var(--c-bg) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
/* v25 end ========================================================= */

/* ===============================================================
   v26 — Client review:
   • LIGHT must behave exactly like DARK: same frosted translucent
     backdrop (catalog visible) + OPAQUE text blocks. (Reverts the
     v25 "light = solid filled" override.)
   • Search = a rounded-rectangle bordered card (NOT a full pill),
     with the dotted-leader + folder-icon result rows, matching the
     supplied search mockup.
   Icons audited 1:1 against the assets folder — all match.
   Authoritative: last in the cascade.
   =============================================================== */

/* Both themes: frosted backdrop, catalog visible behind --------- */
body:not(.admin-page) .subscription-sheet,
body.theme-light:not(.admin-page) .subscription-sheet {
  background: color-mix(in srgb, var(--c-bg) 38%, transparent) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.02) !important;
          backdrop-filter: blur(3px) saturate(1.02) !important;
}
/* Both themes: opaque ПЛАШКА text blocks (readable copy) -------- */
body:not(.admin-page) .guide-card,
body:not(.admin-page) .pro-includes,
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2),
body.theme-light:not(.admin-page) .guide-card,
body.theme-light:not(.admin-page) .pro-includes,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border) !important;
}

/* Search — rounded-rectangle card per Figma (catalog, dark):
   ~8px radius + a faint hairline, not a heavy full-alpha pill. */
body:not(.admin-page) .search-box {
  border-radius: var(--figma-radius-search) !important;
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border-soft) !important;
}
body:not(.admin-page) .search-suggestions {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border-soft) !important;
  border-radius: var(--figma-radius-search) !important;
  padding: 6px !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
body:not(.admin-page) .suggestion-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--c-text) !important;
  font-family: var(--figma-font) !important;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
body:not(.admin-page) .suggestion-item > span:last-child {
  flex: 1 1 auto;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
body:not(.admin-page) .suggestion-item > span:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  border-bottom: 1px dotted color-mix(in srgb, var(--c-text) 38%, transparent);
  z-index: -1;
}
body:not(.admin-page) .suggestion-item::after {
  content: "";
  width: 20px; height: 17px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--c-text) 75%, transparent);
  -webkit-mask: var(--ic-folder) center / 20px 17px no-repeat;
          mask: var(--ic-folder) center / 20px 17px no-repeat;
}
body:not(.admin-page) .suggestion-item:hover {
  background: color-mix(in srgb, var(--c-text) 8%, transparent) !important;
  border-radius: 10px;
}
body:not(.admin-page) .suggestion-kind {
  flex: 0 0 auto;
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  color: color-mix(in srgb, var(--c-text) 60%, transparent);
  background: transparent;
}
/* v26 end ========================================================= */

/* ===============================================================
   v27 — Fix the ACTUAL search element + real light transparency.

   Earlier search styling targeted `.search-suggestions`, but what
   actually renders on type is `#search-tracks-panel` /
   `.search-track-card` ("Matching tracks"). renderSearchTrackCard
   is now a Figma row: NAME · · · · · [folder]. Style THAT element
   as the rounded dropdown from the mockup; hide the "Matching
   tracks" header (not in Figma).

   Light: the 38% cream tint over a cream catalog read as solid —
   "no change". Lower the tint so the catalog genuinely shows
   through the frosted glass in BOTH themes.
   Authoritative: last in the cascade.
   =============================================================== */

/* Backdrop — lighter tint so the catalog is clearly visible ----- */
body:not(.admin-page) .subscription-sheet,
body.theme-light:not(.admin-page) .subscription-sheet {
  background: color-mix(in srgb, var(--c-bg) 24%, transparent) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.03) !important;
          backdrop-filter: blur(4px) saturate(1.03) !important;
}

/* Search results dropdown = the real #search-tracks-panel.
   Matches the searchbar radius/hairline so the search UI reads as
   one family (final values re-confirmed against the dedicated
   search-results Figma frame in the search-screen pass). */
body:not(.admin-page) #search-tracks-panel {
  margin: 8px 0 0 !important;
  padding: 6px !important;
  border: 1px solid var(--c-border-soft) !important;
  border-radius: var(--figma-radius-search) !important;
  background: var(--c-plate) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
/* "Matching tracks" header is not in the Figma — hide it */
body:not(.admin-page) #search-tracks-panel .section-title-row {
  display: none !important;
}
body:not(.admin-page) #search-tracks-panel .search-tracks-list {
  display: flex;
  flex-direction: column;
}
body:not(.admin-page) .search-track-card {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
body:not(.admin-page) .search-track-card:hover {
  background: color-mix(in srgb, var(--c-text) 8%, transparent) !important;
}
body:not(.admin-page) .search-track-name {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--figma-font) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text) !important;
}
/* dotted leader bridging the name to the folder icon */
body:not(.admin-page) .search-track-name::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  border-bottom: 1px dotted color-mix(in srgb, var(--c-text) 38%, transparent);
  z-index: -1;
}
body:not(.admin-page) .search-track-folder {
  flex: 0 0 auto;
  width: 20px;
  height: 17px;
  background: color-mix(in srgb, var(--c-text) 75%, transparent);
  -webkit-mask: var(--ic-folder) center / 20px 17px no-repeat;
          mask: var(--ic-folder) center / 20px 17px no-repeat;
}
/* v27 end ========================================================= */

/* ===============================================================
   v28 — Two concrete fixes.
   1. Dotted leader must start AFTER the track name (not run behind
      it across the whole row). The leader is now a dedicated flex
      element between the name and the folder icon.
   2. LIGHT "looked unchanged" because a cream tint over a cream
      catalog is imperceptible. Use a low NEUTRAL scrim + a real
      blur so the catalog is genuinely visible through frosted
      glass in BOTH themes (same behaviour as dark).
   Authoritative: last in the cascade.
   =============================================================== */

/* 1. Search row: NAME (auto width) → leader (fills gap) → folder */
body:not(.admin-page) .search-track-card {
  display: flex !important;
  flex-direction: row !important;   /* a ≤640px media query forced column */
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0;
  width: 100%;
  padding: 14px 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px;
  cursor: pointer;
}
body:not(.admin-page) .search-track-name {
  flex: 0 0 auto !important;       /* only as wide as the text */
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--figma-font) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text) !important;
}
body:not(.admin-page) .search-track-name::after { content: none !important; }
body:not(.admin-page) .search-track-leader {
  flex: 1 1 auto;                  /* fills the gap AFTER the name */
  align-self: flex-end;
  height: 0;
  margin: 0 12px 6px;
  border-bottom: 1px dotted color-mix(in srgb, var(--c-text) 40%, transparent);
}
body:not(.admin-page) .search-track-folder {
  flex: 0 0 auto;
  width: 20px;
  height: 17px;
  background: color-mix(in srgb, var(--c-text) 75%, transparent);
  -webkit-mask: var(--ic-folder) center / 20px 17px no-repeat;
          mask: var(--ic-folder) center / 20px 17px no-repeat;
}
body:not(.admin-page) .search-track-card:hover {
  background: color-mix(in srgb, var(--c-text) 8%, transparent) !important;
}

/* 2. Backdrop — low NEUTRAL scrim + strong blur so the catalog is
      clearly visible through frosted glass in BOTH themes. */
body:not(.admin-page) .subscription-sheet,
body.theme-light:not(.admin-page) .subscription-sheet {
  background: rgba(18, 20, 26, 0.14) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.05) !important;
          backdrop-filter: blur(7px) saturate(1.05) !important;
}
/* v28 end ========================================================= */

/* ===============================================================
   v29 — Client review batch (2026-05-17):

   1. LIGHT must look exactly like DARK in the GUIDE/PRO popups:
      transparent SURROUND (frosted catalog visible behind) with
      only the inner blocks colour-filled. Root cause: the v18
      light rule `body.theme-light … .pro-sheet-card { background:
      var(--c-plate) }` (specificity 0,3,1) out-specifies the v24
      transparent base (0,2,1), so in LIGHT the whole panel was a
      solid cream sheet while DARK stayed see-through. Re-assert a
      transparent panel for LIGHT at matching specificity, later in
      source, so it wins. Inner blocks keep the v26 ПЛАШКА fill in
      both themes (unchanged) — that is the "blocks filled" look.

   2. The popup stretched edge-to-edge on desktop (card width =
      100vw → 1850px on a monitor; the client screenshot). It must
      be a centred app-width column on the full-screen frosted
      overlay (same width as the catalog ≈ 440px), so it "fits the
      screen" on any viewport, exactly like the mobile mock.

   3. Whole-pack download / buy / PRO action must sit ON the SAME
      line as the pack hashtags (the client: "на уровне хештега").
      It was wrapping above the hashtags. Force a single row:
      hashtags shrink/wrap inside their cell, the action stays a
      fixed chip on the right, both vertically centred.

   Authoritative: last in the cascade.
   =============================================================== */

/* 1 + 2. Frameless, CENTRED app-width column. Transparent surround
   in BOTH themes (LIGHT now matches DARK); the frosted
   .subscription-sheet backdrop (v28) shows the catalog through the
   gaps, inner blocks stay ПЛАШКА-filled (v26). */
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card,
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 1;
  width: 100% !important;
  max-width: min(460px, 100vw - 32px) !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding: 30px 22px 40px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

/* Inner blocks stay colour-filled (ПЛАШКА) in BOTH themes — this is
   the "blocks have colour, surround is transparent" the client
   asked for. (Re-assert so nothing above can flatten LIGHT.) */
body:not(.admin-page) .guide-card,
body:not(.admin-page) .pro-includes,
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2),
body.theme-light:not(.admin-page) .guide-card,
body.theme-light:not(.admin-page) .pro-includes,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border) !important;
}

/* 3. Whole-pack action on the SAME line as the hashtags. */
body:not(.admin-page) .pack-detail-meta {
  display: flex !important;
  flex-direction: row !important;     /* a ≤640px media query forced column */
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
body:not(.admin-page) .pack-detail-meta .pack-detail-hashtags {
  flex: 1 1 auto !important;
  min-width: 0;
  align-self: center !important;
  /* `.hashtags` carries `margin-top: 48px !important` (meant to space
     the tag line under the card description). In the meta row it just
     shoved the tags below the action button — kill it here. */
  margin: 0 !important;
}
body:not(.admin-page) .pack-detail-meta > #download-pack-button,
body:not(.admin-page) .pack-detail-meta > #buy-pack-button,
body:not(.admin-page) .pack-detail-meta > .pack-pro-chip,
body:not(.admin-page) .pack-detail-meta > .pack-meta-chip {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
}
/* v29 end ========================================================= */

/* ===============================================================
   v30 — Card behaviour (doc #5, #6, #8 layout)
   #5  Expanded side "Pro" = plain text, no chip border/box
       (Figma 2151:43). The collapsed .pack-pro-mark is unchanged.
   #6  Download-pack button = ONE circular icon, slightly bigger.
       It previously carried the chip ring AND the icon circle.
   #8  Stop the hashtag/meta row being pulled up under the cover
       (legacy margin-top:-28px on .pack-detail-meta).
   Authoritative: last in the cascade.
   =============================================================== */
body:not(.admin-page) .pack-detail-meta {
  margin-top: 0 !important;
}
body:not(.admin-page) .pack-detail-meta .pack-pro-chip {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--c-text) !important;
  font-family: var(--figma-font-bold) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
body:not(.admin-page) .pack-download-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  box-shadow: none !important;
}
body:not(.admin-page) .pack-download-icon::after {
  -webkit-mask: var(--ic-download-pack) center / 20px 22px no-repeat;
          mask: var(--ic-download-pack) center / 20px 22px no-repeat;
}
/* v30 end ========================================================= */

/* ===============================================================
   v31 — Client review batch (Google-doc #9–#17), verified 1:1
   against Lola's кнопки/иконки reference set. Appended last →
   authoritative over the entire cascade above. Specificity of the
   theme-light selectors matches the v18 (0,3,1) overrides and is
   later in source, so it wins in BOTH themes.
   =============================================================== */

/* #9 / #15 — The surround (catalog) must be almost invisible so the
   popup is what the eye reads ("в Figma почти не видно обложек").
   Strong neutral-dark scrim in BOTH themes. */
body:not(.admin-page) .subscription-sheet,
body.theme-light:not(.admin-page) .subscription-sheet {
  display: flex !important;
  place-items: initial !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(7, 8, 11, 0.93) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.02) !important;
          backdrop-filter: blur(9px) saturate(1.02) !important;
  overflow-y: auto !important;
}
/* Keep the closed sheet truly gone — this v31 scrim rule reaches
   (0,3,1) via the theme-light selector and is last in source, so it
   would otherwise out-rank the earlier `.subscription-sheet.hidden`
   display:none. Re-assert it at higher specificity, last. */
body:not(.admin-page) .subscription-sheet.hidden,
body.theme-light:not(.admin-page) .subscription-sheet.hidden {
  display: none !important;
}

/* #10 / #13 — a CONTAINED, solid, well-rounded card on the dark
   scrim (Figma), wider + taller breathing room. Light panel is a
   calm sand (NOT the old bright cream — doc #15). */
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card,
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  width: 100% !important;
  max-width: min(500px, 100vw - 24px) !important;
  min-height: 0 !important;
  margin: 30px auto 40px !important;
  padding: 36px 28px 40px !important;
  border-radius: 30px !important;
  background: #15181F !important;
  border: 1px solid rgba(242, 238, 230, 0.10) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
}
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  background: #E9E3D4 !important;
  border: 1px solid rgba(21, 26, 32, 0.10) !important;
}

/* #10 — Guide/PRO inner blocks bigger & MORE rounded (catalog cards
   + searchbar keep the small --figma-radius-* tokens, unchanged). */
body:not(.admin-page) .guide-card,
body:not(.admin-page) .pro-includes {
  padding: 22px 20px !important;
  border-radius: 20px !important;
  background: rgba(242, 238, 230, 0.05) !important;
  border: 1px solid rgba(242, 238, 230, 0.10) !important;
}
body.theme-light:not(.admin-page) .guide-card,
body.theme-light:not(.admin-page) .pro-includes {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(21, 26, 32, 0.08) !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  padding: 20px 14px 18px !important;
  border-radius: 18px !important;
}
body:not(.admin-page) .guide-cards { gap: 16px !important; }
body:not(.admin-page) .guide-cards-row { gap: 16px !important; }

/* #11 — heading underline accent: hairline + soft (was 2px solid). */
body:not(.admin-page) .guide-card h3 {
  padding-bottom: 7px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--c-text) 32%, transparent) !important;
}

/* #12 / #21 — description copy brighter and not so heavy. */
body:not(.admin-page) .guide-card p {
  color: color-mix(in srgb, var(--c-text) 86%, transparent) !important;
  font-weight: 500 !important;
}
body:not(.admin-page) .pro-subtitle {
  color: color-mix(in srgb, var(--c-text) 82%, transparent) !important;
  font-weight: 500 !important;
}
body:not(.admin-page) .pro-include span:last-child {
  color: color-mix(in srgb, var(--c-text) 84%, transparent) !important;
}
body:not(.admin-page) .guide-card h3,
body:not(.admin-page) .pro-includes-title {
  color: var(--c-text) !important;
}

/* #17 — plan period labels ("1 МЕСЯЦ" / "1 ГОД") were tiny. */
body:not(.admin-page) .pro-sheet-card .subscription-plan strong,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: color-mix(in srgb, var(--c-text) 88%, transparent) !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan strong + span,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan strong + span {
  font-size: 22px !important;
}

/* #14 / #15 — ПОНЯТНО: a FILLED pill, identical treatment in both
   themes (Lola: dark fill+light text / cream fill+dark text). Force
   Akrobat so the light-theme label isn't a different face. */
body:not(.admin-page) .sheet-cta-btn,
body:not(.admin-page) .pro-sheet-card .sheet-cta-btn,
body:not(.admin-page) .guide-sheet-card .sheet-cta-btn,
body.theme-light:not(.admin-page) .sheet-cta-btn,
body.theme-light:not(.admin-page) .pro-sheet-card .sheet-cta-btn,
body.theme-light:not(.admin-page) .guide-sheet-card .sheet-cta-btn {
  background: #22262F !important;
  color: #F2EEE6 !important;
  border: 0 !important;
  font-family: 'Akrobat', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  padding: 16px 56px !important;
}
body.theme-light:not(.admin-page) .sheet-cta-btn,
body.theme-light:not(.admin-page) .pro-sheet-card .sheet-cta-btn,
body.theme-light:not(.admin-page) .guide-sheet-card .sheet-cta-btn {
  background: #FBF7EC !important;
  color: #15181F !important;
}
body:not(.admin-page) .sheet-cta-btn:hover,
body.theme-light:not(.admin-page) .sheet-cta-btn:hover {
  opacity: 0.92 !important;
}

/* #16 — Light/Dark toggle: Lola's scheme (dark track + cream knob),
   the SAME in both themes. Was colour-swapped & unreadable in
   light. Knob slide direction kept from v21 (transform untouched). */
body:not(.admin-page) .theme-toggle,
body.theme-light:not(.admin-page) .theme-toggle {
  background: #20242D !important;
  border: 1px solid #20242D !important;
}
body:not(.admin-page) .theme-toggle::before,
body.theme-light:not(.admin-page) .theme-toggle::before {
  background: #F0EBDF !important;
}
body:not(.admin-page) .theme-toggle-opt,
body.theme-light:not(.admin-page) .theme-toggle-opt {
  color: rgba(240, 235, 223, 0.55) !important;
}
body:not(.admin-page):not(.theme-light) .theme-toggle-opt.is-active,
body.theme-light:not(.admin-page) .theme-toggle-opt.is-active {
  /* The active label sits ON the cream knob (::before). An earlier
     rule (v17/v18) still painted background:var(--c-text) here, so in
     LIGHT the active option got a dark box over the cream knob and
     "LIGHT" became dark-on-dark + visibly layered. Force the box away
     so only the knob shows, dark ink on cream. */
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  color: #16191F !important;
}
/* v31 end ========================================================= */

/* ===============================================================
   v32 — Client field report (2026-05-19):
   #5  On phones Telegram's own close / "свернуть приложение" controls
       overlapped the PRO button (top-right). Reserve the height
       Telegram reports via --tg-safe-top (set in app.js from
       contentSafeAreaInset / safeAreaInset, with a mobile fallback)
       so the whole top bar drops below the Telegram chrome.
   Authoritative: last in the cascade.
   =============================================================== */
body.telegram-webapp:not(.admin-page) {
  padding-top: var(--tg-safe-top, 0px) !important;
  box-sizing: border-box;
}
/* The Guide/PRO sheets are position:fixed full-screen overlays, so
   body padding doesn't move them — pad their inner column too so the
   theme toggle / × isn't under the Telegram chrome either. */
body.telegram-webapp:not(.admin-page) .subscription-sheet {
  padding-top: var(--tg-safe-top, 0px) !important;
}
/* v32 end ========================================================= */

/* ===============================================================
   v34 — Field compare against Figma (2026-05-19 night):
   Client report: the popup looked like TWO frames — a pale sand
   "card" sitting on a near-black surround ("фон пропал / вылетел из
   фрейма"). In Figma the Guide/PRO popup is ONE continuous warm
   taupe-grey panel covering the whole sheet (dark equivalent in dark
   theme), with the catalog only faintly visible behind. Inner blocks
   are more pill-rounded and gaps slightly tighter than v31.
   Authoritative: last in the cascade.
   =============================================================== */

/* v34 sheet-background + card-invisibility rules removed: both
   superseded by v37 (card restored as visible contained surface) and
   v40 (sheet scrim → transparent frosted). What survives below is
   only the inner-block radii + gaps, which no later version touches. */

/* Inner blocks: more pill-rounded (Figma reference). */
body:not(.admin-page) .guide-card,
body:not(.admin-page) .pro-includes {
  border-radius: 26px !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  border-radius: 22px !important;
}
/* Tighter vertical rhythm between blocks. */
body:not(.admin-page) .guide-cards { gap: 12px !important; }
body:not(.admin-page) .guide-cards-row { gap: 12px !important; }
/* v34 end ========================================================= */

/* v35 removed (orange year-plan tile) — fully superseded by v36 which
   restored the cream plate at the same selectors + specificity with
   !important. Every property v35 set was a no-op at runtime. */

/* ===============================================================
   v36 — Client Figma re-check: the Pro plan tiles are the SAME cream
   plate; the differentiation is in the КУПИТЬ button.
     • 1 МЕСЯЦ → solid dark fill (primary CTA)
     • 1 ГОД   → outline cream/dark border (secondary CTA)
   Reverts the v35 orange year tile.
   Authoritative: last in the cascade.
   =============================================================== */

/* Both plan tiles look identical (cream plate, neutral border) —
   override v35's year-tile orange at the same (0,4,1) specificity. */
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2),
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  background: var(--c-plate) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2) strong,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong {
  color: color-mix(in srgb, var(--c-text) 60%, transparent) !important;
}
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2) strong + span,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong + span {
  color: var(--c-text) !important;
}

/* CTA differentiation. Month = filled dark (primary); Year = outline.
   Selectors reach (0,5,1) so they beat any prior :not-stacked rules. */
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1) .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1) .subscription-plan-cta {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
  border: 1px solid var(--c-text) !important;
}
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2) .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) .subscription-plan-cta {
  background: transparent !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-text) !important;
}
/* Hover: invert each style. */
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1):hover .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1):hover .subscription-plan-cta {
  background: transparent !important;
  color: var(--c-text) !important;
}
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2):hover .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2):hover .subscription-plan-cta {
  background: var(--c-text) !important;
  color: var(--c-bg) !important;
}
/* v36 end ========================================================= */

/* ===============================================================
   v37 — Restore the CONTAINED CARD design per Figma.
   Diagnosis: v34 zeroed the card (background:transparent, radius:0,
   shadow:none, margin:0) and made the scrim taupe — so the popup
   read as ONE flat surround with no visible "card" sitting on a
   dark backdrop. Figma shows a clear cream card with rounded corners
   + drop shadow on a DARK scrim (катало почти не видно).
   Authoritative: last in the cascade.
   =============================================================== */

/* v37 sheet-scrim removed — v40 redefines the scrim as transparent
   frosted glass, fully overriding background + backdrop-filter at the
   same selector + specificity. Only the card geometry below survives. */

/* Card: actually visible — solid background, big rounded corners,
   drop shadow, top/bottom margin so there's dark space around it. */
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card,
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  background: #16191F !important;
  border: 1px solid rgba(242, 238, 230, 0.08) !important;
  border-radius: 36px !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  margin: clamp(24px, 5vh, 56px) auto !important;
  padding: 30px 26px 32px !important;
  /* v65 (CSV D2): widen the sheet to match the catalog shell — the
     Figma popup is near-full-width, not a narrow 420px dialog. Mobile
     stays near-full-width via the 100vw-32px clamp; desktop fills up to
     the 720px shell instead of leaving big empty side gutters. */
  max-width: min(680px, 100vw - 32px) !important;
  width: min(680px, 100vw - 32px) !important;
  min-height: 0 !important;
  height: auto !important;
}
/* Light theme card: cream/sand fill, dark hairline */
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  background: #EFE9D7 !important;
  border: 1px solid rgba(21, 26, 32, 0.10) !important;
}
/* v37 end ========================================================= */

/* ===============================================================
   v38 — Catalog (main view) corrections from client field review:
   • Bigger gap between searchbar and the first pack card (was tight,
     Lola's verстка has more breathing room).
   • Pack-level "скачать" was double-outlined (chip ring + the box of
     the icon glyph itself). Drop the chip ring — keep only the icon.
   • Light-theme play icon was rendering navy-slate (--c-player was
     #505A68) — reads as "blue" against the cream catalog. Switch to
     a warm dark grey that sits inside the brand palette.
   Authoritative: last in the cascade.
   =============================================================== */

/* 1) Bigger gap searchbar → first card. */
body:not(.admin-page) .search-panel {
  margin: 0 0 22px !important;
}

/* 2) Single-outline download chip. Remove the surrounding circle so
   what's left is just the icon glyph, slightly larger. */
body:not(.admin-page) .pack-download-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(.admin-page) .pack-download-icon::after {
  /* v64: pack-level download icon is CIRCLE + arrow per latest client
     reference photo. Track-level kept as plain arrow via download.svg
     elsewhere in this file. Larger square mask (28×28) to give the
     circle room to breathe without aliasing the stroke. */
  /* v65 (CSV): icon is 46×52 (taller than wide). A 28×28 square mask
     squished it (read "криво / великовата"). Use the real SVG at its
     native aspect ratio, slightly smaller. The ::after fills the 44px
     tap target (inset:0), so right-align the mask so the icon's centre
     lines up vertically with the narrower track-download arrows below
     (client: "она сдвинута чуть лева"). */
  -webkit-mask: var(--ic-download-pack) right center / 23px 26px no-repeat !important;
          mask: var(--ic-download-pack) right center / 23px 26px no-repeat !important;
}
body:not(.admin-page) .pack-download-icon:hover {
  background: transparent !important;
}
body:not(.admin-page) .pack-download-icon:hover::after {
  background: color-mix(in srgb, var(--c-text) 75%, transparent) !important;
}

/* 3) Light-theme play icon: warm dark grey, not navy/slate. Matches
   Lola's verстка ("серая стрелка", not "синяя"). */
body.theme-light:not(.admin-page) {
  --c-player: #6B655B;
}
/* v38 end ========================================================= */

/* ===============================================================
   v39 — Two field corrections:
   a) The expanded-card PRO label (.pack-pro-chip) inherited the
      tiny font-size of the track-meta row → it read much smaller
      than the collapsed-card .pack-pro-mark. Match the collapsed
      size/weight exactly so the chip is visually consistent in
      both states (Figma intent).
   b) Catalog typography felt "жирноват и уплотнённо". Akrobat
      Bold (700) was applied to a lot of body text. Step the
      weights down by one stop on titles + track names so the
      catalog reads closer to the Figma. Buttons / labels stay
      bold (700) because they're CTAs.
   Authoritative: last in the cascade.
   =============================================================== */

/* a) PRO chip in expanded card = same size as collapsed PRO mark. */
body:not(.admin-page) .pack-detail-meta .pack-pro-chip {
  font-size: 16px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  font-family: var(--figma-font-bold) !important;
}

/* b) Lighter weights on titles / track names — matches the Figma
   "не пережатый" look. CTAs (BUY TRACK / PRO buttons / etc.) stay
   bold so they keep their tap affordance. */
body:not(.admin-page) .pack-title,
body:not(.admin-page) .pack-card-header h3 {
  font-weight: 600 !important;
}
body:not(.admin-page) .track-main strong,
body:not(.admin-page) .search-track-card strong,
body:not(.admin-page) .search-track-name {
  font-weight: 600 !important;
}
body:not(.admin-page) .pack-card .muted,
body:not(.admin-page) .pack-card p.muted {
  font-weight: 400 !important;
}
/* v39 end ========================================================= */

/* ===============================================================
   v40 — Client Figma re-check on Guide/Pro:
   The surround is NOT a solid dark scrim — it's FROSTED GLASS.
   In the Figma the catalog is clearly visible (blurred + slightly
   dimmed) BEHIND the popup; the cream card sits on top of that
   blur. I previously overshot with rgba(7,8,11,0.93) (near-opaque)
   which hid the catalog completely. Restore the frosted look.
   Card stays contained + cream/dark — only the scrim changes.
   Authoritative: last in the cascade.
   =============================================================== */
body:not(.admin-page) .subscription-sheet,
body.theme-light:not(.admin-page) .subscription-sheet {
  /* Frosted, not opaque: catalog should be VISIBLE behind through
     soft blur. 22px was too aggressive — it averaged catalog into a
     single colour. Drop the dim, ease the blur. */
  background: transparent !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
          backdrop-filter: blur(8px) saturate(1.1) !important;
}
/* v40 end ========================================================= */

/* ===============================================================
   v41 — Guide/PRO sheet scroll containment (desktop fix).
   On shorter desktop windows (e.g. Telegram desktop WebApp ~730px)
   the GUIDE card (~728px) overflowed the viewport. The .subscription-
   sheet had overflow-y:auto, so a page-edge scrollbar appeared the
   moment the sheet opened — even though the catalog underneath fit
   the screen perfectly. Constrain the card itself instead: cap its
   height to the viewport (dvh, so Telegram's dynamic top chrome is
   respected) and put overflow on the card. On tall enough windows
   the card stays auto-height and no scroll appears at all; on truly
   short windows the user gets a soft inner scroll inside the card,
   not a chrome scrollbar at the edge of the screen.
   Authoritative: last in the cascade.
   =============================================================== */
body:not(.admin-page) .subscription-sheet {
  /* Outer sheet must not scroll: card handles its own overflow. */
  overflow: hidden !important;
}
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card,
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  /* Equivalent to subtracting 2 × the v37 margin clamp(24px,5vh,56px)
     from full viewport, but in dvh so Telegram's expandable header
     and mobile address bars don't push content out of view. */
  max-height: calc(100dvh - clamp(48px, 10dvh, 112px)) !important;
  overflow-y: auto !important;
  /* Prevent scroll chaining: when the card reaches its bounds, the
     wheel shouldn't start scrolling the catalog underneath. */
  overscroll-behavior: contain !important;
  /* Stable gutter avoids a horizontal jump when the scrollbar first
     appears as content grows past max-height. */
  scrollbar-gutter: stable !important;
}
/* The card is `display:flex; flex-direction:column` (set by earlier
   versions for its column layout). When max-height above is shorter
   than intrinsic content, the default `flex-shrink:1` makes the
   browser COMPRESS children to fit — the theme-toggle pill in
   particular collapsed from ~38px to ~8px (content overflowed the
   button). Pin direct children to their intrinsic size and let the
   parent's overflow-y:auto produce the scrollbar instead. */
body:not(.admin-page) .subscription-sheet-card > *,
body:not(.admin-page) .guide-sheet-card > *,
body:not(.admin-page) .pro-sheet-card > * {
  flex-shrink: 0 !important;
}
/* Slimmer scrollbar so the inner scroll, when it does appear on tiny
   windows, doesn't break the cream/dark card aesthetic. */
body:not(.admin-page) .subscription-sheet-card::-webkit-scrollbar {
  width: 6px;
}
body:not(.admin-page) .subscription-sheet-card::-webkit-scrollbar-thumb {
  background: rgba(242, 238, 230, 0.18);
  border-radius: 3px;
}
body.theme-light:not(.admin-page) .subscription-sheet-card::-webkit-scrollbar-thumb {
  background: rgba(21, 26, 32, 0.18);
}
/* v41 end ========================================================= */

/* ===============================================================
   v42 — Honor prefers-reduced-motion (WCAG 2.3.3 / a11y).
   Users with vestibular-motion sensitivity enable "reduce motion"
   in their OS. The browser exposes this via the media query below,
   and apps are expected to suppress non-essential animation. We
   neutralise durations rather than disabling rules outright so the
   final state of every transform/transition still applies — just
   instantly. Sweeping `*` selector is intentional: this is a safety
   net for the ~10 versions of bespoke transitions already in this
   file, and any future ones added without remembering to gate.
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* v42 end ========================================================= */

/* ===============================================================
   v43 — Two-line GUIDE title via spans (was <br>).
   The Figma design splits "WELCOME TO / MONO4MONO" onto two lines as
   a deliberate brand-look, not a wrapping fallback. Previously the
   line break was hardcoded with <br>, which is presentation HTML and
   would force "ДОБРО ПОЖАЛОВАТЬ / В MONO4MONO" if the heading were
   ever translated — wrong break for Russian. Each line now lives in a
   .guide-title-line span; CSS turns each into a block so the visual
   stays identical while the markup is i18n-friendly.
   =============================================================== */
.guide-title-line {
  display: block;
}
/* v43 end ========================================================= */

/* ===============================================================
   v44 — Light-theme scrim was reading as solid cream.
   v40 set the sheet to `background: transparent` + blur, intending
   "frosted glass": catalog visible behind through soft blur. That
   works in dark theme (catalog is dark, blur produces a dim glass
   look). In light theme the body is near-white cream and the pack
   cards are cream-toned plates too — blur of cream-on-cream is
   still cream, so the scrim disappeared visually and the card
   floated on a uniform cream void with no edge.
   Per the Figma reference the LIGHT sheet should read as warm
   frosted gray with hints of the catalog visible behind. Add a
   subtle warm-dark tint over the blur in light theme only; dark
   theme keeps the transparent v40 behaviour.
   =============================================================== */
body.theme-light:not(.admin-page) .subscription-sheet {
  background: rgba(40, 35, 28, 0.38) !important;
}
/* v44 end ========================================================= */

/* ===============================================================
   v45 — Invert sheet card: outer transparent, inner blocks solid.
   Per Figma reference: the outer .subscription-sheet-card should NOT
   be a visible cream rectangle wrapping everything. Title and theme-
   toggle sit directly on the frosted scrim, and the SPACE between
   inner blocks (КАК ЭТО РАБОТАЕТ / PRO ПОДПИСКА / SEARCH | BUY in
   GUIDE; ЧТО ВХОДИТ / plan tiles in PRO) shows the blurred catalog
   through. So each inner block carries its own cream/dark fill
   instead of the wrapper carrying one big fill.
   v37 had restored the wrapper as a visible card; this inverts back
   to v34's intent but with PROPER inner-block solid backgrounds
   (v34 had inner blocks transparent, which left them as outlined
   hollow shapes — wrong).
   Authoritative: last in the cascade.
   =============================================================== */

/* Outer card: invisible wrapper. Keeps layout (max-width, margin,
   padding for inset, max-height + overflow from v41) but no fill. */
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card,
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* GUIDE inner cards: solid cream plates, no border. */
body.theme-light:not(.admin-page) .guide-card {
  background: #F2EDDE !important;
  border: 0 !important;
}
body:not(.admin-page):not(.theme-light) .guide-card {
  background: #1C1F26 !important;
  border: 0 !important;
}

/* PRO "ЧТО ВХОДИТ" panel: solid cream plate. */
body.theme-light:not(.admin-page) .pro-includes {
  background: #F2EDDE !important;
  border: 0 !important;
}
body:not(.admin-page):not(.theme-light) .pro-includes {
  background: #1C1F26 !important;
  border: 0 !important;
}

/* PRO plan tiles: solid cream plates. */
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan {
  background: #F2EDDE !important;
  border: 0 !important;
}
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan {
  background: #1C1F26 !important;
  border: 0 !important;
}
/* v45 end ========================================================= */

/* ===============================================================
   v46 — Typography parity with Figma reference.
   Diagnosis from inspecting computed styles vs reference photos:
     • Body text inside GUIDE/PRO cards rendered at 55% opacity
       black ("rgba(0,0,0,0.55)"), making it read as washed-out
       gray. Reference shows solid dark ink — bumps readability
       and matches Figma's near-black tone.
     • Body text weight 500 was slightly heavy for the airy
       editorial look; drop to 400.
     • Inner card heading size 14px was undersized relative to
       the inner-block padding; the reference reads as ~16px.
   Authoritative: last in the cascade.
   =============================================================== */

/* GUIDE / PRO body copy — solid dark, regular weight. */
body.theme-light:not(.admin-page) .guide-card p,
body.theme-light:not(.admin-page) .pro-subtitle,
body.theme-light:not(.admin-page) .pro-include {
  color: #1C1F26 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
body:not(.admin-page):not(.theme-light) .guide-card p,
body:not(.admin-page):not(.theme-light) .pro-subtitle,
body:not(.admin-page):not(.theme-light) .pro-include {
  color: #EFE9D7 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}

/* Card headings — slightly larger to match reference proportions. */
body:not(.admin-page) .guide-card h3,
body:not(.admin-page) .pro-includes-head {
  font-size: 16px !important;
}
/* v46 end ========================================================= */

/* ===============================================================
   v47 — Exact Figma parity (nodes 2156:685 GUIDE + 2169:848 PRO).
   Sourced via Figma MCP get_design_context. Frame width 915px in
   Figma → ~420px Telegram WebApp logical width, scale factor 0.459.
   All numeric values in this section are Figma px × 0.459 rounded
   to readable CSS px, except colours and the scrim composition
   which Figma specifies absolutely.
   Authoritative: last in the cascade.
   =============================================================== */

/* ---- Scrim: warm taupe-gray with strong frosted blur ---- */
/* Figma: backdrop-blur 16.5px, bg rgba(168,165,154,0.82).      */
/* Dark theme keeps the same scrim — the design uses a single   */
/* overlay regardless of which catalog theme is underneath.     */
body:not(.admin-page) .subscription-sheet,
body.theme-light:not(.admin-page) .subscription-sheet {
  background: rgba(168, 165, 154, 0.82) !important;
  -webkit-backdrop-filter: blur(16.5px) !important;
          backdrop-filter: blur(16.5px) !important;
}

/* ---- Card colour palette: light theme = cool cream, no border ---- */
body.theme-light:not(.admin-page) .guide-card,
body.theme-light:not(.admin-page) .pro-includes,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan {
  background: #F2EEE6 !important;
  border-radius: 34px !important;
  border: 0 !important;
}
/* Card geometry (radius) is the same in both themes — only colours
   differ. Apply the radius universally; dark theme adds its own
   background + border below in v48. */
body:not(.admin-page) .guide-card,
body:not(.admin-page) .pro-includes,
body:not(.admin-page) .pro-sheet-card .subscription-plan {
  border-radius: 34px !important;
}

/* ---- Title "WELCOME TO MONO4MONO" / "PRO ДОСТУП" ---- */
/* Bebas Neue Cyrillic, ~48px, line-height ~56, near-black.       */
/* Selectors include explicit theme-light variant so the legacy   */
/* (0,3,1) multi-selector that sets light-theme heading colour to */
/* #1C1F26 doesn't out-rank us — same specificity, later wins.    */
body:not(.admin-page) .guide-title,
body:not(.admin-page) .pro-title,
body.theme-light:not(.admin-page) .guide-title,
body.theme-light:not(.admin-page) .pro-title {
  font-family: "Bebas Neue Cyrillic", "Akrobat", sans-serif !important;
  font-weight: 400 !important;
  font-size: 48px !important;
  line-height: 56px !important;
  letter-spacing: 0 !important;
  color: #0D1014 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  margin: 0 0 22px !important;
}

/* ---- Inner card heading "КАК ЭТО РАБОТАЕТ" / "PRO ПОДПИСКА" ---- */
/* Akrobat Bold ~20px, near-black, with thin underline beneath.    */
body:not(.admin-page) .guide-card h3,
body.theme-light:not(.admin-page) .guide-card h3 {
  font-family: "Akrobat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 23px !important;
  color: #0D1014 !important;
  text-transform: uppercase !important;
  display: inline-block;
  margin: 0 auto 14px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid #0D1014;
}

/* ---- Body text inside cards: Figma uses UPPERCASE ---- */
/* The data still arrives lowercase; we transform via CSS.        */
body:not(.admin-page) .guide-card p,
body.theme-light:not(.admin-page) .guide-card p {
  font-family: "Akrobat", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 17px !important;
  color: #0D1014 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 !important;
}
/* SEARCH / BUY cards have left-aligned text. */
body:not(.admin-page) .guide-cards-row .guide-card {
  text-align: left !important;
}
body:not(.admin-page) .guide-cards-row .guide-card h3 {
  margin-left: 0 !important;
  margin-right: auto !important;
}
body:not(.admin-page) .guide-cards-row .guide-card p {
  text-align: left !important;
}

/* ---- ПОНЯТНО pill (sheet CTA at bottom) ---- */
body:not(.admin-page) .sheet-cta-btn {
  background: #F2EEE6 !important;
  color: #0D1014 !important;
  font-family: "Akrobat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 16px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  border-radius: 17px !important;
  border: 0 !important;
  margin-top: 20px !important;
}

/* ---- PRO "PRO ДОСТУП" subtitle ---- */
body:not(.admin-page) .pro-subtitle {
  font-family: "Akrobat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 17px !important;
  color: #0D1014 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  margin: 0 0 18px !important;
}

/* ---- PRO "ЧТО ВХОДИТ" block: cream plate + grid layout ---- */
body:not(.admin-page) .pro-includes {
  padding: 22px 24px !important;
}
body:not(.admin-page) .pro-includes .pro-include {
  font-family: "Akrobat", sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 18px !important;
  color: #0D1014 !important;
}
/* HEAD rule must come AFTER .pro-include rule because the element
   has both classes and same specificity — later wins. Adding the
   .pro-include qualifier raises specificity to (0,2,0) so it
   doesn't matter if a later .pro-include rule tries to override. */
body:not(.admin-page) .pro-includes .pro-include.pro-include-head {
  font-family: "Akrobat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 33px !important;
  line-height: 38px !important;
  color: #0D1014 !important;
  text-transform: uppercase !important;
}
/* Big numerals 01 / 02 / 03 next to each label. */
body:not(.admin-page) .pro-include-num {
  font-family: "Akrobat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 43px !important;
  line-height: 1 !important;
  color: #0D1014 !important;
  margin-right: 10px;
}

/* ---- PRO plan tiles (1 МЕСЯЦ / 1 ГОД) ---- */
body:not(.admin-page) .pro-sheet-card .subscription-plan {
  padding: 18px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan strong {
  font-family: "Akrobat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 23px !important;
  line-height: 26px !important;
  color: #0D1014 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}
body:not(.admin-page) .pro-sheet-card .subscription-plan strong + span {
  font-family: "Akrobat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 19px !important;
  color: #0D1014 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  margin-bottom: 8px;
}
/* КУПИТЬ button inside plan tile — cream pill with dark warm-red ink */
/* (matches Figma #390400 — same colour as LIGHT label on theme toggle). */
/* v36 had differentiated month=filled vs year=outline using nth-child  */
/* selectors at (0,3,1) specificity. Figma actually shows BOTH tiles    */
/* with identical cream-pill КУПИТЬ buttons, so we need to override v36 */
/* at the same nth-child specificity (or higher).                      */
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1) .subscription-plan-cta,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1) .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) .subscription-plan-cta {
  background: #FFFFF4 !important;
  color: #390400 !important;
  border: 0 !important;
  font-family: "Akrobat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 8px 22px !important;
  border-radius: 14px !important;
}
/* Hover — keep both consistent: subtle warm-dark inversion. */
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1):hover .subscription-plan-cta,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2):hover .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1):hover .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2):hover .subscription-plan-cta {
  background: #390400 !important;
  color: #FFFFF4 !important;
}

/* ---- Theme toggle: cream knob with warm-dark "LIGHT" label ---- */
/* Figma: outer dark plate #161B21 at 58% opacity, cream knob #FFFFF4,
   LIGHT label color #390400, DARK label color #FFFFF4. */
body:not(.admin-page) .theme-toggle {
  background: rgba(22, 27, 33, 0.58) !important;
  border: 0 !important;
  padding: 4px !important;
  border-radius: 40px !important;
}
body:not(.admin-page) .theme-toggle::before {
  background: #FFFFF4 !important;
}
body:not(.admin-page) .theme-toggle-opt {
  font-family: "Akrobat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}
/* Active (knob underneath) → warm-dark ink */
body:not(.admin-page) .theme-toggle-opt.is-active,
body.theme-light:not(.admin-page) .theme-toggle-opt.is-active {
  color: #390400 !important;
}
/* Inactive (on dark track) → cream ink */
body:not(.admin-page) .theme-toggle-opt:not(.is-active),
body.theme-light:not(.admin-page) .theme-toggle-opt:not(.is-active) {
  color: #FFFFF4 !important;
  opacity: 1 !important;
}
/* v47 end ========================================================= */

/* ===============================================================
   v48 — Dark theme parity (Figma nodes 2175:1111 GUIDE_DARK and
   2175:1465 PRO_DARK).
   Design tokens explicit in the Figma file:
     • темный_фон     #0D1014  body / sheet background
     • плашки_тёмные  #161B21  inner-card / pill plates
     • обводка_dark   #505A68  hairline border on dark plates
     • text_dark      #F2EEE6  body text on dark plates (cream)
     • светлый_фон    #FFFFF4  pure cream surface (sheet title, knob)
   The dark scrim is #161B21 at 96% opacity with the same 16.5px
   backdrop-blur as the light scrim. Almost-opaque on purpose: the
   Figma frame shows only a faint hint of the catalog behind, not
   the warm taupe of the light variant.
   Selectors use `body:not(.admin-page):not(.theme-light)` so they
   strictly target dark, leaving v47's light styling intact.
   Authoritative: last in the cascade.
   =============================================================== */

/* ---- Dark scrim (Rectangle 22 Figma spec) ----
   Figma inspection:
     Fill           #161B21 (token: плашки_тёмные)
     Layer opacity  96%
     Background    blur 33
     Effects        Monotone noise: colour #141312, size 0.5,
                    density 100%, opacity 27%
   Client clarified: the look should be "затемнено, не замылено" —
   catalog track names (e.g. "ambient vol 1") must be READABLE.
   So we apply the Figma palette but skip the blur and ease the
   layer alpha to ~0.5 to let the catalog stay sharp. The noise
   overlay uses the exact Figma values (#141312 @ 27%) so the
   grain reads consistently with the design tokens.            */
body:not(.admin-page):not(.theme-light) .subscription-sheet {
  /* v65: client reverted the "no-blur / dim-only" look (CSV D1 — "пропал
     блюр фона в гайде и про"). Figma shows the catalog FROSTED behind the
     popup, so restore a real backdrop blur with a lighter dim (so the blur
     is actually visible rather than averaged into a flat dark wash). */
  background: rgba(22, 27, 33, 0.45) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
          backdrop-filter: blur(16px) saturate(1.05) !important;
}
body:not(.admin-page):not(.theme-light) .subscription-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.27;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.0784 0 0 0 0 0.0745 0 0 0 0 0.0706 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  z-index: 0;
}
body:not(.admin-page):not(.theme-light) .subscription-sheet-card {
  position: relative;
  z-index: 1;
}

/* ===============================================================
   v56 — Widen catalog shell + 2-column pack grid on desktop.
   On phones the WebApp opens narrow (300-420px) which is the
   intended mobile experience. On Telegram Desktop the same width
   feels cramped and forces the user to scroll through every pack
   in a tall single column. So at viewport ≥ 600px we expand the
   shell to ~720px and lay out packs in a 2-column responsive
   grid via auto-fill. Sheets (PRO / GUIDE) keep their 420px max-
   width and stay centered — they're meant to feel like a focused
   dialog regardless of catalog width.
   Mobile (< 600px) is untouched.
   Authoritative: last in the cascade.
   =============================================================== */
@media (min-width: 600px) {
  body:not(.admin-page) .app-shell {
    /* v65 (CSV L2): widen desktop shell 720→840px, smaller side gutters
       ("чуть шире, отступы по бокам меньше — ничего страшного"). */
    width: min(840px, calc(100vw - 32px)) !important;
    max-width: min(840px, calc(100vw - 32px)) !important;
  }
  /* 2-column responsive grid: cards auto-fill the wider shell. */
  body:not(.admin-page) .packs-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  /* When a pack expands inline the detail panel needs to span
     both columns — otherwise the open pack would squeeze into
     one cell and the tracks list would wrap badly. */
  body:not(.admin-page) .packs-grid > .pack-card.pack-card-expanded {
    grid-column: 1 / -1 !important;
  }
  /* Search-track results row stays single-column even on desktop
     so each result keeps the wide hit target the dotted leader
     design needs. */
  body:not(.admin-page) .search-tracks-list {
    display: block !important;
  }
}
/* v56 end ========================================================= */

/* ---- Dark inner cards: dark plate + cream hairline ---- */
body:not(.admin-page):not(.theme-light) .guide-card,
body:not(.admin-page):not(.theme-light) .pro-includes,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan {
  background: #161B21 !important;
  border: 1px solid #505A68 !important;
}

/* ---- Dark title color: pure cream ---- */
body:not(.admin-page):not(.theme-light) .guide-title,
body:not(.admin-page):not(.theme-light) .pro-title {
  color: #FFFFF4 !important;
}

/* ---- Dark inner heading color + underline ---- */
body:not(.admin-page):not(.theme-light) .guide-card h3 {
  color: #F2EEE6 !important;
  border-bottom-color: #F2EEE6 !important;
}

/* ---- Dark body text inside cards ---- */
body:not(.admin-page):not(.theme-light) .guide-card p {
  color: #F2EEE6 !important;
}

/* ---- Dark PRO subtitle ---- */
body:not(.admin-page):not(.theme-light) .pro-subtitle {
  color: #F2EEE6 !important;
}

/* ---- Dark "ЧТО ВХОДИТ" panel text ---- */
body:not(.admin-page):not(.theme-light) .pro-includes .pro-include,
body:not(.admin-page):not(.theme-light) .pro-includes .pro-include.pro-include-head,
body:not(.admin-page):not(.theme-light) .pro-include-num {
  color: #F2EEE6 !important;
}

/* ---- Dark plan tiles text (1 МЕСЯЦ / prices) ---- */
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan strong,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan strong + span {
  color: #F2EEE6 !important;
}

/* ---- Dark КУПИТЬ button: dark plate + hairline + cream ink ---- */
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(1) .subscription-plan-cta,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2) .subscription-plan-cta {
  background: #161B21 !important;
  color: #F2EEE6 !important;
  border: 1px solid #505A68 !important;
}
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(1):hover .subscription-plan-cta,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2):hover .subscription-plan-cta {
  background: #F2EEE6 !important;
  color: #161B21 !important;
}

/* ---- Dark ПОНЯТНО pill ---- */
body:not(.admin-page):not(.theme-light) .sheet-cta-btn {
  background: #161B21 !important;
  color: #F2EEE6 !important;
  border: 1px solid #505A68 !important;
}

/* ---- Theme toggle in DARK mode: flipped palette ---- */
/* Outer track: cream at 57% opacity (so dark body shows through).    */
/* Knob (sliding ::before): dark plate with cream hairline.           */
/* Active label (DARK on knob): cream ink. Non-active (LIGHT on       */
/* cream track): dark ink. */
body:not(.admin-page):not(.theme-light) .theme-toggle {
  background: rgba(255, 255, 244, 0.57) !important;
}
body:not(.admin-page):not(.theme-light) .theme-toggle::before {
  background: #161B21 !important;
  border: 1px solid #505A68 !important;
}
body:not(.admin-page):not(.theme-light) .theme-toggle-opt.is-active {
  color: #FFFFF4 !important;
}
body:not(.admin-page):not(.theme-light) .theme-toggle-opt:not(.is-active) {
  color: #0D1014 !important;
  opacity: 1 !important;
}
/* v48 end ========================================================= */

/* ===============================================================
   v52 — Normalize PRO plan tiles between :nth-child(1) and (2).
   Field diff: live render had
     tile #1 (1 МЕСЯЦ) bg #F2EEE6, no border, padding 18/16/16
     tile #2 (1 ГОД)   bg #FCFAF2, 1px #A79B8C border, padding 20/14/18
   Figma says both tiles are identical (bg #F2EEE6, no border).
   Root cause: legacy v25/v26 rules used multi-selectors of the form
     `.subscription-plan, .subscription-plan:nth-child(2) { … }`
   which beat my v47 generic `.subscription-plan` selector on the
   :nth-child(2) target via specificity (0,3,1 vs 0,2,1). The fix
   is to override at the SAME nth-child specificity so both tiles
   resolve to identical Figma values, in both themes.
   Authoritative: last in the cascade.
   =============================================================== */

/* LIGHT theme — both tiles identical cream plate, no border. */
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1),
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  background: #F2EEE6 !important;
  border: 0 !important;
  padding: 18px 16px 16px !important;
  box-shadow: none !important;
}
/* DARK theme — both tiles identical dark plate + cream hairline. */
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(1),
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2) {
  background: #161B21 !important;
  border: 1px solid #505A68 !important;
  padding: 18px 16px 16px !important;
  box-shadow: none !important;
}
/* v52 end ========================================================= */

/* ===============================================================
   v53 — Fix 1 ГОД "<strong>" text colour (was rendering at 60%).
   Field diff: 1 МЕСЯЦ title rendered solid cream, 1 ГОД title
   visibly dimmer ("серого цвета" per client). Eval confirmed:
     1 МЕСЯЦ <strong> color → rgb(242,238,230)
     1 ГОД   <strong> color → srgb 0.94 0.93 0.90 / 0.6
   Source: legacy v36 rule
     `.subscription-plan:nth-child(2) strong { color: color-mix(...
        var(--c-text) 60%, transparent) !important; }`
   That rule's (0,3,2) specificity beat v48's generic
   `.subscription-plan strong` (0,2,2) selector. Add explicit
   nth-child(1) + nth-child(2) overrides for both themes so each
   tile's title resolves to the same solid cream/dark ink.
   Authoritative: last in the cascade.
   =============================================================== */

/* LIGHT theme — both titles solid #0D1014. */
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1) strong,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1) strong + span,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) strong + span {
  color: #0D1014 !important;
  opacity: 1 !important;
}

/* DARK theme — both titles solid #F2EEE6. */
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(1) strong,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2) strong,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(1) strong + span,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2) strong + span {
  color: #F2EEE6 !important;
  opacity: 1 !important;
}
/* v53 end ========================================================= */

/* ===============================================================
   v49 — Light body grain texture + see-through scrim.
   Two related fixes from client field photo:
     1) The Figma light surround reads as a warm paper-like grain,
        not a flat cream. v47 left light body at solid #FFFFF4 with
        no overlay, so the scrim above it averaged to a uniform
        warm-gray with no character. Add a subtle SVG noise overlay
        on the light body so the texture peeks through the scrim.
     2) The 0.82 alpha on the light scrim was opaque enough to
        hide the catalog tracks behind it. Per Figma the catalog
        should be faintly visible — blurred but recognisable —
        so users see "what they came from". Drop the alpha so the
        catalog reads through, but keep the warm taupe tint to
        preserve the frosted-paper feel.
   Authoritative: last in the cascade.
   =============================================================== */

/* v49 superseded by v50 below — earlier attempt put the grain on
   the body, but Figma inspection (Rectangle 14) showed the noise
   is an effect on the scrim itself, plus the blur amount was half
   of Figma's value. Light body is restored to clean cream here so
   v50's scrim noise + 33px blur is the sole source of texture. */
body.theme-light:not(.admin-page) {
  background-image: none !important;
  background-color: #FFFFF4 !important;
}
/* v49 end ========================================================= */

/* ===============================================================
   v50 — Scrim exact spec from Figma Rectangle 14 inspection.
   Three layered properties combine to give the warm frosted-paper
   look with catalog tracks faintly visible through:
     1) Fill        — #A8A59A at 82% alpha (warm taupe).
     2) Background  — blur radius 33 (matches Figma "Background
                      blur" — was 16.5 here, half-strength, which
                      kept the catalog too sharp/too dark behind).
     3) Monotone    — black noise overlay, size ~0.5, density 100%,
        noise         opacity 13%. Implemented as an SVG fractal-
                      noise tile painted into a ::after pseudo
                      with mix-blend-mode multiply so it darkens
                      the scrim's mid-tones without recolouring.
   Catalog visibility comes mostly from the 33px blur smearing
   pack-card colours into broad zones beneath the 82% fill.
   Authoritative: last in the cascade.
   =============================================================== */

body.theme-light:not(.admin-page) .subscription-sheet {
  /* Tuned per client reference photo: lower alpha + lighter blur so
     pack-card shapes register as recognisable atmospheric shapes,
     not just diffuse colour. Figma spec said 82% + blur 33, but the
     spec values render more opaque in browsers than the Figma
     viewport preview suggests — drop both for the intended look. */
  /* v65 (CSV D3): nudge the light scrim a touch darker — client said
     "фон здесь чутка темнее, осталось чутка дотюнить". */
  background: rgba(150, 146, 134, 0.42) !important;
  -webkit-backdrop-filter: blur(14px) !important;
          backdrop-filter: blur(14px) !important;
  /* Make absolutely sure the ::after noise layer below stacks above
     the scrim background but below the card content. */
  position: fixed;
}
/* Layer 3: monotone noise overlay (Figma "Monotone noise" effect).
   Black grain at 13% opacity, fine size (~0.5) tiled across the
   whole scrim. ::after sits in the scrim's own positioning context,
   absolute inset:0, so it covers exactly the scrim area. The
   sheet-card content (z-index implicit ≥0 by document order) ends
   up above this noise layer because the pseudo gets z-index:0 and
   the .subscription-sheet-card is a later DOM sibling with the
   same stacking context. */
body.theme-light:not(.admin-page) .subscription-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  z-index: 0;
}
/* Make sure the card sits above the noise overlay. */
body.theme-light:not(.admin-page) .subscription-sheet-card {
  position: relative;
  z-index: 1;
}
/* v50 end ========================================================= */

/* v58 reverted — the 15% upsize made cards feel cramped/heavy in
   real Telegram popup. Falling back to v47 baseline values that
   were already scaled from Figma at the correct 0.46× ratio. */

/* ===============================================================
   v60 — Shrink sheet content to match Figma proportions on the
   real Telegram desktop popup width (~370px, narrower than the
   420px target v47 was tuned to).
   Side-by-side comparison from client showed: current GUIDE/PRO
   content overflows vertically — title scrolls off-screen, body
   text wraps to 4 lines where Figma has 3, plan tiles look
   chunky. Scale every size in the sheet down ~20% from v47 so
   everything fits without scroll on the actual popup viewport.
   Authoritative: last in the cascade.
   =============================================================== */

/* Title — was 48/56, → 38/44. */
body:not(.admin-page) .guide-title,
body:not(.admin-page) .pro-title,
body.theme-light:not(.admin-page) .guide-title,
body.theme-light:not(.admin-page) .pro-title {
  font-size: 38px !important;
  line-height: 44px !important;
  margin: 0 0 18px !important;
}

/* GUIDE inner heading — was 20/23, → 16/20. */
body:not(.admin-page) .guide-card h3,
body.theme-light:not(.admin-page) .guide-card h3 {
  font-size: 16px !important;
  line-height: 20px !important;
  margin: 0 auto 10px !important;
  padding-bottom: 4px !important;
}

/* GUIDE body text — was 13/17, → 11/15. */
body:not(.admin-page) .guide-card p,
body.theme-light:not(.admin-page) .guide-card p {
  font-size: 11px !important;
  line-height: 15px !important;
}

/* GUIDE card padding — was 22/20, → 16/14. */
body:not(.admin-page) .guide-card {
  padding: 16px 14px !important;
}
/* Smaller card radius proportional to smaller card size. */
body:not(.admin-page) .guide-card,
body.theme-light:not(.admin-page) .guide-card,
body:not(.admin-page) .pro-includes,
body.theme-light:not(.admin-page) .pro-includes,
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan {
  border-radius: 26px !important;
}

/* PRO subtitle — was 13/17, → 11/15. */
body:not(.admin-page) .pro-subtitle {
  font-size: 11px !important;
  line-height: 15px !important;
  margin: 0 0 14px !important;
}

/* PRO "ЧТО ВХОДИТ" panel — bigger heading was 33, → 26. */
body:not(.admin-page) .pro-includes {
  padding: 18px 18px !important;
}
body:not(.admin-page) .pro-includes .pro-include.pro-include-head {
  font-size: 26px !important;
  line-height: 30px !important;
}
body:not(.admin-page) .pro-includes .pro-include {
  font-size: 12px !important;
  line-height: 15px !important;
}
/* 01/02/03 numerals — was 43, → 34. */
body:not(.admin-page) .pro-include-num {
  font-size: 34px !important;
  margin-right: 8px;
}

/* PRO plan tiles — was 18/16, → 14/12. */
body:not(.admin-page) .pro-sheet-card .subscription-plan,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(1),
body:not(.admin-page):not(.theme-light) .pro-sheet-card .subscription-plan:nth-child(2),
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1),
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) {
  padding: 14px 12px 12px !important;
}
/* "1 МЕСЯЦ"/"1 ГОД" — was 23, → 18. */
body:not(.admin-page) .pro-sheet-card .subscription-plan strong {
  font-size: 18px !important;
  line-height: 21px !important;
}
/* Price — was 16, → 13. */
body:not(.admin-page) .pro-sheet-card .subscription-plan strong + span {
  font-size: 13px !important;
  line-height: 16px !important;
}
/* КУПИТЬ inside tile — smaller pill. */
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1) .subscription-plan-cta,
body:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(1) .subscription-plan-cta,
body.theme-light:not(.admin-page) .pro-sheet-card .subscription-plan:nth-child(2) .subscription-plan-cta {
  padding: 6px 18px !important;
  font-size: 11px !important;
  line-height: 13px !important;
  border-radius: 12px !important;
}

/* ПОНЯТНО pill at bottom — was 14/36, → 11/28. */
body:not(.admin-page) .sheet-cta-btn {
  padding: 11px 28px !important;
  font-size: 12px !important;
  line-height: 15px !important;
  margin-top: 16px !important;
}
/* v60 end ========================================================= */

/* ===============================================================
   v61 — Hide scrollbars globally (page + sheet) while preserving
   scroll. Client called the visible Chrome-style scrollbar on the
   right edge "по ублюдски". Cross-browser hiding:
     • -webkit / Chromium: ::-webkit-scrollbar { display: none }
     • Firefox:            scrollbar-width: none
     • IE / old Edge:      -ms-overflow-style: none
   Affects html/body (page scroll) and the .subscription-sheet-card
   inner scroll. The v41 scrollbar-gutter: stable rule on the card
   is also dropped here — no scrollbar, no need to reserve space.
   Scroll itself still works via wheel/touch/keyboard.
   Authoritative: last in the cascade.
   =============================================================== */
html,
body,
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .subscription-sheet {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
body:not(.admin-page) .subscription-sheet-card::-webkit-scrollbar,
body:not(.admin-page) .subscription-sheet::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
/* Drop the v41 scrollbar-gutter reservation — without a visible
   scrollbar there's no horizontal jitter to compensate for. */
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card,
body.theme-light:not(.admin-page) .subscription-sheet-card,
body.theme-light:not(.admin-page) .guide-sheet-card,
body.theme-light:not(.admin-page) .pro-sheet-card {
  scrollbar-gutter: auto !important;
}
/* v61 end ========================================================= */

/* ===============================================================
   v65 (CSV I6) — ПОНЯТНО pill: colour transition states.
   The button had only `opacity:.9` on hover and a scale on active —
   the client asked for proper colour states ("нету переходных
   состояний по цветам"). Exact values from the Figma button spec
   (frame "кнопки для закрытия", Default/Hover/Pressed):
     DARK : Default bg #161B21 / txt #F2EEE6 / border #505A68
            Hover   bg #505A68 / txt #FFFFF4
            Pressed bg #F2EEE6 / txt #161B21
     LIGHT: Default bg #F2EEE6 / txt #0D1014 (no border)
            Hover   bg #A8A39A / txt #FFFFF4
            Pressed bg #575958 / txt #FFFFF4
   Single source of truth for this control; supersedes the scattered
   .sheet-cta-btn :hover/:active rules above. Geometry (padding/radius/
   font) is left to the existing v60 rule — only colour changes here.
   =============================================================== */
/* Selectors are card-scoped (.guide-sheet-card / .pro-sheet-card /
   .subscription-sheet-card) to reach (0,4,1) specificity so they beat
   the earlier card-scoped overrides; bare .sheet-cta-btn kept as a
   fallback for any unscoped usage. */
/* DARK — Default */
body:not(.admin-page):not(.theme-light) .guide-sheet-card .sheet-cta-btn,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .sheet-cta-btn,
body:not(.admin-page):not(.theme-light) .subscription-sheet-card .sheet-cta-btn,
body:not(.admin-page):not(.theme-light) .sheet-cta-btn {
  background: #161B21 !important;
  color: #F2EEE6 !important;
  border: 1px solid #505A68 !important;
  opacity: 1 !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
/* DARK — Hover */
body:not(.admin-page):not(.theme-light) .guide-sheet-card .sheet-cta-btn:hover,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .sheet-cta-btn:hover,
body:not(.admin-page):not(.theme-light) .subscription-sheet-card .sheet-cta-btn:hover,
body:not(.admin-page):not(.theme-light) .sheet-cta-btn:hover {
  background: #505A68 !important;
  color: #FFFFF4 !important;
  border-color: #505A68 !important;
  opacity: 1 !important;
  transform: none !important;
}
/* DARK — Pressed */
body:not(.admin-page):not(.theme-light) .guide-sheet-card .sheet-cta-btn:active,
body:not(.admin-page):not(.theme-light) .pro-sheet-card .sheet-cta-btn:active,
body:not(.admin-page):not(.theme-light) .subscription-sheet-card .sheet-cta-btn:active,
body:not(.admin-page):not(.theme-light) .sheet-cta-btn:active {
  background: #F2EEE6 !important;
  color: #161B21 !important;
  border-color: #F2EEE6 !important;
  opacity: 1 !important;
  transform: none !important;
}
/* LIGHT — Default */
body.theme-light:not(.admin-page) .guide-sheet-card .sheet-cta-btn,
body.theme-light:not(.admin-page) .pro-sheet-card .sheet-cta-btn,
body.theme-light:not(.admin-page) .subscription-sheet-card .sheet-cta-btn,
body.theme-light:not(.admin-page) .sheet-cta-btn {
  background: #F2EEE6 !important;
  color: #0D1014 !important;
  border: 0 !important;
  opacity: 1 !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
/* LIGHT — Hover */
body.theme-light:not(.admin-page) .guide-sheet-card .sheet-cta-btn:hover,
body.theme-light:not(.admin-page) .pro-sheet-card .sheet-cta-btn:hover,
body.theme-light:not(.admin-page) .subscription-sheet-card .sheet-cta-btn:hover,
body.theme-light:not(.admin-page) .sheet-cta-btn:hover {
  background: #A8A39A !important;
  color: #FFFFF4 !important;
  opacity: 1 !important;
  transform: none !important;
}
/* LIGHT — Pressed */
body.theme-light:not(.admin-page) .guide-sheet-card .sheet-cta-btn:active,
body.theme-light:not(.admin-page) .pro-sheet-card .sheet-cta-btn:active,
body.theme-light:not(.admin-page) .subscription-sheet-card .sheet-cta-btn:active,
body.theme-light:not(.admin-page) .sheet-cta-btn:active {
  background: #575958 !important;
  color: #FFFFF4 !important;
  opacity: 1 !important;
  transform: none !important;
}
/* v65 end ========================================================= */

/* ===============================================================
   v66 (CSV I8) — Tracklist polish:
   • I8b: tighter spacing between track rows (was ~18px gap, the
     client said "расстояние между треками больше чем в верстке").
   • I8c: BUY TRACK / PRO labels were Akrobat ExtraBold (800) →
     read as "толстый / не наш". Step down to SemiBold (600) to
     match the Figma catalog weight (same as track titles).
   Single source of truth for these props; last in cascade.
   =============================================================== */
body:not(.admin-page) .track-list {
  gap: 10px !important;
}
body:not(.admin-page) .track-buy-btn,
body:not(.admin-page) .track-pro-btn {
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
/* I8d: track name sits closer to the play button (was a 22px column +
   12px gap → ~34px in; Figma has the name hugging the play triangle). */
body:not(.admin-page) .track-row {
  grid-template-columns: 18px 1fr auto !important;
  column-gap: 9px !important;
}
/* v66 end ========================================================= */

/* ===============================================================
   v67 (CSV #4 / symptom A) — PRO plan tile is no longer the button.
   The whole plan tile used to be a <button> (the entire "окошко"
   was clickable). It is now a <div> and only the inner КУПИТЬ
   <button> triggers the order. Fix the cursors to match: the tile
   is inert, the КУПИТЬ button shows the pointer.
   =============================================================== */
body:not(.admin-page) .subscription-plan {
  cursor: default !important;
}
body:not(.admin-page) .subscription-plan-cta {
  cursor: pointer !important;
}
/* v67 end ========================================================= */

/* ===============================================================
   v68 (CSV I1/I5) — GUIDE / PRO top buttons: exact Figma palette
   + colour transition states (button spec "кнопки на главной").
     DARK : Default transparent / border #505A68 / txt #F2EEE6
            Hover   bg #505A68 / txt #FFFFF4
            Pressed bg #F2EEE6 / txt #161B21
     LIGHT: Default transparent / border #0D1014 / txt #0D1014
            Hover   bg #A8A39A / txt #FFFFF4
            Pressed bg #0D1014 / txt #FFFFF4
   (Dark default already matched; the light border/text were the
   mismatch — were #A79B8C / #15181F.) Single source of truth.
   =============================================================== */
/* DARK */
body:not(.admin-page):not(.theme-light) .guide-btn,
body:not(.admin-page):not(.theme-light) .pro-btn {
  background: transparent !important;
  border: 1px solid #505A68 !important;
  color: #F2EEE6 !important;
  opacity: 1 !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
body:not(.admin-page):not(.theme-light) .guide-btn:hover,
body:not(.admin-page):not(.theme-light) .pro-btn:hover {
  background: #505A68 !important;
  color: #FFFFF4 !important;
  border-color: #505A68 !important;
  opacity: 1 !important;
}
body:not(.admin-page):not(.theme-light) .guide-btn:active,
body:not(.admin-page):not(.theme-light) .pro-btn:active {
  background: #F2EEE6 !important;
  color: #161B21 !important;
  border-color: #F2EEE6 !important;
  transform: none !important;
}
/* LIGHT */
body.theme-light:not(.admin-page) .guide-btn,
body.theme-light:not(.admin-page) .pro-btn {
  background: transparent !important;
  border: 1px solid #0D1014 !important;
  color: #0D1014 !important;
  opacity: 1 !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
body.theme-light:not(.admin-page) .guide-btn:hover,
body.theme-light:not(.admin-page) .pro-btn:hover {
  background: #A8A39A !important;
  color: #FFFFF4 !important;
  border-color: #A8A39A !important;
  opacity: 1 !important;
}
body.theme-light:not(.admin-page) .guide-btn:active,
body.theme-light:not(.admin-page) .pro-btn:active {
  background: #0D1014 !important;
  color: #FFFFF4 !important;
  border-color: #0D1014 !important;
  transform: none !important;
}
/* I2 (CSV): GUIDE/PRO text was Akrobat ExtraBold (800) → read "не наш /
   толстый". Figma button label is SemiBold. Step the weight down. */
body:not(.admin-page) .guide-btn,
body:not(.admin-page) .pro-btn {
  font-weight: 600 !important;
}
/* v68 end ========================================================= */

/* ===============================================================
   v69 (bug) — light theme: the pack-download icon button showed a
   circular border RING around the SVG circle (a double-circle). The
   dark theme drops the border (v38), but a light-theme .pack-download-
   chip rule re-added `border: 1px var(--c-border)`. Strip it so only
   the SVG circle remains, matching the dark theme.
   =============================================================== */
body.theme-light:not(.admin-page) .pack-download-icon,
body:not(.admin-page) .pack-download-icon {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* v69 end ========================================================= */

/* ===============================================================
   v72 (CSV #4/#5) — exact Figma values for the theme toggle and the
   play icon, sampled from the client's assets.
   • Play icon = #A79B8C (client: "кнопка play такого цвета").
   • Theme toggle (no borders / "уберем бортики"):
       DARK theme : cream track #FEFEF4@57%, DARK knob #161B21 (no
                    border), active "DARK" #FFFFF4, inactive "LIGHT" #161B21.
       LIGHT theme: dark track #161B20@58%, LIGHT knob #FFFFF4 (no
                    border), active "LIGHT" #0D1014, inactive "DARK" #FFFFF4.
   =============================================================== */
/* Play icon: the triangle is the ::before (a masked Polygon), the
   button itself is just a transparent hit-target. v72 originally
   coloured the BUTTON, which filled the whole 28px square grey — fixed
   here: colour the ::before #A79B8C, keep the button transparent, size
   the button to the triangle, and LEFT-align the triangle so its left
   edge lines up with the progress bar below (client: "play левее, где
   начинается ползунок"). */
body:not(.admin-page) .track-play-btn {
  background: transparent !important;
  clip-path: none !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 18px !important;
  min-height: 18px !important;
  border-radius: 0 !important;
}
body:not(.admin-page) .track-play-btn::before {
  background: #A79B8C !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 15px !important;
  height: 16px !important;
}
/* Toggle — strip any border on the track + knob */
body:not(.admin-page) .theme-toggle,
body.theme-light:not(.admin-page) .theme-toggle {
  border: 0 !important;
}
/* DARK theme toggle */
body:not(.admin-page):not(.theme-light) .theme-toggle {
  background: rgba(254, 254, 244, 0.57) !important;
}
body:not(.admin-page):not(.theme-light) .theme-toggle::before {
  background: #161B21 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body:not(.admin-page):not(.theme-light) .theme-toggle-opt.is-active {
  color: #FFFFF4 !important;
}
body:not(.admin-page):not(.theme-light) .theme-toggle-opt:not(.is-active) {
  color: #161B21 !important;
  opacity: 1 !important;
}
/* LIGHT theme toggle */
body.theme-light:not(.admin-page) .theme-toggle {
  background: rgba(22, 27, 32, 0.58) !important;
}
body.theme-light:not(.admin-page) .theme-toggle::before {
  background: #FFFFF4 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.theme-light:not(.admin-page) .theme-toggle-opt.is-active {
  color: #0D1014 !important;
}
body.theme-light:not(.admin-page) .theme-toggle-opt:not(.is-active) {
  color: #FFFFF4 !important;
  opacity: 1 !important;
}
/* v72 end ========================================================= */

/* ===============================================================
   v73 (CSV #3) — collapsed pack card: keep PRO "на месте".
   The card grew taller than its square cover when the description ran
   to 3+ lines, so the hashtag + PRO row (pinned to the card bottom)
   dropped well below the cover. Clamp the description to 2 lines so the
   card stays ≈ cover height and the PRO badge sits back on the cover's
   bottom baseline, consistently across all cards.
   =============================================================== */
body:not(.admin-page) .pack-card .pack-copy p.muted {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* v73 end ========================================================= */

/* ===============================================================
   v74 (CSV #1) — Guide/Pro sheets: tighter so they fit without a
   scroll on shorter desktop windows, and with smaller gaps between
   the inner text blocks (client: "идет прокрутка, но она не нужна …
   сделать расстояние между окошками текст еще меньше, в фигме отступы
   меньше"). Shaves card padding + inter-block gaps + title margin.
   =============================================================== */
body:not(.admin-page) .subscription-sheet-card,
body:not(.admin-page) .guide-sheet-card,
body:not(.admin-page) .pro-sheet-card {
  padding: 22px 22px 24px !important;
}
body:not(.admin-page) .guide-cards,
body:not(.admin-page) .guide-cards-row { gap: 10px !important; }
body:not(.admin-page) .guide-card,
body:not(.admin-page) .pro-includes { padding: 16px 18px !important; }
body:not(.admin-page) .subscription-plan-grid { gap: 10px !important; }
body:not(.admin-page) .guide-title,
body:not(.admin-page) .pro-title { margin-bottom: 10px !important; }
body:not(.admin-page) .pro-subtitle { margin-bottom: 12px !important; }
/* v74 end ========================================================= */

/* ===============================================================
   v75 (client) — keep the PRO badge "на месте" when a pack expands.
   Collapsed shows the PRO label as .pack-pro-mark pinned to the
   summary's bottom-right; on expand we used to HIDE it and render a
   separate .pack-pro-chip lower down (in .pack-detail-meta), so PRO
   visibly dropped ~27px ("кнопка pro съезжает вниз").
   Fix (scoped to PRO packs via :has): keep the summary's PRO mark +
   hashtag visible on expand (same position as collapsed) and hide the
   duplicate detail-meta row. Download/free packs (no .pack-pro-chip)
   are untouched, so their pack-download / unlock controls stay.
   =============================================================== */
body:not(.admin-page) .pack-card-expanded:has(.pack-pro-chip) .pack-pro-mark {
  display: block !important;
}
body:not(.admin-page) .pack-card-expanded:has(.pack-pro-chip) .pack-copy .hashtags {
  display: block !important;
}
body:not(.admin-page) .pack-card-expanded:has(.pack-pro-chip) .pack-detail-meta {
  display: none !important;
}
/* v75 end ========================================================= */