:root{
  --bg: #0b1220;
  --bg-2: #0f1829;
  --surface: #121b2f;
  --surface-2:#0f1727;
  --outline:#1f2a44;
  --text:#e6f0ff;
  --muted:#9fb0d0;
  --primary:#22d3ee;
  --primary-2:#60a5fa;
  --chip:#0f1b33;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --shadow-soft:0 6px 18px rgba(0,0,0,.25);
  --focus:0 0 0 3px rgba(34,211,238,.25), 0 0 0 1px rgba(34,211,238,.6);
  --header-h:72px;
}

:root.theme-light{
  --bg:#f6f9ff;
  --bg-2:#edf3ff;
  --surface:#ffffff;
  --surface-2:#f8fbff;
  --outline:#dbe4ff;
  --text:#0f172a;
  --muted:#475569;
  --chip:#e8f0ff;
  --shadow:0 6px 24px rgba(2,6,23,.08), 0 1px 2px rgba(2,6,23,.06);
  --shadow-soft:0 4px 16px rgba(2,6,23,.06);
  --focus:0 0 0 3px rgba(34,211,238,.35), 0 0 0 1px rgba(2,6,23,.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 1200px at -10% -20%, rgba(34,211,238,.18), transparent 40%),
    radial-gradient(1000px 800px at 110% -20%, rgba(96,165,250,.18), transparent 45%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
button{font:inherit}

.glass{
  backdrop-filter:saturate(1.3) blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-bottom:1px solid var(--outline);
}

.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;gap:16px;
  padding:0 clamp(16px, 3vw, 24px);
}

.header-left{display:flex;align-items:center;gap:20px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.brand-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  color:#0f172a;background:linear-gradient(135deg,#22d3ee, #60a5fa);
  box-shadow:0 6px 18px rgba(34,211,238,.35), inset 0 0 20px rgba(255,255,255,.25);
}
.brand-text{font-weight:800;letter-spacing:.2px}

.main-nav{display:flex;gap:10px;flex-wrap:wrap}
.nav-link{
  padding:10px 14px;border-radius:10px;color:var(--muted);
  transition:.2s ease;
}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav-link.active{
  color:#0b1120;background:linear-gradient(135deg,#22d3ee,#60a5fa);
  box-shadow:0 8px 22px rgba(34,211,238,.35);
}

.header-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--outline);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);background:var(--surface-2);cursor:pointer;transition:.2s ease;
  box-shadow:var(--shadow-soft);
}
.icon-btn:hover{color:var(--text);transform:translateY(-1px)}
.icon-btn.active{color:#0b1120;background:linear-gradient(135deg,#22d3ee,#60a5fa);border-color:transparent}
 
/* hidden on desktop, shown on mobile */
.mobile-only{display:none}
.searchbar{
  width:100%;max-width:820px;margin-left:auto;margin-right:auto;
  position:absolute;left:0;right:0;top:calc(var(--header-h) + 8px);
  display:flex;gap:10px;padding:12px;
  border:1px solid var(--outline);border-radius:14px;background:var(--surface);
  opacity:0;transform:translateY(-10px);pointer-events:none;transition:.2s ease;
}
.searchbar.open{opacity:1;transform:translateY(0);pointer-events:auto}
.searchbar input{
  flex:1;border:1px solid var(--outline);background:var(--surface-2);
  color:var(--text);padding:12px 14px;border-radius:10px;outline:none;
}
.btn{
  padding:12px 14px;border-radius:10px;border:1px solid var(--outline);
  background:var(--surface-2);color:var(--muted);cursor:pointer;
}
.btn:hover{color:var(--text)}

.layout{
  display:grid;grid-template-columns:260px 1fr;gap:24px;
  padding:24px clamp(12px, 2.5vw, 24px);
}

.sidebar{
  position:sticky;top:calc(var(--header-h) + 16px);
  align-self:start;padding:16px;border:1px solid var(--outline);
  border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow-soft);
}

