:root{
  --bg:#111012;
  --surface:#171519;
  --surface-2:#211d23;
  --text:#f7f5fa;
  --muted:#aaa5b0;
  --line:rgba(255,255,255,.1);
  --art:url('./assets/default-art.svg');
  --mini:#365fa8;

  /* iOS/PWA layout */
  --top:64px;
  --safe-top:max(env(safe-area-inset-top),18px);
  --header:calc(var(--safe-top) + 10px + var(--top));

  /* Floating bottom stack */
  --nav:66px;
  --dock-bottom:24px;
  --dock-gap:18px;
  --mini-h:66px;
  --content-bottom-clearance:calc(
    var(--dock-bottom) + var(--nav) + var(--dock-gap) + var(--mini-h) + 126px + env(safe-area-inset-bottom)
  );
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;background:#111012}
html,body{margin:0;width:100%;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif}
body{height:122vh;min-height:122vh;overflow:hidden;position:relative;overscroll-behavior:none;background:#111012}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}

/* The 122vh shell is intentional: it was required by the iOS standalone viewport
   behavior in this app. The scroll areas below still use it explicitly. */
#app{position:relative;width:100%;height:122vh;min-height:122vh;overflow:hidden;background:var(--bg)}
.screens{position:relative;width:100%;height:122vh;min-height:122vh;overflow:hidden;background:var(--bg)}
.screen{position:absolute;inset:0;width:100%;height:122vh;min-height:122vh;display:none;background:var(--bg);overflow:hidden}
.screen.active{display:block}
.screen.active.page-enter{animation:pageIn .34s cubic-bezier(.22,.8,.25,1) both}
@keyframes pageIn{from{opacity:1;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}

/* Header — one normal-flow component. The background owns the safe-area;
   only its inner content is centered inside the usable header row. */
.topbar,.page-head{
  position:relative;
  z-index:20;
  width:calc(100% - 20px);
  height:var(--top);
  min-height:var(--top);
  margin:calc(var(--safe-top) + 20px) 10px 0;
  padding:0;
  box-sizing:border-box;
  background:#20162D;
  background-image:none;
  color:var(--text);
  border:0;
  border-radius:18px;
  box-shadow:0 10px 28px #0004;
  filter:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#home .topbar{
  background:#20162D;
  background-image:none;
}
.header-content{
  position:relative;
  width:100%;
  height:100%;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:none;
}
.brand-logo{
  display:block;
  width:auto;
  height:28px;
  max-width:min(190px,70vw);
  object-fit:contain;
  object-position:center;
  margin:0;
}
.page-head-content h1{
  margin:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  line-height:1;
  font-weight:700;
}
.page-head-content button{
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:34px;
  line-height:1;
  display:grid;
  place-items:center;
  transition:transform .18s,background .18s;
}
.page-head-content button:active{transform:translateY(-50%) scale(.86);background:#fff1}

.scroll{overflow-y:auto;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}

/* Headers are back in normal flow, so content starts immediately below them. */
.home-scroll{
  height:calc(122vh - var(--header));
  padding:24px 14px var(--content-bottom-clearance);
  overscroll-behavior:contain;
}
.grid{
  height:calc(122vh - var(--header));
  padding:16px 14px var(--content-bottom-clearance);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px 12px;
  align-content:start;
}
.search{padding:14px 14px 7px;margin-top:0}
.search-grid{
  height:calc(122vh - var(--header) - 68px);
  padding-bottom:var(--content-bottom-clearance);
}
.info,.history{
  height:calc(122vh - var(--header));
  padding:10px 14px var(--content-bottom-clearance);
}
.home-scroll section{margin-bottom:44px}
.home-scroll section:last-child{margin-bottom:80px}
.heading{display:flex;justify-content:space-between;align-items:center;padding:0 3px 13px}
.heading h2{font-size:14px;margin:0}
.arrow{font-size:28px;width:36px;height:34px;border-radius:10px;transition:background .18s,transform .18s}
.arrow:active{background:#fff1;transform:scale(.88)}

/* Station cards */
.station-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/3);gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.station-row::-webkit-scrollbar,.filter-row::-webkit-scrollbar{display:none}
.station-card{padding:0;width:100%;text-align:left;scroll-snap-align:start;transition:transform .18s ease}
.station-card:active{transform:scale(.94)}
.station-image{position:relative;aspect-ratio:1;border-radius:15px;overflow:hidden;background:#291b3b;box-shadow:0 8px 22px #0003}
.station-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.station-card:active .station-image img{transform:scale(1.04)}
.station-image:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.75))}
.station-name{position:absolute;z-index:2;left:9px;right:7px;bottom:9px;color:#fff!important;font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new-badge{position:absolute;z-index:4;top:8px;left:8px;padding:5px 8px;border-radius:8px;background:#ff3b30;color:#fff;font-size:9px;line-height:1;font-weight:800;letter-spacing:.04em;box-shadow:0 5px 14px rgba(255,59,48,.28)}

/* Category / genre cards */
.filter-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity}
.filter-card{position:relative;overflow:hidden;min-width:155px;height:calc((100vw - 52px)/3);min-height:88px;max-height:150px;border-radius:15px;padding:0 13px;background:linear-gradient(135deg,#251936,#382550);display:flex;align-items:flex-end;justify-content:space-between;color:#fff;font-size:13px;font-weight:700;text-align:left;scroll-snap-align:start;box-shadow:0 8px 20px #0002;transition:transform .18s,filter .18s}
.filter-card:before{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(12,10,16,.82),rgba(12,10,16,.2)),var(--filter-image);background-size:cover;background-position:center;z-index:0;transition:transform .35s}
.filter-card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(0,0,0,.55));z-index:1}
.filter-card span,.filter-card b{position:relative;z-index:2;color:#fff}
.filter-card b{font-size:22px;font-weight:400;margin-bottom:8px}
.filter-card span{margin-bottom:12px}
.filter-card:active{transform:scale(.95);filter:brightness(1.15)}
.filter-card:active:before{transform:scale(1.05)}
.skeleton-filter{min-width:155px;height:calc((100vw - 52px)/3)!important;min-height:88px;max-height:150px;border-radius:15px}

/* Floating mini-player and bottom navigation */
.global-overlay{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;z-index:1000!important;pointer-events:none;overflow:visible!important}
.global-overlay .mini,.global-overlay .bottom{pointer-events:auto}
.mini{position:fixed;z-index:40;pointer-events:auto;left:10px;right:10px;bottom:calc(var(--dock-bottom) + var(--nav) + var(--dock-gap));height:var(--mini-h);border-radius:14px;background:var(--mini);display:flex;align-items:center;gap:9px;padding:6px 7px;color:#fff;box-shadow:0 12px 35px #0008;transition:opacity .28s,transform .28s,filter .2s}
.mini.hidden{opacity:0;transform:translateY(20px);pointer-events:none}
.mini:active{filter:brightness(1.1);transform:scale(.985)}
.mini-art{width:53px;height:53px;border-radius:9px;overflow:hidden;flex:0 0 53px}
.mini-art img{width:100%;height:100%;object-fit:cover}
.mini-copy{min-width:0;flex:1}
.mini-copy b,.mini-copy strong,.mini-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-copy b{font-size:9px;opacity:.7}.mini-copy strong{font-size:12px}.mini-copy span{font-size:11px;opacity:.8}
.mini-toggle{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:transform .18s,background .18s}
.mini-toggle:active{transform:scale(.82);background:#fff1}
.bottom{position:fixed;z-index:45;pointer-events:auto;left:10px;right:10px;bottom:var(--dock-bottom);height:var(--nav);padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(30,28,34,.82);border:1px solid rgba(255,255,255,.11);border-radius:25px;overflow:hidden;box-shadow:0 12px 35px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
.nav{min-width:0;height:100%;border-radius:20px;font-size:11px;font-weight:600;color:#8e8993;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:transform .18s,color .18s}
.nav:active{transform:scale(.88);background:#fff1}
.nav.active{color:#fff}
.nav .icon{width:29px;height:29px;display:grid;place-items:center;font-size:0}
.nav .icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.nav .icon-radio svg{width:28px;height:28px}
.player-open .global-overlay{display:none}

.play{display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid currentColor}
.is-playing .play{width:14px;height:16px;border:0;position:relative}
.is-playing .play:before,.is-playing .play:after{content:'';position:absolute;top:0;width:4px;height:16px;background:currentColor}
.is-playing .play:before{left:0}.is-playing .play:after{right:0}
.spinner{display:none;width:20px;height:20px;border:2px solid #ffffff45;border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading .play{display:none}.loading .spinner{display:block}

/* Settings / info */
.settings-section{margin:0 0 24px}
.settings-title{padding:0 4px 10px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.settings-section>a,.settings-row{width:100%;min-height:54px;display:flex;align-items:center;gap:10px;padding:0 15px;border-bottom:1px solid var(--line);background:#18161a;color:var(--text);text-decoration:none;text-align:left}
.settings-section>a:first-of-type,.settings-row:first-of-type{border-radius:15px 15px 0 0}
.settings-section>a:last-of-type,.settings-row:last-of-type{border-radius:0 0 15px 15px;border-bottom:0}
.settings-row>span:first-child{flex:1;font-size:14px;font-weight:400}
.settings-row b{font-size:12px;color:var(--muted);font-weight:500}.settings-row span:last-child{font-size:22px;color:var(--muted)}
.info a{height:62px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--text);text-decoration:none;font-size:14px;transition:padding .2s,background .2s}
.info a:active{padding-left:8px;background:#fff1}.info a span{font-size:22px;color:#777}
.debug-reset{width:100%;min-height:54px;border-radius:15px;background:#2a202b;color:#ffb0c8;border:1px solid rgba(255,255,255,.08);font-weight:650}.debug-reset:active{transform:scale(.98);filter:brightness(1.15)}

/* Theme */
html[data-theme="light"]{--bg:#f6f3f8;--surface:#fff;--surface-2:#eeeaf2;--text:#211d26;--muted:#716b76;--line:rgba(30,20,40,.12)}
@media(prefers-color-scheme:light){html[data-theme="system"]{--bg:#f6f3f8;--surface:#fff;--surface-2:#eeeaf2;--text:#211d26;--muted:#716b76;--line:rgba(30,20,40,.12)}}
.search input{width:100%;height:47px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);color:var(--text);padding:0 13px;outline:0;transition:border-color .2s,box-shadow .2s}
.search input:focus{border-color:#8d65d0;box-shadow:0 0 0 3px #8d65d01c}
.bottom{color:var(--text)}
html[data-theme="light"] .bottom{background:rgba(255,255,255,.86);border-color:rgba(30,20,40,.12)}
@media(prefers-color-scheme:light){html[data-theme="system"] .bottom{background:rgba(255,255,255,.86);border-color:rgba(30,20,40,.12)}}
.nav{color:var(--muted)}.nav.active{color:#fff}
html[data-theme="light"] .nav.active{color:#211d26}
@media(prefers-color-scheme:light){html[data-theme="system"] .nav.active{color:#211d26}}
.settings-row,.settings-section{color:var(--text)}
.settings-row b{color:var(--muted)}
html[data-theme="light"] .settings-row,
html[data-theme="system"] .settings-row,
html[data-theme="light"] .info a,
html[data-theme="system"] .info a,
html[data-theme="light"] .debug-reset,
html[data-theme="system"] .debug-reset{background:var(--surface);color:var(--text)}
html[data-theme="light"] .settings-row:hover,
html[data-theme="system"] .settings-row:hover,
html[data-theme="light"] .info a:hover,
html[data-theme="system"] .info a:hover,
html[data-theme="light"] .debug-reset:hover,
html[data-theme="system"] .debug-reset:hover{background:var(--surface-2)}

.theme-sheet-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:none;align-items:flex-end;padding:0 14px calc(14px + env(safe-area-inset-bottom))}
.theme-sheet-backdrop.show{display:flex}
.theme-sheet{width:100%;max-width:560px;margin:auto;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:10px;box-shadow:0 20px 60px #0008;animation:sheetIn .22s ease both}
@keyframes sheetIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.theme-sheet h3{margin:8px 10px 10px;font-size:16px}
.theme-option{width:100%;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:var(--text);text-align:left}
.theme-option:active{background:color-mix(in srgb,var(--text) 8%,transparent)}
.theme-option b{font-size:14px}.theme-check{font-size:20px;opacity:0}.theme-option.selected .theme-check{opacity:1}

/* Player is always dark. Its artwork owns the full player viewport. */
.screen.player{
  background:#1C1326!important;
  color:#fff!important;
  color-scheme:dark!important;
  touch-action:pan-x pan-down;
  transform:none;
  transition:none;
  isolation:isolate;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.screen.player:before{
  content:'';
  position:absolute;
  top:0;
  left:-12%;
  right:-12%;
  bottom:-12%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(#0b0a0d66,#0b0a0dbb),var(--art);
  background-size:cover;
  background-position:center;
  filter:blur(38px) saturate(1.2);
  transform:scale(1.15);
  transition:background-image .9s;
}
.screen.player.dragging:after{content:'';position:absolute;inset:0;z-index:2;background:#0003;pointer-events:none}
.player-inner{position:relative;z-index:3;height:100%;max-width:560px;margin:auto;padding:calc(48px + var(--safe-top)) 22px 25px;display:flex;flex-direction:column;align-items:center}
.back{position:absolute;z-index:5;top:calc(9px + env(safe-area-inset-top));left:9px;width:44px;height:44px;border-radius:50%;background:#ffffff18;color:#fff;font-size:32px;transition:transform .18s,background .18s}
.back:active{transform:scale(.86);background:#fff2}
.player-top{width:100%;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:18px;color:#fff}
.player-top b{font-size:14px}.player-top button{position:absolute;right:0;width:42px;height:42px;border-radius:50%;background:#ffffff18;font-size:23px;transition:transform .18s,background .18s}.player-top button:active{transform:scale(.84)}.player-top button.liked{color:#ff6d9e}
.art{width:min(560px,100vw);margin-left:-22px;margin-right:-22px;aspect-ratio:1;border-radius:0;overflow:hidden;position:relative;box-shadow:none;transition:transform .25s;z-index:3;background:#111012}.dragging .art{transform:scale(.985)}.art img,#oldArt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.art #oldArt{background-size:cover;background-position:center;opacity:0}.art::before,.art::after{content:"";position:absolute;left:0;right:0;height:34px;z-index:2;pointer-events:none;background-image:linear-gradient(to bottom,rgba(17,16,18,0),#111012),var(--art);background-size:cover;background-position:center;filter:blur(15px);transform:scale(1.05)}.art::before{top:-16px}.art::after{bottom:-16px;transform:scale(1.05) rotate(180deg)}.fade{animation:fade .85s forwards}@keyframes fade{to{opacity:1;transform:scale(1)}}
.track{width:100%;display:flex;align-items:center;gap:12px;text-align:left;margin-top:24px;position:relative;color:#fff;z-index:3}.track-copy{min-width:0;flex:1}.music-search{flex:0 0 48px;width:48px!important;height:48px!important;border-radius:50%;background:#ffffff16;color:#fff!important;font-size:0;display:grid!important;place-items:center;transition:transform .18s,background .18s;align-self:center;margin:0!important}.music-search:after{content:none!important}.music-search:active{transform:scale(.86);background:#fff2}.music-search svg{width:27px!important;height:27px!important;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.track strong,.track span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track strong{font-size:clamp(21px,5.8vw,30px)}.track span{margin-top:5px;font-size:15px;opacity:.85}
.progress{width:100%;margin-top:18px;color:#fff;z-index:3}.progress>div{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}.progress i{display:block;height:5px;background:#fff4;border-radius:5px;overflow:hidden}.progress em{display:block;height:100%;width:0;background:#fff;border-radius:5px;transition:width .18s linear}
.controls{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:22px;color:#fff;z-index:3}.controls .main-play{width:70px;height:70px;border-radius:50%;background:#fff;color:#151319;display:grid;place-items:center;transition:transform .18s,background .18s}.controls .main-play:active{transform:scale(.88)}
.action-bar{width:min(270px,82vw);height:62px;border-radius:20px;background:#ffffff10;border:1px solid #ffffff0d;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center;box-shadow:0 12px 35px #0002;margin-top:10px!important}.action-bar button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:23px;transition:transform .18s,background .18s,color .18s}.action-bar button:active{transform:scale(.82);background:#fff2}.action-bar #like.liked{color:#ff6d9e}.action-bar button svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.music-services{position:fixed!important;left:auto;right:auto;bottom:auto;z-index:200;display:grid;gap:7px;padding:8px;border-radius:16px;background:#171519f7;color:#fff;border:1px solid #ffffff18;box-shadow:0 18px 50px #0009;backdrop-filter:blur(18px);animation:serviceIn .18s ease both}.music-services.hidden{display:none}.music-services button{padding:10px 13px;border-radius:10px;color:#fff;text-align:left;font-size:12px;white-space:nowrap;transition:background .18s,transform .18s}.music-services button:active{background:#fff1;transform:scale(.97)}
@keyframes serviceIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* History */
.history-row{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.history-row img{width:50px;height:50px;border-radius:8px;object-fit:cover}
.history-row b,.history-row span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-row b{font-size:13px}.history-row span{font-size:11px;color:var(--muted);margin-top:3px}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:70px 20px;font-size:13px}.empty-heart{font-size:52px;line-height:1;margin-bottom:12px;color:currentColor}

/* Toast */
:root{--toast-bg:#161519f5;--toast-text:#f7f5fa;--toast-border:rgba(255,255,255,.14)}
html[data-theme="light"]{--toast-bg:rgba(255,255,255,.96);--toast-text:#211d26;--toast-border:rgba(30,20,40,.12)}
@media(prefers-color-scheme:light){html[data-theme="system"]{--toast-bg:rgba(255,255,255,.96);--toast-text:#211d26;--toast-border:rgba(30,20,40,.12)}}
.toast{position:fixed;z-index:1100;top:calc(var(--safe-top) + 38px);left:50%;transform:translate(-50%,-12px) scale(.96);opacity:0;background:var(--toast-bg);color:var(--toast-text);border:1px solid var(--toast-border);border-radius:13px;padding:10px 15px;font-size:12px;white-space:nowrap;box-shadow:0 12px 35px #0008;transition:opacity .24s,transform .24s}.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}

/* Player transitions */
.screen.player.active.player-enter{animation:playerIn .34s cubic-bezier(.22,.8,.25,1) both}
@keyframes playerIn{from{opacity:1;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
.screen.player.player-closing{display:block;animation:playerOut .34s cubic-bezier(.4,0,1,1) both;pointer-events:none}
@keyframes playerOut{from{opacity:1;transform:translateY(0)}to{opacity:.92;transform:translateY(100%)}}
.screen.player.player-closing .player-inner{animation:playerContentOut .28s ease both}
@keyframes playerContentOut{to{opacity:.92;transform:translateY(18px) scale(.985)}}

/* Loading skeletons */
.skeleton-card{width:100%}.skeleton-image{width:100%;aspect-ratio:1;border-radius:15px;background:#27232b}.skeleton-filter{background:#27232b}
.shimmer{position:relative;overflow:hidden;background:#27232b}.shimmer:after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.08) 55%,transparent 80%);animation:shimmer 1.25s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.app-loading .heading h2{opacity:.45}.app-loading .home-scroll section{animation:skeletonPulse 1.4s ease-in-out infinite}.app-loading .station-row,.app-loading .filter-row{pointer-events:none}
@keyframes skeletonPulse{50%{opacity:.82}}

@media(min-width:700px){
  .home-scroll,.grid,.search,.info,.history{max-width:720px;margin-left:auto;margin-right:auto}
  .bottom{left:50%;right:auto;width:min(560px,calc(100% - 24px));transform:translateX(-50%)}
  .mini{left:50%;right:auto;width:min(560px,calc(100% - 20px));transform:translateX(-50%)}
  .mini.hidden{transform:translate(-50%,20px)}
  .theme-sheet-backdrop{justify-content:center}.theme-sheet{margin-bottom:40px;max-width:380px}
}