/* Promedia — Mini App + web. Mobil birinchi; desktopda markazlashgan ustun.
   Uslub: «oqshom oltin soati» — iliq olxo'ri (plum) fon, krem, marjon (coral), asal-oltin. Sarlavhalar Montserrat,
   urg'u so'z Playfair Display kursivda. Hamma uchun bitta iliq yorug' mavzu (Telegram qorong'i rejimida ham).
   Hamma rang o'zgaruvchilarda. Shriftlar o'zimizda (faqat lotin): kirillcha harflar tizim shriftida chiqadi. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/montserrat-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('fonts/montserrat-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/montserrat-latin-900-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700 800; font-display: swap; src: url('fonts/playfair-display-latin-800-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: only light;
  --bg: #fff7f0; --ink: #3a1430; --mute: #74505f; --dim: #82596a; --label: #5a1840; --soft: #5a1840;
  --v: #e8577e; --p: #ff6f61; --o: #ffb547; --c: #ffc978;
  --cream: #ffe6dc; --plum: #3a1430; --plum2: #5a1840; --gold: #ffc978; --on-grad: #3a0f2e;
  --glass: rgba(255, 111, 97, .07); --line: rgba(90, 24, 64, .11);
  --card: #fff;
  --card-shadow: 0 8px 24px rgba(176, 96, 60, .1), 0 1px 2px rgba(176, 96, 60, .08);
  --field: #fff; --field-on: #fff;
  --top: linear-gradient(180deg, rgba(255, 247, 240, .97) 82%, rgba(255, 247, 240, 0));
  --tabbar: rgba(255, 255, 255, .93); --tabbar-shadow: 0 14px 40px rgba(176, 96, 60, .2), inset 0 1px 0 #fff;
  --sheet: linear-gradient(180deg, #fff, #fff7f0); --overlay: rgba(58, 20, 48, .38);
  --toast: #fff; --fade: rgba(255, 247, 240, .94);
  --aurora: 1;
  --shine: linear-gradient(100deg, #c27a12 0%, #a8640c 50%, #c27a12 100%);
  --accent: #b8700f;
  --skel: linear-gradient(100deg, rgba(255, 181, 71, .1) 30%, rgba(255, 143, 90, .2) 50%, rgba(255, 181, 71, .1) 70%);
  --k-dim: rgba(58, 20, 48, .64); --k-past: rgba(58, 20, 48, .78); --k-now: #3a1430; --k-plain: rgba(58, 20, 48, .86);
  --tag: #b4483a;
  --ok: #11692f; --ok-bg: rgba(34, 197, 94, .13); --run: #9a5b0b; --run-bg: rgba(255, 181, 71, .2);
  --bad: #b91c1c; --bad-bg: rgba(239, 68, 68, .1);
  --note: #7c3f12; --note-bg: rgba(255, 181, 71, .12); --note-line: rgba(214, 130, 40, .3);
  --warn: #9a3412; --warn-bg: rgba(255, 111, 97, .1); --warn-line: rgba(255, 111, 97, .32);
  --bubble: #fff; --bubble-me: linear-gradient(140deg, rgba(255, 111, 97, .2), rgba(255, 181, 71, .22));
  --grad: linear-gradient(120deg, var(--p), #ff8f5a 55%, var(--o));
  --glow: rgba(255, 111, 97, .3);
  --r: 22px; --tab: 74px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --display: 'Montserrat', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Diqqat: html'ga overflow berilmaydi. Aks holda body'ning overflow-x'i viewport'ga o'tmaydi, body o'zi scroll
   konteynerga aylanadi va `overscroll-behavior` bilan birga sahifani butunlay qotiradi (sahifa umuman surilmaydi). */
