/* ===========================================================================
   Music Mini App
   ---------------------------------------------------------------------------
   Modelled on how Spotify and Apple Music are put together rather than on a
   generic web page: three tabs at the bottom, a mini player riding on them,
   rails of large artwork on Home, a collection page whose header takes its
   colour from the cover, and a full-screen player whose background is built
   from the artwork's own colours.

   Always dark, on purpose. Both reference apps are, and artwork -- the thing
   this app is about -- reads best on black; following a light Telegram theme
   made every cover look like a sticker on paper. The page is RTL, so spacing
   uses logical properties; media controls and progress bars stay LTR, the way
   every player draws them (and the way the seek maths measures).
   ========================================================================= */

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0e0e10;
  --card: #1c1c1f;
  --card2: #28282c;
  --line: rgba(255,255,255,.08);
  --text: #fff;
  --muted: #a4a4ad;
  --faint: #6c6c75;
  --accent: #ff375f;

  --tabh: 58px;
  --dockh: 58px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.3,1.35,.5,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: calc(var(--tabh) + env(safe-area-inset-bottom) + 16px);
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-size: 15px; line-height: 1.5;
  background: transparent; color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior-y: none;
}
body.hasdock { padding-bottom: calc(var(--tabh) + var(--dockh) + env(safe-area-inset-bottom) + 24px); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-user-select: none; }
input { -webkit-user-select: text; user-select: text; }
svg { display: block; flex: none; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
.hide { display: none !important; }

/* Images fade in once decoded, instead of popping in half-drawn. */
img { display: block; opacity: 0; transition: opacity .35s ease; }
img.ok { opacity: 1; }

.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Titles are often Latin inside an RTL page. Letting each one pick its own
   direction keeps a long English title cut at its end ("Isfahan…") instead of
   its start ("…Isfahan"), while short ones still sit on the right. */
.rt, .ra .ell, .ct, .cs, .dt, .da, .ftitle, .fartist, .tt, .ts .ell, .shd .t, .shd .s, .tbt, .dtitle, .ln {
  unicode-bidi: plaintext; text-align: right;
}
/* In English the page runs left-to-right, and so do its titles. */
[dir="ltr"] :is(.rt, .ra .ell, .ct, .cs, .dt, .da, .ftitle, .fartist, .tt, .ts .ell, .shd .t, .shd .s, .tbt, .dtitle, .ln) { text-align: left; }
.dhero.prof .dtitle, .dhero.prof .dsub { text-align: center; }

/* -------------------------------------------------------------- buttons */
.ib {
  position: relative; width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: inherit;
  transition: transform .14s var(--ease), opacity .2s, color .2s;
}
.ib:active { transform: scale(.86); }
.ib.glass { width: 36px; height: 36px; background: rgba(0,0,0,.38); }
.ib.dim { opacity: .35; pointer-events: none; }

.fab {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .15s var(--ease);
}
.fab:active { transform: scale(.92); }

.pill {
  height: 34px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: none;
  font-size: 13px; font-weight: 700;
}
.pill.solid { background: #fff; color: #000; border-color: transparent; }
.pill.danger { background: #ff4d5e; color: #fff; border-color: transparent; }

.spin { width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid currentColor; border-inline-end-color: transparent;
  animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ view */
.view { position: relative; z-index: 1; isolation: isolate; min-height: 60vh; }
.view.enter { animation: enter .28s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* soft wash of colour behind the top of a page, taken from its artwork */
.wash {
  position: absolute; inset-inline: 0; top: 0; z-index: -1; height: 340px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--tint, #2a2a30) 70%, transparent), transparent);
  transition: background .6s ease;
  pointer-events: none;
}
.wash.tall { height: 470px;
  background: linear-gradient(to bottom, var(--tint, #3a3a44) 0%,
    color-mix(in srgb, var(--tint, #3a3a44) 45%, var(--bg)) 55%, transparent 100%); }

.phead {
  display: flex; align-items: center; gap: 12px;
  padding: calc(20px + env(safe-area-inset-top)) 16px 14px;
}
.phead h1 { flex: 1; margin: 0; font-size: 27px; font-weight: 900; letter-spacing: -.01em; }
.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #7a2cf5);
  font-size: 14px; font-weight: 800;
  position: relative; overflow: hidden;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 26px 16px 12px; }
.sec h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.sec .all { border: 0; background: none; padding: 0; color: var(--muted); font-size: 13px; font-weight: 700; }

/* ---------------------------------------------------------------- covers */
.cv {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
  display: grid; place-items: center;
  background: var(--card2); color: var(--faint);
}
.cv > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv.mosaic { display: grid; grid-template-columns: 1fr 1fr; }
.cv.mosaic > img { position: static; width: 100%; height: 100%; aspect-ratio: 1; }
.cv.liked  { background: linear-gradient(135deg, #ff375f 0%, #8a2cf5 100%); color: #fff; }
.cv.recent { background: linear-gradient(135deg, #0fa3a3 0%, #2446c9 100%); color: #fff; }
.cv.liked svg, .cv.recent svg { width: 42%; height: 42%; }
.cv.none svg { width: 38%; height: 38%; }

/* --------------------------------------------------------------- home */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px; }
.qt {
  display: flex; align-items: center; gap: 10px; height: 58px; padding: 0;
  border: 0; border-radius: 7px; overflow: hidden; text-align: start;
  background: rgba(255,255,255,.09);
  transition: background .15s, transform .12s var(--ease);
}
.qt:active { transform: scale(.97); background: rgba(255,255,255,.14); }
.qt .cv { width: 58px; height: 58px; flex: none; }
.qt .cv.liked svg, .qt .cv.recent svg { width: 46%; height: 46%; }
.qt span { flex: 1; min-width: 0; padding-inline-end: 8px; font-size: 13px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.rail {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.card { flex: 0 0 138px; min-width: 0; scroll-snap-align: start; cursor: pointer; }
.card .cvw { position: relative; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: transform .15s var(--ease); }
.card:active .cvw { transform: scale(.96); }
.card.round .cvw { border-radius: 50%; }
.card .ct { margin-top: 8px; font-size: 13.5px; font-weight: 700; }
.card .cs { font-size: 12px; color: var(--muted); }
.card.on .ct { color: var(--accent); }
.card .eqw { padding-bottom: 50px; }

.welcome {
  margin: 4px 16px 0; padding: 22px 20px; border-radius: 16px;
  background: linear-gradient(135deg, #ff375f 0%, #8a2cf5 60%, #2446c9 100%);
  box-shadow: 0 14px 40px rgba(138,44,245,.25);
}
.welcome h3 { margin: 0; font-size: 21px; font-weight: 900; }
.welcome p { margin: 6px 0 16px; font-size: 13.5px; opacity: .85; }

/* --------------------------------------------------------------- browse */
.browse { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.bt {
  position: relative; height: 96px; isolation: isolate; padding: 12px 14px; overflow: hidden;
  display: flex; align-items: flex-start;
  border: 0; border-radius: 10px; text-align: start; color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 50%, #000));
  font-size: 16.5px; font-weight: 800;
  transition: transform .12s var(--ease);
}
.bt:active { transform: scale(.96); }
.bt svg { position: absolute; inset-inline-end: -8px; bottom: -10px; width: 64px; height: 64px;
  transform: rotate(22deg); opacity: .9; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }

/* --------------------------------------------------------------- search */
.sbox {
  position: sticky; top: 0; z-index: 20;
  padding: 6px 16px 12px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.sfield {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px;
  border-radius: 10px; background: #fff; color: #121212; cursor: text;
}
.sfield input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font: inherit; font-size: 16px; font-weight: 600; color: #121212;
}
.sfield input::placeholder { color: #6f6f78; font-weight: 500; }
.sfield input::-webkit-search-cancel-button { display: none; }
.sclr { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: #555;
  display: grid; place-items: center; }

.recent { padding: 0 4px; }
.rq { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px;
  border: 0; background: none; text-align: start; font-size: 15px; font-weight: 600; }
.rq:active { background: rgba(255,255,255,.05); }
.rq .rqi { width: 44px; height: 44px; border-radius: 50%; background: var(--card);
  display: grid; place-items: center; color: var(--muted); flex: none; }
.rq .rqt { flex: 1; min-width: 0; }
.rq .ib { width: 36px; height: 36px; color: var(--faint); }

.topres {
  position: relative; margin: 0 16px; padding: 18px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--tint, #26262b) 55%, #151517);
  transition: background .6s ease, transform .15s var(--ease);
}
.topres:active { transform: scale(.985); }
.topres .timg { width: 96px; height: 96px; border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.45); }
/* The gap for the round button lives on the container, which keeps the page's
   direction: on the title itself it followed the title's own direction, so an
   English title had its gap on the wrong side and ran under the button. Long
   titles wrap to a second line instead of being cut. */
.topres .tmeta { padding-inline-end: 68px; min-width: 0; }
.topres .tt { margin-top: 16px; font-size: 25px; font-weight: 900; letter-spacing: -.01em; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.topres .ts { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; color: rgba(255,255,255,.75); min-width: 0; }
.tag { padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.35); font-size: 11.5px; font-weight: 700; color: #fff; flex: none; }
.topres .fab { position: absolute; inset-inline-end: 16px; bottom: 16px; }
.topres.on .tt { color: var(--accent); }
/* Artist top result: a round portrait, the way a singer is shown everywhere else. */
.topres .timg.round, .topres .timg.round .cv { border-radius: 50%; }

.nores { padding: 60px 30px; text-align: center; }
.nores b { display: block; font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.nores span { color: var(--muted); font-size: 14px; }

/* ----------------------------------------------------------------- rows */
.row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 7px 16px; cursor: pointer;
  transition: background .12s;
}
.row:active { background: rgba(255,255,255,.06); }
.rart { position: relative; width: 50px; height: 50px; flex: none; border-radius: 6px; overflow: hidden;
  background: var(--card2); }
.rart img { width: 100%; height: 100%; object-fit: cover; }
.rart .cv { position: absolute; inset: 0; }
.rmeta { flex: 1; min-width: 0; }
.rt { font-size: 15px; font-weight: 600; }
.ra { display: flex; align-items: center; gap: 5px; margin-top: 1px; font-size: 13px; color: var(--muted); min-width: 0; }
.ra .ell { min-width: 0; }
.lk { display: none; color: var(--accent); }
.liked .lk { display: inline-flex; }
.row.on .rt { color: var(--accent); }
.row .ib { width: 40px; height: 40px; margin-inline-end: -10px; color: var(--muted); }
.num { width: 20px; flex: none; text-align: center; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* the little equaliser on whatever is playing */
.eqw { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 2.5px;
  padding-bottom: 16px; background: rgba(0,0,0,.5); }
.on .eqw { display: flex; }
.eqw i { width: 3px; height: 4px; border-radius: 2px; background: var(--accent); animation: eq .9s ease-in-out infinite; }
.eqw i:nth-child(2) { animation-delay: .2s; }
.eqw i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 16px; } }
body:not(.isplaying) .eqw i { animation-play-state: paused; height: 7px; }

/* -------------------------------------------------------------- library */
.lrow { display: flex; align-items: center; gap: 13px; padding: 8px 16px; cursor: pointer; }
.lrow:active { background: rgba(255,255,255,.05); }
.lrow .cvw { width: 64px; height: 64px; flex: none; border-radius: 6px; overflow: hidden; }
.lrow .ln { font-size: 15.5px; font-weight: 700; }
.lrow .ls { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.lrow .ls svg { color: var(--accent); }
.lmeta { flex: 1; min-width: 0; }

.hint {
  margin: 18px 16px 0; padding: 22px 20px; border-radius: 14px;
  background: var(--card); text-align: center;
}
.hint b { display: block; font-size: 16px; font-weight: 800; }
.hint span { display: block; margin: 4px 0 14px; color: var(--muted); font-size: 13.5px; }

/* ----------------------------------------------------- collection page */
.topbar {
  position: fixed; top: 0; inset-inline: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
  transition: background .25s ease, box-shadow .25s;
}
.topbar.solid { background: color-mix(in srgb, var(--tint, #2a2a30) 60%, #0b0b0d);
  box-shadow: 0 1px 0 var(--line); }
.topbar.solid .ib.glass { background: none; }
.tbt { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s var(--ease);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar.titled .tbt { opacity: 1; transform: none; }

.dhero { padding: calc(62px + env(safe-area-inset-top)) 16px 6px; }
.dcover.round { border-radius: 50%; }
.aname { cursor: pointer; }
.dcover { width: min(60vw, 236px); margin: 0 auto 22px; border-radius: 6px; overflow: hidden;
  box-shadow: 0 22px 54px rgba(0,0,0,.55); }
.dtitle { margin: 0; font-size: 25px; font-weight: 900; letter-spacing: -.01em; }
.dsub { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.72); }
.dacts { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.dacts .sp { flex: 1; }
.dacts .ib { color: rgba(255,255,255,.75); }
.dacts .ib.act { color: var(--accent); }
.dempty { padding: 40px 30px; text-align: center; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------ skeleton */
.sk { background: linear-gradient(90deg, #1b1b1e 0%, #26262a 50%, #1b1b1e 100%);
  background-size: 200% 100%; animation: sheen 1.2s linear infinite; border-radius: 6px; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skrow { display: flex; align-items: center; gap: 12px; padding: 7px 16px; min-height: 64px; }
.skrow .a { width: 50px; height: 50px; }
.skrow .l1 { height: 12px; width: 55%; margin-bottom: 8px; }
.skrow .l2 { height: 10px; width: 30%; }

/* --------------------------------------------------------------- toast */
.toast {
  position: fixed; inset-inline: 16px; z-index: 120;
  bottom: calc(var(--tabh) + env(safe-area-inset-bottom) + 14px);
  margin-inline: auto; max-width: 420px;
  padding: 12px 16px; border-radius: 10px;
  background: #f4f4f6; color: #111; font-size: 13.5px; font-weight: 700; text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease);
}
body.hasdock .toast { bottom: calc(var(--tabh) + var(--dockh) + env(safe-area-inset-bottom) + 18px); }
.toast.show { opacity: 1; transform: none; }

/* -------------------------------------------------------------- tab bar */
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  display: flex; height: calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(14,14,16,.86);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 -.5px 0 var(--line);
}
.tb {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; color: var(--faint); font-size: 10.5px; font-weight: 700;
  transition: color .2s;
}
.tb.on { color: var(--text); }
.tb:active .ti { transform: scale(.88); }
.ti { transition: transform .14s var(--ease); }

/* ---------------------------------------------------------- mini player */
.dock {
  position: fixed; inset-inline: 8px; z-index: 55;
  bottom: calc(var(--tabh) + env(safe-area-inset-bottom) + 6px);
  height: var(--dockh);
  display: flex; align-items: center; gap: 10px; padding: 0 6px 0 7px;
  border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--dc, #2b2b30);
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  transition: background .7s ease;
  animation: dockin .4s var(--ease) both;
}
.dock::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.07), rgba(0,0,0,.12)); }
@keyframes dockin { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.dimg { position: relative; width: 44px; height: 44px; flex: none; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.3); }
.dimg img { width: 100%; height: 100%; object-fit: cover; }
.dmeta { position: relative; flex: 1; min-width: 0; }
.dt { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da { font-size: 12px; color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock .ib { width: 40px; height: 40px; }
#dfav.on { color: var(--accent); }
.dline { position: absolute; inset-inline: 9px; bottom: 0; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.2); direction: ltr; overflow: hidden; }
.dfill { height: 100%; width: 0; background: #fff; }

/* --------------------------------------------------------- full player */
.full {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  transform: translateY(100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
}
.full.open { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
.full.drag { transition: none; }

/* A slowly drifting field of the artwork's colours -- the Apple Music
   "living" background -- built from gradients rather than a blurred image,
   so it stays smooth on a phone. */
.fbg { position: absolute; inset: 0; overflow: hidden; background: var(--f0, #1d1d22); transition: background .9s ease; }
.blob { position: absolute; width: 130vmax; height: 130vmax; border-radius: 50%; will-change: transform; }
.b1 { background: radial-gradient(closest-side, var(--f1, #444), transparent); top: -65vmax; left: -55vmax;
  animation: d1 24s ease-in-out infinite alternate; }
.b2 { background: radial-gradient(closest-side, var(--f2, #333), transparent); bottom: -70vmax; right: -60vmax;
  animation: d2 28s ease-in-out infinite alternate; }
.b3 { background: radial-gradient(closest-side, var(--f1, #444), transparent); top: 20vh; right: -80vmax; opacity: .55;
  animation: d3 32s ease-in-out infinite alternate; }
@keyframes d1 { to { transform: translate(18vmax, 22vmax) rotate(40deg); } }
@keyframes d2 { to { transform: translate(-22vmax, -16vmax) rotate(-30deg); } }
@keyframes d3 { to { transform: translate(-30vmax, 10vmax); } }
.fbg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.18) 50%, rgba(0,0,0,.5) 100%); }

.fin {
  position: relative; height: 100%; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(8px + env(safe-area-inset-top)) 24px calc(16px + env(safe-area-inset-bottom));
  touch-action: none;
}
.fhead { display: flex; align-items: center; gap: 6px; height: 50px; margin-inline: -10px; }
.fsrc { flex: 1; min-width: 0; text-align: center; }
.fsrc1 { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.7); }
.fsrc2 { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fart { flex: 1; min-height: 0; display: grid; place-items: center; padding: 14px 0 20px; overflow: hidden; container-type: size; }
/* The artwork is the biggest square that fits BOTH the width and whatever
   vertical room is left. max-height is what a short viewport needs (Telegram's
   compact mode, a small phone): without it the square kept its width-derived
   height and spilled over the title and heart. width/height auto + aspect-ratio
   let the smaller of the two caps win while it stays square, so it shrinks
   instead of overflowing. */
.fart img {
  max-width: min(100%, 44vh); max-height: 100%; width: auto; height: auto;
  aspect-ratio: 1; object-fit: cover; border-radius: 12px;
  /* No box-shadow: on iPhone, WebKit drew the big blurred shadow of this
     animated image as a hard-edged rectangle -- the "frame" around the cover.
     The player's colour field behind it gives enough depth on its own. */
  transition: transform .7s var(--spring), opacity .35s;
}
/* Where container units exist (every current WebView), the square is sized
   outright: the smaller of the room's width and height. iPhone's WebKit gave
   the aspect-ratio version above a box taller than the picture, and its
   shadow showed as a frame around the cover. */
@supports (width: 1cqw) {
  .fart img { width: min(100cqw, 100cqh, 44vh); height: min(100cqw, 100cqh, 44vh); max-width: none; max-height: none; }
}
/* The Apple touch: artwork sits back a little while paused. */
.full.paused .fart img { transform: scale(.84); }

.finfo { display: flex; align-items: center; gap: 12px; }
.fmeta { flex: 1; min-width: 0; }
.ftitle { font-size: 22px; font-weight: 900; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fartist { font-size: 16px; color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fheart { margin-inline-end: -8px; }
.fheart.on { color: #fff; }
.fheart.pop svg { animation: pop .38s var(--spring); }
@keyframes pop { 40% { transform: scale(1.35); } }

.scrub { margin-top: 18px; padding: 12px 0; direction: ltr; touch-action: none; cursor: pointer; }
.strack { position: relative; height: 4px; border-radius: 4px; background: rgba(255,255,255,.26);
  transition: height .15s; }
.sfill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 4px; background: #fff; }
.sthumb { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.35); transition: transform .15s; }
.scrub.drag .strack { height: 6px; }
.scrub.drag .sthumb { transform: scale(1.35); }
.stime { display: flex; justify-content: space-between; margin-top: -2px; direction: ltr;
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }

.ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; direction: ltr; }
.ctrl .ib.lg { width: 58px; height: 58px; }
.ib.mode { color: rgba(255,255,255,.7); }
.ib.mode.act { color: var(--accent); }
.ib.mode.act::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: currentColor; }
.playbig {
  width: 70px; height: 70px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #fff; color: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  transition: transform .15s var(--ease);
}
.playbig:active { transform: scale(.92); }
.playbig .spin { border-width: 3px; width: 26px; height: 26px; }

.fbottom { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.fsend {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 14px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.14);
  font-size: 13px; font-weight: 700;
  transition: transform .12s var(--ease), background .2s;
}
.fsend:active { transform: scale(.95); background: rgba(255,255,255,.22); }
.fbottom .ib { color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------- sheet */
.sw { position: fixed; inset: 0; z-index: 100; }
.sbg { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; }
.sh {
  position: absolute; inset-inline: 0; bottom: 0; max-height: 84vh; overflow-y: auto;
  padding: 6px 0 calc(14px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0; background: #1e1e21;
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  transform: translateY(100%); transition: transform .34s var(--ease);
}
.sw.open .sbg { opacity: 1; }
.sw.open .sh { transform: none; }
.grab { width: 36px; height: 4px; margin: 6px auto 8px; border-radius: 2px; background: rgba(255,255,255,.22); }
.shd { display: flex; align-items: center; gap: 12px; padding: 6px 20px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line); }
.shd .cvw { width: 50px; height: 50px; flex: none; border-radius: 6px; overflow: hidden; }
.shd .t { font-size: 15.5px; font-weight: 800; }
.shd .s { font-size: 13px; color: var(--muted); }
.shd > div:last-child { min-width: 0; }
.stitle { padding: 6px 20px 12px; font-size: 17px; font-weight: 800; text-align: center; }
.si {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 13px 22px; border: 0; background: none; text-align: start;
  font-size: 15px; font-weight: 600;
}
.si:active { background: rgba(255,255,255,.06); }
.si > svg { color: var(--muted); width: 22px; height: 22px; }
.si.hot > svg { color: var(--accent); }
.si.danger { color: #ff5a67; }
.si.danger > svg { color: currentColor; }
.si .cvw { width: 44px; height: 44px; flex: none; border-radius: 5px; overflow: hidden; margin-block: -4px; }
.si .sis { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.sinput { display: block; width: calc(100% - 40px); margin: 4px 20px 0; padding: 14px 16px;
  border: 0; border-radius: 10px; background: #2c2c30; color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; outline: 0; }
.sinput:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.sacts { display: flex; justify-content: center; gap: 10px; padding: 18px 20px 4px; }
.sacts .pill { height: 42px; padding: 0 24px; font-size: 14px; }

.qlab { padding: 14px 20px 6px; font-size: 14px; font-weight: 800; }
.qlab span { color: var(--muted); font-weight: 600; }
.qempty { padding: 12px 20px 20px; color: var(--muted); font-size: 13.5px; }

/* ============================================================ live layer
   Behind every page: two or three soft colour fields drifting very slowly,
   which take the playing song's colours, and a few notes floating up. Only
   transforms and opacity are animated, so it stays on the compositor. */
.amb { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --a1: #ff375f; --a2: #6a2bd9; }
.amb > i { position: absolute; border-radius: 50%; will-change: transform; transition: opacity 1.2s ease; }
.amb .o1 { width: 95vmax; height: 95vmax; top: -45vmax; right: -35vmax; opacity: .2;
  background: radial-gradient(closest-side, var(--a1), transparent);
  animation: am1 26s ease-in-out infinite alternate; }
.amb .o2 { width: 100vmax; height: 100vmax; bottom: -55vmax; left: -40vmax; opacity: .18;
  background: radial-gradient(closest-side, var(--a2), transparent);
  animation: am2 32s ease-in-out infinite alternate; }
.amb .o3 { width: 60vmax; height: 60vmax; top: 35vh; left: 20vw; opacity: .08;
  background: radial-gradient(closest-side, #2f7bff, transparent);
  animation: am3 40s ease-in-out infinite alternate; }
@keyframes am1 { to { transform: translate(-28vw, 26vh) scale(1.18); } }
@keyframes am2 { to { transform: translate(30vw, -22vh) scale(1.1); } }
@keyframes am3 { to { transform: translate(-35vw, -30vh) scale(1.3); } }
/* while music plays the fields brighten and breathe */
body.isplaying .amb .o1 { opacity: .3; }
body.isplaying .amb .o2 { opacity: .26; }
body.isplaying .amb { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .8; } }
body.fullopen .amb { display: none; }

.notes i { position: absolute; bottom: -40px; color: rgba(255,255,255,.09);
  animation-name: floatup; animation-timing-function: linear; animation-iteration-count: infinite; }
.notes i svg { width: 22px; height: 22px; }
body.isplaying .notes i { color: rgba(255,255,255,.16); }
@keyframes floatup {
  0%   { transform: translate(0, 0) rotate(-12deg) scale(var(--s)); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(18px, -55vh) rotate(8deg) scale(var(--s)); }
  90%  { opacity: 1; }
  100% { transform: translate(-10px, -112vh) rotate(-6deg) scale(var(--s)); opacity: 0; }
}

/* things arriving on a page, one after another */
.view.enter .row, .view.enter .card, .view.enter .qt, .view.enter .lrow, .view.enter .bt {
  animation: popin .5s var(--ease) both;
  animation-delay: calc(min(var(--i, 0), 12) * 38ms);
}
@keyframes popin { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.tb.on .ti { animation: tbpop .5s var(--spring); }
@keyframes tbpop { 40% { transform: scale(1.22) translateY(-2px); } }

/* the pulsing "live" dot next to trending titles */
.live { display: inline-block; width: 8px; height: 8px; margin-inline-end: 9px; border-radius: 50%;
  background: var(--accent); vertical-align: middle; position: relative; top: -2px;
  animation: livepulse 1.7s ease-out infinite; }
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(255,55,95,.6); }
  75%, 100% { box-shadow: 0 0 0 10px rgba(255,55,95,0); }
}

/* chart position on a cover */
.rank { position: absolute; inset-inline-start: 8px; bottom: 4px; z-index: 2;
  font-size: 32px; font-weight: 900; line-height: 1; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.5); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; height: 190px; margin: 0 16px 4px; border-radius: 18px; overflow: hidden;
  background: #19191c; box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.hs { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; cursor: pointer; }
.hs.on { opacity: 1; z-index: 1; }
.hbg { position: absolute; inset: -30px; background: #222 center/cover no-repeat;
  filter: blur(24px) saturate(1.6) brightness(.55); }
.hs.on .hbg { animation: kenburns 10s ease-out both; }
@keyframes kenburns { from { transform: scale(1.4) translateX(5%); } to { transform: scale(1.12) translateX(-5%); } }
.hs::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent 60%); }
.hin { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; gap: 16px; padding: 18px; }
.hart { width: 128px; height: 128px; flex: none; border-radius: 10px; overflow: hidden;
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
  transform: translateY(10px) scale(.92) rotate(-3deg); opacity: .4;
  transition: transform 1s var(--spring), opacity .8s; }
.hs.on .hart { transform: none; opacity: 1; }
.hart img { width: 100%; height: 100%; object-fit: cover; }
.hmeta { flex: 1; min-width: 0; align-self: center; transform: translateY(8px); opacity: 0;
  transition: transform .9s var(--ease) .15s, opacity .9s .15s; }
.hs.on .hmeta { transform: none; opacity: 1; }
.hlab { display: flex; align-items: center; font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,.88); }
.ht { margin-top: 6px; font-size: 20px; font-weight: 900; line-height: 1.3; }
.ha { font-size: 13.5px; color: rgba(255,255,255,.76); }
.ht, .ha, .mqc b, .mqc span { unicode-bidi: plaintext; text-align: right; }
.hin .fab { position: absolute; inset-inline-end: 16px; bottom: 16px; width: 46px; height: 46px; }
.hdots { position: absolute; z-index: 3; bottom: 12px; inset-inline-start: 160px; display: flex; gap: 5px; }
.hdots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.35); transition: width .45s var(--ease), background .45s; }
.hdots i.on { width: 18px; background: #fff; }

/* --------------------------------------------------------------- marquee */
.mq { position: relative; overflow: hidden; direction: ltr; padding: 14px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mqw { margin: 0 -24px; transform: rotate(-3.5deg); }
.mqr + .mqr { margin-top: 12px; }
.mqt { display: flex; width: max-content; animation: flow calc(var(--n) * 3.6s) linear infinite; }
.mqr.rev .mqt { animation-direction: reverse; }
.mq:active .mqt { animation-play-state: paused; }
@keyframes flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mqi { position: relative; flex: none; width: 134px; height: 134px; margin-right: 12px;
  border-radius: 12px; overflow: hidden; cursor: pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.45); transition: transform .2s var(--ease); }
.mqi:active { transform: scale(.94); }
.mqi .cv { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.mqi .rank { top: 6px; bottom: auto; left: 8px; font-size: 24px; }
.mqc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; direction: rtl;
  padding: 28px 9px 8px; background: linear-gradient(transparent, rgba(0,0,0,.88)); }
.mqc b { display: block; font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mqc span { display: block; font-size: 11px; color: rgba(255,255,255,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mqi.on { box-shadow: 0 0 0 2px var(--accent), 0 12px 26px rgba(0,0,0,.45); }
.mqi .eqw { padding-bottom: 70px; }

/* ------------------------------------------------------ language switch */
.seg { position: relative; display: flex; margin: 2px 16px 0; padding: 4px; border-radius: 12px;
  background: rgba(255,255,255,.08); }
.seg button { position: relative; z-index: 1; flex: 1; height: 36px; border: 0; background: none;
  font-size: 14px; font-weight: 800; color: var(--muted); transition: color .3s; }
.seg button.on { color: #111; }
.seg > i { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px);
  border-radius: 9px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .4s var(--spring); }
/* The pill slides toward the second option: leftward in RTL, rightward in LTR. */
.seg[data-v="intl"] > i, .seg[data-v="en"] > i { transform: translateX(-100%); }
[dir="ltr"] .seg[data-v="intl"] > i, [dir="ltr"] .seg[data-v="en"] > i { transform: translateX(100%); }

/* recent searches as chips */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.09); font-size: 13px; font-weight: 600; }
.chip > svg { width: 15px; height: 15px; color: var(--muted); }
.chip .cx { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--faint); }
.chip .cx svg { width: 13px; height: 13px; }

/* category tiles: a slow light sweep and a bobbing icon */
.bt > span { position: relative; z-index: 1; }
.bt::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.2) 50%, transparent 65%);
  transform: translateX(130%); animation: shine 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .45s); }
@keyframes shine { 0%, 55% { transform: translateX(130%); } 100% { transform: translateX(-130%); } }
.bt svg { animation: bob 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.6s); }
@keyframes bob { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(10deg) translateY(-6px); } }
.bt.sk { background: #1b1b1e; }
.bt.sk::before { display: none; }

/* a genre's own cover: its colour, its icon, its name */
.cv.shelf { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 12%; color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #000)); }
.cv.shelf svg { width: 30%; height: 30%; }
.cv.shelf b { font-size: 26px; font-weight: 900; line-height: 1.2; }

.hero.sk, .mq.sk { background: linear-gradient(90deg, #1b1b1e 0%, #26262a 50%, #1b1b1e 100%);
  background-size: 200% 100%; animation: sheen 1.2s linear infinite; }


@media (min-width: 640px) {
  .view { max-width: 680px; margin: 0 auto; }
  .dock { inset-inline: auto; left: 50%; width: 660px; margin-left: -330px; }
  .sh { max-width: 560px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
}
.hero + .quick { margin-top: 16px; }


/* ------------------------------------------------------ profile + admin */
button.avatar { border: 0; padding: 0; position: relative; overflow: hidden; color: #fff; font-weight: 800; }
button.avatar:active { transform: scale(.94); }
.dhero.prof { text-align: center; }
.pav { position: relative; width: 108px; height: 108px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 42px; font-weight: 900;
  background: linear-gradient(135deg, var(--accent), #7a2cf5); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.pav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 4px; }
.stile { padding: 14px 14px 12px; border-radius: 14px; background: rgba(255,255,255,.07);
  animation: rise .5s var(--ease) both; }
.stile b { display: block; font-size: 21px; font-weight: 900; letter-spacing: -.01em; line-height: 1.25; }
.stile span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.facts { margin: 12px 16px 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05);
  font-size: 14px; line-height: 1.9; }
.lseg { margin-top: 0; }
.admin-entry { margin-top: 18px; }
.admin-entry .cv.none { background: linear-gradient(135deg, #1f3b73, #7a2cf5); color: #fff; }
.chpl { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 14px 16px 0; padding: 12px 14px;
  border: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(122,44,245,.35), rgba(255,55,95,.25));
  text-align: start; }
.chpl span { flex: 1; min-width: 0; }
.chpl b { display: block; font-size: 15px; }
.chpl small { color: rgba(255,255,255,.75); font-size: 12px; }
/* The chevron points toward where the page reads to: left in Persian, right in English. */
.chpl > svg:last-child { transform: scaleX(-1); }
[dir="ltr"] .chpl > svg:last-child { transform: none; }

.atabs { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 6px; scrollbar-width: none; }
.atabs::-webkit-scrollbar { display: none; }
.atabs .chip { padding: 0 14px; }
.chip.on { background: #fff; color: #111; }
.apane { padding-bottom: 20px; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.kv span { min-width: 0; overflow-wrap: anywhere; }
.kv small { display: block; color: var(--faint); font-size: 11.5px; }
.kv b { flex: none; font-weight: 800; }
.kv.bad b, .kv.bad span { color: #ff8a8a; }
.kv .pill { flex: none; height: 32px; padding: 0 14px; font-size: 13px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 0 16px; direction: ltr; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, var(--accent), #ff7a93); transition: height .6s var(--ease); }
.bar span { font-size: 10px; color: var(--faint); }
.form { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 8px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.form input:not([type=checkbox]), .form textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 10px;
  background: #2c2c30; color: #fff; font: inherit; font-size: 15px; outline: 0; resize: vertical; }
.form input:focus, .form textarea:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.form input[type=file] { padding: 10px; font-size: 13px; }
.form .tog { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 14.5px; }
.form .tog input { width: 20px; height: 20px; accent-color: var(--accent); }
.frow { display: flex; flex-wrap: wrap; gap: 10px; }
.frow .pill, .form > .pill { height: 42px; padding: 0 18px; font-size: 14px; }
.form > .pill { align-self: flex-start; }
.fnote { font-size: 12px; color: var(--faint); }
.adprev { max-width: 200px; border-radius: 10px; }
.bcrun { padding: 10px 0; }
.bcrun > b { display: block; padding: 0 16px 10px; font-size: 16px; }
.bcrun .pill { margin: 14px 16px; }
.bcbar { height: 8px; margin: 0 16px 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; direction: ltr; }
.bcbar i { display: block; height: 100%; background: var(--accent); transition: width .5s; }
.bcprev { margin: 0 20px 6px; padding: 12px; border-radius: 10px; background: #2c2c30; font-size: 14px;
  white-space: pre-wrap; max-height: 30vh; overflow: auto; }

/* ---------------------------------------------- gates: maintenance, join */
.gate { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 80% at 50% 0%, #2a1a4a, var(--bg)); }
.gin { max-width: 360px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gico { font-size: 58px; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.gin > b { font-size: 21px; font-weight: 900; }
.gin > span { color: var(--muted); font-size: 14.5px; }
.gbtns { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.gbtns .pill, .gcheck { height: 46px; font-size: 15px; }
.gcheck { width: 100%; margin-top: 4px; }

/* ---------------------------------------------------------- opening ad */
.adov { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px;
  background: rgba(8,8,10,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .3s; }
.adov.open { opacity: 1; }
.adbox { width: min(100%, 420px); display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform: scale(.94); transition: transform .45s var(--spring); }
.adov.open .adbox { transform: none; }
.adimg { width: 100%; max-height: 58vh; object-fit: contain; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.adtext { text-align: center; font-size: 16px; line-height: 1.7; white-space: normal; }
.adbox .pill { height: 46px; padding: 0 26px; font-size: 15px; }
.adx { position: absolute; top: calc(14px + env(safe-area-inset-top)); inset-inline-end: 14px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.adx > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.adring { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 100.5; stroke-dashoffset: 0;
  animation: adring linear forwards; }
@keyframes adring { to { stroke-dashoffset: 100.5; } }
.adx span { position: relative; font-size: 15px; font-weight: 800; }
.adx.ready { background: #fff; color: #000; }
.adx.ready > svg { display: none; }
.adx span svg { width: 18px; height: 18px; }
.adlab { position: absolute; top: calc(24px + env(safe-area-inset-top)); inset-inline-start: 18px;
  font-size: 11.5px; font-weight: 700; color: var(--faint); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .gico { animation: none; } .stile { animation: none; } }


/* ---------------------------------------------------------------- motion */
/* Sparks trailing the progress head. */
.spk { position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: #ffe3ea; box-shadow: 0 0 6px 1px rgba(255,110,150,.9); pointer-events: none; }
.full:not(.paused) .sthumb { box-shadow: 0 0 10px 2px rgba(255,90,130,.55), 0 1px 5px rgba(0,0,0,.35); }

/* The burst when a song is liked. */
#fx { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.bst { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px rgba(255,55,95,.8); }
.bst.alt { background: #ffd1dc; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }

/* The cover flying into the full player, which fades in instead of sliding. */
.ghost { position: fixed; z-index: 90; object-fit: cover; border-radius: 12px; transform-origin: top left;
  pointer-events: none; opacity: 1; }
.full.morph { animation: fullfade .32s ease both; transition: none; }
@keyframes fullfade { from { opacity: 0; } }

/* A springy press on everything tappable: quick down, a little bounce back. */
.ib, .fab, .qt, .card .cvw, .bt, .topres, .row, .lrow, .playbig, .fsend, .mqi, .chip, .pill, .chpl,
button.avatar, .stile, .hs .fab, .si {
  transition: transform .55s var(--spring), background-color .2s;
}
.ib:active, .fab:active, .qt:active, .card:active .cvw, .bt:active, .topres:active, .row:active, .lrow:active,
.playbig:active, .fsend:active, .mqi:active, .chip:active, .pill:active, .chpl:active, button.avatar:active,
.stile:active, .si:active { transition-duration: .1s; }
.row:active, .lrow:active, .chpl:active, .stile:active { transform: scale(.98); }
.pill:active, .chip:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .full.morph { animation: none; }
  .ib, .fab, .qt, .card .cvw, .bt, .topres, .row, .lrow, .playbig, .fsend, .mqi, .chip, .pill, .chpl,
  button.avatar, .stile, .si { transition: none; }
}


/* ------------------------------------------------------------- podcasts */
.podnote { padding: 0 16px 10px; margin-top: -6px; }
.fund { display: inline-block; max-width: 100%; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  background: rgba(46,204,113,.14); color: #7fe0a8; font-size: 11px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fund.warn { background: rgba(255,176,32,.14); color: #ffc766; }
.dfund { margin-top: 6px; }
.dfund .fund { white-space: normal; }
.row.ep .ra { color: var(--muted); }

/* ----------------------------------------------------------- performance
   Phones ran hot (owner, 2026-09-30). The cause was motion that never stops:
   the background orbs drifting forever and the whole ambient layer "breathing"
   while music played, underneath bars that blur what is behind them -- so the
   GPU re-blurred full-screen layers every frame, all the time. The look stays;
   the constant motion goes:
   - the ambient orbs stand still and the layer no longer pulses (the floating
     notes keep moving -- they are wanted -- but only while the app is shown)
   - the bars blur less (cost grows with the radius)
   - the full player's colour field moves only while it is open and playing
   - the Home banner's blurred picture no longer zooms
   - the category tiles shine and bob once, not forever
   - the trending strip pauses when scrolled out of view
   - everything pauses while the app is hidden */
body.isplaying .amb { animation: none; }
.amb > i { animation: none !important; will-change: auto; }
.sbox { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tabbar { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.full:not(.open) .blob, .full.paused .blob { animation-play-state: paused; }
.hs.on .hbg { animation: none; transform: scale(1.2); }
.bt::before, .bt svg { animation-iteration-count: 1; }
.mq.off .mqt { animation-play-state: paused; }
body.idle *, body.idle *::before, body.idle *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- lyrics
   Over the full player, in its colours: big bold lines, the sung one white,
   the rest dimmed, like Spotify's lyrics view. */
.lyr {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(to bottom, var(--f1, #3a3a44), var(--f0, #1d1d22) 70%);
  transform: translateY(100%); visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.lyr.open { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
.lyin { height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column;
  padding: calc(8px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom)); }
.lyhead { display: flex; align-items: center; gap: 8px; height: 52px; padding-inline: 14px; }
.lyt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lyt b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyt span { font-size: 12.5px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lymk { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12.5px; font-weight: 800; }
.lymk:active { transform: scale(.95); }
.lybody { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
  padding: 12vh 26px 45vh; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 85%, transparent 100%); }
.lybody::-webkit-scrollbar { display: none; }
.lyl { margin: 0 0 20px; font-size: 27px; font-weight: 900; line-height: 1.38; letter-spacing: -.01em;
  color: rgba(255,255,255,.34); text-align: start; cursor: pointer;
  transition: color .35s ease; }
.lyl.past { color: rgba(255,255,255,.62); }
.lyl.on { color: #fff; }
.lyl.gap { font-size: 22px; }
.lyl.plain { color: rgba(255,255,255,.88); cursor: default; }
.lynote { margin: 0 0 22px; padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.22);
  font-size: 12.5px; color: rgba(255,255,255,.8); }
.lysrc { margin-top: 30px; font-size: 11px; color: rgba(255,255,255,.45); }
.lymsg { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18vh;
  text-align: center; color: rgba(255,255,255,.8); }
.lymsg b { font-size: 18px; }
.lymsg span { font-size: 13px; color: rgba(255,255,255,.6); max-width: 300px; }
.lyfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 20px 0; direction: ltr; }
.lysync { display: flex; align-items: center; gap: 6px; direction: rtl; }
.lysync button { height: 32px; padding: 0 11px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); font-size: 12px; font-weight: 700; }
.lysync span { min-width: 54px; text-align: center; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); }
.playbig.sm { width: 54px; height: 54px; margin-inline-start: auto; }

/* ----------------------------------------------------------- video maker */
.vmk { position: fixed; inset: 0; z-index: 110; background: #08080a;
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .3s ease, transform .35s var(--ease), visibility 0s linear .35s; }
.vmk.open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .35s var(--ease), visibility 0s; }
.vmin { height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column;
  padding: calc(6px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom)); }
.vmhead { display: flex; align-items: center; justify-content: space-between; height: 50px; }
.vmhead b { font-size: 16px; font-weight: 900; }
.vmhead .pill { display: inline-flex; align-items: center; gap: 8px; }
.vmhead .pill .spin { width: 16px; height: 16px; border-width: 2px; }
.vstagew { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px 0 10px; container-type: size; }
.vstage { position: relative; overflow: hidden; border-radius: 18px; background: #111;
  height: min(100cqh, 100cqw * 16 / 9); aspect-ratio: 9 / 16; isolation: isolate; cursor: pointer; }
@supports not (height: 1cqh) { .vstage { height: 52vh; } }
.vbgl { position: absolute; inset: 0; background-size: cover; background-position: center; }
.vbgl.blur { transform: scale(1.25); filter: blur(18px) brightness(.72) saturate(1.2); }
.vbgl.own img, .vbgl.own video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88); }
.vcard { position: absolute; left: 12.5%; width: 75%; top: 14.84%; aspect-ratio: 1; object-fit: cover; border-radius: 6%; }
.vtext { position: absolute; left: 8.9%; right: 8.9%; transform: translateY(-50%); text-align: center;
  font-weight: 800; line-height: 1.32; white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
.vtext span { display: inline-block; }
.vtag { position: absolute; left: 0; right: 0; bottom: 3.4%; display: flex; flex-direction: column; align-items: center;
  font-size: calc(var(--vs, .35px) * 26); line-height: 1.77; font-weight: 700; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }
.vtag small { font-size: calc(var(--vs, .35px) * 22); opacity: .85; }
.vplay { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.35); color: #fff; pointer-events: none; }
.vplay:empty { display: none; }
.vtabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #19191c; }
.vtabs button { flex: 1; height: 36px; border: 0; border-radius: 10px; background: none; font-size: 13px; font-weight: 800; color: var(--muted); }
.vtabs button.on { background: #2c2c31; color: #fff; }
.vpanel { height: 30vh; max-height: 250px; overflow-y: auto; padding: 12px 2px 4px; touch-action: pan-y; }
.vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.vsub { margin: 2px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.vchip { height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #1c1c1f;
  font-size: 13px; font-weight: 800; }
.vchip.on { background: #fff; color: #000; border-color: transparent; }
.vlines { display: flex; flex-direction: column; gap: 4px; }
.vline { text-align: start; padding: 9px 12px; border: 0; border-radius: 10px; background: none;
  font-size: 15px; font-weight: 700; color: rgba(255,255,255,.55); }
.vline.in { color: #fff; background: rgba(255,255,255,.06); }
.vline.on { background: var(--accent); color: #fff; }
.vsw { position: relative; aspect-ratio: 4 / 5; border: 2px solid transparent; border-radius: 12px;
  background-size: cover; background-position: center; display: grid; place-items: center; overflow: hidden; }
.vsw span { position: absolute; bottom: 6px; left: 0; right: 0; font-size: 11px; font-weight: 800; text-shadow: 0 1px 3px #000; }
.vsw.up { background: #1c1c1f; border-style: dashed; border-color: rgba(255,255,255,.25); }
.vsw.on { border-color: #fff; border-style: solid; }
.vdot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); }
.vdot.on { box-shadow: 0 0 0 3px #08080a, 0 0 0 5px #fff; }

.vprev { opacity: 0; }
.vown { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px;
  border: 1.5px dashed rgba(255,255,255,.3); border-radius: 14px; background: #19191c; text-align: start; }
.vown.on { border-style: solid; border-color: #fff; }
.vown span { display: flex; flex-direction: column; }
.vown b { font-size: 14px; font-weight: 800; }
.vown small { font-size: 11.5px; color: var(--muted); }
.vtrim { display: flex; align-items: center; gap: 10px; margin: -2px 2px 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.vtrim input { flex: 1; accent-color: #fff; direction: ltr; }
.vtrim b { min-width: 42px; color: #fff; font-size: 12px; text-align: center; }
.vline.on.first { border-start-start-radius: 14px; }
.vline.on.last { background: color-mix(in srgb, var(--accent) 80%, #fff); }

/* the text can be dragged, pinched and turned (vmGestures) */
.vstage { touch-action: none; }
.vtw { position: absolute; left: 50%; top: 50%; width: 82.2%; height: 0; transform: translateX(-50%); }
.vtw .vtext { left: 0; right: 0; top: 0; }
.vguide { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px;
  background: #ffd84d; opacity: 0; transition: opacity .12s; pointer-events: none; }
.vguide.on { opacity: .9; }
.vhint { position: absolute; top: 3%; left: 6%; right: 6%; z-index: 2;
  padding: 6px 12px; border-radius: 14px; background: rgba(0,0,0,.6); font-size: 11px; font-weight: 700;
  text-align: center; line-height: 1.5; pointer-events: none; transition: opacity .4s; }
.vhint.gone { opacity: 0; }

/* the music sticker */
.vsk { position: absolute; width: 0; height: 0; transform-origin: 0 0; }
.vsk canvas { position: absolute; }
.vsk canvas.spin { animation: vspin 4.5s linear infinite; }
@keyframes vspin { to { transform: rotate(360deg); } }
.vtabs button { font-size: 12px; padding: 0 2px; }
.vgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vgrid .vchip { padding: 0 6px; font-size: 12px; }

/* lines break where the video breaks them (vmBreaks), never on their own */
.vtw .vtext { white-space: pre; line-height: 1.77; }   /* libass's line pitch (assSize) */

/* ---------------------------------------------------- heat, second pass
   (2026-10-08, "the phone gets too hot again"). Measured in the app while a
   song played: 29 animations running at once, and the parts below were the
   costly ones -- they made the phone redo layout or repaint every frame, or
   re-blur what lay under the bars every frame:
   - the equaliser bars animated their height (layout + paint each frame):
     now a scale, which the GPU does alone
   - the "live" dots animated a box-shadow (a repaint each frame, seven of
     them): now a ring that grows and fades, three times, then rests
   - the tab bar and the search bar blurred whatever moved beneath them (the
     floating notes, the bars): now plain, nearly opaque -- the look is the
     same, the per-frame blur is gone
   - the closed full player is out of the page entirely (display: none) */
.full.gone { display: none; }
.tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14,14,16,.97); }
.sbox { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 96%, transparent); }
.eqw i { height: 16px; transform-origin: 50% 100%; transform: scaleY(.25); animation-name: eq2; will-change: transform; }
@keyframes eq2 { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
body:not(.isplaying) .eqw i { height: 16px; transform: scaleY(.44); }
.live { animation: none; }
.live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,55,95,.55);
  animation: livering 1.7s ease-out 3; pointer-events: none; }
@keyframes livering { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
body.fullopen .notes i { animation-play-state: paused; }

/* English (left to right): what was pinned to the right for Persian */
html[dir="ltr"] .ht, html[dir="ltr"] .ha, html[dir="ltr"] .mqc b, html[dir="ltr"] .mqc span { text-align: left; }
html[dir="ltr"] .lysync { direction: ltr; }

/* ============================================================ Halloween
   html.hw, through October to 2 November (see HW in app.js). Pumpkin orange
   and night purple on an aubergine black; every colour token is redefined
   here, so the rest of the sheet follows. The night sky (web, spider, fog,
   a faint moon) is still: only the spider's drop, the pumpkin's flicker and
   the opening bats move, each a few seconds and then never again. */
html.hw {
  --bg: #0c0910;
  --card: #19131f;
  --card2: #241b2c;
  --line: rgba(255,200,150,.08);
  --muted: #b4a9ba;
  --faint: #7d7283;
  --accent: #ff7a1a;
  --hw-amber: #ffb547;
  --hw-purple: #8b5cf6;
}
.hwsky { display: none; }
html.hw .hwsky { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.fullopen .hwsky { display: none; }

html.hw .amb { --a1: #ff7a1a; --a2: #6d28d9; }
html.hw .amb .o3 { background: radial-gradient(closest-side, #7ddc5a, transparent); opacity: .05; }
html.hw .notes i { color: rgba(255,214,170,.08); }
html.hw body.isplaying .notes i { color: rgba(255,214,170,.15); }

.hwmoon { position: absolute; top: 44vh; inset-inline-start: -40px; width: 150px; height: 150px; border-radius: 50%; opacity: .07;
  background: radial-gradient(circle at 30% 34%, rgba(160,130,90,.55) 0 7%, transparent 8%),
              radial-gradient(circle at 62% 60%, rgba(160,130,90,.45) 0 10%, transparent 11%),
              radial-gradient(circle at 40% 40%, #fff3d2, #e8c98a 70%, #c9a462);
  box-shadow: 0 0 60px 18px rgba(255,214,140,.35); }
.hwweb { position: absolute; top: 0; inset-inline-end: 0; width: 128px; height: 128px; color: #e3d4ef; opacity: .17;
  transform: scaleX(-1); }
[dir="ltr"] .hwweb { transform: none; }
.hwspider { position: absolute; top: 0; inset-inline-end: 70px; display: flex; flex-direction: column; align-items: center;
  color: #22172b; animation: hwdrop 1.7s cubic-bezier(.3,1.45,.5,1) .6s both; }
.hwspider i { width: 1px; height: calc(env(safe-area-inset-top) + 62px); background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.12)); }
.hwspider svg { width: 18px; height: 18px; margin-top: -2px; filter: drop-shadow(0 0 2px rgba(255,160,80,.55)); }
@keyframes hwdrop { from { transform: translateY(-110px); } }
.hwfog { position: absolute; inset-inline: 0; bottom: 0; height: 36vh;
  background: linear-gradient(to top, rgba(112,70,150,.17), rgba(112,70,150,.05) 50%, transparent); }

/* the pumpkin (PUMPKIN in app.js): its face flickers like a candle, twice */
.pk { display: block; }
.pk .pkf { animation: pkflick 2.2s ease-in-out .4s 2; }
@keyframes pkflick { 30% { opacity: .72; } 45% { opacity: 1; } 60% { opacity: .82; } }

/* "Happy Halloween" in place of the greeting */
.hwt { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; }
.hwt .pk { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 10px rgba(255,140,40,.5)); }
.hwt > span { background: linear-gradient(100deg, #ffd88a 0%, #ffa043 45%, #ff6b1a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the Halloween list, first on Home */
.hwban { position: relative; display: block; width: calc(100% - 32px); height: 158px; margin: 2px 16px 16px; padding: 0;
  border: 0; border-radius: 18px; overflow: hidden; isolation: isolate; text-align: start; color: #fff;
  background: linear-gradient(160deg, #2c1342 0%, #1a0c27 52%, #2e1307 100%);
  box-shadow: 0 18px 40px -16px rgba(255,110,30,.45), inset 0 0 0 1px rgba(255,170,90,.13);
  transition: transform .15s var(--ease); }
.hwban:active { transform: scale(.98); }
.hwb-glow { position: absolute; width: 240px; height: 240px; inset-inline-end: -60px; bottom: -100px;
  background: radial-gradient(closest-side, rgba(255,128,30,.5), transparent); }
.hwb-moon { position: absolute; top: 16px; inset-inline-end: 36%; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff6dc, #ebcf8e 75%);
  box-shadow: 0 0 22px 6px rgba(255,220,150,.25); opacity: .9; }
.hwgr { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 46px; color: #0b0711; }
.hwb-txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; max-width: 64%; padding: 15px 18px; }
.hwb-txt small { color: var(--hw-amber); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.hwb-txt b { font-size: 21px; font-weight: 900; line-height: 1.25; }
.hwb-txt em { font-style: normal; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.74); }
.hwb-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-top: 9px;
  padding: 0 15px 0 12px; border-radius: 17px; background: var(--accent); color: #1c0b03;
  font-size: 13.5px; font-weight: 800; box-shadow: 0 6px 18px rgba(255,122,26,.4); }
.hwb-cta svg { width: 15px; height: 15px; }
.hwb-pk { position: absolute; z-index: 1; inset-inline-end: 12px; bottom: 12px; width: 108px; height: 108px;
  filter: drop-shadow(0 10px 18px rgba(255,110,20,.45)); }
.hwb-pk .pk { width: 100%; height: 100%; }

/* its tile on Browse */
.bt.hwtile { background: radial-gradient(circle at 88% 115%, rgba(255,140,40,.6), transparent 58%),
  linear-gradient(135deg, #3b1752, #150a1d); box-shadow: inset 0 0 0 1px rgba(255,170,90,.2); }
.bt.hwtile svg { transform: rotate(-10deg); width: 70px; height: 70px; filter: drop-shadow(0 6px 14px rgba(255,110,20,.5)); }

/* everything that was pink */
html.hw .cv.liked { background: linear-gradient(135deg, #ff7a1a 0%, #7c2fd6 100%); }
html.hw .welcome { background: linear-gradient(135deg, #ff7a1a 0%, #a3329b 55%, #3b1a78 100%); box-shadow: 0 14px 40px rgba(255,122,26,.22); }
html.hw .chpl { background: linear-gradient(135deg, rgba(124,47,214,.38), rgba(255,122,26,.24)); }
html.hw .avatar { background: linear-gradient(135deg, var(--accent), #6d28d9); }
html.hw .live::after { background: rgba(255,122,26,.55); }
html.hw .bst { box-shadow: 0 0 8px rgba(255,122,26,.8); }
html.hw .bst.alt { background: #ffd9a8; }
html.hw .tabbar { background: rgba(12,9,16,.97); }
html.hw .tb.on { color: var(--accent); }
html.hw .tb.on .ti { filter: drop-shadow(0 0 6px rgba(255,122,26,.45)); }

/* bats crossing once (hwBats) */
.hwbats { position: fixed; inset-inline: 0; top: calc(env(safe-area-inset-top) + 24px); height: 170px; z-index: 250;
  pointer-events: none; overflow: hidden; direction: ltr; }
.hwbats i { position: absolute; left: 0; top: calc(var(--i) * 38px); color: #140b1b;
  filter: drop-shadow(0 0 2px rgba(255,170,80,.95)) drop-shadow(0 0 8px rgba(255,120,30,.45));
  animation: hwfly 2.9s cubic-bezier(.45,.05,.55,.95) both; animation-delay: calc(var(--i) * .3s); }
.hwbats i:nth-child(2) { animation-duration: 3.3s; }
.hwbats i svg { width: 46px; height: 23px; animation: hwflap .15s ease-in-out infinite alternate; }
@keyframes hwfly {
  0%   { transform: translate(-60px, 50px) scale(.7); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate(50vw, -6px) scale(1); }
  88%  { opacity: 1; }
  100% { transform: translate(calc(100vw + 60px), 34px) scale(.75); opacity: 0; }
}
@keyframes hwflap { to { transform: scaleY(.4); } }

@media (prefers-reduced-motion: reduce) {
  .hwspider, .pk .pkf, .hwbats i, .hwbats i svg { animation: none; }
  .hwbats { display: none; }
}