/* Sargam player */
body.app{padding:104px 0 150px}
.view{width:min(1100px,100% - 40px);margin-inline:auto}
.view h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.8rem,8vw,5.5rem);line-height:1;margin:0 0 .4rem}
.view h2{font-weight:500;font-size:1.5rem;margin:3rem 0 1rem}
.sub{color:var(--mute);margin:0 0 2rem;max-width:50ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:.5rem}
.chip{padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid rgba(30,26,23,.35);font-size:1rem;transition:.2s}
.chip:hover,.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.empty{color:var(--mute);font-style:italic;padding:2rem 0}
/* track list */
.tracks{display:grid}
.row{display:grid;grid-template-columns:36px 48px 1fr 1fr 56px 40px;align-items:center;gap:14px;padding:.55rem .6rem;border-radius:14px;transition:background .2s;cursor:pointer}
.row:hover{background:rgba(30,26,23,.06)}
.row.now{background:rgba(227,160,24,.2)}
.row .n{text-align:center;color:var(--mute);font-variant-numeric:tabular-nums}
.row .n svg{margin:auto;display:none;width:16px}
.row:hover .n b,.row.now .n b{display:none}.row:hover .n svg,.row.now .n svg{display:block}
.row .th{width:48px;height:48px;border-radius:8px;overflow:hidden}
.row .t b{display:block;font-weight:500;line-height:1.2}.row .t small,.row .al{color:var(--mute);font-size:.95rem}
.row .tm{color:var(--mute);font-variant-numeric:tabular-nums;text-align:right;font-size:.95rem}
.heart{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--mute);transition:.2s}
.heart:hover{color:var(--terracotta);transform:scale(1.15)}
.heart.on{color:var(--terracotta)}.heart.on svg{fill:currentColor}
@media(max-width:700px){.row{grid-template-columns:30px 44px 1fr 36px}.row .al,.row .tm{display:none}}
/* album header */
.ahead{display:grid;grid-template-columns:min(300px,38%) 1fr;gap:clamp(20px,4vw,50px);align-items:end;margin-bottom:2rem}
.ahead .cover{border-radius:20px;box-shadow:0 30px 60px rgba(30,26,23,.25)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.6rem;border-radius:999px;background:var(--turmeric);color:var(--ink);font-weight:500;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}.btn.line{background:none;border:1.5px solid var(--ink)}
@media(max-width:600px){.ahead{grid-template-columns:1fr;align-items:start}.ahead .cover{max-width:240px}}
/* search */
.search{width:100%;font:inherit;font-size:1.6rem;padding:1rem 1.4rem;border-radius:999px;border:1.5px solid rgba(30,26,23,.35);background:transparent;color:var(--ink);margin-bottom:1.6rem}
.search:focus{outline:none;border-color:var(--terracotta)}
/* bar */
.bar{position:fixed;z-index:70;left:50%;bottom:16px;transform:translateX(-50%);width:min(900px,100% - 24px);display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.1fr);align-items:center;gap:14px;padding:.6rem .8rem .8rem;border-radius:26px;background:rgba(250,243,231,.78);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(30,26,23,.12);box-shadow:0 14px 40px rgba(30,26,23,.18)}
.bar .meta{display:flex;align-items:center;gap:12px;min-width:0;text-align:left}
.bar .meta .th{width:50px;height:50px;border-radius:10px;overflow:hidden;flex:none;background:var(--ink)}
.bar .meta div{min-width:0}.bar b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.bar small{color:var(--mute);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctl{display:flex;align-items:center;gap:6px}
.ib{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;transition:background .2s,transform .2s}
.ib:hover{background:rgba(30,26,23,.08)}.ib svg{width:20px;height:20px}
.ib.play{width:52px;height:52px;background:var(--ink);color:var(--cream)}.ib.play:hover{background:var(--terracotta);transform:scale(1.06)}
.ib.on{color:var(--terracotta)}
.right{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.vol{width:90px}
.prog{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--mute);font-variant-numeric:tabular-nums}
.prog span{width:2.6em}.prog span:last-child{text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;height:18px;background:transparent;width:100%;cursor:pointer;--p:0%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--terracotta) var(--p),rgba(30,26,23,.18) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(30,26,23,.18)}
input[type=range]::-moz-range-progress{height:4px;background:var(--terracotta);border-radius:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ink);margin-top:-5px;border:2px solid var(--cream)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--cream)}
.bar.idle{display:none}
@media(max-width:700px){.bar{grid-template-columns:1fr auto;border-radius:22px}.right{display:none}.vol{display:none}}
/* full screen */
.full{position:fixed;inset:0;z-index:90;background:var(--cream);transform:translateY(100%);overflow-y:auto;visibility:hidden}
.full .in{width:min(1000px,100% - 40px);margin:0 auto;padding:70px 0 40px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center;min-height:100%}
.full .cover{border-radius:24px;box-shadow:0 40px 80px rgba(30,26,23,.28)}
.full h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,6vw,4rem);line-height:1;margin:0}
.full .artist{color:var(--mute);margin:.4rem 0 1.2rem}
.viz{width:100%;height:90px;display:block;margin:1rem 0}
.close{position:absolute;top:14px;right:16px}
.queue{margin-top:1.4rem;max-height:200px;overflow:auto}
.queue .row{grid-template-columns:30px 40px 1fr 56px}.queue .row .th{width:40px;height:40px}.queue .al{display:none}
@media(max-width:760px){.full .in{grid-template-columns:1fr;padding-top:60px}.full .cover{max-width:300px;margin:0 auto}}
.toast{position:fixed;z-index:120;left:50%;top:90px;transform:translateX(-50%);background:var(--ink);color:var(--cream);padding:.6rem 1.2rem;border-radius:999px;font-size:.95rem;opacity:0;pointer-events:none}
.queue .heart{display:none}
.row .t{min-width:0}.row .t b,.row .t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}