html { height: 100%; background: #fdebdd; }
body { margin: 0; min-height: 100%; color: var(--ink); font: 16px/1.5 var(--text); overflow-x: hidden; overscroll-behavior-y: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
a { color: inherit; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

/* ───── Fon: aurora (bitta kompozit qatlam) + zarrachalar ───── */
.aurora { position: fixed; z-index: 0; inset: 0; pointer-events: none; background:
    radial-gradient(70% 40% at 92% 0%, rgba(255, 143, 90, .16), transparent 70%),
    radial-gradient(60% 40% at 0% 42%, rgba(255, 181, 71, .14), transparent 70%),
    radial-gradient(70% 40% at 70% 100%, rgba(232, 87, 126, .08), transparent 70%),
    linear-gradient(180deg, #fff7f0, #fdebdd); }
.aurora i { display: none; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.grain { display: none; }

/* ───── Karkas ───── */
#app { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: 0 16px calc(var(--tab) + var(--safe-b) + 28px);
  /* Aylanuvchi disk yog'dusi va boshqa bezaklar ekran chetidan chiqadi: telefonda brauzer sahifa kengligini
     cho'zib-qisqartirib, matn va tugmalarni tebratadi. `clip` sticky'ni buzmaydi. */
  overflow-x: clip; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 18px; margin: 0 -16px -6px; background: var(--top); transform: translateZ(0); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 16px var(--display); letter-spacing: .01em; text-decoration: none; min-width: 0; }
.brand img { width: 34px; height: 34px; border-radius: 11px; box-shadow: 0 6px 18px rgba(255, 111, 97, .35); flex: none; }
.top-r { display: flex; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform .2s var(--ease), background .2s; }
.pill:active { transform: scale(.95); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--p); }
.pill.bump { animation: bump .6s var(--ease); }
.pill.lang { padding: 8px 11px; font-size: 13px; letter-spacing: .04em; }
@keyframes bump { 30% { transform: scale(1.14); background: rgba(255, 111, 97, .25); } }

#view { padding-top: 6px; }
.screen { animation: screenIn .15s ease-out both; }
@keyframes screenIn { from { opacity: 0; } }
.rise { opacity: 0; animation: rise .7s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
/* Ro'yxat qatorlari tezroq chiqadi: oxirgi qator ham yarim soniyada joyida */
.list .rise { animation-duration: .38s; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ───── Tab bar (4 ta bo'lim) ───── */
.tabbar { position: fixed;  z-index: 30; left: 0; right: 0; margin: 0 auto; bottom: calc(12px + var(--safe-b)); width: min(488px, calc(100% - 24px)); height: 62px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 24px; background: var(--tabbar); border: 1px solid var(--line); box-shadow: var(--tabbar-shadow); transform: translateZ(0); }
.tabbar a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; font: 700 10px var(--display); color: var(--mute); transition: color .25s; min-width: 0; }
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.tabbar a svg { width: 22px; height: 22px; transition: transform .35s var(--ease); }
@media (max-width: 380px) { .tabbar a { font-size: 9px; letter-spacing: -.02em; } .tabbar a span { padding: 0; } }
.tabbar a.on { color: var(--on-grad); }
.tabbar a.on svg { transform: translateY(-1px) scale(1.12); }
.tabbar a b { position: absolute; top: 5px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff; font: 700 10px/16px var(--text); text-align: center; }
.tabbar .ink { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 18px; background: var(--grad); opacity: .95; box-shadow: 0 8px 26px rgba(255, 111, 97, .45); transition: transform .45s var(--ease), opacity .3s; }
.tabbar[data-tab="1"] .ink { transform: translateX(100%); }
.tabbar[data-tab="2"] .ink { transform: translateX(200%); }
.tabbar[data-tab="3"] .ink { transform: translateX(300%); }
.tabbar[data-tab="4"] .ink { transform: translateX(400%); }
.item button.disc { border: 0; padding: 0; cursor: pointer; }
.item .go .btn { white-space: nowrap; }
.item b.nm { color: var(--ink); font-weight: 800; font-size: 17px; }
.refcard { display: grid; gap: 10px; padding: 16px; margin-top: 14px; }
.refcard b { font-size: 16px; }
.refcard p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.45; }
.refcard span { font-size: 13.5px; color: var(--mute); }
.refcard .bar { margin: 2px 0; }
.switch-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; cursor: pointer; }
.switch-row input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: #ff6f61; }
.tabbar[data-tab="-1"] .ink { opacity: 0; }

/* ───── Tipografiya ───── */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--cream); border: 1px solid rgba(255, 111, 97, .22); color: var(--plum2); font: 800 12px/1.3 var(--display); letter-spacing: .01em; text-wrap: balance; max-width: 100%; box-shadow: 0 6px 18px rgba(176, 96, 60, .14); }
.eyebrow b { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--p); }
.eyebrow b::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--p); animation: ping 1.8s ease-out infinite; }
@keyframes ping { to { transform: scale(3.4); opacity: 0; } }
.hero { padding: 26px 0 8px; }
.hero h1 { font: 900 clamp(30px, 9.4vw, 46px)/1.04 var(--display); letter-spacing: -.02em; margin: 16px 0 14px; }
/* Bosh sahifa: illyustratsiyali muqova (pastki qismi iliq olxo'ri soyada — matn har qanday rasmda o'qiladi) */
.hero.art { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: min(480px, 128vw); margin-top: 6px; padding: 22px 18px 24px; border-radius: 28px; text-align: center; color: var(--ink); background: #fdebdd; box-shadow: 0 22px 50px rgba(176, 96, 60, .22); }
.hero.art .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero.art::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(255, 236, 220, .3) 0, rgba(255, 236, 220, 0) 16%),
  linear-gradient(0deg, rgba(255, 247, 240, .99) 0, rgba(255, 247, 240, .95) 33%, rgba(255, 244, 235, .62) 50%, rgba(255, 240, 228, 0) 64%); }
.hero.art h1 { color: var(--ink); margin: 14px 0 10px; text-shadow: 0 2px 18px rgba(255, 247, 240, .9); }
.hero.art h1 .accent { display: block; margin-top: 2px; font-size: 1.06em; line-height: 1.08; color: var(--accent); }
.hero.art .lead { margin: 0 auto; max-width: 31ch; font-size: 14.5px; line-height: 1.45; color: var(--mute); }
.shine { background: var(--shine); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accent { font-family: var(--serif); font-style: italic; font-weight: 800; color: var(--accent); letter-spacing: 0; }
@keyframes shine { to { background-position: -220% 0; } }
.lead { color: var(--mute); font-size: 16px; max-width: 34ch; }
.h2 { font: 800 20px/1.2 var(--display); letter-spacing: -.02em; margin: 34px 0 14px; }
.h1 { font: 900 27px/1.12 var(--display); letter-spacing: -.03em; margin: 10px 0 6px; }
.sub { color: var(--mute); font-size: 15px; margin-bottom: 18px; }
.back { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--mute); font-size: 14px; font-weight: 600; padding: 8px 0; }
.back svg { width: 18px; height: 18px; }

/* ───── Tugmalar ───── */
.btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 58px; padding: 0 16px; border-radius: 20px; font: 800 15px var(--display); letter-spacing: -.01em; color: var(--on-grad); background: var(--grad); background-size: 180% 100%; box-shadow: 0 14px 40px rgba(255, 111, 97, .42), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .2s var(--ease), box-shadow .3s, background-position .6s; isolation: isolate; text-decoration: none; }
.btn > svg { width: 20px; height: 20px; flex: none; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 246, 220, .7) 50%, transparent 70%); transform: translateX(-120%); animation: shimmer 6s ease-in-out 1s infinite; }
@keyframes sweep { 55%, 100% { transform: translateX(120%); } }
@keyframes shimmer { 0% { transform: translateX(-120%); } 18%, 100% { transform: translateX(120%); } }
@media (hover: hover) { .btn:not(.ghost):hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(255, 111, 97, .45), inset 0 1px 0 rgba(255, 255, 255, .35); } }
.btn:active { transform: scale(.97); box-shadow: 0 8px 22px rgba(255, 111, 97, .4); }
.btn[disabled] { opacity: .55; pointer-events: none; filter: saturate(.6); }
.btn small { font: 600 12.5px var(--display); opacity: .8; white-space: nowrap; }
.btn.ghost { background: var(--glass); border: 1px solid var(--line); box-shadow: none; min-height: 52px; color: var(--ink); }
.btn.ghost::before { display: none; }
.btn.sm { min-height: 44px; border-radius: 14px; font-size: 14px; padding: 0 14px; width: auto; }
.btn.pulse { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.018); } }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .7s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }
.spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(58, 15, 46, .25); border-top-color: var(--on-grad); animation: rot .7s linear infinite; flex: none; }
.btn.ghost .spin { border-color: var(--line); border-top-color: var(--ink); }
@keyframes rot { to { transform: rotate(360deg); } }
.cta { position: sticky; bottom: calc(var(--tab) + var(--safe-b) + 20px); z-index: 10; margin-top: 22px; }
.cta::before { content: ''; position: absolute; inset: -26px -16px -18px; z-index: -1; background: linear-gradient(180deg, transparent, var(--fade) 45%); pointer-events: none; }

