@import url('/static/default/app.css');

/* Liquid glass: the landscape supplies the colour of every surface. */
:root {
  --bg: #243537;
  --ink: #fff;
  --muted: rgba(255,255,255,.76);
  --faint: rgba(255,255,255,.56);
  --violet: #b7cccf;
  --violet-deep: #789497;
  --violet-soft: #fff;
  --violet-tint: rgba(255,255,255,.2);
  --glass: linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  --glass-solid: rgba(44,61,63,.88);
  --stroke: rgba(255,255,255,.28);
  --stroke-soft: rgba(255,255,255,.12);
  --hairline: inset 0 1px 0 rgba(255,255,255,.35);
  --lift: 0 16px 48px rgba(8,22,25,.12);
  --r-xl: 30px; --r-lg: 22px; --r-md: 14px;
}
html { background: var(--bg); }
body { background: transparent; }
.ambient {
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(12,29,33,.12),rgba(12,29,33,.2)),url('/static/images/mountain-background.jpg') center / cover no-repeat;
}
.ambient::before,.ambient::after,html.has-cover .ambient::after { content: none; }
.app-shell {
  grid-template-columns: 242px minmax(0,1fr);
  gap: 0;
  width: min(1440px,calc(100% - 112px));
  min-height: calc(100vh - 128px);
  margin: 64px auto;
  padding: 0;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 32px;
  background: linear-gradient(115deg,rgba(207,222,221,.27),rgba(164,184,186,.17));
  box-shadow: inset 0 1px 1px #ffffff66,inset 0 -1px 1px #ffffff20,0 32px 90px #07191f40;
  -webkit-backdrop-filter: blur(38px) saturate(135%);
  backdrop-filter: blur(38px) saturate(135%);
}
.sidebar {
  top: 24px;
  height: calc(100vh - 112px);
  padding: 28px 16px 20px;
  background: rgba(233,242,239,.08);
  border: 0;
  border-right: 1px solid #ffffff13;
  border-radius: 31px 0 0 31px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.logo { padding: 0 10px 30px; }
.logo strong { font-size: 24px; letter-spacing: -.035em; }
.logo-mark,.avatar { background: #ffffff26; color: #fff; box-shadow: var(--hairline); border: 1px solid #ffffff30; }
.nav-link { font-weight: 500; padding: 14px; border-radius: 15px; }
.nav-link.active { background: #ffffff30; border-color: #ffffff12; box-shadow: none; }
.nav-link.active svg { color: #fff; }
.sidebar-user { background: #ffffff0c; border-color: #ffffff18; }
.main-area { padding: 28px 34px 12px; }
.page-wrap { max-width: 1180px; padding: 0 0 24px; }
.listening-header h1 { font-size: clamp(26px,2.5vw,34px); font-weight: 650; letter-spacing: -.035em; }
.eyebrow { color: #ffffffa6; }
.glass-card,.now-card,.queue-card,.library-card,.settings-card {
  background: #ffffff08;
  border-color: #ffffff20;
  box-shadow: inset 0 1px 0 #ffffff14;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.now-card { padding: 26px; gap: 18px; }
.card-head h2 { font-weight: 600; }
.search-card {
  border-radius: 12px;
  background: #15262938;
  border-color: #ffffff18;
  box-shadow: inset 0 2px 4px #071b2220,0 1px 0 #ffffff20;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
input,select { background: #14282b30; border-color: #ffffff24; }
input::placeholder { color: #ffffff9e; }
input:focus,select:focus { border-color: #ffffff80; box-shadow: 0 0 0 3px #ffffff12; }
select option { background: #354b4f; }
button,.btn-primary,.control-btn.play-btn {
  color: #fff;
  background: linear-gradient(160deg,#ffffff40,#ffffff1c);
  border-color: #ffffff30;
  box-shadow: inset 0 1px 0 #ffffff55,0 4px 12px #102a3010;
}
button:hover,.btn-primary:hover,.control-btn.play-btn:hover { background: #ffffff40; }
button.ghost,button.secondary { background: #ffffff12; }
.mode-switch { border-radius: 999px; background: #19323620; padding: 4px; }
.mode-switch button { border-radius: 999px; padding: 10px 17px; box-shadow: none; font-size: 13px; }
.mode-switch button[aria-pressed="true"] { background: #ffffff32; box-shadow: inset 0 1px 0 #ffffff38,0 2px 6px #112a3015; }
.status { background: #ffffff10; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 12px; padding: 10px 12px; }
.theme-picker { font-size: 12px; }
.theme-picker select { min-width: 100px; }
.np-title { font-weight: 600; letter-spacing: -.035em; }
.np-art,.np-art img { border-radius: 14px; }
.np-art::before { content: none; }
.vinyl { background: repeating-radial-gradient(circle,#ffffff14 0,#ffffff14 2px,#ffffff06 3px,#ffffff06 4px); box-shadow: inset 0 0 45px #ffffff10,0 15px 30px #10292d20; }
.player-controls { border: 1px solid #ffffff25; border-radius: 999px; padding: 9px 12px; background: #ffffff14; box-shadow: inset 0 1px 0 #ffffff28; gap: 10px; }
.control-group { gap: 8px; }
.control-btn { width: 40px; height: 40px; background: transparent; border-color: transparent; box-shadow: none; }
.control-btn.play-btn { width: 48px; height: 48px; }
.connect-btn { font-size: 12px; padding: 10px 12px; }
.qitem:hover,.rank-row:hover { background: #ffffff10; }
.stats-grid,.audience-grid { gap: 16px; }
.station-card { background: transparent; border-color: transparent; border-radius: 14px; }
.station-card:hover { background: #ffffff18; }
.station-card.selected { background: #ffffff22; border-color: #ffffff50; }
.station-play img,.station-placeholder { width: 92px; height: 92px; border-radius: 12px; }
.station-play { padding: 16px 10px; }
.station-play b { font-weight: 500; }
.modal { background: #0b222b30; }
.modal-card,.toast { background: rgba(63,82,85,.84); backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px); }
.loginbox { background: #c8dcda30; border-color: #ffffff60; box-shadow: var(--hairline),0 28px 90px #08232b45; }
@media(min-width:1050px) {
  .stage { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .now-card .np { align-items: center; }
  .np-art { width: clamp(120px,12vw,180px); }
  .queue-list { max-height: 450px; overflow: auto; }
}
@media(max-width:1200px) and (min-width:901px) {
  .app-shell { width: calc(100% - 48px); grid-template-columns: 200px minmax(0,1fr); margin: 24px auto; }
  .main-area { padding: 24px; }
  .topbar { flex-wrap: wrap; }
  .search-card { flex-basis: 100%; }
  .listening-header { align-items: flex-start; flex-direction: column; gap: 16px; }
}
@media(max-width:900px) {
  .app-shell { display: block; width: calc(100% - 24px); margin: 12px auto; min-height: calc(100vh - 24px); border-radius: 26px; }
  .sidebar { display: none; }
  .main-area { padding: 0; }
  .mobile-top { padding: 18px 18px 10px; }
  .mobile-top .logo { padding: 0; }
  .page-wrap { padding: 16px 16px calc(104px + env(safe-area-inset-bottom,0px)); }
  .tabbar { background: #78908b55; border-color: #ffffff50; box-shadow: inset 0 1px 0 #ffffff70,0 12px 40px #0a242a30; }
  .tabbar a.active { background: #ffffff30; }
  .tabbar a.active svg { color: #fff; }
  .player-controls { flex-direction: column-reverse; border-radius: 24px; padding: 12px; }
  .control-group { gap: 18px; }
  .now-card { padding: 22px 18px; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .app-shell,.loginbox,.tabbar { background: #435b60f5; }
  .sidebar,.glass-card,.now-card,.queue-card,.settings-card,.library-card { background: #ffffff0c; }
}