/* Sidebar nav mount */
.side-nav{}
.side-nav .main-nav{
  display:grid;
  gap:8px;
  margin:0 0 8px;
}
.side-nav .nav-link{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--outline);
  background:var(--surface-2);
  color:var(--muted);
  text-decoration:none;
  transition:.2s ease;
}
.side-nav .nav-link:hover{color:var(--text); transform:translateX(2px)}
.side-nav .nav-link.active{
  color:#0b1120;
  background:linear-gradient(135deg,#22d3ee,#60a5fa);
  box-shadow:0 8px 22px rgba(34,211,238,.35);
  border-color:transparent;
}
@media (min-width: 768px){
  /* на десктопе секция навигации в сайдбаре скрыта скриптом (hidden),
     этот блок — подстраховка, если атрибут будет убран вручную */
  .side-nav{display:none}
}

.side-section + .side-section{margin-top:22px}
.side-title{margin:0 0 10px;font-size:14px;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}

.side-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.link{
  width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--outline);
  background:var(--surface-2);color:var(--muted);cursor:pointer;transition:.2s;
  display:block;text-decoration:none;
}
.link:hover{color:var(--text);transform:translateX(2px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip, #songTags a{
  border:none;padding:8px 12px;border-radius:999px;background:var(--chip);
  color:var(--muted);cursor:pointer;border:1px solid var(--outline);transition:.2s;
  text-decoration:none;display:inline-block;
}
.chip:hover, #songTags a:hover{color:var(--text);transform:translateY(-1px)}
.chip.active, #songTags a.active{color:#00131f;background:linear-gradient(135deg,#22d3ee,#60a5fa);border-color:transparent}

.songs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.songs li{padding:0;border:0;background:transparent}
.song-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  padding:10px;border:1px solid var(--outline);border-radius:10px;background:var(--surface-2);
  color:inherit;text-decoration:none;
}
.song-row:hover{filter:brightness(1.05)}
.song-icon{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:8px;background:#10233a;color:#74e1ff}
.song-text{font-weight:600}
.song-artist{color:var(--muted);font-size:12px}

.content{min-width:0}
.content-top{
  display:flex;align-items:end;justify-content:space-between;gap:16px;
  padding:10px 2px 6px;border-bottom:1px dashed var(--outline);margin-bottom:16px;
}
.page-title{
  font-size:clamp(26px, 3.4vw, 44px);
  line-height:1.1;margin:0;
  background:linear-gradient(135deg,#60a5fa, #22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 12px 38px rgba(34,211,238,.15);
}
.page-subtitle{margin:.35rem 0 0;color:var(--muted)}

.view-switch{display:flex;gap:8px}

.cards{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}

.card{
  position:relative;overflow:hidden;border-radius:18px;
  border:1px solid var(--outline);background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color:inherit;text-decoration:none;display:block;
}
.card:hover{transform:translateY(-4px);border-color:rgba(96,165,250,.45)}
.card:focus-within{outline:none; box-shadow:var(--shadow), var(--focus)}

.card-media{
  height:130px;background:#0f2237;position:relative;
  background-image:
    radial-gradient(60% 80% at 20% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(50% 60% at 90% 10%, rgba(255,255,255,.1), transparent 55%);
}
.card--blue .card-media{background:linear-gradient(135deg,#0ea5e9 0%, #22d3ee 45%, #0369a1 100%)}
.card--pink .card-media{background:linear-gradient(135deg,#fb7185 0%, #f472b6 45%, #7c3aed 100%)}
.card--aqua .card-media{background:linear-gradient(135deg,#5eead4 0%, #22d3ee 45%, #0891b2 100%)}
.card--violet .card-media{background:linear-gradient(135deg,#6366f1 0%, #a78bfa 45%, #7c3aed 100%)}
.card--amber .card-media{background:linear-gradient(135deg,#f59e0b 0%, #fbbf24 45%, #b45309 100%)}
.card--mint .card-media{background:linear-gradient(135deg,#34d399 0%, #22c55e 45%, #065f46 100%)}

.card-body{padding:14px 14px 56px}
.card-title{margin:0 0 6px;font-size:16px}
.card-meta{margin:0;color:var(--muted);font-size:13px}

.play-btn{
  position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--outline);background:var(--surface-2);color:var(--text);cursor:pointer;
  display:inline-grid;place-items:center;transition:.2s;box-shadow:var(--shadow-soft)
}
.play-btn:hover{transform:scale(1.05)}
.playing .play-btn{color:#00131f;background:linear-gradient(135deg,#22d3ee,#60a5fa);border-color:transparent}

.cards.list{
  display:flex;flex-direction:column;gap:12px;
}
.cards.list .card{
  display:grid;grid-template-columns:160px 1fr auto;align-items:center;
  min-height:120px;
}
.cards.list .card-media{height:100%}
.cards.list .card-body{padding:16px}
.cards.list .play-btn{position:static;margin-right:16px}

.site-footer{
  margin:40px auto 60px;
  text-align:center;color:var(--muted);
}

::selection{background:rgba(34,211,238,.3)}

:focus-visible{outline: none; box-shadow: var(--focus)}

@media (max-width: 1100px){
  .layout{grid-template-columns:220px 1fr}
}

@media (max-width: 900px){
  .layout{grid-template-columns:1fr}

  /* Offcanvas sidebar */
  .sidebar{
    position:fixed;
    top:var(--header-h);
    left:0;
    width:min(86vw, 360px);
    height:calc(100vh - var(--header-h));
    transform:translateX(-110%);
    transition:transform .25s ease, box-shadow .25s ease;
    z-index:60;
    overflow:auto;
    order:initial; /* off-canvas, order no longer matters */
  }
  .sidebar.open{ transform: translateX(0); }

  .content{order:1}
  .content-top{align-items:flex-start}

  /* Backdrop behind the sidebar */
  .backdrop{
    position:fixed; inset:0;
    background:rgba(2,6,23,.55);
    backdrop-filter: blur(2px);
    opacity:0; pointer-events:none;
    transition:.2s ease; z-index:55;
  }
  .backdrop.show{opacity:1; pointer-events:auto}

  /* Show mobile-only controls */
  .mobile-only{display:inline-flex}
}

@media (max-width: 520px){
  .site-header{height:auto;flex-wrap:wrap;row-gap:10px;padding-top:12px;padding-bottom:12px}
  :root{--header-h:86px}
  .main-nav{width:100%}
  .nav-link{padding:8px 10px}
  .layout{padding-top:10px}
}

.hidden{display:none !important}
/* Song view */
body.no-scroll{overflow:hidden}

.song-view{
  padding:24px clamp(12px, 2.5vw, 24px);
}
.song-container{
  max-width:1100px;margin:0 auto;
}
.song-grid{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:start;
}
.song-artwork{
  width:100%;aspect-ratio:1/1;border-radius:22px;
  border:1px solid var(--outline);
  background:linear-gradient(135deg,#0ea5e9 0%, #22d3ee 45%, #7c3aed 100%);
  box-shadow:var(--shadow);
  margin: auto;
  max-width: 200px;
}
.song-info .song-title{
  font-size:clamp(24px, 4.2vw, 40px);margin:0 0 8px;
  background:linear-gradient(135deg,#60a5fa,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.song-info .song-artist{margin:0 0 14px;color:var(--muted)}
.song-tags{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}

.song-actions{display:flex;gap:10px;align-items:center}
.btn.primary{
  border-color:transparent;color:#00131f;
  background:linear-gradient(135deg,#22d3ee,#60a5fa);
  box-shadow:0 8px 22px rgba(34,211,238,.35);
}
.btn.like-btn{display:inline-flex;align-items:center;gap:8px}
.btn.like-btn.active{
  color:#00131f;background:linear-gradient(135deg,#f472b6,#fb7185);border-color:transparent
}
.back-btn{margin-bottom:12px}

@media (min-width: 900px){
  .song-grid{grid-template-columns:360px 1fr}
  .song-artwork{aspect-ratio:1/1}
}

.DLEPush { z-index: 2001; position: fixed; right: 20px; top: 20px }
@keyframes DLEPush-show { 0% { transform: translateY(100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
 }
.DLEPush-notification.wrapper { animation-name: DLEPush-show; animation-duration: 1s; position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; color: #333; margin-bottom: 10px; width: 100%; max-width: 400px; box-shadow: 0 10px 15px rgb(0 0 0 / 20%); background-color: #fff; border-radius: 10px }
.DLEPush-notification .DLEPush-icon { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; color: #fff; width: 45px; height: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; text-align: center; }
.DLEPush-notification .DLEPush-icon svg { scale: .8; }
.DLEPush-notification .DLEPush-header { font-weight: 500; grid-column: 2; grid-row: 1; font-size: 1rem; margin-left: 1rem; margin-top: .5rem; }
.DLEPush-notification .DLEPush-header:empty { margin-top: 0; }
.DLEPush-notification .DLEPush-message { grid-column: 2; grid-row: 2; font-size: .875rem; margin: 1rem; }
.DLEPush-notification .DLEPush-message li, .DLEPush-notification .DLEPush-message ul { list-style-type: none; padding-left: 0; }
.DLEPush-notification .DLEPush-close { position: absolute; top: 8px; right: 10px; font-weight: 300; background: none; border: 0; font-size: 1.15rem; cursor: pointer; line-height: 1; padding: 0; color: inherit; outline: 0; opacity: 0.75; }
@media only screen and (min-width: 601px) { .DLEPush-notification.wrapper { min-width: 400px; }
 }
@media only screen and (max-width: 600px) { .xfieldscolleft { float: none; width: 100%; }
.xfieldscolright { float: none; width: 100%; }
 }
.DLEPush-notification .DLEPush-close:hover { opacity: 1; }
.DLEPush-notification.wrapper.push-success { background-color: #e0f2f1; }
.DLEPush-notification.wrapper.push-success .DLEPush-icon { background-color: #00897b; }
.DLEPush-notification.wrapper.push-warning { background-color: #FFF3E0; }
.DLEPush-notification.wrapper.push-warning .DLEPush-icon { background-color: #FF9800; }
.DLEPush-notification.wrapper.push-error { background-color: #FBE9E7; }
.DLEPush-notification.wrapper.push-error .DLEPush-icon { background-color: #FF5722; }