/* ============================================================
   1. Токены
   ============================================================ */
:root{
  --paper:#e8ebec;
  --surface:#fcfcfb;
  --ink:#15191b;
  --muted:#6b7276;
  --rule:#d2d8da;
  --accent:#0e5c46;
  --accent-soft:#dfeae5;
  --hover:rgba(107,114,118,.09);

  --sans:"IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --cond:"IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap:1140px;
  --gutter:24px;
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0f1214;
    --surface:#15191b;
    --ink:#e6eae8;
    --muted:#828a8e;
    --rule:#262d30;
    --accent:#4fbf97;
    --accent-soft:#17322a;
    --hover:rgba(230,234,232,.06);
  }
}

/* ============================================================
   2. База
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(28px + var(--safe-b));
  overflow-x:hidden;
}
body.is-playing{padding-bottom:calc(92px + var(--safe-b))}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{
  max-width:var(--wrap);margin:0 auto;
  padding-left:calc(var(--gutter) + var(--safe-l));
  padding-right:calc(var(--gutter) + var(--safe-r));
}
.ico{width:20px;height:20px;display:block;flex:none}
.ico-sm{width:16px;height:16px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ============================================================
   3. Шапка
   ============================================================ */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:7px;flex:none;text-decoration:none}
.brand .ico{color:var(--accent);width:19px;height:19px}
.brand span{font-family:var(--cond);font-weight:700;font-size:21px;letter-spacing:.01em;
            text-transform:uppercase;line-height:1}
.brand small{font:400 10px var(--mono);color:var(--muted);align-self:flex-end;line-height:1.4}

.search{position:relative;flex:1;min-width:0;max-width:440px}
.search .ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);
             width:17px;height:17px;pointer-events:none}
.search input{
  width:100%;font:400 15px var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:2px;padding:9px 36px 9px 33px;
  -webkit-appearance:none;appearance:none;
}
.search input::-webkit-search-cancel-button{display:none}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.clear{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:none;
       align-items:center;justify-content:center;width:32px;height:32px;color:var(--muted)}
.clear:hover{color:var(--ink)}
.search.filled .clear{display:flex}

/* ============================================================
   4. Каркас
   ============================================================ */
.shell{
  display:grid;
  grid-template-columns:184px minmax(0,1fr);
  grid-template-areas:"side main";
  align-content:start;align-items:start;column-gap:44px;padding-top:28px;
}
.side{grid-area:side;min-width:0}
.cats{min-width:0}
.rail{min-width:0;font-size:14px;margin-top:30px;padding-top:16px;border-top:1px solid var(--rule)}
.body{grid-area:main;min-width:0}

.rail-title{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
            color:var(--muted);margin:0 0 10px}
.nav{list-style:none;margin:0;padding:0;font-size:14px}
.nav a{display:block;padding:5px 0;color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--accent);font-weight:500}

.rail section{margin-top:30px;padding-top:16px;border-top:1px solid var(--rule)}
.rail section:first-child{margin-top:0;padding-top:0;border-top:0}
.trend{list-style:none;margin:0;padding:0;counter-reset:t}
.trend li{counter-increment:t;display:flex;gap:9px;padding:4px 0;line-height:1.35}
.trend li::before{content:counter(t,decimal-leading-zero);font:400 11px/1.7 var(--mono);
                  color:var(--muted);flex:none}
.trend a{color:var(--muted);text-decoration:none;font-size:13px}
.trend a:hover{color:var(--ink)}

.foot{font-size:12px;color:var(--muted)}
.foot a{display:inline-block;margin:0 14px 6px 0;color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot p{margin:6px 0 0}

/* ============================================================
   5. Заголовок раздела
   ============================================================ */
.head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
      padding-bottom:10px;border-bottom:2px solid var(--ink)}
.head h1{font:700 27px/1.1 var(--cond);margin:0;letter-spacing:-.005em}
.head h2{font:700 18px/1.1 var(--cond);margin:0;text-transform:uppercase;letter-spacing:.03em}
.head .count{font:400 12px var(--mono);color:var(--muted);flex:none}