/* ───── Kartochkalar ───── */
.glass { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--card-shadow); }
.tilt { transform-style: preserve-3d; transition: transform .35s var(--ease); will-change: transform; }
.tilt .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .28), transparent 55%); }
.tilt.live .glare { opacity: 1; }

.samples { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; margin: 0 -16px; padding: 4px 16px 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.samples::-webkit-scrollbar { display: none; }
.sample { flex: 0 0 76%; max-width: 300px; scroll-snap-align: center; padding: 16px; display: flex; align-items: center; gap: 14px; text-align: left; }
.sample .disc { flex: none; }
.sample b { display: block; font: 800 15px/1.25 var(--display); letter-spacing: -.01em; }
.sample span { color: var(--mute); font-size: 13px; }
.sample.playing { border-color: rgba(255, 111, 97, .7); box-shadow: 0 0 0 1px rgba(255, 111, 97, .5), 0 18px 50px rgba(255, 111, 97, .28); }

.disc { position: relative; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle, #2b0e26 0 17%, transparent 18%), repeating-radial-gradient(circle, rgba(43, 14, 38, .12) 0 1px, transparent 1px 4px), conic-gradient(from calc(var(--hue, 290) * 1deg), #ff6f61, #ffb547, #ffe0a8, #e8577e, #c94f7c, #ff6f61); box-shadow: 0 10px 24px rgba(176, 96, 60, .3), inset 0 0 0 1px rgba(255, 255, 255, .3); animation: rot 5s linear infinite; animation-play-state: paused; }
.disc::after { content: ''; position: absolute; inset: 44%; border-radius: 50%; background: #fff; opacity: .9; }
.playing .disc, .disc.on { animation-play-state: running; }
/* Yuklanmoqda: bosilgan zahoti disk atrofida aylanuvchi halqa (tovush chiqquncha) */
.loading .disc::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid rgba(140, 140, 160, .28); border-top-color: var(--p); animation: rot .7s linear infinite; }
.loading .play { opacity: .65; }
/* Umumiy bo'lim: disk markazida ijro/pauza belgisi — bosish mumkinligi ko'rinib turadi */
.disc .ico.pp { inset: 23%; border-radius: 50%; background: rgba(43, 14, 38, .82); z-index: 1; }
.disc .ico.pp svg { width: 50%; height: 50%; }
.disc .ico { position: absolute; inset: 0; display: grid; place-items: center; animation: rot 5s linear infinite reverse; animation-play-state: inherit; }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 3px; height: 30%; border-radius: 2px; background: #fff; }
.playing .eq i { animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s !important; } .eq i:nth-child(3) { animation-delay: -.6s !important; } .eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

.steps { display: grid; gap: 10px; }
.step { display: flex; gap: 14px; align-items: center; padding: 16px; }
.step .n { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font: 900 18px var(--display); color: var(--on-grad); background: var(--grad); box-shadow: 0 8px 22px rgba(255, 111, 97, .35); }
.step b { display: block; font-weight: 600; }
.step span { color: var(--mute); font-size: 14px; }
.price { margin-top: 12px; padding: 22px; text-align: center; overflow: hidden; }
.price::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from 40deg, var(--v), var(--p), var(--o), var(--c), var(--v)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.price .big { white-space: nowrap; font: 900 40px/1 var(--display); letter-spacing: -.04em; margin: 6px 0; }
.price .big small { font-size: 16px; font-weight: 500; color: var(--mute); letter-spacing: 0; }
.foot { margin-top: 30px; text-align: center; color: var(--dim); font-size: 12px; line-height: 1.9; }
.foot a { color: var(--mute); }

/* ───── Katalog ───── */
.cats { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; margin: 0 -16px 14px; padding: 2px 16px 6px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.chip { position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font: 700 13.5px var(--display); color: var(--mute); transition: all .3s var(--ease); white-space: nowrap; }
.chip.on { color: var(--on-grad); background: var(--grad); border-color: transparent; box-shadow: 0 8px 24px rgba(255, 111, 97, .35); transform: translateY(-1px); }
.chip:active { transform: scale(.94); }
.tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tpl { padding: 16px 14px; text-align: left; min-height: 148px; display: flex; flex-direction: column; overflow: hidden; }
.tpl::after { content: ''; position: absolute; width: 130px; height: 130px; right: -46px; top: -46px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--hue, 290) 95% 62% / .5), transparent 68%); pointer-events: none; }
.tpl .em { font-size: 34px; line-height: 1; margin-bottom: auto; }
.tpl:not(.art):not(.custom) { background: linear-gradient(155deg, #ffe2cc, #fffaf5 75%); }
.tpl::after { background: radial-gradient(circle, rgba(255, 181, 71, .42), transparent 68%); }
/* Mavzu kartasi rasm bilan: rasm butun karta, pastda soya va sarlavha */
.tpl.art { padding: 0; min-height: 214px; justify-content: flex-end; color: var(--ink); background: #fdebdd; }
.tpl.art::after { inset: 0; width: auto; height: auto; border-radius: inherit; background: linear-gradient(0deg, rgba(255, 250, 245, .99) 0, rgba(255, 250, 245, .93) 34%, rgba(255, 247, 240, 0) 62%); }
.tpl.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.tpl.art .em { position: absolute; z-index: 2; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px rgba(176, 96, 60, .25); }
.tpl.art .tx { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 12px 12px 13px; }
.tpl.art b { margin-top: 0; color: var(--ink); }
.tpl.art .tx span { color: var(--mute); }
.tpl b { font: 800 14.5px/1.22 var(--display); letter-spacing: -.01em; margin-top: 14px; }
.tpl span { color: var(--mute); font-size: 12.5px; line-height: 1.35; margin-top: 4px; }
.custom { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 18px 16px; --hue: 20; }
.custom .em { margin: 0; }
.custom b { margin: 0; font-size: 16px; }

/* ───── Formalar ───── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--label); margin: 0 4px 7px; }
.field label i { color: #b4372a; font-style: normal; }
.input { width: 100%; padding: 16px; border-radius: 18px; background: var(--field); border: 1px solid var(--line); outline: none; transition: border-color .25s, box-shadow .25s, background .25s; }
.input::placeholder { color: var(--dim); }
.input:focus { border-color: rgba(255, 111, 97, .8); background: var(--field-on); box-shadow: 0 0 0 4px rgba(255, 111, 97, .16), 0 12px 34px rgba(232, 87, 126, .18); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.5; }
textarea.input.tall { min-height: 300px; font-size: 15px; }
.count { text-align: right; font-size: 12px; color: var(--dim); margin: 5px 6px 0; }
.label { font-size: 13px; font-weight: 600; color: var(--label); margin: 20px 4px 9px; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 5px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); }
.seg button { padding: 11px 8px; border-radius: 13px; font-size: 14px; font-weight: 600; color: var(--mute); transition: all .3s var(--ease); }
.seg button.on { background: var(--grad); color: var(--on-grad); box-shadow: 0 6px 18px rgba(255, 111, 97, .35); }

/* ───── Matn ko'rigi ───── */
.lyrics { padding: 22px 20px; }
.lyrics .tag { display: inline-block; font: 600 10.5px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--tag); margin: 16px 0 6px; }
.lyrics .tag:first-child { margin-top: 0; }
.lyrics .ln { display: block; font-size: 17px; line-height: 1.55; opacity: 0; transform: translateY(8px); animation: lineIn .6s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes lineIn { to { opacity: 1; transform: none; } }
.title-in { width: 100%; background: none; border: 0; outline: none; font: 900 26px/1.15 var(--display); letter-spacing: -.03em; padding: 0; margin: 10px 0 4px; }
.tools { display: flex; gap: 8px; margin-top: 12px; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px; border-radius: 16px; background: var(--note-bg); border: 1px solid var(--note-line); color: var(--note); font-size: 13.5px; margin-top: 14px; }
.note.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

/* ───── Kutish (generatsiya) ───── */
.wait { text-align: center; padding: 30px 0 10px; }
.orb { position: relative; width: 230px; height: 230px; margin: 10px auto 34px; }
.orb .core { position: absolute; inset: 22%; border-radius: 50%; background: conic-gradient(from 0deg, var(--v), var(--p), var(--o), var(--c), var(--v)); animation: rot 5s linear infinite; box-shadow: 0 0 80px rgba(255, 111, 97, .6), 0 0 150px rgba(232, 87, 126, .4); }
.orb .core::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, #ffe9d2 24%, #ff8f5a 58%, #5a1840); }
.orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); animation: ringOut 2.8s ease-out infinite; }
.orb .ring:nth-child(2) { animation-delay: .9s; } .orb .ring:nth-child(3) { animation-delay: 1.8s; }
@keyframes ringOut { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.orb .sat { position: absolute; inset: 0; animation: rot 7s linear infinite; }
.orb .sat:nth-of-type(2n) { animation-duration: 11s; animation-direction: reverse; }
.orb .sat span { position: absolute; top: 0; left: 50%; font-size: 24px; transform: translateX(-50%); }
.phase { font: 800 20px/1.25 var(--display); letter-spacing: -.02em; min-height: 52px; }
.phase span { display: inline-block; animation: phaseIn .6s var(--ease); }
@keyframes phaseIn { from { opacity: 0; transform: translateY(12px); } }
.bar { height: 8px; border-radius: 99px; background: var(--glass); overflow: hidden; margin: 22px 0 10px; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .9s var(--ease); }

/* ───── Pleyer ───── */
.player { text-align: center; padding-top: 10px; }
.stage { position: relative; width: min(300px, 78vw); aspect-ratio: 1; margin: 6px auto 22px; }
.stage canvas { position: absolute; inset: -18%; width: 136%; height: 136%; }
.stage .disc { position: absolute; inset: 9%; width: auto; height: auto; animation-duration: 9s; box-shadow: 0 26px 60px rgba(176, 96, 60, .3), 0 0 80px rgba(255, 160, 90, .35), inset 0 0 0 2px rgba(255, 255, 255, .16); }
.stage .disc::after { inset: 46.5%; }
.stage .play { position: absolute; inset: 36%; z-index: 2; border-radius: 50%; display: grid; place-items: center; background: rgba(43, 14, 38, .8); border: 1px solid rgba(255, 233, 210, .4); color: #fff3e6; transition: transform .25s var(--ease); }
.stage .play:active { transform: scale(.9); }
.stage .play svg { width: 34%; height: 34%; }
.player h1 { font: 900 26px/1.15 var(--display); letter-spacing: -.03em; }
.player .meta { color: var(--mute); font-size: 14px; margin-top: 4px; }
.scrub { margin: 20px 4px 4px; }
.scrub input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; margin: 0; }
.scrub input::-webkit-slider-runnable-track { height: 6px; border-radius: 9px; background: linear-gradient(90deg, #ff6f61, #ffb547 var(--pos, 0%), var(--line) var(--pos, 0%)); }
.scrub input::-moz-range-track { height: 6px; border-radius: 9px; background: linear-gradient(90deg, #ff6f61 var(--pos, 0%), var(--line) var(--pos, 0%)); }
.scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 111, 97, .3), 0 4px 12px rgba(0, 0, 0, .35); }
.scrub input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 111, 97, .3); }
.times { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.actions.four { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.actions.four .act { font-size: 11.5px; padding: 14px 2px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; font-size: 12.5px; font-weight: 600; color: var(--soft); text-decoration: none; transition: transform .2s var(--ease); }
.act:active { transform: scale(.94); }
.act svg { width: 22px; height: 22px; }
.karaoke { margin-top: 18px; padding: 20px; text-align: left; }
.karaoke p { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--k-dim); padding: 5px 0; transition: color .35s, transform .35s var(--ease); transform-origin: left center; }
.karaoke p.tag { font: 600 10.5px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--tag); opacity: .7; padding-top: 14px; }
.karaoke p.now { color: var(--k-now); transform: scale(1.05); text-shadow: 0 0 26px rgba(255, 111, 97, .55); }
.karaoke p.past { color: var(--k-past); }
.karaoke.plain p:not(.tag) { color: var(--k-plain); font-weight: 500; font-size: 16.5px; }

/* ───── "Yangi qo'shiq" taklifi (Qo'shiqlar va Qo'shiqlarim tepasida) ───── */
.newsong { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 4px 0 16px; border-radius: var(--r); text-decoration: none; color: var(--on-grad); background: var(--grad); background-size: 220% 100%; box-shadow: 0 14px 40px rgba(255, 111, 97, .36), inset 0 1px 0 rgba(255, 255, 255, .35); animation: rise .6s var(--ease) both, drift 5s ease-in-out infinite alternate, breathe 2.8s ease-in-out .6s infinite; transition: transform .2s var(--ease); }
.newsong::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%); transform: translateX(-120%); animation: sweep 3.4s var(--ease) infinite; }
.newsong:active { transform: scale(.98); }
.newsong .ic { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.newsong .eq i { animation: eq .9s ease-in-out infinite; background: var(--on-grad); }
.newsong .tx { min-width: 0; }
.newsong b { display: block; font: 700 16.5px/1.2 var(--text); letter-spacing: -.01em; }
.newsong .tx span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; color: rgba(58, 15, 46, .8); }
.newsong .arrow { flex: none; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); animation: nudge 1.4s ease-in-out infinite; }
.list > .newsong { margin: 8px 0 0; }
@keyframes drift { to { background-position: 100% 0; } }
@keyframes breathe { 50% { box-shadow: 0 18px 54px rgba(255, 111, 97, .6), inset 0 1px 0 rgba(255, 255, 255, .35); } }
@keyframes nudge { 50% { transform: translateX(4px); } }

