/* Farooq Music 2.0 — the LISTENER WEBSITE (28 Sep 2026). One file, one scale (doc 2061 §2): one button size, one input size,
   one heading scale, one card. Dark ground, the lamp colour for what is playing (the same tokens as the test player).
   Fonts follow the language (data-font on <body>); a song's words always carry their own lang, so Urdu lines are Nastaliq. */
/* 064 (owner, 1 Oct 2026): Urdu uses the FarooqStars face — Noto Naskh Arabic, 12% larger (size-adjust 112%), line-height 2. The family keeps the name "Nastaliq" so every older rule follows; the Nastaliq file stays only for the admin site. */
@font-face{font-family:"Nastaliq";font-weight:400;font-display:swap;size-adjust:112%;src:url("../admin/fonts/noto-naskh-arabic-regular.woff2") format("woff2")}
@font-face{font-family:"Nastaliq";font-weight:700;font-display:swap;size-adjust:112%;src:url("../admin/fonts/noto-naskh-arabic-bold.woff2") format("woff2")}
@font-face{font-family:"Naskh";font-weight:400;font-display:swap;src:url("../admin/fonts/noto-naskh-arabic-regular.woff2") format("woff2")}
@font-face{font-family:"Naskh";font-weight:700;font-display:swap;src:url("../admin/fonts/noto-naskh-arabic-bold.woff2") format("woff2")}
:root{--ground:#0f0b17;--panel:#171124;--panel2:#1e1730;--line:#2a2140;--ink:#eae6f2;--dim:#bcb4cf;--faint:#8f87a8;--brand:#c9a0ff;
  --lamp:#f2b35b;--lamp-soft:rgba(242,179,91,.42);--btn:#7b2ff7;--btn-hi:#9150ff;--bad:#ffb4a1;--good:#9be7b0;
  --latin:"Segoe UI",Roboto,Tahoma,Arial,sans-serif;--r:12px;--bar:88px;--h:44px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
html,body{margin:0;min-height:100vh;background:var(--ground);color:var(--ink);font-family:var(--latin);font-size:15px;line-height:1.6}
body[data-font=nastaliq]{font-family:"Nastaliq",var(--latin);font-size:16px;line-height:2}
body[data-font=naskh]{font-family:"Naskh",var(--latin);font-size:16px;line-height:1.9}
:lang(ur){font-family:"Nastaliq",var(--latin)}
:lang(ar){font-family:"Naskh",var(--latin)}
:lang(en),:lang(hi){font-family:var(--latin)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;top:-60px;left:8px;background:var(--btn);color:#fff;padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{top:8px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* the playing song's picture, blurred, far behind everything */
.glow{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow img{width:100%;height:100%;object-fit:cover;filter:blur(70px) saturate(1.2);opacity:0;transform:scale(1.25);transition:opacity 1.2s ease}
.glow img.on{opacity:.22}
.glow::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,11,23,.4),var(--ground) 70%)}

/* ── header ── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 20px;background:rgba(15,11,23,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{color:var(--brand);font-weight:700;font-size:19px;white-space:nowrap}
.nav{display:flex;gap:4px}
.nav a{padding:6px 12px;border-radius:999px;color:var(--dim);white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--panel)}
.nav a.on{color:var(--ink);background:var(--panel2)}
.topsearch{flex:1;max-width:520px;margin:0 auto}
.topsearch input{width:100%;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#0c0913;color:var(--ink);font:inherit;font-size:15px}
.topsearch input:focus{outline:2px solid var(--btn);border-color:transparent}
.topright{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.langlink{color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:14px;line-height:1.7}
.langlink:hover{color:var(--ink);border-color:var(--dim)}
.me{padding:7px 14px;border-radius:999px;background:var(--btn);color:#fff;white-space:nowrap;font-weight:600;font-size:14px}
.me:hover{background:var(--btn-hi);color:#fff}
.me.in{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.bell{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--dim);border:1px solid var(--line)}
.bell::before{content:"🔔";font-size:15px;filter:grayscale(1) brightness(1.6)}
.bell-n{position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--lamp);color:#1a1200;font-size:11px;font-weight:700;display:grid;place-items:center;font-family:var(--latin)}
@media (max-width:860px){
  .top{flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  .topsearch{order:5;flex-basis:100%;max-width:none}
  .nav{order:6;flex-basis:100%;justify-content:space-between}
  .nav a{padding:5px 8px;font-size:14px}
}

/* ── page ── */
.view{max-width:1180px;margin:0 auto;padding:18px 20px calc(var(--bar) + 40px)}
@media (max-width:860px){.view{padding:12px 12px calc(var(--bar) + 40px)}}
.loading,.empty,.err{color:var(--dim);text-align:center;padding:40px 10px}
.err{color:var(--bad)}
.err button,.btn{height:var(--h);padding:0 20px;border-radius:10px;border:0;background:var(--btn);color:#fff;font-weight:600;font-size:15px}
.btn:hover{background:var(--btn-hi)}
.btn.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--dim)}
.btn.on{background:var(--lamp);color:#1a1200}
.btn.on:hover{background:#f7c377}
.btn[disabled]{opacity:.5;cursor:wait}
.quiet{background:none;border:0;color:var(--dim);padding:6px 10px;border-radius:8px}
.quiet:hover{color:var(--ink);background:var(--panel)}
h1{font-size:28px;margin:6px 0 14px;line-height:1.35}
h2{font-size:20px;margin:0 0 10px;line-height:1.4}
body[data-font=nastaliq] h1{font-size:30px;line-height:1.9}
body[data-font=nastaliq] h2{font-size:22px;line-height:1.9}
.sec{margin:26px 0 8px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.sec-head h2{margin:0}
.sec-head a,.sec-head .n{margin-inline-start:auto;color:var(--dim);font-size:14px;white-space:nowrap}
.sec-head a:hover{color:var(--brand)}
.sub{color:var(--dim);margin:-8px 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.chip{border:1px solid var(--line);border-radius:999px;padding:4px 14px;color:var(--dim);background:transparent;font-size:14px}
.chip:hover{color:var(--ink);border-color:var(--dim)}
.chip.on{background:var(--panel2);color:var(--ink);border-color:var(--brand)}
.chip .n{color:var(--faint);margin-inline-start:6px;font-size:12px}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:26px 30px;border-radius:20px;background:linear-gradient(135deg,#1b1330,#241a3d 60%,#2a1f3b);border:1px solid var(--line);margin:8px 0 10px}
.hero h1{font-size:34px;margin:0 0 8px}
body[data-font=nastaliq] .hero h1{font-size:36px;line-height:1.8}
.hero p{color:var(--dim);margin:0 0 18px;max-width:52ch}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap}
.hero .acts .btn,.today .acts .btn{display:inline-flex;align-items:center;justify-content:center;min-width:160px;box-sizing:border-box}
.hero-art{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hero-art img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--panel);display:block}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding:20px}.hero-art{display:none}.hero h1{font-size:26px}}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
@media (max-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}}
.card{position:relative;display:block;border-radius:var(--r);background:var(--panel);border:1px solid transparent;padding:10px;transition:background .2s,border-color .2s}
.card:hover{background:var(--panel2);border-color:var(--line);color:inherit}
.card .art{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:#241a3d;margin-bottom:8px}
.card .art img{width:100%;height:100%;object-fit:cover;display:block}
.card .art .noart{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:34px}
.card .pl{position:absolute;inset-inline-end:8px;bottom:8px;width:40px;height:40px;border-radius:50%;border:0;background:var(--lamp);color:#1a1200;display:grid;place-items:center;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.card:hover .pl,.card:focus-within .pl,.card.playing .pl{opacity:1;transform:none}
.card .t{display:block;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .a{display:block;color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .m{display:flex;gap:8px;color:var(--faint);font-size:12px;margin-top:4px}
.card.playing .t{color:var(--lamp)}
.badge{display:inline-block;font-size:11px;line-height:1.5;padding:0 7px;border-radius:999px;border:1px solid var(--line);color:var(--dim);vertical-align:middle;font-family:var(--latin)}
.badge.ai{border-color:rgba(201,160,255,.5);color:var(--brand)}
.badge.ex{border-color:rgba(255,180,161,.5);color:var(--bad)}
.badge.ok{border-color:rgba(155,231,176,.5);color:var(--good)}
.artist-card{text-align:center}
.artist-card .art{border-radius:50%;margin:6px auto 10px;width:74%}

/* rows (lists) */
.rows{display:flex;flex-direction:column;gap:4px}
.row{display:grid;grid-template-columns:34px 52px 1fr auto auto;align-items:center;gap:12px;padding:6px 10px;border-radius:10px}
.row:hover{background:var(--panel)}
.row.playing{background:var(--panel2)}
.row .no{color:#efe6ff;background:#3d2b66;border:0;border-radius:8px;height:34px;text-align:center;font-family:var(--latin);font-variant-numeric:tabular-nums;font-weight:700;cursor:pointer}.row .no:hover{background:var(--btn)}
.row.playing .no{color:var(--lamp)}
.row .thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--panel2)}
.row .rt{min-width:0}
.row .rt .t{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.playing .rt .t{color:var(--lamp)}
.row .rt .a{display:block;color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .d{color:var(--dim);font-family:var(--latin);font-variant-numeric:tabular-nums;font-size:13px}
.row .acts{display:flex;gap:2px}
.ib{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--dim);display:grid;place-items:center;font-size:16px;line-height:1}
.ib:hover{background:var(--panel2);color:var(--ink)}
.ib[aria-pressed=true],.ib.on{color:var(--lamp)}
.ib.big{width:50px;height:50px;background:var(--ink);color:#0f0b17}
.ib.big:hover{background:#fff}
.ico-play{display:block;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent currentColor;margin-inline-start:3px}
.playing>.ico-play,.ico-play.pause{width:14px;height:16px;border:0;border-inline:4px solid currentColor;margin:0}
@media (max-width:600px){.row{grid-template-columns:52px 1fr auto;gap:10px}.row .no,.row .d{display:none}}

/* ── track page ── */
.track{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:34px;align-items:start}
@media (max-width:860px){.track{grid-template-columns:minmax(0,1fr);gap:18px}.track>div{min-width:0}}
.track .big-art{width:100%;aspect-ratio:1;border-radius:16px;object-fit:cover;background:var(--panel);box-shadow:0 30px 70px -30px var(--lamp-soft),0 12px 30px rgba(0,0,0,.45)}
.track .deck{position:sticky;top:76px}
@media (max-width:860px){.track .deck{position:static;max-width:340px;margin:0 auto}}
.track h1{margin:0 0 4px;font-size:30px}
.track .by{color:var(--dim);font-size:16px;margin-bottom:10px}
.track .by a{color:var(--brand)}
.track .meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--dim);font-size:13px;margin:8px 0 14px;align-items:center}
.track .acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.wavebox{position:relative;margin:6px 0 4px}
.wave{display:block;width:100%;height:84px;cursor:pointer;border-radius:6px}
.times{display:flex;justify-content:space-between;color:var(--dim);font-size:13px;font-family:var(--latin);font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 12px;overflow-x:auto;align-content:start}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 14px;color:var(--dim);white-space:nowrap;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--lamp)}
.pane{min-height:120px}
.hint{color:var(--faint);font-size:13px;margin:0 0 8px}
.lines{position:relative;list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);padding:12px 0}
.lines li{margin:0}
.line{display:block;width:100%;text-align:start;background:none;border:0;padding:6px 12px;border-radius:10px;font-size:20px;line-height:1.75;color:var(--dim);transition:color .25s,transform .25s;transform-origin:var(--origin,left) center}
[dir=rtl] .line,.line:lang(ur),.line:lang(ar){--origin:right}
.line:lang(ur){font-size:23px;line-height:2.1}
.line:hover{color:var(--ink);background:var(--panel)}
.line.past{color:var(--faint)}
.line.now{color:var(--lamp);font-weight:700;text-shadow:0 0 22px var(--lamp-soft);transform:scale(1.03)}
.line.rest{letter-spacing:.3em;color:var(--faint)}
.text{white-space:pre-wrap;font-size:18px;line-height:1.9;color:var(--ink)}
.text:lang(ur){font-size:21px;line-height:2.2}
.story{white-space:pre-wrap;font-size:16px;line-height:1.9;color:var(--ink);max-width:70ch}
.story:lang(ur){font-size:18px;line-height:2.2}
dl.credits{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
dl.credits dt{color:var(--dim)}
dl.credits dd{margin:0}
.ai-note{margin:14px 0 0;padding:10px 14px;border-radius:10px;background:rgba(201,160,255,.08);border:1px solid rgba(201,160,255,.3);color:var(--ink);font-size:14px}
.ai-note:lang(ur){font-size:15px}
.trsel{margin:0 0 10px}
.trsel select{height:36px;border-radius:8px;border:1px solid var(--line);background:#0c0913;color:var(--ink);padding:0 10px;font:inherit}

/* ── artist / album ── */
.banner{height:200px;border-radius:18px;background:linear-gradient(135deg,#241a3d,#1b1330);background-size:cover;background-position:center;margin:0 0 -60px}
@media (max-width:860px){.banner{height:140px;margin-bottom:-46px}}
.prof{display:flex;align-items:flex-end;gap:20px;padding:0 24px;margin-bottom:14px}
.prof .avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;border:4px solid var(--ground);background:var(--panel2)}
@media (max-width:860px){.prof{padding:0 10px;gap:12px}.prof .avatar{width:92px;height:92px}}
.prof .names h1{margin:0}
.prof .names .loc{color:var(--dim)}
.prof .pacts{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.stats{display:flex;gap:22px;color:var(--dim);font-size:14px;padding:0 24px;margin-bottom:8px;flex-wrap:wrap}
.stats b{color:var(--ink);font-family:var(--latin);font-variant-numeric:tabular-nums;margin-inline-end:4px}
.bio{max-width:72ch;white-space:pre-wrap;color:var(--ink)}
.links a{display:inline-block;margin:0 10px 8px 0;color:var(--brand)}
.album-head{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:end;margin-bottom:18px}
.album-head img{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;background:var(--panel)}
@media (max-width:600px){.album-head{grid-template-columns:1fr}.album-head img{max-width:220px}}

/* ── search ── */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}
.filters label{color:var(--dim);font-size:14px}
.filters select{height:36px;border-radius:8px;border:1px solid var(--line);background:#0c0913;color:var(--ink);padding:0 10px;font:inherit}
.lineshit{display:grid;gap:8px}
.linehit{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--panel)}
.linehit:hover{background:var(--panel2)}
.linehit img{width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--panel2)}
.linehit q{display:block;font-size:17px;quotes:"“" "”"}
.linehit q:lang(ur){font-size:19px;line-height:2}
.linehit small{color:var(--dim)}
.linehit .at{color:var(--lamp);font-family:var(--latin);font-variant-numeric:tabular-nums;font-size:13px}
mark{background:transparent;color:var(--lamp);font-weight:700}

/* ── library / account ── */
.subnav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:8px}
.subnav a{padding:6px 12px;border-radius:999px;color:var(--dim)}
.subnav a.on{background:var(--panel2);color:var(--ink)}
.form{max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 24px;margin:0 auto}
.form h1{font-size:24px;margin:0 0 6px}
.form p{color:var(--dim);margin:0 0 10px}
.form label{display:block;font-size:14px;margin:12px 0 6px}
.form input{width:100%;height:var(--h);font:16px var(--latin);padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#0c0913;color:var(--ink);direction:ltr;text-align:left}
.form input:focus{outline:2px solid var(--btn);border-color:transparent}
.form .btn{width:100%;margin-top:18px}
.form .msg{min-height:1.6em;margin:12px 0 0;color:var(--bad)}
.form .msg.ok{color:var(--good)}
.form .alt{margin-top:14px;text-align:center;color:var(--dim)}
.form .alt a{color:var(--brand)}
.datebox{margin:16px 0 6px;color:var(--dim);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pcard{padding:14px;border-radius:12px;background:var(--panel);border:1px solid transparent;display:block}
.pcard:hover{border-color:var(--line);background:var(--panel2)}
.pcard .t{font-weight:600}
.pcard .a{color:var(--dim);font-size:13px}
.inline-form{display:flex;gap:8px;margin:10px 0 16px}
.inline-form input{flex:1;height:var(--h);font:inherit;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#0c0913;color:var(--ink)}
.notice{display:grid;gap:4px;padding:12px 14px;border-radius:10px;background:var(--panel);margin-bottom:8px;border-inline-start:3px solid transparent}
.notice.unread{border-inline-start-color:var(--lamp)}
.notice .t{font-weight:600}
.notice .b{color:var(--dim)}
.notice time{color:var(--faint);font-size:12px;font-family:var(--latin)}

/* ── the bar (persistent player) ── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--bar);display:grid;grid-template-columns:56px minmax(120px,1fr) minmax(320px,2.2fr) minmax(200px,1fr);align-items:center;gap:14px;padding:0 16px;background:rgba(19,14,29,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.bar-art{display:block}
.bar-art img{width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--panel2);display:block}
.bar-names{display:grid;min-width:0}
.bar-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-artist{color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-mid{display:grid;gap:2px}
.bar-ctl{display:flex;justify-content:center;align-items:center;gap:6px}
.bar-seek{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.bar-wave{display:block;width:100%;height:28px;cursor:pointer}
.clock{font-family:var(--latin);font-variant-numeric:tabular-nums;font-size:12px;color:var(--dim);min-width:38px;text-align:center}
.bar-right{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.vol{display:flex;align-items:center}
.vol input{width:90px;accent-color:var(--lamp)}
.speed{height:30px;border-radius:8px;border:1px solid var(--line);background:#0c0913;color:var(--dim);font:13px var(--latin);padding:0 6px}
@media (max-width:860px){
  :root{--bar:118px}
  .bar{grid-template-columns:48px 1fr;grid-template-rows:auto auto;gap:4px 10px;padding:8px 12px 6px;position:fixed}
  .bar>.bar-art{grid-column:1;grid-row:1}
  .bar>.bar-names{grid-column:2;grid-row:1;align-self:center;padding-inline-end:190px}
  .bar-mid{grid-column:1/3;grid-row:2}
  .bar .bar-ctl{position:absolute;inset-inline-end:10px;top:6px}
  .bar .bar-ctl .ib{width:32px;height:32px}
  .bar .bar-ctl .ib.big{width:42px;height:42px}
  .bar-right{position:absolute;inset-inline-end:122px;top:8px;gap:0}
  .bar-right .ib{width:32px;height:32px}
  .vol,.speed,#b-shuffle,#b-repeat{display:none}
  .fp-foot .bar-ctl{position:static}
  .bar-art img{width:48px;height:48px}
}

/* drawers */
.drawer{position:fixed;z-index:31;inset-inline-end:0;bottom:var(--bar);top:60px;width:min(420px,100%);background:rgba(19,14,29,.98);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.4)}
@media (max-width:860px){.drawer{top:0;width:100%;border:0}}
.drawer-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;flex:1;font-size:17px}
.qlist{list-style:none;margin:0;padding:8px;overflow:auto;flex:1}
.qlist li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border-radius:8px}
.qlist li:hover{background:var(--panel)}
.qlist li.now .t{color:var(--lamp)}
.qlist img{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--panel2)}
.qlist .t{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.qlist .a{display:block;color:var(--dim);font-size:12px}
.drawer-lines{flex:1;max-height:none;padding:16px 8px}

/* toast, modal */
.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 16px);transform:translateX(-50%);z-index:40;background:var(--ink);color:#0f0b17;padding:10px 18px;border-radius:999px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.modal{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px}
.modal-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.modal-card h2{margin:0 0 12px}
.modal-card .opts{display:grid;gap:6px;max-height:50vh;overflow:auto}
.modal-card .opts button{text-align:start;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2)}
.modal-card .opts button:hover{border-color:var(--brand)}
.modal-card .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* footer */
.foot{max-width:1180px;margin:0 auto;padding:10px 20px calc(var(--bar) + 20px);color:var(--faint);font-size:13px;border-top:1px solid var(--line)}
.foot a{color:var(--dim)}
.foot .beta{color:var(--lamp)}