/* ============================================================
   6. Список треков: строка сама является дорожкой прогресса
   ============================================================ */
.tracks{list-style:none;margin:0;padding:0}
.track{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:38px minmax(0,1fr) 46px 36px;
  align-items:center;column-gap:12px;min-height:48px;padding:0 8px;
  border-bottom:1px solid var(--rule);cursor:pointer;
}
.track.hidden{display:none}
.track .fill{position:absolute;inset:0 auto 0 0;width:0;z-index:-1;background:var(--accent-soft);
             transition:width .26s linear}
@media (hover:hover){ .track:hover{background:var(--hover)} }
.track.on .name,.track.on .artist{color:var(--accent)}

.cue{display:flex;align-items:center;height:100%;font:400 12px var(--mono);color:var(--muted)}
.track.on .cue{color:var(--accent)}
.cue .num{font-variant-numeric:tabular-nums}
.cue .meter{display:none;gap:2px;align-items:flex-end;height:12px}
.cue .meter i{width:2px;height:100%;background:var(--accent);transform-origin:bottom;
              animation:vu .9s ease-in-out infinite}
.cue .meter i:nth-child(2){animation-duration:.65s;animation-delay:-.2s}
.cue .meter i:nth-child(3){animation-duration:1.1s;animation-delay:-.5s}
@keyframes vu{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.track.on .num{display:none}
.track.on .meter{display:flex}
.track.on.hold .meter i{animation-play-state:paused}

.title{display:flex;align-items:baseline;gap:9px;min-width:0;text-decoration:none;color:inherit}
a.title:hover .artist,a.title:hover .name{color:var(--accent)}
.title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artist{font-weight:600;flex:none;max-width:42%}
.sep{color:var(--muted);flex:none}
.name{color:var(--muted);min-width:0}

.dur{font:400 12px var(--mono);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.get{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
     justify-self:end;color:var(--muted);text-decoration:none;border-radius:2px}
.get:hover{color:var(--accent);background:var(--hover)}

/* строка-ссылка: используется в блоке похожих треков */
.track.link{
  display:block;padding:0;cursor:default;min-height:0;
  grid-template-columns:none;border-bottom:0;
}
.rowlink{display:grid;grid-template-columns:38px minmax(0,1fr) 46px;align-items:center;
         column-gap:12px;min-height:48px;padding:0 8px;text-decoration:none;
         border-bottom:1px solid var(--rule)}
.rowlink .num{font:400 12px var(--mono);color:var(--muted)}
.rowlink .title{display:flex;align-items:baseline;gap:9px;min-width:0}
.rowlink .title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowlink .artist{font-weight:600;flex:none;max-width:42%}
.rowlink .sep{color:var(--muted);flex:none}
.rowlink .name{color:var(--muted);min-width:0}
.rowlink .dur{font:400 12px var(--mono);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
@media (hover:hover){ .rowlink:hover{background:var(--hover)} }

.empty{margin:26px 0;color:var(--muted);font-size:14px}
.more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;
      padding:13px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;
      color:var(--muted);border:1px solid var(--rule);border-radius:2px;background:var(--surface)}
.more:hover{color:var(--ink);border-color:var(--ink)}

.about{margin:44px 0 0;padding-top:20px;border-top:1px solid var(--rule);max-width:62ch;
       font-size:14px;color:var(--muted);line-height:1.65}
.about h2{font:700 16px var(--cond);color:var(--ink);margin:0 0 8px;text-transform:uppercase;
          letter-spacing:.03em}
.about p{margin:0 0 10px}

/* ============================================================
   7. Страница трека
   ============================================================ */
.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);
        margin:0 0 18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .ico{width:12px;height:12px;opacity:.6}
.crumbs .now{color:var(--ink)}

.hero{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:22px 0 20px}
.hero .who{font:500 13px var(--mono);letter-spacing:.04em;text-transform:uppercase;
           color:var(--accent);text-decoration:none}
.hero h1{font:700 clamp(30px,6vw,50px)/1.05 var(--cond);margin:8px 0 20px;letter-spacing:-.01em}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.big{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px 0 16px;
     border-radius:2px;background:var(--accent);color:var(--surface);
     font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.big:hover{opacity:.88}
.ghost{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px;border-radius:2px;
       border:1px solid var(--rule);color:var(--ink);
       font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.ghost:hover{border-color:var(--ink)}
.hero .line{position:relative;height:3px;background:var(--rule);margin-top:22px}
.hero .line span{position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);
                 transition:width .26s linear}
.hero .times{display:flex;justify-content:space-between;font:400 12px var(--mono);
             color:var(--muted);margin-top:7px;font-variant-numeric:tabular-nums}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
       background:var(--rule);border:1px solid var(--rule);margin:26px 0 0}
.facts div{background:var(--paper);padding:12px 14px}
.facts dt{font:400 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:5px 0 0;font:500 14px var(--mono);font-variant-numeric:tabular-nums}

.faq{margin:38px 0 0}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
             padding:14px 2px;cursor:pointer;font-weight:500;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{color:var(--muted);transition:transform .2s}
.faq details[open] summary .ico{transform:rotate(180deg)}
.faq p{margin:0;padding:0 2px 16px;color:var(--muted);font-size:14px;max-width:62ch}

.section-gap{margin-top:40px}

/* ============================================================
   8. Плеер
   ============================================================ */
.player{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);
        border-top:1px solid var(--rule);padding-bottom:var(--safe-b)}
