/* Belink Music — "Studio" premium theme (2026-10-14): espresso, warm cream, tangerine, editorial serif + grotesk. */
@font-face{font-family:BMSerif;src:url(/fonts/fraunces.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:BMSans;src:url(/fonts/grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:BMAr;src:url(/fonts/tajawal.woff2) format("woff2");font-display:swap}
:root{--bg:#14100d;--fg:#f4e9d8;--mut:#a8998a;--acc:#ff7a3d;--acc2:#ffb35c;--gold:#ffb35c;--blue:#ff7a3d;--card:#221b16;--line:rgba(244,233,216,.1);--grad:linear-gradient(135deg,#ff7a3d,#ffb35c);font-family:BMSans,BMAr,-apple-system,sans-serif!important}
html,html body{background:#14100d!important;color:var(--fg)}
html body{background:radial-gradient(1000px 600px at 100% -10%,rgba(255,122,61,.13),transparent 60%),radial-gradient(800px 500px at -20% 40%,rgba(255,179,92,.06),transparent 60%),#14100d!important;background-attachment:fixed!important}
html body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
html body main,html body .chips{position:relative;z-index:1}
html body .bbg,html body #bbg,html body [class^="bbg-"]{display:none!important}
html body .top{background:rgba(20,16,13,.84)!important;backdrop-filter:blur(20px)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:calc(env(safe-area-inset-top) + 14px) clamp(16px,4vw,44px) 12px!important}
html body .top h1{font-size:0!important;line-height:1!important;flex:1}
html body .top h1 img.logo{display:none!important}
html body .top h1:before{content:"Belink";font:600 26px BMSerif,serif;letter-spacing:-.03em;color:var(--fg)}
html body .top h1:after{content:"music";font:500 italic 26px BMSerif,serif;color:var(--acc);margin-inline-start:6px}
html body .srch{order:3;flex:1 1 100%;background:var(--card)!important;border:1px solid var(--line)!important;border-radius:14px!important;padding:11px 14px!important}
html body .srch svg{stroke:var(--acc)!important}
@media(min-width:900px){html body .srch{order:2;flex:0 1 420px}}
html body #langBtn{height:38px;padding:0 15px;border-radius:99px;background:transparent;border:1px solid var(--line);color:var(--fg);font:600 13px BMSans,BMAr,sans-serif}
html body .chips{padding:14px clamp(16px,4vw,44px) 4px!important}
html body .chips button,html body #chips button{background:transparent!important;border:1px solid var(--line)!important;color:var(--mut)!important;box-shadow:none!important;border-radius:99px!important}
html body .chips button.on,html body #chips button.on{background:var(--fg)!important;color:#14100d!important;border-color:var(--fg)!important;box-shadow:none!important}
html body .hero{border:0!important;border-radius:28px!important;box-shadow:0 40px 80px -40px #000!important;margin-inline:clamp(16px,4vw,44px)!important;width:calc(100% - 2*clamp(16px,4vw,44px))!important;max-height:440px!important;animation:bmin .8s cubic-bezier(.2,.8,.2,1)}
@keyframes bmin{from{opacity:0;transform:translateY(14px)}}
html body .hero:after{background:linear-gradient(180deg,rgba(20,16,13,0) 25%,rgba(20,16,13,.92))!important}
html body .hero small{color:var(--acc2)!important;text-shadow:none!important;letter-spacing:.22em!important}
html body .hero h2{font:500 clamp(30px,5vw,58px)/1 BMSerif,serif!important;letter-spacing:-.025em!important}
html body .pill{background:var(--acc)!important;color:#1a0f08!important;box-shadow:0 14px 30px -12px rgba(255,122,61,.7)!important;padding:12px 22px!important}
html body .pill.alt{background:rgba(244,233,216,.12)!important;color:var(--fg)!important;border:1px solid rgba(244,233,216,.2)!important;box-shadow:none!important}
html body section h3,html body main h3,html body .bh h2,html body .bx h2,html body .bx-top h2{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--fg)!important;font:500 clamp(22px,2.4vw,30px)/1.1 BMSerif,serif!important;letter-spacing:-.02em!important;text-shadow:none!important}
html body .rail{gap:16px!important;padding-inline:clamp(16px,4vw,44px)!important}
html body .al{width:158px!important}
html body .al img{width:158px!important;height:158px!important;border-radius:16px!important;box-shadow:0 18px 30px -18px #000!important;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){html body .al:hover img{transform:translateY(-4px) rotate(-1deg)}}
html body .al b{font-weight:600!important}
html body .list{padding-inline:clamp(16px,4vw,44px)!important}
html body .tr{border-bottom:1px solid var(--line)!important;padding:9px 0!important}
html body .tr img{border-radius:10px!important}
html body .tr.on b{color:var(--acc)!important}
html body .mini{background:rgba(42,33,26,.92)!important;border:1px solid var(--line);border-radius:20px!important;box-shadow:0 20px 50px -10px #000!important;left:clamp(8px,3vw,44px)!important;right:clamp(8px,3vw,44px)!important}
html body .mini .bar b{background:var(--acc)!important}
html body .tabs{background:rgba(20,16,13,.92)!important;border-top:1px solid var(--line)!important}
html body .tabs button.on{color:var(--acc)!important}
html body .full{background:#14100d!important}
html body .full .bgx{filter:blur(70px) saturate(1.3) brightness(.45)!important}
html body .full h4{font:500 26px BMSerif,serif!important}
html body .full .art{border-radius:24px!important;box-shadow:0 40px 80px -20px #000!important}
html body #seek{accent-color:var(--acc)}
html body .ctl .sm.on svg{fill:var(--acc)!important}
html body .ctl .big{background:var(--fg);border-radius:50%;width:76px;height:76px}html body .ctl .big svg{fill:#14100d!important;width:40px!important;height:40px!important}
html body .bh-chip,html body .bx-ch,html body .bx-c{border-color:var(--line)!important;background:transparent!important;color:var(--mut)!important;box-shadow:none!important}
html body .bh-chip.on,html body .bx-ch.on,html body .bx-c.on{background:var(--fg)!important;color:#14100d!important;border-color:var(--fg)!important}
html body .bh-q,html body .bx-q,html body input[type=search]{background:var(--card)!important;border:1px solid var(--line)!important;color:var(--fg)!important}
html body .bh-btn{border:1px solid var(--line)!important;background:transparent!important;color:var(--fg)!important;box-shadow:none!important}
html body .bh-card .im,html body .bx-card img{border:0!important;border-radius:16px!important}
html body .hero,html body .al img,html body .bh-card .im{background-color:var(--card)!important}
html[dir=rtl] body,html[dir=rtl] body button,html[dir=rtl] body input{font-family:BMAr,BMSans,sans-serif!important}
html[dir=rtl] body .hero h2,html[dir=rtl] body section h3,html[dir=rtl] body main h3,html[dir=rtl] body .bh h2{font-family:BMAr,sans-serif!important;font-weight:800!important}
html[dir=rtl] body .al,html[dir=rtl] body .tr{text-align:right!important}
html body .top #langBtn{order:2}@media(min-width:900px){html body .top #langBtn{order:5}}
html body .srch input{border:0!important;background:none!important;outline:none!important;box-shadow:none!important}html body .top h1{direction:ltr;text-align:start}html[dir=rtl] body .top h1{text-align:right}