:root{--red:#dd3038;--red-dark:#b91f28;--ink:#171413;--ink-2:#26211f;--cream:#f4efe8;--paper:#fffdfa;--muted:#756c65;--line:#e8e0d7;--sidebar:238px;--player:92px;--ease:cubic-bezier(.2,.8,.2,1);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:3px solid rgba(221,48,56,.25);outline-offset:2px}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.fill{fill:currentColor;stroke:none}.visually-hidden{position:fixed;left:-9999px;width:1px;height:1px;opacity:0}
.titlebar{display:none;position:fixed;inset:0 0 auto 0;height:30px;z-index:1000}.desktop-app .titlebar{display:block}.desktop-app.is-windows .titlebar{background:#171413}.titlebar-drag{position:absolute;inset:0;-webkit-app-region:drag}.window-actions{display:none;position:absolute;right:0;top:0;height:30px;-webkit-app-region:no-drag}.is-windows .window-actions{display:flex}.window-actions button{border:0;background:transparent;color:#d8d2ce;width:44px;cursor:pointer}.window-actions button:hover{background:rgba(255,255,255,.12)}.window-actions button:last-child:hover{background:#c42b32;color:#fff}
.app-shell{display:grid;grid-template-columns:var(--sidebar) 1fr;height:calc(100vh - var(--player));background:var(--cream)}.desktop-app .app-shell{padding-top:30px;height:calc(100vh - var(--player))}.sidebar{position:relative;z-index:20;display:flex;flex-direction:column;padding:26px 18px 20px;background:var(--ink);color:#fff;border-right:1px solid rgba(255,255,255,.05)}.desktop-app .sidebar{padding-top:18px}.brand{display:flex;align-items:center;gap:12px;padding:0 7px 27px;color:#fff;text-decoration:none}.brand img{width:43px;height:43px;border-radius:13px;box-shadow:0 7px 20px rgba(0,0,0,.3)}.brand span{display:flex;flex-direction:column;font-size:18px;line-height:.95;letter-spacing:-.04em}.brand strong{font-weight:500}.brand b{font-weight:850;color:#ff626a}
.main-nav p{margin:0 10px 9px;color:#8f8580;font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}.nav-item{position:relative;width:100%;display:flex;align-items:center;gap:12px;border:0;border-radius:11px;padding:10px 11px;background:transparent;color:#bdb5b0;font-size:13px;font-weight:650;cursor:pointer;transition:.2s var(--ease)}.nav-item svg{width:18px}.nav-item:hover{color:#fff;background:rgba(255,255,255,.06)}.nav-item.is-active{color:#fff;background:rgba(221,48,56,.17)}.nav-item.is-active:before{content:"";position:absolute;left:-18px;width:3px;height:22px;border-radius:0 5px 5px 0;background:var(--red)}.nav-item em{margin-left:auto;min-width:20px;padding:2px 6px;border-radius:10px;background:#38312e;color:#ccc;font-size:10px;font-style:normal;text-align:center}
.local-card{margin-top:auto;padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:linear-gradient(145deg,#2c2623,#211d1b)}.local-card-icon{display:grid;place-items:center;width:32px;height:32px;margin-bottom:10px;border-radius:9px;background:rgba(221,48,56,.15);color:#ff737a}.local-card strong{font-size:12px}.local-card p{margin:5px 0 12px;color:#99908b;font-size:10px;line-height:1.45}.local-card .secondary-button{width:100%;justify-content:center;border-color:#4b413c;background:#342d29;color:#fff;font-size:10px}.local-card small{display:block;margin-top:9px;color:#766e6a;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connection-status{display:flex;align-items:center;gap:9px;margin:15px 5px 0}.connection-status>span{width:7px;height:7px;border-radius:50%;background:#e2a32f;box-shadow:0 0 0 4px rgba(226,163,47,.1)}.connection-status.is-online>span{background:#43b879;box-shadow:0 0 0 4px rgba(67,184,121,.1)}.connection-status.is-offline>span{background:#e35258}.connection-status div{display:flex;flex-direction:column}.connection-status strong{font-size:9px}.connection-status small{color:#77706c;font-size:8px}
.main-content{min-width:0;position:relative;background:var(--cream)}.topbar{height:72px;display:flex;align-items:center;gap:11px;padding:0 32px;border-bottom:1px solid rgba(32,27,25,.07);background:rgba(244,239,232,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:relative;z-index:10}.search-box{display:flex;align-items:center;gap:9px;width:min(370px,44vw);height:39px;padding:0 12px;border:1px solid #dfd6cc;border-radius:12px;background:#fffdfa;color:#8b817a}.search-box svg{width:17px}.search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:12px}.search-box input::placeholder{color:#9d948d}.search-box kbd{border:1px solid #e1dad2;border-radius:5px;padding:2px 5px;background:#f6f2ed;color:#99908a;font-family:inherit;font-size:8px}.primary-button,.secondary-button,.round-button,.icon-button{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .2s}.primary-button{justify-content:center;min-height:39px;padding:0 17px;border-radius:11px;background:var(--red);color:#fff;font-size:11px;font-weight:750;box-shadow:0 7px 18px rgba(201,34,44,.2)}.primary-button:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:0 9px 22px rgba(201,34,44,.28)}.primary-button svg{width:16px}.secondary-button{min-height:35px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:700}.secondary-button svg{width:15px}.round-button,.icon-button{justify-content:center;width:39px;height:39px;padding:0;border:1px solid #e0d7cf;border-radius:50%;background:rgba(255,255,255,.75)}.round-button:hover,.icon-button:hover{background:#fff;transform:translateY(-1px)}.icon-button{margin-left:auto;border-radius:11px;color:#796f68}.top-add{margin-left:0}.mobile-menu{display:none;border:0;background:transparent;font-size:22px}
.content-scroll{height:calc(100vh - var(--player) - 72px);overflow:auto;scroll-behavior:smooth}.desktop-app .content-scroll{height:calc(100vh - var(--player) - 102px)}.hero{min-height:330px;display:grid;grid-template-columns:minmax(390px,1.1fr) minmax(310px,.9fr);position:relative;overflow:hidden;padding:42px clamp(34px,5vw,72px) 36px;background:radial-gradient(circle at 85% 15%,rgba(220,48,56,.15),transparent 33%),linear-gradient(120deg,#f8f3ec,#ede5dc)}.hero:after{content:"";position:absolute;right:-70px;bottom:-140px;width:340px;height:340px;border:1px solid rgba(99,66,47,.08);border-radius:50%}.hero-copy{position:relative;z-index:2;align-self:center}.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:13px;color:#9e3c3e;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(221,48,56,.13);animation:pulse 2.2s infinite}.hero h1{margin:0;max-width:540px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,5.2vw,75px);font-weight:500;line-height:.91;letter-spacing:-.065em}.hero h1 em{color:var(--red);font-weight:500}.hero-copy>p{max-width:445px;margin:20px 0 23px;color:#6c625b;font-size:13px;line-height:1.65}.hero-actions{display:flex;gap:10px}.hero-play{min-height:43px;padding:0 21px}.hero-play svg{fill:#fff}
.hero-art{position:relative;min-height:250px}.hero-glow{position:absolute;width:280px;height:280px;left:50%;top:50%;border-radius:50%;background:rgba(221,48,56,.14);filter:blur(35px);transform:translate(-50%,-50%)}.hero-art img{position:absolute;z-index:3;left:50%;bottom:-91px;width:min(350px,35vw);max-height:390px;object-fit:contain;object-position:top;filter:drop-shadow(0 22px 28px rgba(56,29,18,.23));transform:translateX(-50%);border-radius:48% 48% 12% 12%}.vinyl{position:absolute;z-index:1;left:50%;top:50%;width:270px;height:270px;border-radius:50%;background:repeating-radial-gradient(circle at center,#282421 0,#282421 2px,#171514 3px,#171514 7px);box-shadow:0 22px 40px rgba(50,30,20,.23);transform:translate(-50%,-45%) rotate(-15deg)}.vinyl:before{content:"";position:absolute;inset:43%;border-radius:50%;background:var(--red);box-shadow:0 0 0 25px #f3dfcf}.vinyl i{position:absolute;inset:49%;z-index:2;border-radius:50%;background:#1c1917}.live-pill{position:absolute;z-index:5;right:5%;top:11%;display:flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid rgba(255,255,255,.45);border-radius:15px;background:rgba(255,255,255,.74);box-shadow:0 8px 20px rgba(70,40,30,.1);backdrop-filter:blur(10px);font-size:8px;font-weight:850;letter-spacing:.12em}.live-pill span{width:5px;height:5px;border-radius:50%;background:var(--red)}.float-note{position:absolute;z-index:4;color:rgba(221,48,56,.3);font-family:Georgia;font-size:33px;animation:float 4s ease-in-out infinite}.note-one{left:6%;top:24%}.note-two{right:2%;bottom:18%;animation-delay:-2s}
.library-section{padding:30px clamp(26px,4vw,55px) 55px;background:var(--paper);min-height:380px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.section-heading span{display:block;margin-bottom:4px;color:var(--red);font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.section-heading h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:27px;font-weight:500;letter-spacing:-.035em}.section-heading p{margin:0;color:#9a918a;font-size:10px}.track-table{border:1px solid #ece5de;border-radius:15px;overflow:hidden;background:#fff}.track-head,.track-row{display:grid;grid-template-columns:42px minmax(200px,1.7fr) minmax(100px,.75fr) minmax(95px,.75fr) 48px 34px;align-items:center;column-gap:10px;padding:0 14px}.track-head{height:37px;border-bottom:1px solid #eee8e2;background:#fbf9f6;color:#9d948d;font-size:8px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.track-head svg{width:13px}.track-row{min-height:65px;border-bottom:1px solid #f1ece7;transition:.18s;cursor:default}.track-row:last-child{border-bottom:0}.track-row:hover{background:#fcf8f5}.track-row.is-current{background:#fff4f3}.track-index{position:relative;color:#9f9690;font-size:10px;text-align:center}.track-index button{display:none;position:absolute;inset:50% auto auto 50%;width:29px;height:29px;border:0;border-radius:50%;background:var(--red);color:#fff;transform:translate(-50%,-50%);cursor:pointer}.track-index button svg{width:12px;fill:#fff}.track-row:hover .track-index>span,.track-row.is-current .track-index>span{visibility:hidden}.track-row:hover .track-index button,.track-row.is-current .track-index button{display:grid;place-items:center}.track-row.is-current .track-index button{box-shadow:0 5px 12px rgba(221,48,56,.25)}.track-title{min-width:0;display:flex;align-items:center;gap:11px}.track-thumb{position:relative;flex:0 0 auto;width:39px;height:39px;overflow:hidden;border-radius:8px;background:#2b2421}.track-thumb img{width:100%;height:100%;object-fit:cover}.track-thumb.local{display:grid;place-items:center;background:linear-gradient(145deg,#39302c,#201c1a);color:#e4ada5}.track-thumb.local svg{width:17px}.track-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.track-copy strong,.track-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-copy strong{font-size:11px}.track-row.is-current .track-copy strong{color:var(--red)}.track-copy small{color:#978e87;font-size:9px}.source-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;padding:4px 7px;border-radius:7px;background:#f7f2ed;color:#7d746e;font-size:8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.source-badge.online:before{content:"";width:5px;height:5px;border-radius:50%;background:#4aae78}.popularity{display:flex;align-items:center;gap:4px;color:var(--red);font-size:9px}.popularity svg{width:12px;fill:rgba(221,48,56,.16)}.popularity span{color:#918780}.track-like,.track-more{display:grid;place-items:center;border:0;background:transparent;color:#aaa09a;cursor:pointer}.track-like svg{width:15px}.track-like.is-liked{color:var(--red)}.track-like.is-liked svg{fill:currentColor}.track-more svg{width:16px}.empty-state{text-align:center;padding:48px 20px}.empty-state div{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:14px;background:#f6eeea;color:var(--red)}.empty-state h3{margin:0;font-family:Georgia,serif;font-size:20px}.empty-state p{margin:7px 0 15px;color:var(--muted);font-size:11px}
.player-bar{position:fixed;z-index:100;left:0;right:0;bottom:0;height:var(--player);display:grid;grid-template-columns:minmax(230px,1fr) minmax(350px,1.45fr) minmax(190px,1fr);align-items:center;padding:0 24px;border-top:1px solid rgba(255,255,255,.08);background:rgba(23,20,19,.985);color:#fff;box-shadow:0 -10px 30px rgba(40,25,20,.12)}.now-playing{min-width:0;display:flex;align-items:center;gap:12px}.mini-cover{position:relative;flex:0 0 auto;width:54px;height:54px;overflow:hidden;border-radius:10px;background:#332c29}.mini-cover img{width:100%;height:100%;object-fit:cover}.playing-bars{display:none;position:absolute;inset:auto 5px 5px auto;align-items:end;gap:2px;height:16px;padding:3px;border-radius:5px;background:rgba(221,48,56,.92)}.is-playing .playing-bars{display:flex}.playing-bars i{width:2px;height:8px;border-radius:2px;background:#fff;animation:bars .8s ease-in-out infinite}.playing-bars i:nth-child(2){animation-delay:-.25s}.playing-bars i:nth-child(3){animation-delay:-.5s}.now-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.now-copy strong,.now-copy span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-copy strong{font-size:11px}.now-copy span{color:#8d8580;font-size:9px}.like-button{flex:0 0 auto;border:0;background:transparent;color:#817975;cursor:pointer}.like-button svg{width:17px}.like-button.is-liked{color:#ff555e}.like-button.is-liked svg{fill:currentColor}.transport{display:flex;flex-direction:column;gap:8px}.transport-buttons{display:flex;align-items:center;justify-content:center;gap:17px}.transport-buttons button{display:grid;place-items:center;width:27px;height:27px;border:0;background:transparent;color:#9d9590;cursor:pointer}.transport-buttons button:hover,.transport-buttons button.is-active{color:#fff}.transport-buttons button.is-active:after{content:"";position:absolute;margin-top:34px;width:4px;height:4px;border-radius:50%;background:var(--red)}.transport-buttons svg{width:15px}.transport-buttons .main-play{width:36px;height:36px;border-radius:50%;background:#fff;color:#171413;box-shadow:0 5px 15px rgba(0,0,0,.3)}.transport-buttons .main-play:hover{transform:scale(1.04)}.transport-buttons .main-play svg{width:16px;fill:currentColor}.timeline{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px;color:#756e6a;font-size:8px;text-align:center}.timeline input,.volume-control input{width:100%;height:3px;margin:0;accent-color:var(--red);cursor:pointer}.volume-control{justify-self:end;width:min(190px,100%);display:flex;align-items:center;gap:9px;color:#aaa19c}.volume-control svg{width:16px}.volume-control span{width:26px;font-size:8px}.toast-region{position:fixed;z-index:500;right:20px;bottom:calc(var(--player) + 18px);display:flex;flex-direction:column;gap:8px}.toast{max-width:310px;padding:11px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#25211f;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.22);font-size:10px;animation:toast-in .25s var(--ease)}.toast.is-error{border-left:3px solid var(--red)}.mobile-backdrop{display:none}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(221,48,56,0)}}@keyframes float{50%{transform:translateY(-12px) rotate(7deg)}}@keyframes bars{0%,100%{height:4px}50%{height:11px}}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
@media(max-width:900px){:root{--sidebar:210px}.hero{grid-template-columns:1fr .65fr;padding-left:38px;padding-right:30px}.hero h1{font-size:50px}.hero-art img{width:280px}.vinyl{width:215px;height:215px}.track-head,.track-row{grid-template-columns:35px minmax(190px,1fr) 95px 40px 30px}.track-head>*:nth-child(4),.track-row>*:nth-child(4){display:none}.player-bar{grid-template-columns:minmax(210px,1fr) minmax(330px,1.4fr)}.volume-control{display:none}}
@media(max-width:700px){html,body{overflow:hidden}:root{--player:80px}.app-shell{display:block}.desktop-app .app-shell{padding-top:30px}.sidebar{position:fixed;inset:0 auto var(--player) 0;width:250px;transform:translateX(-102%);transition:transform .3s var(--ease);box-shadow:20px 0 50px rgba(0,0,0,.25)}.menu-open .sidebar{transform:none}.mobile-backdrop{position:fixed;z-index:15;inset:0 0 var(--player);background:rgba(20,15,13,.45);backdrop-filter:blur(3px)}.menu-open .mobile-backdrop{display:block}.topbar{height:61px;padding:0 15px}.mobile-menu{display:block}.search-box{width:auto;flex:1}.search-box kbd,.top-add span{display:none}.top-add{width:39px;padding:0}.content-scroll{height:calc(100vh - var(--player) - 61px)}.desktop-app .content-scroll{height:calc(100vh - var(--player) - 91px)}.hero{min-height:345px;display:block;padding:36px 24px}.hero h1{font-size:48px}.hero-copy>p{max-width:75%;font-size:12px}.hero-art{position:absolute;right:-70px;bottom:-30px;width:280px;opacity:.72}.hero-art img{width:245px;bottom:-60px}.vinyl{width:190px;height:190px}.live-pill,.float-note{display:none}.library-section{padding:25px 14px 45px}.section-heading h2{font-size:22px}.track-head{display:none}.track-row{grid-template-columns:34px minmax(0,1fr) 33px;padding:0 9px;column-gap:7px}.track-row>*:nth-child(3),.track-row>*:nth-child(4),.track-row>*:nth-child(5){display:none}.track-thumb{width:38px;height:38px}.player-bar{grid-template-columns:minmax(0,1fr) auto;height:var(--player);padding:0 13px}.mini-cover{width:48px;height:48px}.transport{display:block}.transport-buttons{gap:2px}.transport-buttons button:not(.main-play){display:none}.transport-buttons .main-play{width:40px;height:40px}.timeline,.volume-control,.now-playing>.like-button{display:none}.now-copy strong{font-size:10px}}
@media(max-height:650px) and (min-width:701px){.local-card{display:none}.hero{min-height:285px;padding-top:30px;padding-bottom:27px}.hero h1{font-size:52px}.hero-copy>p{margin:14px 0 17px}.hero-art img{width:285px}.content-scroll{height:calc(100vh - var(--player) - 72px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Rádio Koffie 2.1: banner compacto, mascote recortado e mini reprodutor */
.hero{min-height:238px;grid-template-columns:minmax(390px,1.2fr) minmax(280px,.8fr);padding:25px clamp(34px,5vw,68px) 24px}
.hero h1{font-size:clamp(42px,4.25vw,62px);line-height:.9}
.hero-copy>p{max-width:490px;margin:13px 0 16px;line-height:1.5}
.hero-play{min-height:39px}
.hero-art{min-height:188px}
.hero-art img{bottom:-28px;width:min(300px,28vw);max-height:300px;object-fit:contain;object-position:center;border-radius:0;filter:drop-shadow(0 15px 18px rgba(56,29,18,.18))}
.hero-glow{width:235px;height:235px}
.vinyl{display:none!important}
.live-pill{right:4%;top:7%}
.note-one{left:5%;top:14%}.note-two{right:0;bottom:13%}
.player-tools{justify-self:end;display:flex;align-items:center;gap:13px;width:min(245px,100%)}
.mini-player-button{display:none;place-items:center;flex:0 0 auto;width:34px;height:34px;border:1px solid #4a423e;border-radius:9px;background:#272321;color:#bdb4af;cursor:pointer;transition:.18s}
.desktop-app .mini-player-button{display:grid}
.mini-player-button:hover{border-color:#6a5f59;background:#332e2b;color:#fff;transform:translateY(-1px)}
.mini-player-button svg{width:16px}
.player-tools .volume-control{justify-self:auto;flex:1;width:auto}
body.embed-mode .titlebar,body.embed-mode .sidebar,body.embed-mode .topbar{display:none!important}
body.embed-mode .app-shell{display:block;height:calc(100vh - var(--player));padding-top:0}
body.embed-mode .main-content{height:100%}
body.embed-mode .content-scroll{height:calc(100vh - var(--player))}
body.embed-mode .hero{min-height:210px;padding:22px 36px}
body.embed-mode .library-section{padding:22px 30px 40px}
body.embed-mode .player-bar{grid-template-columns:minmax(220px,1fr) minmax(340px,1.45fr) minmax(160px,.8fr)}
@media(max-width:900px){.hero{min-height:228px;padding:24px 32px}.hero h1{font-size:45px}.hero-art img{width:260px;bottom:-24px}.player-tools{display:none}.player-bar{grid-template-columns:minmax(210px,1fr) minmax(330px,1.4fr)}}
@media(max-width:700px){.hero{min-height:305px;padding:31px 24px}.hero h1{font-size:43px}.hero-copy>p{max-width:78%}.hero-art{right:-72px;bottom:-40px}.hero-art img{width:230px;bottom:-18px;opacity:1}.player-tools{display:none}body.embed-mode .hero{min-height:285px;padding:28px 22px}body.embed-mode .library-section{padding:22px 14px 38px}}

/* Rádio Koffie 2.2: navegação sem busca e experiência móvel */
.topbar-brand{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-brand img{width:38px;height:38px;border-radius:10px}
.topbar-brand span{display:flex;min-width:0;flex-direction:column;gap:2px}
.topbar-brand strong{font-size:12px;letter-spacing:-.02em}
.topbar-brand small{color:#8f857e;font-size:9px}
.topbar .icon-button{margin-left:auto}
.track-row{cursor:pointer}

@media(max-width:700px){
  :root{--player:92px}
  html,body{height:100%;height:100dvh;overscroll-behavior:none}
  .app-shell{height:calc(100dvh - var(--player) - env(safe-area-inset-bottom));min-height:0}
  .desktop-app .app-shell{padding-top:30px;height:calc(100dvh - var(--player) - env(safe-area-inset-bottom))}
  .main-content{height:100%;min-height:0}
  .topbar{box-sizing:content-box;height:58px;padding:env(safe-area-inset-top) 16px 0;gap:12px}
  .mobile-menu{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:12px;background:#fffdfa;color:#312b28;font-size:21px;line-height:1}
  .topbar-brand{flex:1}
  .topbar-brand img{width:38px;height:38px;border-radius:10px}
  .topbar-brand strong{font-size:13px}
  .topbar-brand small{font-size:9px}
  .topbar .icon-button{width:40px;height:40px;flex:0 0 auto}
  .content-scroll{height:calc(100dvh - var(--player) - 59px - env(safe-area-inset-top) - env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  .desktop-app .content-scroll{height:calc(100dvh - var(--player) - 89px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .sidebar{inset:0 auto calc(var(--player) + env(safe-area-inset-bottom)) 0;padding-top:calc(26px + env(safe-area-inset-top));width:min(82vw,300px)}
  .mobile-backdrop{inset:0 0 calc(var(--player) + env(safe-area-inset-bottom))}
  .hero{min-height:270px;padding:28px 20px 25px}
  .eyebrow{margin-bottom:11px;font-size:9px}
  .hero h1{max-width:310px;font-size:clamp(38px,11.5vw,46px);line-height:.91}
  .hero-copy>p{max-width:70%;margin:14px 0 17px;font-size:11px;line-height:1.45}
  .hero-actions{gap:8px}
  .hero-play{min-height:42px;padding:0 17px;font-size:11px}
  .round-button{width:42px;height:42px}
  .hero-art{right:-54px;bottom:-28px;width:220px;min-height:210px;opacity:.9}
  .hero-art img{width:205px;max-height:220px;bottom:-5px}
  .hero-glow{width:185px;height:185px}
  .library-section{padding:22px 14px 38px;min-height:calc(100dvh - 270px)}
  .section-heading{align-items:flex-end;margin-bottom:14px;gap:12px}
  .section-heading span{font-size:8px}
  .section-heading h2{font-size:clamp(21px,6.7vw,27px);line-height:1.04}
  .section-heading p{flex:0 0 auto;padding-bottom:2px;font-size:9px}
  .track-table{border-radius:14px}
  .track-row{grid-template-columns:32px minmax(0,1fr) 40px;min-height:72px;padding:0 8px;column-gap:8px;touch-action:manipulation}
  .track-index button{display:grid;place-items:center;width:31px;height:31px}
  .track-row .track-index>span{visibility:hidden}
  .track-row:not(.is-current) .track-index button{background:#f5eeea;color:#9d504f;box-shadow:none}
  .track-row:not(.is-current) .track-index button svg{fill:currentColor}
  .track-title{gap:10px}
  .track-thumb{width:45px;height:45px;border-radius:10px}
  .track-copy strong{font-size:12px}
  .track-copy small{font-size:9px}
  .track-like{width:40px;height:40px}
  .track-like svg{width:19px}
  .player-bar{box-sizing:content-box;grid-template-columns:minmax(0,1fr) auto;height:var(--player);padding:0 12px env(safe-area-inset-bottom);gap:8px}
  .now-playing{gap:9px}
  .mini-cover{width:50px;height:50px;border-radius:12px}
  .now-copy{gap:3px}
  .now-copy strong{font-size:11px}
  .now-copy span{font-size:9px}
  .transport{display:block}
  .transport-buttons{gap:0}
  .transport-buttons button{width:36px;height:42px}
  .transport-buttons button[data-shuffle],.transport-buttons button[data-repeat]{display:none}
  .transport-buttons button[data-prev],.transport-buttons button[data-next]{display:grid;color:#c8c0bc}
  .transport-buttons .main-play{display:grid;width:44px;height:44px;margin:0 2px}
  .transport-buttons svg{width:15px}
  .toast-region{right:12px;left:12px;bottom:calc(var(--player) + env(safe-area-inset-bottom) + 12px)}
  .toast{max-width:none}
  body.embed-mode .app-shell{height:calc(100dvh - var(--player) - env(safe-area-inset-bottom))}
  body.embed-mode .content-scroll{height:calc(100dvh - var(--player) - env(safe-area-inset-bottom))}
  body.embed-mode .hero{min-height:260px;padding:26px 20px 23px}
  body.embed-mode .library-section{padding:21px 14px 38px}
}

@media(max-width:360px){
  .topbar-brand small{display:none}
  .hero{min-height:252px;padding-left:17px}
  .hero h1{font-size:37px}
  .hero-copy>p{max-width:67%;font-size:10px}
  .hero-art{right:-70px;width:205px}
  .hero-art img{width:190px}
  .section-heading p{display:none}
  .mini-cover{width:46px;height:46px}
  .now-copy strong{max-width:120px}
  .transport-buttons button{width:31px}
  .transport-buttons .main-play{width:42px}
}