/* ───── Ro'yxatlar ───── */
.list { display: grid; gap: 10px; }
.item { display: flex; align-items: center; gap: 14px; padding: 14px; text-align: left; text-decoration: none; width: 100%; }
.item .disc { width: 52px; height: 52px; flex: none; }
.item .ic { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; background: var(--glass); border: 1px solid var(--line); }
.item b { display: block; font-weight: 600; line-height: 1.25; }
.item span { color: var(--mute); font-size: 13px; }
.item .go { margin-left: auto; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.run { background: var(--run-bg); color: var(--run); }
.badge.draft { background: var(--glass); color: var(--mute); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.new { background: #ef4444; color: #fff; }
.empty { text-align: center; padding: 46px 20px; color: var(--mute); }
.empty .em { font-size: 54px; display: block; margin-bottom: 12px; animation: float 3.4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-6deg); } }

/* ───── Balans ───── */
.wallet { padding: 26px 22px; overflow: hidden; }
.wallet::after { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 111, 97, .5), transparent 66%); pointer-events: none; }
.wallet .l { color: var(--mute); font-size: 13px; font-weight: 600; }
.wallet .v { font: 900 44px/1.05 var(--display); letter-spacing: -.04em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.wallet .v small { font-size: 16px; color: var(--mute); font-weight: 500; letter-spacing: 0; }
/* Click belgisi (to'lov tugmalarida): ko'k yumaloq kvadrat ichida oq halqa */
/* Click rasmiy belgisi (logobank.uz): oq plitka ustida — tugmaning rangli fonida ham aniq ko'rinadi */
.clk { flex: none; display: inline-block; width: 28px; height: 28px; border-radius: 9px; background: #fff url('/static/app/click-mark.png') center / 74% no-repeat; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.clkword { display: block; height: 22px; width: auto; padding: 4px 10px; border-radius: 10px; background: #fff; margin: 0 auto 8px; box-sizing: content-box; }
.btn .lbl { white-space: nowrap; }
.wait .btn + .btn { margin-top: 10px; }
.heroform { margin-top: 22px; display: grid; gap: 10px; }
.heroform .input { min-height: 56px; border-radius: 20px; font-size: 17px; font-weight: 600; text-align: center; }
.btn.free { background: var(--ok-bg); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); box-shadow: none; white-space: nowrap; text-decoration: none; animation: none; }
.btn.free::before { display: none; }
.item.tap { cursor: pointer; }
.foot s { opacity: .65; }
.tiers { display: grid; gap: 12px; }
.tier { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; text-align: left; border-radius: 20px; border-width: 1.5px; transition: border-color .25s, background .25s, transform .2s; }
.tier:active { transform: scale(.985); }
.tier .em { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(140deg, rgba(255, 111, 97, .2), rgba(255, 181, 71, .16)); border: 1px solid var(--line); }
.tier .tt { min-width: 0; flex: 1; }
.tier .tt b { display: block; font: 800 15px/1.2 var(--display); letter-spacing: -.01em; }
.tier .tt span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--mute); line-height: 1.32; }
.tier .pr { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.tier .pr b { display: block; font: 900 17px var(--display); white-space: nowrap; }
.tier .pr s { display: block; margin-top: 1px; font-size: 12px; color: var(--dim); white-space: nowrap; }
.tier.rec { margin-top: 6px; border-color: rgba(255, 181, 71, .55); }
.tier .rib { position: absolute; top: -11px; right: 14px; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, #ffc978, #ff8f5a); color: var(--on-grad); font: 800 11px/1.2 var(--display); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 6px 16px rgba(255, 143, 90, .35); }
.tier.on { background: linear-gradient(140deg, #fff0e6, #fff8ec); border-color: #ffb547; box-shadow: 0 0 0 3px rgba(255, 181, 71, .35), 0 12px 30px rgba(255, 143, 90, .25); }
.tier.on .em { background: var(--grad); border-color: transparent; }
/* Video uchun rasm: chaqiruvchi, katta bosiladigan karta */
.photo { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 20px; cursor: pointer; border: 1.5px dashed rgba(214, 120, 40, .5); background: linear-gradient(140deg, #fff1e0, #ffe9e3); transition: transform .2s var(--ease); }
.photo:active { transform: scale(.985); }
.photo img { flex: none; width: 58px; height: 58px; border-radius: 16px; object-fit: cover; box-shadow: 0 6px 16px rgba(176, 96, 60, .25); }
.photo .ph { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 27px; background: var(--grad); box-shadow: 0 8px 20px var(--glow); }
.photo .tx { min-width: 0; flex: 1; } .photo .tx b { display: block; font: 800 14.5px/1.25 var(--display); } .photo .tx span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--mute); }
.photo .pick { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--cream); color: var(--plum2); font: 800 12px var(--display); white-space: nowrap; }
.clip { display: block; width: 100%; max-height: 70vh; border-radius: 22px; background: #000; }
.letter { padding: 18px; white-space: pre-wrap; text-align: left; font-size: 15.5px; line-height: 1.6; }
.badge.dtag { margin: 6px 0 2px; font: 800 12px var(--display); padding: 6px 12px; white-space: nowrap; background: linear-gradient(135deg, #ffc978, #ff8f5a); color: var(--on-grad); box-shadow: 0 6px 16px rgba(255, 143, 90, .3); }
.price .big s { opacity: .6; font-weight: 600; font-size: .5em; margin-left: 6px; white-space: nowrap; }
.disc-note { text-align: left; }
.amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.amount { position: relative; overflow: hidden; padding: 16px 10px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); font: 800 16px var(--display); letter-spacing: -.02em; transition: all .3s var(--ease); font-variant-numeric: tabular-nums; }
.amount small { display: block; font: 500 11.5px var(--text); color: var(--mute); letter-spacing: 0; margin-top: 3px; }
.amount.pack { border-color: rgba(255, 190, 90, .5); }
.amount .sv { display: inline-block; margin-left: 3px; padding: 1px 6px; border-radius: 999px; background: linear-gradient(135deg, #ffc35a, #ff8a5c); color: #24102e; font: 700 10.5px var(--text); vertical-align: 1px; }
.amount small.gets { margin-top: 2px; color: var(--dim); white-space: nowrap; }
.packline { display: table; margin: 10px auto 4px; padding: 6px 14px; border-radius: 14px; background: rgba(255, 195, 90, .12); border: 1px solid rgba(255, 195, 90, .38); text-align: center; font-size: 13.5px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.packline b { color: var(--accent); font-weight: 800; white-space: nowrap; }
.packline i { font-style: normal; margin-right: 6px; }
.price a.biglink { position: relative; z-index: 2; display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.price:has(.biglink) { cursor: pointer; transition: transform .15s var(--ease); -webkit-tap-highlight-color: transparent; }
.price:has(.biglink):active { transform: scale(.985); }
.price .one { margin: 2px 0 8px; font-size: 14.5px; color: var(--mute); }
.price .one s { opacity: .7; margin-left: 4px; }
.price .was { margin: 4px 0 -4px; font-size: 15px; color: var(--mute); opacity: .8; }
.price .feat-line { margin: 2px 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.promo { display: table; margin: 8px auto; padding: 7px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 195, 90, .2), rgba(255, 138, 92, .16)); border: 1px solid rgba(255, 195, 90, .45); text-align: center; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.promo i, .pack-hint i { font-style: normal; margin-right: 6px; }
.promo b { color: var(--accent); font-weight: 800; white-space: nowrap; }
.price:has(.tobal) { cursor: pointer; transition: transform .15s var(--ease); -webkit-tap-highlight-color: transparent; }
.price:has(.tobal):active { transform: scale(.985); }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; }
.cmp > div { padding: 10px 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.cmp span, .cmp i { display: block; font-style: normal; font-size: 11.5px; line-height: 1.3; color: var(--mute); }
.cmp b { display: block; margin: 2px 0; font: 800 20px var(--display); }
.cmp > div:first-child b { opacity: .6; }
.cmp .us { border-color: rgba(255, 195, 90, .55); background: rgba(255, 195, 90, .1); }
.cmp .us i { color: var(--ink); }
.amount .rc { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 2px 9px; border-radius: 0 0 9px 9px; background: linear-gradient(135deg, #ffc35a, #ff8a5c); color: #2a1206; font: 800 10px var(--text); font-style: normal; white-space: nowrap; }
.amounts:has(.rc) .amount { padding-top: 24px; }
.amount small.gets { white-space: normal; line-height: 1.3; }
.pack-hint { margin-top: 10px; line-height: 1.5; }
.amount.on { background: linear-gradient(140deg, rgba(232, 87, 126, .4), rgba(255, 111, 97, .36)); border-color: rgba(255, 111, 97, .8); box-shadow: 0 12px 30px rgba(255, 111, 97, .24); transform: translateY(-2px); }
.hist { display: flex; justify-content: space-between; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.hist:last-child { border: 0; }
.hist span { display: block; color: var(--dim); font-size: 12px; }
.hist b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plus { color: var(--ok); } .minus { color: var(--bad); }

/* ───── Profil ───── */
.me { display: flex; align-items: center; gap: 14px; padding: 18px; }
.me .ava { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 800 22px var(--display); color: var(--on-grad); background: var(--grad); background-size: cover; background-position: center; box-shadow: 0 8px 22px rgba(255, 111, 97, .3); }
.me b { display: block; font: 600 17px/1.2 var(--display); letter-spacing: -.02em; }
.me span { color: var(--mute); font-size: 14px; }
.row-l { font-size: 13px; font-weight: 600; color: var(--label); margin: 22px 4px 9px; }

/* ───── Yordam (yozishma) ───── */
.chat { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 14px; }
.bub { align-self: flex-start; max-width: 84%; padding: 11px 14px; border-radius: 18px 18px 18px 6px; background: var(--bubble); border: 1px solid var(--line); font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.bub.mine { align-self: flex-end; background: var(--bubble-me); border-color: transparent; border-radius: 18px 18px 6px 18px; }
.bub small { display: block; color: var(--dim); font-size: 11px; margin-top: 4px; }
.bub .who { display: block; font-weight: 600; font-size: 12px; color: var(--tag); margin-bottom: 2px; }
.composer { position: sticky; bottom: calc(var(--tab) + var(--safe-b) + 20px); z-index: 10; padding: 12px; }
.composer::before { content: ''; position: absolute; inset: -22px -16px -18px; z-index: -1; background: linear-gradient(180deg, transparent, var(--fade) 40%); pointer-events: none; }
.composer .opts { margin-bottom: 10px; }
.composer .chip { padding: 7px 12px; font-size: 13px; }
.composer .line { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; min-height: 48px; max-height: 140px; padding: 13px 14px; border-radius: 16px; resize: none; }
.composer .send { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); box-shadow: 0 8px 22px rgba(255, 111, 97, .35); }
.composer .send[disabled] { opacity: .5; }
.composer .send svg { width: 22px; height: 22px; }

/* ───── Bottom sheet, toast ───── */
#sheet { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; pointer-events: none; }
#sheet .dim { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity .35s; }
#sheet .body { position: relative; width: 100%; max-width: 520px; margin: 0 auto; padding: 12px 20px calc(24px + var(--safe-b)); border-radius: 30px 30px 0 0; background: var(--sheet); border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -30px 80px rgba(0, 0, 0, .35); transform: translateY(105%); transition: transform .5s var(--ease); max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
#sheet .grab { width: 44px; height: 5px; border-radius: 9px; background: var(--line); margin: 0 auto 18px; }
body.sheet-open { overflow: hidden; }
#sheet.open { pointer-events: auto; }
#sheet .dim { touch-action: none; }
#sheet.open .dim { opacity: 1; }
#sheet.open .body { transform: none; }
#sheet h3 { font: 900 22px/1.2 var(--display); letter-spacing: -.03em; margin-bottom: 8px; }
#sheet p { color: var(--mute); font-size: 15px; margin-bottom: 18px; }
#sheet p b { color: var(--ink); }
#rm-go svg { flex: none; }
#sheet .friend { text-align: center; }
#sheet .friend .em { display: block; font-size: 44px; line-height: 1; margin-bottom: 10px; animation: float 3.2s ease-in-out infinite; }
#sheet .friend p { margin-bottom: 14px; }
.fsteps { list-style: none; display: grid; gap: 8px; margin: 0 0 14px; padding: 0; text-align: left; }
.fsteps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); font-size: 14px; }
.fsteps b { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font: 800 13px var(--display); color: var(--on-grad); background: var(--grad); }
#sheet .oops { text-align: center; }
#sheet .oops .em { display: block; font-size: 46px; line-height: 1; margin-bottom: 12px; animation: float 3.2s ease-in-out infinite; }
#sheet .oops .note { text-align: left; }
#toast { position: fixed; z-index: 60; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -160%); max-width: min(92vw, 440px); padding: 13px 18px; border-radius: 18px; background: var(--toast); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); font-size: 14.5px; font-weight: 500; text-align: center; transition: transform .5s var(--ease); pointer-events: none; }
#toast.show { transform: translate(-50%, 0); }
#toast.err { border-color: rgba(248, 113, 113, .7); }
#confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; width: 100%; height: 100%; }
#confetti:not(.on) { display: none; }
.skeleton { border-radius: var(--r); background: var(--skel); background-size: 220% 100%; animation: shine 1.4s linear infinite; }
.boot { min-height: 70vh; display: grid; place-items: center; }
.boot img { width: 84px; height: 84px; border-radius: 26px; animation: bootPulse 1.6s ease-in-out infinite; }
@keyframes bootPulse { 50% { transform: scale(1.1) rotate(4deg); } }

/* ───── Silliq scroll ───── */
/* Gorizontal lentalar: faqat yon tomonga aylanadi; vertikal surish sahifaga o'tadi (ustida barmoq 'qotib' qolmasin) */
.samples, .cats { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; }
/* Telefonda doimiy aylanib turadigan fon o'chiriladi (har kadrda qayta chiziladi va surishni qotiradi). Oldin
   surish paytida hamma animatsiya to'xtatilardi — buning o'zi har surish boshida butun sahifa uslubini qayta
   hisoblatib, silkinish berardi. */
@media (hover: none), (pointer: coarse) {
  .newsong { animation: rise .6s var(--ease) both; }
  .btn.pulse { animation: none; }
  .tilt { will-change: auto; }
}
/* Tor ekranlar (320–360 px) */
@media (max-width: 360px) {
  #app { padding-left: 12px; padding-right: 12px; }
  .top { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .price .big { font-size: 32px; }
  .btn { font-size: 15px; padding-left: 14px; padding-right: 14px; }
  .btn .lbl { white-space: normal; text-align: left; line-height: 1.2; }
  .tier { gap: 10px; padding: 12px 10px; }
  .tier .em { width: 38px; height: 38px; font-size: 19px; }
  .tier .pr b { font-size: 15px; }
}
@media (hover: none) {
  .tilt { transition: none; }
  .tilt .glare { display: none; }
}

@media (min-width: 720px) {
  #app { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .aurora { animation: none; }
}

@media (max-width: 360px) { .packline { font-size: 12.5px; padding: 6px 10px; } }

/* ───── Yengil effektlar (faqat transform/opacity; ekran chetidan chiqmaydi; «harakatni kamaytirish»da o'chadi) ───── */
/* Ko'rinishga kirganda: pastdan 12px suzib chiqish (JS: IntersectionObserver, bir marta) */
.rv { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rv.in { opacity: 1; transform: none; }
/* Bosh sahifa muqovasi: sekin «Ken Burns» va muqova ichida suzuvchi oltin uchqunlar */
.hero.art .bg { transform-origin: 50% 30%; animation: kenburns 14s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translate3d(-1.5%, 1%, 0); } }
.hero .spk { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero .spk i { position: absolute; bottom: 46%; font-style: normal; font-size: 15px; color: #ffd27a; text-shadow: 0 0 10px rgba(255, 190, 90, .9); opacity: 0; animation: spark 8s ease-in-out infinite; }
.hero .spk i:nth-child(1) { left: 14%; animation-delay: 0s; } .hero .spk i:nth-child(2) { left: 32%; animation-delay: 2.6s; font-size: 12px; }
.hero .spk i:nth-child(3) { left: 58%; animation-delay: 1.3s; } .hero .spk i:nth-child(4) { left: 76%; animation-delay: 4s; font-size: 12px; }
.hero .spk i:nth-child(5) { left: 88%; animation-delay: 5.6s; }
@keyframes spark { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 20% { opacity: .95; } 70% { opacity: .5; } 100% { transform: translate3d(8px, -150px, 0) scale(1); opacity: 0; } }
/* Tarif: «Tavsiya etamiz» yorlig'ida yaltirash */
.tier .rib { overflow: hidden; }
.tier .rib::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); transform: translateX(-120%); animation: shimmer 4.5s ease-in-out 1.5s infinite; }
.tier { transition: border-color .25s, background .25s, transform .2s, box-shadow .3s; }
/* Pleyer: ijro paytida disk atrofida yumshoq to'lqin halqa */
.stage::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 2px solid rgba(255, 143, 90, .55); opacity: 0; pointer-events: none; }
.player.playing .stage::after { animation: ringPulse 2.4s ease-out infinite; }
@keyframes ringPulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.16); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .hero.art .bg, .hero .spk i, .tier .rib::after, .player.playing .stage::after { animation: none !important; }
  .hero .spk { display: none; }
}

/* ───── Ko'rik tugagach: «To'liq qo'shiqni olish · narx» paneli (qo'shiq qatorida) ───── */
.item.buyglow { flex-wrap: wrap; opacity: 1; transform: none; border-color: #ffc83c; animation: buyglow 1.6s ease-in-out infinite; }
@keyframes buyglow { 0%, 100% { box-shadow: inset 0 0 0 1px #ffc83c, 0 0 0 1px rgba(255, 200, 60, .7), 0 0 18px rgba(255, 185, 30, .4); } 50% { box-shadow: inset 0 0 0 1px #ffc83c, 0 0 0 2px rgba(255, 210, 70, 1), 0 0 34px rgba(255, 185, 30, .8); } }
.buybar { flex: 1 1 100%; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed rgba(255, 200, 60, .5); text-align: center; }
.buybar > span { font: 700 13.5px var(--display); color: var(--ink); }
.buybar .btn { width: 100%; }
.item.buyglow .go { display: none; }

/* Chegirmali narx: katta — to'lanadigan narx, tagida — haqiqiy narx ustidan chizilgan */
.price .was { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -2px 0 6px; font-size: 17px; color: var(--mute); }
.price .was s { text-decoration-thickness: 2px; }
.price .was b { font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(52, 199, 89, .18); color: #34c759; }

/* ───── Ijro paytida: oltin hoshiya va disk atrofida bepul tinglash progressi (halqa) ─────
   Halqa diskdan 6px tashqarida, qator ichki bo'sh joyi (14px) ichida qoladi: sahifani kengaytirmaydi.
   `--prog` (0..1) JS dan yoziladi: halqa soat mili bo'ylab to'ladi, uchida yaltirovchi uchqunlar. */
.item.playing, .item.buyglow { border-color: #ffc83c; box-shadow: inset 0 0 0 1px #ffc83c, 0 0 0 1px rgba(255, 200, 60, .95), 0 0 22px rgba(255, 185, 30, .55); }
.item.playing::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 215, 80, .95), 0 0 36px rgba(255, 185, 30, .75); animation: goldglow 2s ease-in-out infinite; }
@keyframes goldglow { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.item .dring { display: none; position: absolute; left: 8px; top: 8px; width: 64px; height: 64px; pointer-events: none; --prog: 0; }
.item.playing .dring, .item.burst .dring, .item.buyglow .dring { display: block; animation: ringpulse 1.8s ease-in-out infinite; }
.dring .arc { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #e89a00 0deg, #ffc22e calc(var(--prog) * 360deg - 6deg), #fff3b0 calc(var(--prog) * 360deg), rgba(255, 200, 60, .16) calc(var(--prog) * 360deg), rgba(255, 200, 60, .16) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
@keyframes ringpulse { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 190, 40, .6)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 200, 60, .95)); } }
.dring .tip { position: absolute; inset: 0; transform: rotate(calc(var(--prog) * 360deg)); }
.dring .tip b { position: absolute; top: 2px; left: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: #fff8d0; border-radius: 1px; transform: rotate(45deg) scale(0); opacity: 0; box-shadow: 0 0 6px 1px rgba(255, 215, 80, .95); animation: twinkle 1.1s ease-in-out infinite; }
.dring .tip b:nth-child(2) { margin-left: -9px; width: 3px; height: 3px; animation-delay: .35s; }
.dring .tip b:nth-child(3) { margin-left: -16px; margin-top: 1px; width: 2px; height: 2px; animation-delay: .7s; }
@keyframes twinkle { 0%, 100% { transform: rotate(45deg) scale(0); opacity: 0; } 45% { transform: rotate(135deg) scale(1.5); opacity: 1; } 70% { transform: rotate(180deg) scale(.7); opacity: .6; } }
.item.burst .dring { animation: ringburst .75s ease-out; }
.item.burst .dring .tip b { animation-duration: .35s; }
@keyframes ringburst { 0% { transform: scale(1); filter: drop-shadow(0 0 4px #ffc83c); } 35% { transform: scale(1.12); filter: drop-shadow(0 0 14px #fff3b0) brightness(1.5); } 100% { transform: scale(1); filter: drop-shadow(0 0 6px #ffc83c); } }
.buyfriend { background: none; border: 0; padding: 4px; font: 600 13px var(--text); color: var(--mute); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .item.playing::after { animation: none; opacity: .8; } .item .dring, .item.burst .dring { animation: none !important; } .dring .tip { display: none; } }

/* Global «hozir ijro etilmoqda» tabletkasi — tab-bar ustida; ijro etilayotgan qator/sahifa ko'rinmasa chiqadi */
.nowpill { position: fixed; z-index: 29; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 66px); width: min(260px, calc(100% - 24px)); box-sizing: border-box; display: flex; align-items: center; gap: 2px; padding: 3px 4px 3px 5px; border-radius: 999px; background: var(--tabbar); border: 1px solid var(--line); box-shadow: var(--tabbar-shadow); animation: nprise .3s var(--ease) backwards; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.nowpill[hidden] { display: none; }
.nowpill button { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.np-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.np-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12.5px var(--display); }
.np-disc { flex: none; width: 34px; height: 34px; border-radius: 50%; padding: 3px; box-sizing: border-box; background: conic-gradient(#ffc22e calc(var(--prog, 0) * 360deg), rgba(255, 200, 60, .22) 0); }
.np-disc i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #2b0e26 0 17%, transparent 18%), conic-gradient(from calc(var(--hue, 290) * 1deg), #ff6f61, #ffb547, #ffe0a8, #e8577e, #c94f7c, #ff6f61); animation: rot 4s linear infinite; }
.nowpill.paused .np-disc i { animation-play-state: paused; }
.np-pp { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--grad) !important; display: grid; place-items: center; }
.np-pp svg { width: 16px; height: 16px; }
@keyframes nprise { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
.nowpill.drag { cursor: grabbing; transition: none; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); opacity: .96; }
@media (prefers-reduced-motion: reduce) { .nowpill { animation: none; } .np-disc i { animation: none; } }
.lockcard { margin-top: 14px; padding: 18px 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.lockcard .lockmsg { margin: 0; font: 700 14px var(--display); color: var(--ink); }
.lockcard .btn { width: 100%; }
.lockcard .btn.buyflash { animation: buyglow 1.6s ease-in-out 3; box-shadow: 0 0 0 2px #ffc83c, 0 0 22px rgba(255, 185, 30, .6); }


/* To'lov joylari: Click + maisa belgilari (bir xil balandlikdagi oq chiplar) va tagida aniq izoh */
.paybox { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pb-logos { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pb-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); box-sizing: border-box; }
.pb-chip img { display: block; height: 16px; width: auto; }
.pb-ox img { height: 18px; }
.pb-ox b { font: 800 13px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .01em; color: #111827; }
.pb-note { display: block; max-width: 340px; font-size: 12.5px; line-height: 1.45; color: var(--mute); }
.pb-how { display: block; max-width: 340px; font-size: 12px; line-height: 1.4; color: var(--mute); opacity: .85; }

/* powered by maisa (brandbook docs/11) */
.pwm{display:block;width:max-content;margin:14px auto 0;padding:6px;opacity:.85;transition:opacity .2s}
.pwm:hover{opacity:1}
.pwm img{height:28px;width:auto;display:block}

/* asosiy logo yonida kichik maisa belgisi (ishlab chiqaruvchi) */
.brand-by { display: inline-flex; align-items: center; padding-left: 9px; margin-left: 1px; border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent); align-self: center; height: 18px; }
.brand .brand-by img { width: 16px; height: 16px; border-radius: 5px; box-shadow: none; }