.player[hidden]{display:none}
.player .wrap{display:grid;align-items:center;column-gap:14px;height:66px;
              grid-template-columns:34px minmax(0,1.1fr) 42px minmax(120px,2fr) 42px 36px}
.pp{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
    border:1px solid var(--ink);border-radius:50%}
.pp:hover{border-color:var(--accent);color:var(--accent)}
.pp .ico{width:16px;height:16px}
.now{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:14px}
.now span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now .artist{max-width:50%}
.player .t{font:400 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.player .t.right{text-align:right}
.seek{position:relative;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.seek .line{position:absolute;left:0;right:0;height:2px;background:var(--rule)}
.seek .done{position:absolute;left:0;height:2px;width:0;background:var(--accent)}
.seek .knob{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);
            transform:translateX(-4.5px);opacity:0;transition:opacity .15s}
.seek:hover .knob,.seek:focus-visible .knob{opacity:1}

/* ============================================================
   9. Планшет и телефон
   ============================================================ */
@media (max-width:900px){
  .shell{display:flex;flex-direction:column;padding-top:0}
  .side{display:contents}
  .cats{
    position:sticky;top:62px;z-index:15;order:0;
    margin:0 calc(-1 * (var(--gutter) + var(--safe-l))) 18px calc(-1 * (var(--gutter) + var(--safe-r)));
    background:var(--paper);border-bottom:1px solid var(--rule);
  }
  .cats .rail-title{display:none}
  .nav{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
       padding:0 calc(var(--gutter) + var(--safe-l));scroll-snap-type:x proximity}
  .nav::-webkit-scrollbar{display:none}
  .nav li{flex:none;scroll-snap-align:start}
  .nav a{padding:12px 14px 11px;white-space:nowrap;border-bottom:2px solid transparent}
  .nav a[aria-current]{border-bottom-color:var(--accent)}
  .nav li:first-child a{padding-left:0}
  .body{order:1;width:100%}
  .rail{order:2;margin-top:34px;padding-top:20px;border-top:1px solid var(--rule)}
  .head h1{font-size:23px}
}

@media (max-width:640px){
  :root{--gutter:16px}
  .top .wrap{gap:12px;height:58px}
  .cats{top:58px}
  .brand small{display:none}
  .brand span{font-size:19px}

  .track{grid-template-columns:26px minmax(0,1fr) 44px 40px;column-gap:8px;min-height:56px;padding:0 2px}
  .title{flex-wrap:wrap;align-items:baseline;gap:0 4px}
  .artist{max-width:100%;font-size:14px}
  .name{font-size:13px;line-height:1.3}
  .cue{font-size:11px}
  .get{width:40px;height:44px}
  .track.link{display:block;padding:0}
  .rowlink{grid-template-columns:26px minmax(0,1fr) 44px;column-gap:8px;min-height:56px;padding:0 2px}
  .rowlink .artist{max-width:100%;font-size:14px}
  .rowlink .name{font-size:13px;line-height:1.3}
  .rowlink .title{flex-wrap:wrap;align-items:baseline;gap:0 4px}

  .actions{gap:8px}
  .big,.ghost{height:44px;flex:1 1 auto;justify-content:center}
  .facts{grid-template-columns:1fr 1fr}

  body.is-playing{padding-bottom:calc(78px + var(--safe-b))}
  .player .wrap{grid-template-columns:34px minmax(0,1fr) 40px;column-gap:12px;height:62px}
  .player .t,.player .knob{display:none}
  .seek{position:absolute;top:-1px;left:0;right:0;height:12px;align-items:flex-start}
  .seek .line,.seek .done{height:3px}
  .now{font-size:13px}
}

@media (max-width:380px){
  .brand span{font-size:0}
  .brand .ico{width:22px;height:22px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ============================================================
   DLE helpers / login / pagination
   ============================================================ */
.hidden{display:none !important}
.login-box{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;
  width:min(360px,92vw);background:var(--surface);border:1px solid var(--rule);
  border-radius:2px;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.login-close{position:absolute;top:10px;right:10px;width:32px;height:32px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--muted)}
.login-close:hover{color:var(--ink)}
.login-title{font:700 18px var(--cond);margin:0 0 14px}
.login-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;margin:0 auto 14px}
.login-avatar img{width:100%;height:100%;object-fit:cover}
.login-input{margin-bottom:10px}
.login-input input{
  width:100%;font:400 15px var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;padding:10px 12px;
}
.login-input button{
  margin-left:8px;padding:0 14px;background:var(--accent);color:var(--surface);
  border-radius:2px;font:500 13px var(--mono);text-transform:uppercase;
}
.login-menu{list-style:none;margin:0;padding:0}
.login-menu li{border-bottom:1px solid var(--rule)}
.login-menu a{display:block;padding:10px 0;text-decoration:none;color:var(--muted);font-size:14px}
.login-menu a:hover{color:var(--ink)}
.login-btm{margin-top:12px;font-size:13px}
.login-btm a{color:var(--accent);text-decoration:none;margin-right:12px}
.login-admin{text-align:center;margin-bottom:10px}
.login-admin a{color:var(--accent);font-weight:500;text-decoration:none}
.overlay-box{
  position:fixed;inset:0;z-index:40;background:rgba(15,18,20,.45);display:none;
}
.berrors,.info-msg{
  background:var(--accent-soft);color:var(--ink);padding:12px 14px;margin:0 0 18px;
  border:1px solid var(--rule);border-radius:2px;font-size:14px;
}
.pagi-nav,.bottom-nav{margin-top:18px}
.navigation{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.navigation a,.navigation span,.navigation font{
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;
  padding:0 10px;border:1px solid var(--rule);border-radius:2px;text-decoration:none;
  font:500 12px var(--mono);color:var(--muted);background:var(--surface);
}
.navigation span,.navigation .nav_ext,.navigation font{color:var(--ink);border-color:var(--ink)}
.navigation a:hover{color:var(--ink);border-color:var(--ink)}
.full-text{font-size:14px;color:var(--muted);line-height:1.65;max-width:62ch}
.full-text br{display:block;content:"";margin-top:6px}
.speedbar{display:none}
.static-page{max-width:68ch}
.static-body{margin-top:18px;font-size:15px;line-height:1.65;color:var(--ink)}
.static-body h2{font:700 16px var(--cond);margin:28px 0 10px;text-transform:uppercase;letter-spacing:.03em}
.static-body p{margin:0 0 12px;color:var(--muted)}
.static-body ul{margin:0 0 14px;padding-left:1.2em;color:var(--muted)}
.static-body li{margin:0 0 6px}
.static-body a{color:var(--accent);text-decoration:none}
.static-body a:hover{text-decoration:underline}
.static-body strong{color:var(--ink);font-weight:600}
.track a.title-link{text-decoration:none;color:inherit;display:contents}