/* Nastaliq needs room above and below (the letters hang) — never clip a title */
body[data-font=nastaliq] .card .t,body[data-font=nastaliq] .card .a,body[data-font=nastaliq] .row .rt .t,body[data-font=nastaliq] .row .rt .a,body[data-font=nastaliq] .bar-title,body[data-font=nastaliq] .bar-artist,body[data-font=nastaliq] .qlist .t,.card .t:lang(ur),.row .rt .t:lang(ur){line-height:2;padding:1px 0}
body[data-font=nastaliq] .nav a,body[data-font=nastaliq] .subnav a,body[data-font=nastaliq] .tabs button,body[data-font=nastaliq] .chip,body[data-font=nastaliq] .btn,body[data-font=nastaliq] .me{line-height:1.9}

/* ── 28 Sep v2: the lamp line in the bar, the full-screen player, the phone tab bar, the suggestions box, song of the day, stories, the book ── */
.bar-line{display:block;color:var(--lamp);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.2em}
body[data-font=nastaliq] .bar-line,.bar-line:lang(ur){font-family:"Nastaliq",var(--latin);font-size:14px;line-height:1.8}
.bar-expand{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;opacity:0;cursor:pointer;display:none}
@media (max-width:860px){.bar-expand{display:block;z-index:1}.bar .bar-ctl,.bar .bar-right,.bar .bar-names a{position:relative;z-index:2}.bar-names{pointer-events:none}}
.row .rt .fl{display:block;color:var(--lamp);opacity:.9;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
[dir=rtl] .row .rt .fl{text-align:left}
.row .rt .fl:lang(ur){font-family:"Nastaliq",var(--latin);font-size:15px;line-height:1.9}
.today{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center;padding:20px;border-radius:20px;background:linear-gradient(135deg,#1b1330,#2a1f3b);border:1px solid var(--line)}
.today img{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;background:var(--panel);box-shadow:0 30px 70px -30px var(--lamp-soft)}
.today-title{font-size:26px;font-weight:700;display:block}
body[data-font=nastaliq] .today-title{font-size:28px;line-height:1.9}
.today-artist{color:var(--dim);margin:2px 0 8px}
.today-line{color:var(--lamp);font-size:22px;margin:0 0 14px;text-shadow:0 0 22px var(--lamp-soft)}
.today-line:lang(ur){font-family:"Nastaliq",var(--latin);font-size:24px;line-height:2}
@media (max-width:600px){.today{grid-template-columns:1fr}.today img{max-width:220px;margin:0 auto}}
.stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.story-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid transparent;align-items:start}.story-card>div{min-width:0}
.story-card:hover{border-color:var(--line);background:var(--panel2);color:inherit}
.story-card img{width:96px;height:96px;border-radius:10px;object-fit:cover;background:var(--panel2)}
.story-card .t{display:block;font-weight:600;margin-bottom:4px}
.story-card .q{margin:0 0 6px;color:var(--dim);font-size:14px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.story-card .q:lang(ur){font-family:"Nastaliq",var(--latin);font-size:15px;line-height:2}
.story-card .read{display:block;color:var(--brand);font-size:13px;margin-top:2px}
.book{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.book-page{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px;border-radius:12px;background:var(--panel);border:1px solid transparent}
.book-page:hover{border-color:var(--line);background:var(--panel2);color:inherit}
.book-page img{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--panel2)}
.book-page .t{display:block;font-weight:600}
.book-page .q{margin:2px 0 0;color:var(--lamp);font-size:17px}
.book-page .q:lang(ur){font-family:"Nastaliq",var(--latin);font-size:19px;line-height:2}
.book-page.playing .t{color:var(--lamp)}

/* the full-screen player */
.fullplayer{position:fixed;inset:0;z-index:35;background:var(--ground);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:max(10px,env(safe-area-inset-top)) 0 max(10px,env(safe-area-inset-bottom))}
.fp-head{display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.fp-kicker{color:var(--dim);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.fp-body{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:28px;align-items:start;padding:10px 24px;overflow:hidden;min-height:0;max-width:1180px;width:100%;margin:0 auto}
.fp-art{width:100%;aspect-ratio:1;border-radius:16px;object-fit:cover;background:var(--panel);box-shadow:0 30px 70px -30px var(--lamp-soft),0 12px 30px rgba(0,0,0,.45)}
.fp-names{grid-column:1;display:grid;text-align:center;margin-top:10px}
.fp-title{font-size:20px;font-weight:700}
.fp-artist{color:var(--dim)}
.fp-lines{grid-column:2;grid-row:1/3;max-height:calc(100vh - 220px);padding:20vh 8px}
.fp-lines .line{font-size:24px;text-align:center;transform-origin:center}
.fp-lines .line:lang(ur){font-size:27px;line-height:2.1}
.fp-foot{max-width:1180px;width:100%;margin:0 auto;padding:6px 24px 0;display:grid;gap:6px}
.fp-acts{display:flex;justify-content:center;gap:14px}
@media (max-width:860px){
  .fp-body{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;gap:8px;padding:6px 16px}
  .fp-art{width:min(36vw,170px);margin:0 auto;display:block}
  .fp-title{font-size:18px}
  .fp-names{grid-column:1;margin-top:0}
  .fp-body{overflow:hidden;grid-template-rows:auto auto minmax(0,1fr)}
  .fp-lines{grid-column:1;grid-row:3;max-height:none;height:100%;padding:4vh 4px;min-height:0;overflow:auto}
  .fp-lines .line{font-size:20px}
  .fp-lines .line:lang(ur){font-size:23px}
  .fp-foot{padding:0 12px}
}
body.fp-open{overflow:hidden}

/* the phone tab bar — the header nav hides, the player bar sits on top of the tabs */
.tabs-phone{display:none}
@media (max-width:860px){
  :root{--tabs:58px}
  .tabs-phone{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;height:var(--tabs);z-index:32;background:rgba(15,11,23,.98);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabs-phone a{display:grid;justify-items:center;align-content:center;gap:2px;color:var(--dim);font-size:11px;line-height:1.3}
  .tabs-phone a.on{color:var(--lamp)}
  .tabs-phone .tp-ico{font-size:18px;line-height:1}
  body[data-font=nastaliq] .tabs-phone a{font-size:12px;line-height:1.6}
  .top .nav{display:none}
  .bar{bottom:var(--tabs)}
  .drawer{bottom:calc(var(--bar) + var(--tabs))}
  .view{padding-bottom:calc(var(--bar) + var(--tabs) + 30px)}
  .foot{padding-bottom:calc(var(--bar) + var(--tabs) + 16px)}
  .toast{bottom:calc(var(--bar) + var(--tabs) + 12px)}
}

/* the suggestions box */
.fb-btn{position:fixed;z-index:33;inset-inline-end:16px;bottom:calc(var(--bar) + 16px);height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(23,17,36,.96);color:var(--ink);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.fb-btn:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:860px){.fb-btn{bottom:calc(var(--bar) + var(--tabs) + 12px);padding:0 12px}.fb-btn span{display:none}}
body.fp-open .fb-btn{z-index:36}
.fb-form textarea{width:100%;font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0c0913;color:var(--ink);resize:vertical;margin:8px 0}
.fb-form input{width:100%;font:15px var(--latin);height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#0c0913;color:var(--ink);direction:ltr}
.fb-form .msg{min-height:1.4em;margin:8px 0 0;color:var(--bad)}
.fb-form .msg.ok{color:var(--good)}
.fb-form .hint{margin:0 0 6px}

/* ── website v3 (29 Sep 2026): header panels, the ⋯ menu, share/embed, edit dialog, artist page columns, spotlight, studio, insights ── */
.bell,.msgs,.more{background:transparent;cursor:pointer}
.msgs,.more{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--dim);border:1px solid var(--line);font-size:16px}
.msgs::before{content:"✉";font-size:16px}
.bell:hover,.msgs:hover,.more:hover,.bell[aria-expanded=true],.msgs[aria-expanded=true],.more[aria-expanded=true]{color:var(--ink);border-color:var(--dim);background:var(--panel)}
.studio-link,.upload-link{padding:6px 12px;border-radius:999px;color:var(--dim);white-space:nowrap}
.studio-link:hover,.upload-link:hover,.studio-link.on{color:var(--ink);background:var(--panel)}
.upload-link{border:1px solid var(--line)}
.pop{position:absolute;top:calc(100% + 6px);inset-inline-end:16px;width:min(360px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);padding:6px;z-index:30}
.pop hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.pop-it{display:flex;align-items:center;gap:8px;width:100%;text-align:start;padding:10px 12px;border-radius:9px;border:0;background:transparent;color:var(--ink)}
.pop-it:hover{background:var(--panel2);color:var(--ink)}
.pop-it.danger{color:#ff9aa8}
.pop-it.soon,.chip.soon,.btn.soon,.opts button.soon{color:var(--dim)}
.tag{margin-inline-start:auto;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--dim);font-weight:400}
.pop-head{display:flex;align-items:center;gap:10px;padding:8px 10px 6px}
.pop-head h3{margin:0;font-size:16px;flex:1}
.pop-list{display:grid;gap:4px;padding:2px}
.pop-list .notice{margin:0}
.pop-list .btn.small{justify-self:start}
.pop-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;color:var(--brand)}
.me-head .av,.in-row .av{width:40px;height:40px;border-radius:50%;background:var(--btn);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--latin)}
.me-head b{display:block}.me-head small{color:var(--dim)}
.btn.small{padding:4px 12px;font-size:13px}
.btn.danger{background:#7a2438}.btn.danger:hover{background:#9a2f48}
/* dialogs */
.modal-card.wide{width:min(640px,100%)}
.modal-card{max-height:92vh;overflow:auto}
.modal-card.menu{width:min(600px,100%)}
.modal-card.menu .opts{max-height:none;grid-template-columns:1fr 1fr;gap:4px}
.modal-card.menu .opts button{padding:8px 10px;font-size:14px}
.modal-card.menu .opts hr,.modal-card.menu .opts .menu-k{grid-column:1/-1}
@media (max-width:640px){.modal-card.menu .opts{grid-template-columns:1fr}}
.modal-card.menu .opts hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.modal-card .opts button{display:flex;align-items:center;gap:8px}
.modal-card .opts button.danger{color:#ff9aa8}
.menu-k{margin:6px 12px 2px;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.sh-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.sh-head img{width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--panel2)}
.sh-head b{display:block}.sh-head .a{color:var(--dim);font-size:13px}
.social{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.soc{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:14px}
.soc:hover{border-color:var(--brand)}
.linkrow{display:flex;gap:8px;margin:8px 0}
.linkrow .link{flex:1;min-width:0;padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:var(--ground);color:var(--ink);font-family:var(--latin);direction:ltr}
.check{display:flex;align-items:center;gap:8px;color:var(--dim);margin:8px 0;font-size:14px}
.code{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:var(--ground);color:var(--ink);font-family:ui-monospace,Menlo,monospace;font-size:12px;direction:ltr;margin:8px 0}
.modal-card textarea,.modal-card select,.modal-card input[type=text],.modal-card input[type=url],.modal-card input[type=date],.modal-card input[type=search]{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:var(--ground);color:var(--ink);font:inherit}
.modal-card .form{display:grid;gap:10px}
.modal-card.edit .pane{max-height:56vh;overflow:auto;padding:4px;background:none;border:0;margin:0}
.modal-card.edit .pane.form{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-content:start}
.modal-card.edit .pane.form .f:has(textarea),.modal-card.edit .pane.form .f:has(.radios),.modal-card.edit .pane.form .f:has(.range),.modal-card.edit .pane.form>.hint,.modal-card.edit .pane.form>.chips,.modal-card.edit .pane.form>.artrow,.modal-card.edit .pane.form>.btn,.modal-card.edit .pane.form>.switch{grid-column:1/-1}
@media (max-width:640px){.modal-card.edit .pane.form{grid-template-columns:1fr}}
.chip .tag{margin-inline-start:6px}
.btn .tag{margin-inline-start:6px}
.f{display:grid;gap:4px}.f .fl{font-size:13px;color:var(--dim)}.f small{color:var(--faint);font-size:12px}
.radios{display:grid;gap:6px}.radio{display:flex;gap:8px;align-items:center}
.switch{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:6px 0;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .sw{width:36px;height:20px;border-radius:999px;background:#3b3154;border:1px solid #4a3f66;position:relative;transition:background .2s}
.switch .sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked+.sw{background:var(--lamp)}
.switch input:checked+.sw::after{transform:translateX(16px)}
[dir=rtl] .switch input:checked+.sw::after{transform:translateX(-16px)}
.switch small{grid-column:2;color:var(--faint);font-size:12px}
.drawer .switch{margin:0 14px 8px}
.artrow{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.artc{display:grid;gap:4px;justify-items:start}.artc img{width:120px;height:120px;border-radius:10px;object-fit:cover;background:var(--panel2)}.artc small{color:var(--faint)}
.range{display:flex;align-items:center;gap:10px}.range input{flex:1}
.status-line{color:var(--dim);font-family:var(--latin)}
.spot-list button{display:flex;align-items:center;gap:10px}.spot-list img{width:36px;height:36px;border-radius:6px;object-fit:cover}.spot-list .n{margin-inline-start:auto;color:var(--lamp);font-weight:700}.spot-list button.on{border-color:var(--lamp)}
.caption{color:var(--dim);margin:-6px 0 10px;font-size:15px}
.tags .chip{font-size:13px;padding:3px 10px}
.bio.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* the artist page: head + two columns */
.ahead .banner{margin-bottom:-60px}
.prof .names .loc{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.prof .names .alt{font-family:"Nastaliq",var(--latin);line-height:2}
.acols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.aside{display:grid;gap:14px;position:sticky;top:76px}
.side-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0}
.side-stats a{display:grid;gap:2px;padding:10px;border-radius:10px;background:var(--panel);text-align:center;font-size:12px}
.side-stats b{margin:0;font-size:18px}
.side-box{background:var(--panel);border-radius:12px;padding:14px}
.side-box h3{margin:0 0 8px;font-size:14px;color:var(--dim);font-weight:600}
.side-box .chips{margin:0}
.side-box .dim{color:var(--faint);font-size:12px}
.side-box.support{border:1px solid var(--line)}
.sup-btns{display:flex;flex-direction:column;gap:10px;margin-top:10px}.sup-btns .btn{display:flex;align-items:center;gap:10px;justify-content:center;font-weight:700;font-size:16px;border:0}.sup-btns .btn svg{width:22px;height:22px;fill:currentColor}.sup-btns .sup-paypal{background:#1f7fd6;color:#fff}.sup-btns .sup-paypal:hover{background:#2a92ee}.sup-btns .sup-coffee{background:#ffdd00;color:#241a00}.sup-btns .sup-coffee:hover{background:#ffe84d}.sup-btns .sup-patreon{background:#ff5c5c;color:#fff}
.sec-head .quiet{margin-inline-start:auto}
@media (max-width:980px){.acols{grid-template-columns:1fr}.aside{position:static}}
/* the studio */
.st-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.st-head h1{margin:0}
.artist-sel{padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.stat{background:var(--panel);border-radius:12px;padding:12px 14px;display:grid;gap:2px}.stat b{font-size:22px;font-family:var(--latin)}.stat span{color:var(--dim);font-size:13px}
.st-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.st-tools input,.st-tools select{padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
.st-tools .chips{margin:0}
.st-table{display:grid;gap:4px}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) 80px 70px 70px 120px 84px;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--panel)}
.st-row.head{background:transparent;color:var(--faint);font-size:12px}
.st-row.playing{outline:1px solid var(--lamp)}
.st-song{display:flex;gap:10px;align-items:center;min-width:0}.st-song img{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--panel2)}.st-song .t{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.st-song .a{color:var(--dim);font-size:12px}
.state{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--panel2);color:var(--dim);text-align:center}.state.ok{color:#9be7a3}.state.priv{color:var(--lamp)}.state.wait{color:#ffb4b4}
.st-row .acts{display:flex;gap:4px;justify-content:flex-end}
@media (max-width:860px){.st-row{grid-template-columns:minmax(0,1fr) 60px 84px}.st-row>:nth-child(3),.st-row>:nth-child(4),.st-row>:nth-child(5){display:none}}
/* insights */
.in-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}.in-top h2{margin:0;font-size:26px;flex:1}.in-top select{padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
.chg{font-size:18px}.chg.up{color:#9be7a3}.chg.down{color:#ff9aa8}
.in-chips .chip{color:var(--ink);background:var(--panel)}
.chart{direction:ltr;display:flex;align-items:flex-end;gap:3px;height:220px;padding:10px 4px 26px;background:var(--panel);border-radius:12px;margin:10px 0;position:relative}
.chart .col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative;background:var(--panel2);border-radius:4px 4px 0 0}
.chart .bar-v{width:60%;min-height:2px;background:var(--lamp);border-radius:3px 3px 0 0}
.chart .lbl{position:absolute;bottom:-22px;font-size:10px;color:var(--faint);font-family:var(--latin);direction:ltr}
.in-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:14px 0}
.in-row{display:flex;gap:10px;align-items:center;padding:6px 0}.in-row img{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--panel2)}.in-row>div{flex:1;min-width:0;display:grid;gap:2px}.in-row .t{font-weight:600}.in-row .a{color:var(--dim);font-size:12px}.in-row .num{font-weight:700;font-family:var(--latin)}
.in-row .flag{font-size:22px;width:32px;text-align:center}
.hbar{height:6px;border-radius:3px;background:var(--panel2);overflow:hidden}.hbar div{height:100%;background:var(--lamp)}
@media (max-width:860px){.studio-link,.upload-link,.msgs{display:none}.pop{inset-inline:8px;width:auto;max-height:70vh}.topright{gap:6px}.more{width:32px;height:32px}.bell{width:32px;height:32px}.me{padding:6px 10px;font-size:13px;max-width:120px;overflow:hidden;text-overflow:ellipsis}}
.prof .pacts{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){.prof{flex-wrap:wrap;padding:0 8px}.prof .pacts{margin-inline-start:0;width:100%;justify-content:flex-start}.prof .pacts .btn{padding:7px 12px;font-size:14px}}

/* the welcome card (28 Sep): three ways in + the guest's 30 seconds */
.welcome{max-width:440px;margin:30px auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 26px;text-align:center}
.welcome .w-brand{color:var(--brand);font-weight:700;font-size:22px;margin-bottom:6px}
.welcome h1{margin:0 0 6px;font-size:24px}
.ways{display:grid;gap:10px;margin:20px 0 14px}
.way{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:16px;font-weight:600}
.way:hover{border-color:var(--brand)}
.way.google{background:#fff;color:#1f1f1f}.way.apple{background:#000;color:#fff;border-color:#000}.way.email{background:var(--btn);color:#fff;border-color:transparent}
.way .w-ico{width:22px;height:22px;border-radius:50%;display:inline-block;flex:none}
.way .w-ico{border-radius:0;display:grid;place-items:center}.way .w-ico svg{width:22px;height:22px;display:block}.way.apple .w-ico{color:#fff}.way.email .w-ico{color:#fff}
.w-guest{color:var(--dim);font-size:14px;margin:10px 0 0}.w-terms{color:var(--faint);font-size:12px;margin:10px 0 0}
.form .quiet{justify-self:start;margin-bottom:4px}
.modal-card.guest{text-align:center}.modal-card.guest .g-art{width:120px;height:120px;border-radius:12px;object-fit:cover;margin:0 auto 10px;display:block}.modal-card.guest .btn{margin:6px 4px 0;display:inline-block}
.way.off{opacity:.55}

/* the user profile (28 Sep): public page + edit page */
.uav{border-radius:50%;background:var(--btn);color:#fff;display:grid;place-items:center;font-weight:700;overflow:hidden;flex:none;width:48px;height:48px;font-size:20px}
.uav img{width:100%;height:100%;object-fit:cover}
.uav.xl{width:128px;height:128px;font-size:48px;border:4px solid var(--ground)}
.me-av{width:22px;height:22px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-inline-end:6px}
.ubanner{background:linear-gradient(135deg,#2a1c4a,#1b1330 60%,#3a2260)}
.uhead .prof .names .dim{color:var(--faint);font-family:var(--latin);direction:ltr;unicode-bidi:isolate}
.plinks{display:flex;flex-wrap:wrap;gap:8px}
.plink{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);font-size:14px}
.plink:hover{border-color:var(--brand)}
.plink .pi{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--panel);font-family:var(--latin)}
.plink.youtube .pi{background:#e62117;color:#fff}.plink.instagram .pi{background:linear-gradient(45deg,#f9a03f,#d6249f,#285aeb);color:#fff}.plink.facebook .pi{background:#1877f2;color:#fff}.plink.tiktok .pi{background:#000;color:#fff}.plink.x .pi{background:#000;color:#fff}.plink.soundcloud .pi{background:#f50;color:#fff}.plink.spotify .pi{background:#1db954;color:#000}.plink.apple_music .pi{background:#fa243c;color:#fff}.plink.whatsapp .pi{background:#25d366;color:#000}.plink.telegram .pi{background:#29a9eb;color:#fff}.plink.linkedin .pi{background:#0a66c2;color:#fff}.plink.paypal .pi{background:#ffc439;color:#003087}.plink.patreon .pi{background:#ff424d;color:#fff}.plink.email .pi{background:var(--lamp);color:#1a1200}
.plinks.big .plink{font-size:15px;padding:9px 16px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gallery .gph{position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--panel2);aspect-ratio:1}
.gallery .gph img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .gph .cap{position:absolute;inset:auto 0 0 0;padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:12px}
.gallery.small{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
.gallery .gph .ib{position:absolute;top:4px;inset-inline-end:4px;background:rgba(0,0,0,.6);color:#fff}
.pedit{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start;margin-top:14px}
@media (max-width:900px){.pedit{grid-template-columns:1fr}}
.pphotos .pbanner{height:120px;border-radius:12px;background:linear-gradient(135deg,#2a1c4a,#1b1330 60%,#3a2260);background-size:cover;background-position:center;position:relative;margin-bottom:56px}
.pphotos .pbanner .uav{position:absolute;bottom:-48px;inset-inline-start:16px}
.pphotos .ups{display:grid;gap:8px;margin-bottom:10px}
.pphotos .up{display:flex;align-items:center;gap:10px}.pphotos .up label{cursor:pointer}.pphotos .up .busy{opacity:.5}
.pphotos h3{margin:14px 0 8px;font-size:14px;color:var(--dim)}
.pphotos .btn.small{margin-top:6px}
.pform{max-width:none;display:grid;gap:10px}
.pform .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pform h3{margin:14px 0 2px;font-size:15px}
.pform input:not([type=radio]):not([type=checkbox]):not([type=file]),.pform textarea,.pform select{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
.handle-row{display:flex;align-items:center;gap:6px}.handle-row .pre{color:var(--faint);font-family:var(--latin);direction:ltr;white-space:nowrap}.handle-row input{direction:ltr}
.linkrows{display:grid;gap:8px}.linkrow3{display:grid;grid-template-columns:140px minmax(0,1fr) 150px 36px;gap:6px;align-items:center}
@media (max-width:640px){.linkrow3{grid-template-columns:1fr 36px}.linkrow3 select,.linkrow3 input{grid-column:1}}
.pform .foot{display:flex;gap:8px;margin-top:6px}
.side-box .credits{margin:0}.side-box .credits dt{color:var(--faint);font-size:12px;margin-top:8px}.side-box .credits dd{margin:0}
.pform .radios{display:flex;flex-wrap:wrap;gap:14px}.pform .radio input{width:auto;margin:0}
.pform.form{max-width:none;width:auto}

/* ── profile sync (30 Sep 2026): the switches inside the profile form (the .form label / .form input rules must not undo them) ── */
.pform label.switch,.form label.switch{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;margin:8px 0 0;font-size:14px}
.pform .switch input,.form .switch input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.pform .switch .sw,.form .switch .sw{display:block;width:36px;height:20px;flex:none}
.pform .switch small{grid-column:2}
/* the me strip: my photo + name + the way to My page · Edit profile · My artist page (Studio, Library, Account) */
.mestrip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);margin:8px 0 14px}
.mestrip .who{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.mestrip .who b{display:block;font-size:15px}.mestrip .who small{color:var(--faint);direction:ltr;display:inline-block}
.melinks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-inline-start:auto;font-size:14px}
.melinks a{color:var(--dim);text-decoration:none;padding:6px 10px;border-radius:999px;border:1px solid var(--line)}
.melinks a:hover{color:var(--ink);border-color:var(--lamp)}
.form .mestrip{margin:12px 0}
.uav.sm{width:40px;height:40px;font-size:16px}
.st-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}.st-head .mestrip{flex:1 1 320px;margin:0}
/* the person behind an artist page */
.behind{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;margin-top:6px}
.behind b{display:block}.behind small{color:var(--faint);direction:ltr;display:inline-block}
.side-box .plinks{margin-top:6px}
/* about · terms & privacy */
.textpage{max-width:760px;margin:0 auto;line-height:1.75}
.textpage h1{font-size:26px;margin:6px 0 14px}.textpage h2{font-size:18px;margin:22px 0 6px;color:var(--lamp)}
.textpage p{margin:0 0 10px;color:var(--ink)}.textpage p.dim{color:var(--dim)}.textpage p.small{font-size:13px}
@media (max-width:600px){.melinks{margin-inline-start:0}}

/* ── package 017 (30 Sep 2026, the owner's word): ONE page · the wide row (cover + banner + details) · albums · playlists · every script ── */
/* the banner: ONE frame everywhere (the artist page, the profile page, the edit page) — the stored picture is 1600×520, the frame keeps that shape */
.banner{height:auto;aspect-ratio:1600/520;max-height:320px;background-position:center 33%}
.ahead .banner,.uhead .banner{margin-bottom:-60px}
@media (max-width:860px){.banner{max-height:190px;margin-bottom:-46px}}
.pedit-head{margin-bottom:10px}.pedit-head .prof .pacts{align-items:flex-end}
.pedit-head .ups{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.pedit-head .ups small{width:100%;text-align:end}
/* a person's own text: its own script, its own direction */
.u{unicode-bidi:plaintext}
/* the WIDE ROW */
.wrows{display:flex;flex-direction:column;gap:14px}
.wrow{display:grid;grid-template-columns:160px minmax(0,1fr);gap:0;border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid transparent;position:relative}
.wrow:hover{border-color:var(--line)}
.wrow.playing{border-color:var(--lamp)}
.wcover{display:block;width:160px;height:160px;background:var(--panel2)}.wcover img{width:100%;height:100%;object-fit:cover;display:block}
.wbody{position:relative;min-width:0;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background-size:cover;background-position:center}
.wbody.has-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,11,23,.92) 0,rgba(15,11,23,.72) 55%,rgba(15,11,23,.45) 100%)}
[dir=rtl] .wbody.has-bg::before{background:linear-gradient(270deg,rgba(15,11,23,.92) 0,rgba(15,11,23,.72) 55%,rgba(15,11,23,.45) 100%)}
.wbody.bg-cover{background-position:center 30%}
.wbody>*{position:relative}
.wtop{display:flex;gap:12px;align-items:flex-start}
.wplay{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--lamp);color:#1a1200;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.wrow.playing .wplay{background:var(--ink)}
.wnames{min-width:0;flex:1}.wnames a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wnames .wa{color:var(--dim);font-size:13px}.wnames .wt{font-weight:700;font-size:17px;color:var(--ink)}
.wnames .wt:lang(ur){font-family:"Nastaliq",var(--latin);line-height:1.9}
.wside{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--faint)}
.wgenre{border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--dim);white-space:nowrap}
.wline{margin:0;color:var(--lamp);opacity:.9;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wline:lang(ur){font-family:"Nastaliq",var(--latin);line-height:1.9}
.wfoot{display:flex;gap:12px;align-items:center;color:var(--dim);font-size:12px;margin-top:auto}
.wdur,.wnum{font-family:var(--latin);font-variant-numeric:tabular-nums}
.wacts{position:absolute;inset-inline-end:10px;bottom:10px;display:flex;gap:2px;background:rgba(15,11,23,.55);border-radius:999px;padding:2px 4px}
@media (max-width:600px){.wrow{grid-template-columns:96px minmax(0,1fr)}.wcover{width:96px;height:96px}.wbody{padding:10px 12px 40px}.wside{display:none}.wnames .wt{font-size:15px}}
/* album + playlist cards with their picture */
.plist.albums{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pcard.album{padding:8px;position:relative}
.pcard.album img{width:100%;aspect-ratio:1;border-radius:9px;object-fit:cover;background:var(--panel2);display:block;margin-bottom:8px}
.pcard.album img.noimg{background:linear-gradient(135deg,#2a1c4a,#3a2260)}
.pcard.album .ib{position:absolute;top:12px;inset-inline-end:12px;background:rgba(15,11,23,.7)}
.pcard.album .badge{margin-top:4px}
/* the album editor */
.album-tracks{max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.al-row{display:grid;grid-template-columns:22px 40px minmax(0,1fr) 28px 32px 32px;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;background:var(--panel)}
.al-row.on{outline:1px solid var(--line)}
.al-row img{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--panel2)}
.al-row .t{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.al-row .a{color:var(--dim);font-size:12px}
.al-row .n{color:var(--lamp);font-family:var(--latin);text-align:center}
/* progress of an upload */
.prog{height:6px;border-radius:3px;background:var(--panel2);overflow:hidden;margin:6px 0;width:100%}
.prog-bar{height:100%;width:0;background:var(--lamp);transition:width .2s}
.chip.busy,.btn.busy{opacity:.6;pointer-events:none}
.artc.wide img{width:240px;height:78px}
.msg.ok{color:#8fe3a1}.msg.err{color:#ff9b9b}
/* the song page's banner */
.track.has-banner{position:relative}
.tbanner{grid-column:1/-1;aspect-ratio:1240/400;max-height:220px;border-radius:14px;background-size:cover;background-position:center;margin-bottom:12px}
/* every language */
.langlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:12px 0}
.langitem{display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid transparent;color:var(--ink);font-size:16px}
.langitem small{color:var(--faint);font-size:12px;font-family:var(--latin);direction:ltr}
.langitem:hover{border-color:var(--line)}.langitem.on{border-color:var(--lamp)}
.langlink.all{font-family:var(--latin)}
.pdetails .side-box{margin-top:12px}

/* ── package 018 (30 Sep 2026, owner): every window organised and aligned · no scroll bars unless the screen is too small · banners in their true colours ── */
/* scroll bars: thin, only when there is really more to scroll, and never sideways */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px}*::-webkit-scrollbar-track,*::-webkit-scrollbar-button{background:transparent;display:none}
.tabs{overflow:visible;flex-wrap:wrap}
.modal-card{overflow-x:hidden}
/* the EDIT dialog: head · tabs · body (scrolls only when the screen is short) · foot always visible */
.modal-card.edit.sc{width:min(900px,100%);max-height:94vh;padding:0;display:flex;flex-direction:column;overflow:hidden}
.edit.sc .ed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 6px}
.edit.sc .ed-files{display:flex;gap:8px;flex-wrap:wrap}
.edit.sc .ed-meta{color:var(--faint);font-family:var(--latin);font-size:13px}
.edit.sc>.prog,.edit.sc>.msg{margin:0 22px}
.edit.sc .ed-tabs{margin:6px 22px 0;flex-wrap:nowrap;gap:0}
.edit.sc .ed-tabs button{font-size:17px;font-weight:700;padding:10px 16px}
.edit.sc .ed-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 22px}
.edit.sc .ed-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:12px 22px;border-top:1px solid var(--line);margin:0;background:var(--panel)}
.edit.sc .ed-foot .msg{margin:0 auto 0 0;min-height:0}
[dir=rtl] .edit.sc .ed-foot .msg{margin:0 0 0 auto}
.edit.sc .ed-pane[hidden]{display:none}
/* basic info: pictures left, one column of fields right */
.edit.sc .ed-basic{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.edit.sc .ed-left{display:grid;gap:6px;position:sticky;top:0}
.edit.sc .ed-pic{position:relative;border-radius:10px;overflow:hidden;background:var(--panel2)}
.edit.sc .ed-pic img{display:block;width:100%;object-fit:cover}
.edit.sc .ed-pic.cover img{aspect-ratio:1}.edit.sc .ed-pic.banner img{aspect-ratio:1240/400}
.edit.sc .ed-pic-btn{position:absolute;inset-inline-start:50%;bottom:10px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;border-radius:6px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
[dir=rtl] .edit.sc .ed-pic-btn{transform:translateX(50%)}
.edit.sc .ed-pic-cap{display:flex;justify-content:space-between;color:var(--dim);font-size:12px;margin-bottom:6px}
.edit.sc .ed-words{display:grid;gap:6px;margin-top:6px;color:var(--dim)}
.edit.sc .ed-right{display:grid;gap:12px}
.edit.sc .f{margin:0}
.edit.sc .f .fl{font-weight:600;color:var(--ink);font-size:14px}
.edit.sc .ed-permalink{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:var(--ground);overflow:hidden}
.edit.sc .ed-permalink .pre{padding:0 0 0 12px;color:var(--faint);white-space:nowrap;font-family:var(--latin);font-size:13px;direction:ltr}
.edit.sc .ed-permalink input{border:0!important;background:transparent!important;padding-inline-start:2px!important}
.edit.sc .radios{display:flex;flex-wrap:wrap;gap:8px 18px}
.edit.sc .ed-switches{display:flex;flex-wrap:wrap;gap:10px 24px}
.edit.sc .switch{display:flex;align-items:center;gap:10px}
/* metadata and permissions: even columns */
.edit.sc .ed-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;align-items:end}
.edit.sc .ed-grid3 .wide2{grid-column:span 2}
.edit.sc .ed-full{margin-top:14px}
.edit.sc .ed-lic{align-items:center}.edit.sc .ed-lic select{width:auto;min-width:160px}
.edit.sc .ed-group{margin-bottom:18px}.edit.sc .ed-group h4{margin:0 0 10px;font-size:15px}
.edit.sc .ed-perm .ed-grid3{align-items:start}
/* advanced: the waveform with its 20-second frame */
.edit.sc .ed-wave{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;margin:14px 0 4px}
.edit.sc .ed-wplay{width:64px;height:64px;border-radius:50%;border:0;background:#fff;color:#111;display:grid;place-items:center;cursor:pointer}
.edit.sc .ed-canvas{width:100%;height:90px;cursor:ew-resize;touch-action:none}
.edit.sc .ed-wlbl{margin-inline-start:80px;color:#f5a524;font-family:var(--latin);font-size:13px;white-space:nowrap;overflow:hidden}
.edit.sc .status-line{margin-top:18px;color:var(--dim)}
@media (max-width:760px){.edit.sc .ed-basic{grid-template-columns:1fr}.edit.sc .ed-left{position:static;grid-template-columns:1fr 1fr;align-items:start}.edit.sc .ed-grid3{grid-template-columns:1fr 1fr}.edit.sc .ed-tabs button{font-size:15px;padding:8px 10px}}
@media (max-width:480px){.edit.sc .ed-grid3{grid-template-columns:1fr}.edit.sc .ed-grid3 .wide2{grid-column:auto}.edit.sc .ed-head{flex-direction:column;align-items:flex-start}}
/* banners in their TRUE colours: no dark veil over the picture; the words sit on small dark labels (like the pictures) */
.wbody.has-bg::before,[dir=rtl] .wbody.has-bg::before{background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 45%)}
.wnames a{display:table;max-width:100%;background:rgba(0,0,0,.78);padding:1px 8px;margin-bottom:3px;border-radius:2px}
.wnames .wa{color:#d9d9d9}.wnames .wt{color:#fff}
.wside .wdate{background:rgba(0,0,0,.7);color:#ddd;padding:0 6px;border-radius:2px}
.wgenre{background:rgba(0,0,0,.7);color:#fff;border-color:transparent}
.wline{display:table;max-width:100%;background:rgba(0,0,0,.6);padding:0 8px;border-radius:2px}
.wfoot{color:#eee}
/* the settings page's language list */
.setsec{margin:18px 0}.setsec h2{font-size:18px;margin:0 0 6px}

/* ── package 019 (30 Sep 2026, owner): a small dark gap between the cover and the banner · the playing bar on the song's own banner · endless lists ── */
.wrow{gap:6px;background:transparent;border:0;border-radius:0;overflow:visible}
.wrow:hover{border:0}
.wcover{border-radius:10px;overflow:hidden}
.wbody{border-radius:10px;overflow:hidden;background-color:var(--panel)}
.wrow.playing .wbody{box-shadow:0 0 0 2px var(--lamp)}
.wrow.playing{border:0}
.wwave{display:none;width:100%;height:46px;cursor:pointer;position:relative}
.wrow.playing .wwave{display:block}
.wrow.playing .wline{display:none}
.endless{padding:18px 0;text-align:center}
.spot-list{max-height:60vh}

/* ── package 020 (owner, 30 Sep): the logo · square icon boxes with names on mouse-over · social share · the song page · comments ── */
.brand.logo{display:flex;align-items:center;padding:0}
.brand.logo img{height:38px;width:auto;display:block}
@media (max-width:600px){.brand.logo img{height:30px}}
.iboxes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:relative}
.ibox{position:relative;width:40px;height:40px;border-radius:10px;display:inline-grid;place-items:center;background:var(--panel2);border:1px solid var(--line);color:var(--ink);cursor:pointer;padding:0;flex:none;transition:border-color .15s,background .15s,transform .15s}
.ibox .ico{width:20px;height:20px;fill:currentColor}
.ibox:hover{border-color:var(--brand);color:var(--brand)}
.ibox:active{transform:scale(.94)}
.ibox.main{background:var(--btn);border-color:var(--btn);color:#fff}
.ibox.main:hover{background:var(--btn-hi);color:#fff}
.ibox.on{color:var(--brand);border-color:var(--brand);background:rgba(201,160,255,.12)}
.ibox.soon{opacity:.6}
.ibox.sm{width:30px;height:30px;border-radius:8px}.ibox.sm .ico{width:16px;height:16px}
.ibox[data-tip]:hover::after,.ibox[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#000;color:#fff;font-size:12px;line-height:1.4;padding:4px 9px;border-radius:6px;pointer-events:none;z-index:60;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.soc-whatsapp:hover{color:#25d366;border-color:#25d366}.soc-facebook:hover{color:#1877f2;border-color:#1877f2}.soc-x:hover{color:#fff;border-color:#fff}
.soc-telegram:hover{color:#29a9eb;border-color:#29a9eb}.soc-linkedin:hover{color:#0a66c2;border-color:#0a66c2}.soc-youtube:hover{color:#ff0000;border-color:#ff0000}
.soc-instagram:hover{color:#e1306c;border-color:#e1306c}.soc-tiktok:hover{color:#25f4ee;border-color:#25f4ee}
.sharepop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:50;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.sharepop .iboxes{flex-wrap:nowrap}
.song-bar .sharepop{inset-inline-end:auto;inset-inline-start:0}
.social{margin:8px 0}
.plinks.iboxes{gap:8px}
.prof .pacts.iboxes{gap:8px}

/* the song page */
.song{display:block}
.song-top{display:grid;grid-template-columns:clamp(160px,22vw,260px) minmax(0,1fr);gap:6px;align-items:stretch;background:#000;border-radius:14px;overflow:hidden}
.song-thumb{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--panel)}
.song-banner{position:relative;min-height:100%;background:#1b1330 center/cover no-repeat;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;min-width:0}
.song-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 45%,rgba(0,0,0,.55));pointer-events:none}
.song-banner.from-art{background-size:cover;background-position:center}
.song-banner.from-art::before{background:linear-gradient(180deg,rgba(15,11,23,.72),rgba(15,11,23,.55));backdrop-filter:blur(18px)}
.song-banner>*{position:relative}
.sb-top{display:flex;gap:14px;align-items:flex-start}
.sb-names{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px}   /* 031 (owner): the title on one line, the artist under it — no side-by-side drift */
.sb-names h1{margin:0;font-size:clamp(20px,2.6vw,30px);line-height:1.3;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);display:inline-block;background:rgba(0,0,0,.55);padding:2px 10px;border-radius:6px}
.sb-artist{display:inline-block;margin-top:0;color:#eee;background:rgba(0,0,0,.55);padding:1px 10px;border-radius:6px;font-size:15px}
.sb-artist:hover{color:var(--brand)}
.sb-labels{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.sb-labels .lbl{background:rgba(0,0,0,.55);color:#eee;padding:2px 9px;border-radius:6px;font-size:12px;white-space:nowrap}
.sb-wave{margin-top:14px}
.sb-wave .times{color:#ddd;text-shadow:0 1px 3px #000}
.song-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding:14px 2px;border-bottom:1px solid var(--line);margin-bottom:16px;position:relative}
.song-bar .meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--dim);font-size:13px;align-items:center}
.song-main{max-width:900px}
@media (max-width:700px){.song-top{grid-template-columns:minmax(0,1fr)}.song-thumb{max-height:none}.song-banner{min-height:200px}.sb-labels{display:none}}

/* comments */
.comments{margin-top:26px;max-width:900px}
.cm-write{display:flex;gap:10px;align-items:flex-start;margin:6px 0 16px}
.cm-write textarea{flex:1;min-height:0;resize:vertical}
.cm-write.reply{margin:8px 0 4px}
.cm-list{display:flex;flex-direction:column;gap:14px}
.cm{display:flex;gap:10px;align-items:flex-start}
.cm-b{flex:1;min-width:0}
.cm-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cm-n{font-weight:700;color:var(--ink)}a.cm-n:hover{color:var(--brand)}
.cm-t{color:var(--faint);font-size:12px}
.cm-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:2px 0 4px}
.cm-acts{display:flex;gap:6px}
.cm-replies{margin-top:10px;padding-inline-start:12px;border-inline-start:2px solid var(--line);display:flex;flex-direction:column;gap:10px}

/* ── package 021 (owner, 30 Sep): the synced lyrics show about 7 lines, the sung line in the middle · every language in one tab · the owner's lyrics editor ── */
#tp-lines{max-height:430px}
#tp-lines .line:lang(ur){font-size:22px;line-height:2}
.langchips{margin:0 0 12px;gap:6px;flex-wrap:wrap}
.langchips .chip.on{background:var(--btn);border-color:var(--btn);color:#fff}
#pane-texts .text,#pane-story .story{max-height:430px;overflow:auto;padding-inline-end:8px}
.lyr-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start}
.lyr-block h3{margin:0 0 8px;font-size:15px}
.lyr-rows{display:flex;flex-direction:column;gap:12px}
.lyr-row{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel2)}
.lyr-rh{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.lyr-rh select{flex:1;min-width:160px}
.lyr-rh .ibox{margin-inline-start:auto}
.lyr-row textarea{width:100%;resize:vertical;font-size:16px;line-height:1.9}
.lyr-block>.btn{margin-top:10px}

/* ── package 022 (owner, 30 Sep): tags in comments, the @/# picker, notices that open what they are about ── */
.cm-tw{position:relative;flex:1;min-width:0}
.cm-tw textarea{width:100%}
.cm-write{flex-wrap:wrap}
.cm-tip{flex-basis:100%;color:var(--faint);font-size:12px;padding-inline-start:44px}
.tagpick{position:absolute;inset-inline-start:0;top:100%;margin-top:4px;z-index:40;min-width:260px;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5);padding:4px}
.tagpick .tp{display:flex;justify-content:space-between;gap:12px;width:100%;background:none;border:0;color:var(--ink);padding:7px 10px;border-radius:8px;text-align:start;cursor:pointer}
.tagpick .tp span{color:var(--dim);font-size:12px}
.tagpick .tp.on,.tagpick .tp:hover{background:var(--panel2)}
.tagl{color:var(--brand);font-weight:600}
.tagl.track{color:var(--lamp)}
.tagl:hover{text-decoration:underline}
.cm.lit>.cm-b{background:rgba(201,160,255,.10);border-radius:10px;box-shadow:0 0 0 2px rgba(201,160,255,.35)}
.notice.go{cursor:pointer}
.notice.go:hover{background:var(--panel2)}

/* ── package 024 (owner, 30 Sep): the Sync Studio inside the artist's Studio ── */
.sync{max-width:1100px}
.sync-pick{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0 16px}
.sync-pick select{min-width:320px}
.sync-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.sync-art{width:84px;height:84px;border-radius:10px;object-fit:cover;background:var(--panel2)}
.sync-name{display:flex;flex-direction:column;gap:2px;min-width:180px}
.sync-name b{font-size:18px}
.sync-tools{margin-inline-start:auto;gap:8px}
.sync-clock{font:700 26px/1 var(--latin);font-variant-numeric:tabular-nums;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--brand)}
.sync-edit{margin:10px 0}.sync-edit textarea{width:100%;margin-bottom:8px}
.sync-lines{position:relative;max-height:430px;overflow:auto;scroll-behavior:auto;display:flex;flex-direction:column;gap:6px;margin:12px 0;padding:4px}
.sl{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.sl.next{border-color:var(--lamp);box-shadow:0 0 0 2px var(--lamp-soft)}
.sl-t{font:600 14px/1 var(--latin);font-variant-numeric:tabular-nums;min-width:92px;padding:8px 10px;border-radius:8px;border:0;background:var(--panel2);color:var(--dim);cursor:pointer;direction:ltr}
.sl.done .sl-t{background:#1f6f45;color:#fff}
.sl-x{flex:1;font-size:19px;line-height:1.9}
.sl-x:lang(ur){font-size:21px}
.sl-b{display:flex;gap:4px}
.sync-bar{position:sticky;bottom:calc(var(--bar) + 8px);display:flex;gap:12px;align-items:stretch;z-index:5}
.sync-tap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border:0;border-radius:14px;background:linear-gradient(90deg,#b58cff,#7b2ff7);color:#fff;cursor:pointer;font-size:14px;box-shadow:0 10px 30px rgba(123,47,247,.35)}
.sync-tap b{font-size:20px;letter-spacing:.06em}
.sync-tap:active{transform:scale(.99)}
.sync-side{display:flex;flex-direction:column;gap:8px}

/* ── package 025 (owner, 30 Sep): the artist's team in the Studio · 024b: the Sync Studio's song bar and speed ── */
.sync-wave{flex-basis:100%;margin-top:6px}
.sync-speed{width:auto}
.sl-b .lp{color:var(--lamp)}
.teamdesk{max-width:1200px}
.td-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0}
.td-head h2{margin:0}
.td-count{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--brand);font-weight:700}
.td-cur{margin-inline-start:auto;display:flex;gap:8px;align-items:center;color:var(--dim)}
.td-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.td-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.td-box.wide{grid-column:1/-1}
.td-box h3{margin:0 0 10px;font-size:16px}
.td-box .checks{display:flex;flex-wrap:wrap;gap:6px 14px}
.td-member{border-top:1px solid var(--line);padding:10px 0}
.tm-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tm-h .ibox{margin-inline-start:auto}
.tm-rate{display:grid;grid-template-columns:minmax(160px,1fr) 120px 90px auto;gap:8px;align-items:center;margin-top:6px}
.td-list{display:flex;flex-direction:column}
.td-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.td-row .ibox{margin-inline-start:auto}
.tag.ok{color:var(--good);border-color:var(--good)}
.tag.st-approved{color:var(--good)}.tag.st-cancelled{color:var(--faint)}.tag.st-submitted{color:var(--lamp)}
@media (max-width:900px){.td-grid{grid-template-columns:minmax(0,1fr)}}

/* ── 025b (owner, 30 Sep): Sync Studio head = cover and song bar in ONE row, the buttons centred under the bar · small check boxes on the Team page ── */
.sync-top{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"art name" "art wave" "tools tools";gap:4px 16px;align-items:center}
.sync-art{grid-area:art;width:96px;height:96px}
.sync-name{grid-area:name;flex-direction:row;align-items:baseline;gap:12px;min-width:0}
.sync-wave{grid-area:wave;margin:0}
.sync-wave canvas.wave{height:56px}
.sync-tools{grid-area:tools;margin:6px 0 0;justify-content:center;flex-wrap:wrap}
.td-box .checks{gap:4px 14px}
.td-box .check{display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-size:13px;margin:0;padding:2px 0;border:0;background:none;width:auto}
.td-box .check input[type=checkbox]{width:16px;height:16px;min-width:16px;margin:0;padding:0;accent-color:var(--btn);box-shadow:none;border-radius:4px}
.td-box .form label{display:block}
.td-box select,.td-box textarea{width:100%}

/* ── package 026 (owner, 30 Sep): approvals and the account of the artist's team ── */
.td-row.dim{opacity:.75}
.td-row .btn.small{padding:5px 12px}
.td-acc{border-top:1px solid var(--line);padding:10px 0}
.tm-pay{display:grid;grid-template-columns:110px 80px 140px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:6px;margin-top:8px;align-items:center}
@media (max-width:1000px){.tm-pay{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── package 027 (owner, 30 Sep): MY TASKS for team members on the one website ── */
.wk-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);margin:6px 0;color:var(--ink)}
.wk-row:hover{border-color:var(--brand)}
.wk-row.st-returned{border-color:var(--bad)}
.wk-team{color:var(--brand);font-weight:600}
.wk-note{flex-basis:100%;color:var(--bad);font-size:13px;white-space:pre-wrap}
.wk-head h1{margin:6px 0}
.wk-words{margin-top:10px}
.wk-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}
.wk-foot input{flex:1;min-width:240px}

/* package 029 (30 Sep 2026): the UPLOAD STUDIO the SoundCloud way — step 1 the drop zone, step 2 Track info, then "Track uploaded" */
.up-step1 h1,.up-top h1{font-size:26px;margin:14px 0 6px}
.up-step1 .dim,.up-note{color:var(--dim);margin:0 0 16px}
.up-zone{border:1px dashed var(--line);border-radius:16px;background:var(--panel);padding:56px 20px;text-align:center;display:grid;gap:14px;justify-items:center;margin-bottom:14px}
.up-zone.over{border-color:var(--lamp);background:var(--panel2)}
.up-zone-ico{font-size:52px;line-height:1;opacity:.85}
.up-zone p{margin:0;font-weight:700}
.up-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.up-file{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:14px}
.up-file .up-fname{direction:ltr;unicode-bidi:isolate}
.up-file .up-replace{color:var(--brand);cursor:pointer;font-weight:700}
.up-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
.up-art{display:grid;gap:14px}
.up-artbox{border:1px dashed var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.up-artbox.over{border-color:var(--lamp)}
.up-artbox .up-artbtn{display:block;cursor:pointer}
.up-artbox .up-pv{position:relative;display:grid;place-items:center;gap:4px;text-align:center;padding:12px;aspect-ratio:1/1}
.up-artbox.banner .up-pv{aspect-ratio:31/10}
.up-artbox .up-pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.up-artbox .noart{font-size:40px;color:var(--faint)}.up-artbox .up-artlbl{font-weight:700}.up-artbox small{color:var(--faint)}
.up-artbox .up-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;line-height:24px;padding:0;font-size:16px}
.up-fields{display:grid;gap:14px}
.up-fields .f{display:grid;gap:4px}.up-fields .f .fl{font-size:13px;color:var(--dim);font-weight:700}.up-fields .f .req{color:#ff8a8a}.up-fields .f small{color:var(--faint);font-size:12px}
.up-fields .f input,.up-fields .f select,.up-fields .f textarea{width:100%;height:var(--h);font:15px var(--latin);padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#0c0913;color:var(--ink)}
.up-fields .f textarea{height:auto;padding:8px 12px;min-height:110px}
.up-fields .f select:disabled{opacity:.7}
.up-link{display:flex;align-items:center;gap:0;height:var(--h);padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#0c0913;color:var(--dim);direction:ltr;font-family:var(--latin);overflow:hidden;white-space:nowrap}
.up-link .slug{color:var(--ink)}
.up-privacy{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 14px;display:grid}
.up-privacy .radio{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.up-privacy .radio input{margin-top:4px}.up-privacy .radio b{display:block}.up-privacy .radio small{color:var(--dim)}
.up-sched{display:flex;gap:10px;align-items:center;padding:10px 0;color:var(--dim)}.up-sched .tag{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.up-sec{border-top:1px solid var(--line);padding:4px 0}
.up-sec summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px;padding:12px 0;position:relative}
.up-sec summary::-webkit-details-marker{display:none}
.up-sec summary::after{content:"⌄";position:absolute;inset-inline-end:4px;top:10px;font-size:20px;color:var(--dim)}
.up-sec[open] summary::after{content:"⌃"}
.up-sec summary small{color:var(--dim)}
.up-sec-body{display:grid;gap:12px;padding:0 0 14px}
.up-sec-body h4{margin:6px 0 0;font-size:14px;color:var(--dim)}
.up-sec-body .switch small{display:block;color:var(--faint);font-size:12px}
.up-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.up-checks{display:grid;gap:6px;margin-top:16px}
.up-line{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.up-line.stop{border-color:rgba(255,120,120,.5)}.up-line.warn{border-color:rgba(242,179,91,.45)}.up-line.ok{opacity:.85}
.up-line .dot{flex:0 0 auto}.up-line .tx{min-width:0}
.up-footbar{position:sticky;bottom:calc(var(--bar) + 8px);display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-top:14px}
.up-footbar .up-stmt{margin:0;color:var(--dim);font-size:13px}.up-footbar .up-stmt a{color:var(--brand);text-decoration:underline}
.up-footbar .btn.main{min-width:160px;white-space:nowrap}.up-footbar .btn.busy{opacity:.6}
.up-done{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:14px;max-width:760px;margin:16px auto}
.up-steps{display:flex;gap:18px;align-items:center;color:var(--dim)}
.up-stepi{display:flex;gap:8px;align-items:center}.up-stepi i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);font-style:normal;font-size:13px}
.up-stepi.done i{background:var(--panel2)}.up-stepi.now i{background:#fff;color:#000}.up-stepi.now span{color:var(--ink);font-weight:700}
.up-okbar{background:#0f3d2a;border:1px solid #1c6b48;border-radius:10px;padding:12px 14px;color:#9be7b0;font-weight:700}
.up-donecard{display:flex;gap:12px;align-items:center;background:var(--panel2);border-radius:10px;padding:10px}
.up-donecard img{width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--panel)}
.up-donecard b{display:block}.up-donecard span{color:var(--dim);font-size:13px}
.up-state{margin:0;color:var(--dim)}.up-state.ok{color:var(--good);font-size:18px}.up-state.err{color:var(--bad)}.up-state.warn{color:var(--lamp)}
.up-links{display:flex;flex-wrap:wrap;gap:10px}
.st-song .up-warn{display:inline-block;margin-inline-start:8px;font-size:12px;color:var(--lamp);cursor:help}
@media (max-width:860px){.up-grid{grid-template-columns:1fr}.up-two{grid-template-columns:1fr}.up-footbar{flex-direction:column;align-items:stretch}}
.up-credits{display:grid;gap:8px}
.up-cred{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) 36px;gap:8px;align-items:center}
.up-cred select,.up-cred input{height:var(--h);font:15px var(--latin);padding:0 10px;border-radius:10px;border:1px solid var(--line);background:#0c0913;color:var(--ink);width:100%}
.up-cred .ib{width:36px;height:36px}
.up-wave{margin-top:6px}.up-wave .ed-canvas{width:100%;height:90px;display:block;cursor:ew-resize}
.ed-credits{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:10px}
.ed-credits h4{margin:0;font-size:15px}
@media (max-width:700px){.up-cred{grid-template-columns:1fr 1fr}}
.line.plain{color:var(--ink);cursor:default}.line.plain:hover{background:none}
.bio .lnk{color:var(--brand);text-decoration:underline;word-break:break-all}

/* 040 — Insights: Top locations (map + flags) */
.in-loc{margin:14px 0}.in-loc h3{font-size:18px;color:var(--ink)}
.wmap{position:relative;margin:6px 0 14px;background:#120d1c;border-radius:12px;padding:8px}.wmap svg{display:block;width:100%;height:auto}
.wmap path.c{fill:#2f2a3a;stroke:#120d1c;stroke-width:.5}.wmap path.c.on{stroke:#1b1330}.wmap path.c:hover{stroke:#fff;stroke-width:1}.wmap .dot{stroke:#fff;stroke-width:.8}
.wmap-tip{position:absolute;pointer-events:none;background:#000c;color:#fff;padding:4px 8px;border-radius:6px;font-size:13px;white-space:nowrap;z-index:3}
.loc-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}@media (max-width:760px){.loc-cols{grid-template-columns:1fr}}
.loc-col h4{margin:0 0 8px;font-size:17px;color:var(--ink)}
.loc-row{display:flex;gap:12px;align-items:center;padding:7px 0}.loc-row>div{flex:1;min-width:0;display:grid;gap:3px}.loc-row .t{font-weight:700;color:var(--ink)}.loc-row .a{color:var(--dim);font-size:13px;font-family:var(--latin)}
.loc-list .loc-row.extra{display:none}.loc-list.all .loc-row.extra{display:flex}
.flagimg{width:44px;height:33px;border-radius:4px;object-fit:cover;flex:none;background:var(--panel2);box-shadow:0 0 0 1px #0006}
.loc-listeners{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.loc-listeners h4{margin:0 0 6px;color:var(--ink)}

/* 041 — our colours on Top locations: violet map, violet-to-gold bars */
.in-loc .hbar div{background:linear-gradient(90deg,#7b2ff7,#c9a0ff)}
.wmap{background:radial-gradient(ellipse at 50% 40%,#1e1633,#120d1c 70%)}

/* 042 — Top locations as a tool */
.loc-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.loc-ctl{display:flex;flex-wrap:wrap;gap:10px}.loc-ctl .seg{display:flex;gap:4px;background:var(--panel2);border-radius:999px;padding:3px}
.loc-ctl .chip{padding:5px 12px;border-radius:999px;font-size:13px;color:var(--dim);background:transparent;border:0}.loc-ctl .chip.on{background:var(--btn);color:#fff}
.loc-live{margin:6px 0 2px}
.wmap path.c{cursor:pointer}.wmap path.c.picked,.wmap .dot.picked{stroke:#ffd166;stroke-width:1.6}
button.loc-row{width:100%;background:none;border:0;color:inherit;text-align:start;cursor:pointer;border-radius:8px;padding:7px 6px;font:inherit}button.loc-row:hover{background:var(--panel2)}
.loc-focus{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 16px;background:var(--panel2)}
.loc-focus-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}.loc-focus-head>div{flex:1}.loc-focus-head h4{margin:0;font-size:20px;color:var(--ink)}.loc-focus-head .a{color:var(--dim);font-size:13px}
.loc-focus .flagimg{width:56px;height:42px}

/* 043 */
.flagimg.sm{width:22px;height:16px;border-radius:2px;vertical-align:-3px;box-shadow:0 0 0 1px #0005}
.place{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.in-row .flagimg{width:36px;height:27px}

/* 046 — the 30-second dialog: buttons in one row, same height, centred text */
.modal-card.guest{text-align:center}.modal-card.guest h2{margin:10px 0 6px}.modal-card.guest p{margin:0 0 16px;line-height:1.6}
.g-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.g-acts .btn{display:inline-flex;align-items:center;justify-content:center;min-width:170px;height:var(--h);padding:0 20px;box-sizing:border-box;text-decoration:none;margin:0}

/* 047 — the store-ready song: AI parts under the one switch, the three promises, where else, feat. and the version */
.ai-parts{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:2px 0 10px;padding:8px 12px;border-radius:10px;background:var(--panel2)}.ai-parts>small:first-child{width:100%;color:var(--ink);font-weight:700}.ai-parts>small.dim{width:100%}
.ai-parts .switch{margin:0}
.up-promises{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px;background:var(--panel2)}.up-promises ul{margin:6px 0 10px;padding-inline-start:20px;line-height:1.7;color:var(--dim)}
.also-rows{display:grid;gap:8px;margin-bottom:8px}.also-rows .linkrow3{grid-template-columns:180px 1fr 36px}
.also-on{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px}.also-on .dim{margin-inline-end:4px}
.chip.plat{font-weight:600}.chip.plat-spotify{border-color:#1db954;color:#1db954}.chip.plat-apple_music{border-color:#fa2d48;color:#fa2d48}.chip.plat-youtube,.chip.plat-youtube_music{border-color:#ff3d3d;color:#ff6b6b}.chip.plat-deezer{border-color:#a238ff;color:#c58cff}
.sb-names .ver{font-weight:400;opacity:.8;font-size:.7em}
.sb-feat{display:block;color:#fff;opacity:.85;font-size:14px;margin-top:2px}

/* 048 — the analyzer's WAV box and the Correct buttons on the check lines */
.up-line .btn.small{margin-inline-start:auto;flex:none}
.up-wav{border:1px solid #f5a524;border-radius:12px;padding:12px 14px;margin:8px 0;background:rgba(245,165,36,.08);display:grid;gap:8px}.up-wav p{margin:0;line-height:1.6}.up-wav .btn{justify-self:start}

/* 050 — one single · several singles · album / EP */
.up-modes{display:flex;gap:6px;justify-content:center;margin:0 0 14px;background:var(--panel2);border-radius:999px;padding:4px;width:max-content;max-width:100%;margin-inline:auto}
.up-modes .chip{border:0;background:transparent;padding:8px 18px;border-radius:999px;color:var(--dim);font-weight:600}.up-modes .chip.on{background:var(--btn);color:#fff}
.up-mode-hint{margin-top:10px;text-align:center}
.up-album{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;margin:8px 0 18px}@media (max-width:760px){.up-album{grid-template-columns:1fr}}
.up-shared{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:18px 0;background:var(--panel)}.up-shared h3{margin:0 0 4px}
.up-rows{display:grid;gap:10px}
.up-row{display:grid;grid-template-columns:28px 84px minmax(0,1fr) auto;gap:12px;align-items:start;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--panel)}
.up-row.bad{border-color:#e5484d}.up-row.done{border-color:#30a46c;opacity:.85}.up-row.drag{opacity:.5}
.up-num{font-weight:800;color:var(--dim);padding-top:8px;text-align:center}
.up-rowart{position:relative;width:84px;height:84px;border-radius:10px;background:var(--panel2);overflow:hidden}.up-rowart img{width:100%;height:100%;object-fit:cover;display:none}.up-rowart.has img{display:block}
.up-rowartbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer}.up-rowart.has .up-rowartbtn{opacity:0}.up-rowart.has:hover .up-rowartbtn{opacity:1;background:#0008}
.up-rowmid{display:grid;gap:6px;min-width:0}.up-rowmid .up-two{gap:10px}
.up-rowwords summary{cursor:pointer;color:var(--dim)}.up-rowwords textarea{width:100%;margin-top:6px}
.up-rowcnt{background:none;border:0;color:var(--ink);cursor:pointer;padding:2px 0;text-align:start;font:inherit}
.up-rowside{display:flex;flex-direction:column;gap:6px}
@media (max-width:640px){.up-row{grid-template-columns:64px minmax(0,1fr)}.up-num{display:none}.up-rowart{width:64px;height:64px}.up-rowside{flex-direction:row;grid-column:1/-1}}
.up-batch .f{display:grid;gap:4px}.up-batch .f .fl{font-size:13px;color:var(--dim);font-weight:700}.up-batch .f small{color:var(--faint);font-size:12px}
.up-batch .f input,.up-batch .f select,.up-batch .f textarea,.up-rowwords textarea{width:100%;height:var(--h);font:15px var(--latin);padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#0c0913;color:var(--ink);box-sizing:border-box}
.up-batch .f textarea,.up-rowwords textarea{height:auto;padding:8px 12px;min-height:90px}
.up-batch .up-shared .ed-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;align-items:end;margin-bottom:10px}@media (max-width:760px){.up-batch .up-shared .ed-grid3{grid-template-columns:1fr}}
.up-batch .up-shared>.f{margin:10px 0}
.up-batch .up-footbar .btn{min-width:max-content;padding:0 22px}

/* 050 — my songs control: who may work on a song, shared with me, recently deleted */
.grant-row{display:grid;grid-template-columns:minmax(160px,1fr) 2fr auto auto;gap:10px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.grant-row small{display:block}
.grant-parts{display:flex;flex-wrap:wrap;gap:6px 16px}.grant-parts .switch{margin:0}
@media (max-width:640px){.grant-row{grid-template-columns:1fr}}
.st-row.shared,.st-row.deleted{grid-template-columns:minmax(0,1fr) auto}
.st-row.deleted img{filter:grayscale(1);opacity:.7}

/* 051 — chart tabs, more search filters, the album line and the release details on the song page */
.chart-tabs{display:grid;gap:8px;margin:6px 0 16px}.chart-tabs .chip.on{background:var(--btn);color:#fff;border-color:transparent}.sub-chips .chip{font-size:13px}
.filters{flex-wrap:wrap}.chips.moods{margin:8px 0 14px}.chips.moods .chip.on{background:var(--btn);color:#fff;border-color:transparent}
.from-album{margin:4px 0 10px;color:var(--dim)}.from-album a{color:var(--ink);font-weight:600}
.rel-details{margin:14px 0;border:1px solid var(--line);border-radius:12px;padding:10px 14px}.rel-details summary{cursor:pointer;font-weight:700}

/* 052 — saved albums, followed playlists, collaborators, drag to reorder */
.btn.ghost.on{border-color:var(--btn);color:var(--ink)}
.collab-list{display:grid;gap:6px;margin:8px 0 12px}.collab-row{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}.collab-row .ib{margin-inline-start:auto}
.rows .row[draggable=true]{cursor:grab}.rows .row.drag{opacity:.45}

/* 053 — feed, repost, comments pinned to a moment */
.feed-rows{display:grid;gap:12px}.feed-lab{margin:0 0 4px;color:var(--dim);font-size:13px;display:flex;align-items:center;gap:4px}.feed-lab .ico{width:16px;height:16px}.feed-lab a{color:var(--ink);font-weight:600}
.ibox .ibn{font-size:12px;margin-inline-start:4px}.ibox.on{color:#ff6b9d}
.cm-at{background:var(--panel2);border:0;border-radius:999px;color:var(--ink);font-size:12px;padding:2px 8px;cursor:pointer;margin-inline-start:6px}
.sb-wave{position:relative}.cm-marks{position:absolute;inset-inline:0;bottom:-6px;height:22px;pointer-events:none}
.cm-mark{position:absolute;bottom:0;transform:translateX(-50%);background:none;border:0;padding:0;cursor:pointer;pointer-events:auto}[dir=rtl] .cm-mark{transform:translateX(50%)}
.cm-mark .avatar,.cm-mark img,.cm-mark span{width:18px;height:18px;border-radius:50%;font-size:10px;box-shadow:0 0 0 2px #0008}
.cm-mark>*{width:20px!important;height:20px!important;min-width:0!important;font-size:10px!important;line-height:20px!important}

/* 054 — messages, notices by category */
.msgs{position:relative}.msgs .bell-n{position:absolute;top:-4px;inset-inline-end:-4px}
.conv{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:10px;color:var(--ink);text-decoration:none}.conv:hover,.conv.on{background:var(--panel2)}.conv.unread b{color:#fff}
.conv small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conv-side{display:grid;justify-items:end;gap:2px}.conv-n{background:#e5484d;color:#fff;border-radius:999px;font-size:11px;padding:1px 7px}
.msg-wrap{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;min-height:60vh}@media (max-width:760px){.msg-wrap{grid-template-columns:1fr}}
.msg-side{display:grid;gap:10px;align-content:start}.conv-list{display:grid;gap:2px}
.msg-main{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-height:60vh;background:var(--panel)}
.msg-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.msg-head a,.msg-head b{font-weight:700;color:var(--ink);margin-inline-end:auto}
.msg-list{overflow:auto;max-height:58vh;display:flex;flex-direction:column;gap:8px;padding:4px}
.bubble{max-width:74%;background:var(--panel2);border-radius:14px;padding:8px 12px;align-self:flex-start}.bubble.mine{background:#3b2470;align-self:flex-end}.bubble p{margin:0 0 4px;white-space:pre-wrap;line-height:1.6}.bubble small{display:flex;gap:6px;align-items:center}
.msg-write{display:grid;grid-template-columns:1fr auto;gap:8px}.msg-write textarea{width:100%;border-radius:10px;border:1px solid var(--line);background:#0c0913;color:var(--ink);padding:8px 12px;font:15px var(--latin)}
.nprefs{display:grid;gap:4px;margin:8px 0}.np-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.np-row.head{color:var(--dim);font-size:13px;border:0}.np-row small{display:block}
/* 055: files & versions, reassign */
.row-btns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.tag.st-reassigned{color:var(--faint)}
.modal-card h3{margin:16px 0 6px;font-size:1rem}
.td-row .btn.small+.ibox{margin-inline-start:0}
.td-row small.err{flex-basis:100%;text-align:start;padding:0;margin:0}
/* 057: Studio likes + comments, roles, player like/comment, give back */
.st-who{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.st-who .uav.sm{width:28px;height:28px;font-size:12px}
.st-song-l{color:var(--accent,#b98cff);text-decoration:none}
.st-like .hint{margin-inline-start:auto}
.st-cm{background:var(--panel);border-radius:12px;padding:12px 14px;margin:10px 0;border-inline-start:3px solid transparent}
.st-cm.open{border-inline-start-color:#f0b54a}
.st-cm-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.st-cm-h .hint{margin-inline-start:auto}
.st-cm-b{margin:8px 0 6px;white-space:pre-wrap}
.st-cm-r{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.03);margin-inline-start:28px}
.st-cm-r.mine{background:rgba(155,106,255,.12)}
.st-cm-f{display:flex;gap:8px;align-items:flex-start;margin-top:8px;margin-inline-start:28px}
.st-cm-f textarea{flex:1;min-height:44px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.tag.warn{color:#f0b54a}
.wk-roles{margin:6px 0 14px;align-items:center}
.me-head small.me-kind,.me-head small.me-role{display:block;color:var(--dim);font-size:12px;margin-top:2px}
#b-like.on{color:#ff5a8a}
.wk-foot .btn.ghost{margin-inline-start:6px}
/* 058: membership + help */
.lead{color:var(--dim);font-size:16px;max-width:760px}
.plan-free-note{background:rgba(120,220,150,.08);border:1px solid rgba(120,220,150,.25);border-radius:12px;padding:10px 14px;color:#8fe3a1;max-width:760px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}
.plan.current{border-color:#8fe3a1;box-shadow:0 0 0 1px rgba(143,227,161,.35)}
.plan.pro{background:linear-gradient(160deg,rgba(155,106,255,.18),var(--panel) 60%)}
.plan h2{margin:0;font-size:20px}
.plan .price b{font-size:26px;font-family:var(--latin)}
.plan .feats{list-style:none;padding:0;margin:6px 0;display:grid;gap:4px;font-size:14px}
.plan .feats li.soon{color:var(--dim)}
.plan .btn,.plan .tag{margin-top:auto;align-self:flex-start}
.plan-explain{max-width:820px;margin:18px 0}
.plan-explain h3{margin:14px 0 4px;font-size:16px}
.plan-table{display:grid;gap:2px;margin:8px 0 20px;overflow-x:auto}
.pt-row{display:grid;grid-template-columns:minmax(200px,2fr) repeat(4,minmax(80px,1fr));gap:8px;padding:7px 10px;border-radius:8px;background:var(--panel);align-items:center;font-size:14px}
.pt-row.head{background:transparent;color:var(--dim)}
.pt-row .c{text-align:center}
.plan-now{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 10px}
.help-q{width:100%;max-width:520px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;margin:10px 0}
.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.help-card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border-radius:12px;padding:14px;text-decoration:none;color:var(--ink);border:1px solid transparent}
.help-card:hover{border-color:var(--line)}
.help-card .dim{font-size:13px}
.help-art{max-width:860px;line-height:1.8}
.help-art figure{margin:12px 0}.help-art img{max-width:100%;border-radius:10px;border:1px solid var(--line)}
.help-art figcaption{color:var(--dim);font-size:13px}
.help-art code{background:rgba(255,255,255,.06);padding:1px 6px;border-radius:5px;font-family:var(--latin)}
.md-tr{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;padding:6px 8px;border-bottom:1px solid var(--line)}
.help-contact{margin:24px 0;max-width:600px}
/* 059: the comment box — one slim line, a round send button inside, the hint + moment switch small under it */
.cm-write{flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px}
.cm-write .cm-tw{display:flex;align-items:flex-end;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:4px 4px 4px 14px}
[dir=rtl] .cm-write .cm-tw{padding:4px 14px 4px 4px}
.cm-write .cm-tw:focus-within{border-color:var(--brand,#b98cff)}
.cm-write textarea{flex:1;min-height:32px;max-height:160px;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;padding:7px 0;resize:none;line-height:1.45;color:var(--ink);font:inherit}
.cm-send{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:0;background:#7c3aed;color:#fff;font-size:15px;line-height:34px;padding:0;cursor:pointer;display:grid;place-items:center}
.cm-send:hover{filter:brightness(1.12)}.cm-send:disabled{opacity:.5;cursor:default}
[dir=rtl] .cm-send{transform:scaleX(-1)}
.cm-opts{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding-inline-start:46px;margin-top:-2px}
.cm-opts .cm-tip{flex-basis:auto;padding:0;font-size:12px}
.cm-opts .switch{font-size:12px;gap:6px;margin:0}
.cm-opts .switch .sw{transform:scale(.8)}
.cm-write.reply{margin:6px 0 2px}
.cm-write.reply .cm-tw{border-radius:18px}
.cm-acts .ibox,.cm-acts button{width:28px;height:28px}
.st-cm-f{align-items:center}
.st-cm-f textarea{min-height:36px;border-radius:18px;padding:8px 14px;resize:none}
/* 059: upload window notes */
.up-wavnote{display:block;color:#8fe3a1;font-size:12px;margin:2px 0 4px}
.up-maxnote{margin:-4px 0 10px}
.up-rowmore .ed-grid3{margin-top:8px}
.up-finish{background:var(--panel);border:1px solid #f0b54a55;border-radius:14px;padding:14px 16px;margin:14px 0}
.up-finish .td-row .btn{margin-inline-start:auto}
/* 060: the sound sent ahead */
.up-bg{display:inline-block;font-size:12px;color:var(--dim);margin-inline-start:10px}
.up-bg.ready{color:#8fe3a1}.up-bg.failed{color:#f0b54a}
.up-rowmid .up-bg{display:block;margin:2px 0}
/* 061 */
.up-auto{display:block;color:#8fe3a1;font-size:12px;margin-top:3px}.up-auto.warn{color:#f0b54a}
/* 063: Studio → Platforms */
.stat small.up{color:#8fe3a1;font-size:12px}.stat small.down{color:#ff9b9b;font-size:12px}
.pl-chart{margin:12px 0}.pl-chart-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0;font-size:13px;color:var(--dim)}
.pl-key{display:inline-flex;align-items:center;gap:6px}.pl-key i,.pl-dot{display:inline-block;width:12px;height:12px;border-radius:3px}
.pl-svg{width:100%;height:auto;display:block}.pl-svg .pl-gl{stroke:var(--line);stroke-width:1}.pl-svg .pl-ax{fill:var(--faint);font-size:12px;font-family:var(--latin)}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:12px 0}
.pl-grid .td-row .num{margin-inline-start:auto}
.pl-cn{display:inline-flex;align-items:center;gap:6px}.pl-cn .flagimg{width:20px;height:14px;border-radius:2px}
.pl-import{margin:14px 0}

/* ── 064 (owner 1 Oct, from the old farooqmusic.com): Get the app · WhatsApp Channel · Farooq Music everywhere · Support — the footer on every page and the home band ── */
.connect{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:6px 0 16px;padding:16px 0 4px}
.connect .cx{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.connect h3{font-size:15px;color:var(--ink);margin:0 0 4px}
.connect p{margin:0 0 10px;color:var(--dim);font-size:13px}
.connect .chips{margin:0 0 8px;gap:6px}
.connect .chip{font-size:13px;padding:3px 12px}
.connect .chip.soft{opacity:.85}
.connect .chip.sup{border-color:var(--lamp);color:var(--lamp)}
.store-btns{display:flex;flex-wrap:wrap;gap:8px}
.store{display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;border:1px solid #444;border-radius:10px;padding:6px 14px 6px 10px;min-width:150px;direction:ltr}
.store:hover{color:#fff;border-color:#888}
.store svg{width:22px;height:22px;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.15;text-align:left;font-family:var(--latin)}
.store small{font-size:10px;opacity:.85}
.store b{font-size:16px;font-weight:600}
.btn.wa-btn{background:#25d366;border-color:#25d366;color:#08240f;display:inline-flex;align-items:center;gap:6px}
.btn.wa-btn:hover{background:#1ebe5b;color:#08240f}
.btn.wa-btn svg,.btn.wa-btn .ico{width:18px;height:18px;fill:currentColor}
.btn.ghost.wa-btn{background:transparent;color:#25d366}
.connect-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:4px 0 14px}
.connect-band .cb-item{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.connect-band .cb-item .dim{font-size:13px;margin-bottom:4px}
.wa-card{border-color:#25d36655}
@media (max-width:640px){.connect{grid-template-columns:1fr}.store{min-width:0}}

/* ── 066: Your data (download / close the account) and the Terms & privacy page ── */
.data-sec .quiet{margin-inline-start:10px}
.danger-zone{margin-top:14px;padding:12px 14px;border:1px solid var(--bad);border-radius:12px;background:rgba(255,80,80,.05)}
.danger-zone b{color:var(--bad)}
.textpage.legal .help-art{margin:18px 0 26px;padding-top:6px;border-top:1px solid var(--line)}

/* ── 067: stations ── */
button.station-tile{font:inherit;color:inherit;text-align:start;cursor:pointer;background:transparent;border:0;padding:0}
button.station-tile b{display:block;margin-top:6px}
button.station-tile img.noimg{background:linear-gradient(135deg,#2a1f3b,#3b2a5c)}