@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Sans:wght@500;600;700&display=swap');

:root{color-scheme:dark;--bg:#151412;--panel:#1b1a17;--border:#302d28;--ink:#f5eee6;--muted:#aaa095;--accent:#ff8650;--bar:98px;font-family:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);min-width:300px}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:disabled,input:disabled{opacity:.45;cursor:default}
svg{width:19px;height:19px;display:block;flex:none}
.shell{min-height:calc(100dvh - var(--bar));display:grid;grid-template-columns:218px minmax(0,1fr);margin-bottom:var(--bar)}
.sidebar{border-right:1px solid var(--border);background:#191815;display:flex;flex-direction:column;padding:30px 17px 20px}
.brand{display:flex;align-items:center;font:700 23px "Instrument Sans",system-ui,sans-serif;letter-spacing:-.9px;margin:0 0 54px 6px}
.brand-mark{display:grid;place-items:center;background:var(--accent);color:#24140c;border-radius:9px;width:34px;height:34px;margin-right:9px}
.brand-dot{color:var(--accent)}
.nav-label,.eyebrow,.track-head{text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:700}
.nav-label{color:var(--muted);padding-left:12px;margin-bottom:12px}
nav{display:grid;gap:4px}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border:0;background:none;color:var(--muted);border-radius:8px;text-align:left;font-size:13px;white-space:nowrap}
.nav-item:hover,.nav-item.active{background:#33241d;color:#ff9a6d}
.sidebar-foot{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-top:auto;padding:28px 0 0 12px}
.online-dot,.eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
main{min-width:0;padding:24px clamp(18px,2.65vw,44px) 26px;max-width:1600px;width:100%;margin:auto auto 0;align-self:start;margin-top:0}
.top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:24px}
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:#1b1a17;border-radius:9px;padding:0 12px;min-width:0;width:320px;color:var(--muted)}
.search input{border:0;background:none;min-width:0;width:100%;color:var(--ink);height:40px;outline:none}
.search:focus-within{border-color:var(--accent)}
.import,.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;font-weight:700;white-space:nowrap}
.import{border:1px solid #4c3b31;background:#241e19;color:#ffa477;padding:9px 12px;font-size:13px}
.import:hover{background:#37271e}
.content{display:grid;grid-template-columns:minmax(0,1fr) minmax(228px,29%);gap:24px;align-items:start}
.collection{min-width:0}
.hero{min-height:306px;display:flex;align-items:center;border:1px solid #684131;border-radius:15px;overflow:hidden;background:linear-gradient(90deg,#24140fee 0%,#26130fbf 36%,#27130f0d 80%),url("assets/horizonte.jpg") center 54%/cover,#66341f}
.hero-copy{padding:27px clamp(23px,4vw,51px)}
.eyebrow{color:#ffad85;display:flex;align-items:center;gap:8px}
h1,h2,h3,p{margin:0}
h1{font:700 clamp(40px,5vw,77px)/.91 "Instrument Sans",system-ui,sans-serif;letter-spacing:-.066em;margin:13px 0}
.hero p{font-size:13px;color:#f5d4c3;margin-bottom:20px}
.hero p span{margin:0 4px}
.primary{border:0;background:var(--accent);color:#21140e;padding:10px 15px;font-size:13px}
.primary:hover,.play-main:hover{background:#ffab84}
.primary svg,.play-main svg{fill:currentColor;width:16px;height:16px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:24px 0 11px}
h2{font:700 22px "Instrument Sans",system-ui,sans-serif;letter-spacing:-.045em}
#count,.track-head,.artist,.track-time,.secondary,#now-artist,#mini-artist{color:var(--muted);font-size:12px}
.track-list{background:var(--panel);border:1px solid var(--border);border-radius:15px;overflow:hidden}
.track-head,.track{display:grid;grid-template-columns:24px minmax(0,1.5fr) minmax(0,1fr) 38px 32px;gap:11px;align-items:center;padding:0 8px}
.track-head{font-size:9px;border-bottom:1px solid var(--border);min-height:31px}
.track-head svg{width:14px;height:14px}
.track{min-height:54px;border-bottom:1px solid #282520}
.track:last-child{border-bottom:0}
.track:hover,.track.selected{background:#211c17}
.track.selected .track-name,.track.selected .row-play{color:var(--accent)}
.track-name,.artist,#mini-title,#mini-artist,#now-title,#now-artist,.queue-name,.secondary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-name{display:flex;align-items:center;gap:9px;text-align:left;min-width:0}
.track-name span:last-child{overflow:hidden;text-overflow:ellipsis}
.track-name,.queue-track{background:none;border:0;padding:0;color:inherit;font-size:13px;font-weight:700}
.track-name:hover,.queue-track:hover{color:var(--accent)}
.icon{display:grid;place-items:center;border:0;background:transparent;border-radius:7px;width:32px;height:32px;color:var(--muted);padding:0;flex:none}
.icon:hover,.icon[aria-pressed=true]{color:var(--accent)}
.favorite[aria-pressed=true] svg,#now-favorite[aria-pressed=true] svg{fill:var(--accent)}
.row-play{width:24px;font-size:12px}
.row-play svg,.favorite svg{width:15px;height:15px}
.cover{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:6px;background:var(--cover,#48382f);background-size:cover;background-position:center;color:#fff9;overflow:hidden}
.cover svg{width:47%;height:47%}
.cover.amber{background-image:url("assets/horizonte.jpg"),radial-gradient(circle at 65% 35%,#ff9b49 16%,#a14e32 17%,#38221e 70%)}
.cover.amber svg{display:none}
.violet{--cover:radial-gradient(ellipse at 65% 35%,#c88df0 0%,#694482 25%,#251a37 68%)}
.ocean{--cover:linear-gradient(152deg,#7ca6a3 0%,#3b7478 47%,#163038 48%,#244b50 68%,#15262d 69%)}
.rose{--cover:radial-gradient(circle at 68% 30%,#ffac7f 0%,#c6636c 22%,#75334e 46%,#3c1d37 74%)}
.moss{--cover:linear-gradient(150deg,#b6b376,#667b53 40%,#324b36 41%,#4b664a 57%,#253a30 58%)}
.now{background:var(--panel);border:1px solid var(--border);padding:17px;border-radius:15px;min-width:0}
.now-head,.now-info,.queue-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.now-head{margin-bottom:14px}
.now-head h2{font-size:17px}
.signal{color:var(--accent)}
.large{width:100%;height:auto;aspect-ratio:1; border-radius:9px}
.now-info{margin:13px 0 16px}
.now-info>div,.playing>div:last-child,.queue-track>span:last-child{min-width:0}
#now-title{font-size:16px;font-weight:700;margin-bottom:2px}
.queue-head{border-top:1px solid var(--border);padding-top:10px;margin-bottom:3px}
h3{font-size:13px}
#queue-toggle[aria-expanded=false]{transform:rotate(-90deg)}
.queue-track{display:flex;align-items:center;text-align:left;gap:9px;width:100%;min-height:49px}
.queue-track>span:last-child{display:grid;gap:2px}
.secondary{font-weight:400}
.empty{padding:20px 8px;color:var(--muted);font-size:13px}
.player{position:fixed;z-index:2;bottom:0;left:0;right:0;min-height:var(--bar);display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,1.8fr) minmax(0,1fr);align-items:center;gap:20px;padding:10px clamp(13px,2.5vw,35px);border-top:1px solid #39332c;background:#1b1916}
.playing,.volume,.buttons,.timeline{display:flex;align-items:center;gap:10px}
.playing .cover{width:48px;height:48px}
#mini-title{font-weight:700;font-size:14px}
.buttons{justify-content:center;gap:13px;margin-bottom:4px}
.play-main{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#21140e}
.play-main:hover{color:#21140e}
.timeline{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.timeline span{min-width:32px;text-align:center}
input[type=range]{appearance:none;height:5px;border-radius:9px;background:linear-gradient(90deg,var(--accent) var(--fill,0%),#494039 var(--fill,0%));cursor:pointer;margin:8px 0;min-width:0;width:100%}
input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:var(--accent);border-radius:50%}
input[type=range]::-moz-range-thumb{width:11px;height:11px;background:var(--accent);border:0;border-radius:50%}
.volume{justify-content:end;gap:5px}
.volume input{max-width:92px}
#notice{position:fixed;bottom:calc(var(--bar) + 12px);right:16px;background:#33241d;border:1px solid #674536;border-radius:8px;padding:10px 14px;z-index:3;max-width:calc(100% - 32px);font-size:13px}
@media(max-width:1050px){.shell{grid-template-columns:178px minmax(0,1fr)}.sidebar{padding-inline:12px}.content{gap:15px}.hero{min-height:280px}}
@media(max-width:850px){.shell{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--border);padding:13px 18px;gap:12px}.brand{margin:0}.nav-label,.sidebar-foot{display:none}nav{display:flex;flex-wrap:wrap}.nav-item{padding:7px 9px}.nav-item svg{width:15px;height:15px}main{padding-top:15px}.top{margin-bottom:15px}}
@media(max-width:640px){:root{--bar:117px}.content{grid-template-columns:minmax(0,1fr)}.hero{min-height:245px}.now{display:grid;grid-template-columns:55px minmax(0,1fr);column-gap:11px}.now-head,.queue-head,#queue{grid-column:1/-1}.now-info{margin:0}.queue-head{margin-top:12px}.track-head,.track{grid-template-columns:20px minmax(0,1fr) 33px 30px;gap:7px}.track-head span:nth-child(3),.track .artist{display:none}.player{grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding-block:7px}.playing .cover{width:32px;height:32px}.transport{grid-row:2;grid-column:1/-1}.play-main{width:34px;height:34px}.buttons{margin:0;gap:12px}.volume input{width:55px}.import{font-size:12px}.search input{font-size:13px}}
[hidden]{display:none!important}

body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}
.shell {
  min-height: calc(100dvh - var(--bar) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin-bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
}
.player {
  min-height: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding-inline: max(clamp(13px, 2.5vw, 35px), env(safe-area-inset-left, 0px)) max(clamp(13px, 2.5vw, 35px), env(safe-area-inset-right, 0px));
}
#notice { bottom: calc(var(--bar) + 12px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .player { padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)); }
}