*{box-sizing:border-box}html{scroll-behavior:smooth}
:root{--bg:#080909;--panel:rgba(19,20,20,.86);--panel2:rgba(29,29,28,.82);--line:rgba(255,255,255,.09);--text:#f7f3eb;--muted:#aaa9a5;--accent:#f3efe7;--shadow:0 28px 80px rgba(0,0,0,.42)}
body.light{--bg:#e9e5dd;--panel:rgba(249,247,241,.89);--panel2:rgba(255,255,255,.78);--line:rgba(0,0,0,.1);--text:#111;--muted:#6f6c66;--accent:#121212;--shadow:0 28px 80px rgba(45,36,24,.14)}
body{margin:0;min-height:100vh;background:
linear-gradient(90deg,rgba(7,8,8,.97) 0%,rgba(7,8,8,.88) 38%,rgba(7,8,8,.77) 68%,rgba(7,8,8,.91) 100%),
radial-gradient(circle at 92% 34%,#5a331e 0,transparent 27%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding-bottom:126px;overflow-x:hidden}
.ambient{position:fixed;z-index:-1;filter:blur(80px);opacity:.2;border-radius:50%;pointer-events:none}.ambient-a{width:380px;height:380px;right:-80px;top:10%;background:#9a4f20}.ambient-b{width:340px;height:340px;left:-120px;bottom:8%;background:#1b4d52}
.topbar{height:88px;padding:0 3.2vw;display:flex;align-items:center;border-bottom:1px solid var(--line);backdrop-filter:blur(18px);position:sticky;top:0;z-index:30;background:rgba(8,9,9,.7)}
.brand{width:260px;color:var(--text);text-decoration:none;display:flex;flex-direction:column;line-height:1}.brand-script{font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;font-size:34px;letter-spacing:-1px}.brand-sub{font-size:9px;letter-spacing:7px;margin-left:30px;margin-top:5px}.nav{display:flex;gap:38px}.nav a{color:var(--text);text-decoration:none;font-size:14px;font-weight:650;opacity:.86}.nav a:hover{opacity:1}.top-actions{margin-left:auto}.icon-button{width:42px;height:42px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:50%;font-size:21px;cursor:pointer}
.page{width:min(1440px,94vw);margin:48px auto;display:grid;grid-template-columns:minmax(330px,410px) minmax(520px,1fr) 250px;gap:30px;align-items:start}
.hero-card,.track-panel,.side-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:var(--shadow);backdrop-filter:blur(20px)}
.hero-card{padding:26px;border-radius:26px;position:sticky;top:116px}.cover-wrap{position:relative}.hero-cover{width:100%;aspect-ratio:1;border-radius:18px;object-fit:cover;display:block;background:#1b1b1b;box-shadow:0 28px 60px rgba(0,0,0,.42)}.cover-glow{position:absolute;inset:12%;z-index:-1;background:#a35f2f;filter:blur(70px);opacity:.28}
.hero-copy{padding:24px 4px 5px}.eyebrow{font-size:10px;letter-spacing:5px;color:var(--muted);font-weight:700}.hero-copy h1{font-size:38px;line-height:1.02;margin:12px 0 7px;letter-spacing:-1.5px}.hero-copy p{color:var(--muted);margin:0}.hero-actions{display:flex;gap:12px;margin:24px 0}.primary-btn{border:0;border-radius:999px;background:var(--accent);color:var(--bg);font-size:15px;font-weight:800;padding:14px 24px;cursor:pointer}.round-btn{width:49px;height:49px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:22px;cursor:pointer}.quote{font-size:14px;font-style:italic;line-height:1.6!important;border-top:1px solid var(--line);padding-top:18px!important}
.track-panel{border-radius:26px;overflow:hidden}.panel-head{padding:30px 32px 22px;display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line)}.panel-head h2{margin:6px 0 0;font-size:28px}.muted{color:var(--muted);font-size:13px}
.track-list{min-height:300px}.track{height:74px;display:grid;grid-template-columns:40px 52px 1fr auto 42px;gap:14px;align-items:center;padding:8px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:.18s ease}.track:hover,.track.active{background:rgba(255,255,255,.06)}.track.active{box-shadow:inset 3px 0 0 var(--text)}.track-index{font-size:13px;color:var(--muted);text-align:center}.track-thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;background:#222}.track-meta{min-width:0}.track-title{display:block;font-size:14px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{display:block;font-size:12px;color:var(--muted);margin-top:4px}.track-duration{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.track-play{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--text);font-size:14px}.loading,.error{padding:38px;color:var(--muted);text-align:center}
.side-card{border-radius:26px;overflow:hidden;min-height:520px;position:sticky;top:116px}.poster{min-height:520px;padding:33px 28px;background:
linear-gradient(180deg,rgba(13,10,8,.25),rgba(13,10,8,.88)),
radial-gradient(circle at 55% 10%,#8d4e27 0,transparent 28%),
linear-gradient(135deg,#2a1a12,#090909 60%);display:flex;flex-direction:column}.poster-kicker{font-size:9px;letter-spacing:4px}.poster-rule{height:1px;background:rgba(255,255,255,.26);margin:23px 0}.poster-main{font-family:Georgia,serif;font-size:38px;line-height:1.03;font-weight:900;color:#d5c3aa;text-shadow:0 3px 18px #000}.poster-sign{font-family:"Snell Roundhand","Segoe Script",cursive;font-size:32px;margin-top:auto;text-align:right;color:#b8a891;transform:rotate(-5deg)}
.player-shell{position:fixed;left:0;right:0;bottom:0;min-height:104px;z-index:50;background:rgba(14,15,15,.93);backdrop-filter:blur(25px);border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:minmax(260px,1fr) minmax(420px,2fr) minmax(190px,1fr);align-items:center;padding:12px 28px;gap:24px}.now{display:flex;align-items:center;gap:13px;min-width:0}.mini-cover{width:64px;height:64px;border-radius:9px;object-fit:cover;background:#222}.now-copy{min-width:0}.now-copy strong,.now-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-copy strong{font-size:13px}.now-copy span{font-size:12px;color:var(--muted);margin-top:6px}.player-center{display:flex;flex-direction:column;gap:8px}.controls{display:flex;align-items:center;justify-content:center;gap:25px}.control-btn,.main-play{border:0;color:var(--text);cursor:pointer}.control-btn{background:transparent;font-size:17px}.main-play{width:48px;height:48px;border-radius:50%;background:var(--text);color:var(--bg);font-size:18px}.timeline{display:grid;grid-template-columns:44px 1fr 44px;gap:9px;align-items:center;font-size:10px;color:var(--muted)}input[type=range]{width:100%;accent-color:#efefef}.volume-box{display:flex;gap:10px;align-items:center;max-width:220px;margin-left:auto}.volume-box input{max-width:150px}
@media(max-width:1180px){.page{grid-template-columns:350px 1fr}.side-card{display:none}}
@media(max-width:850px){body{padding-bottom:96px}.topbar{height:70px;padding:0 18px}.brand{width:auto}.brand-script{font-size:27px}.brand-sub{font-size:7px;letter-spacing:5px}.nav{display:none}.page{display:block;width:min(94vw,680px);margin:24px auto}.hero-card{position:relative;top:auto;margin-bottom:18px;padding:18px}.hero-copy h1{font-size:32px}.track-panel{margin-bottom:20px}.player-shell{min-height:84px;grid-template-columns:1fr auto;padding:10px 14px}.player-center{display:flex}.timeline{display:none}.volume-box{display:none}.controls{gap:11px}.control-btn{font-size:14px}.main-play{width:42px;height:42px}.mini-cover{width:54px;height:54px}.track{grid-template-columns:28px 46px 1fr auto;height:67px;padding:8px 10px}.track-thumb{width:46px;height:46px}.track-play{display:none}}
@media(max-width:520px){.panel-head{padding:23px 17px}.panel-head h2{font-size:23px}.hero-copy{padding:19px 2px 2px}.hero-card{border-radius:21px}.track-panel{border-radius:21px}.track-duration{font-size:11px}.player-shell{gap:8px}.now-copy strong{max-width:155px}.now-copy span{max-width:155px}}


/* =========================================================
   ROMANOVCHEF MUSIC — DESKTOP V2
   ========================================================= */

@media (min-width:1181px){

  body{
    height:100vh;
    min-height:720px;
    overflow:hidden;
    padding-bottom:0;
  }

  /* Верхняя панель */
  .topbar{
    height:82px;
    padding:0 3vw;
    background:rgba(7,8,8,.72);
    backdrop-filter:blur(28px) saturate(125%);
    -webkit-backdrop-filter:blur(28px) saturate(125%);
  }

  .brand{
    width:250px;
  }

  .brand-script{
    font-size:32px;
  }

  .nav{
    gap:34px;
  }

  /* Главная рабочая область */
  .page{
    width:min(1480px,94vw);
    height:calc(100vh - 82px - 104px);
    margin:0 auto;
    padding:28px 0 24px;

    display:grid;
    grid-template-columns:
      minmax(330px,390px)
      minmax(560px,1fr)
      minmax(205px,235px);

    gap:24px;
    align-items:stretch;
  }

  /* Общий стиль карточек */
  .hero-card,
  .track-panel,
  .side-card{
    border:1px solid rgba(255,255,255,.075);
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.038),
        rgba(255,255,255,.014)
      );
    box-shadow:
      0 25px 65px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
  }

  /* Левая карточка */
  .hero-card{
    position:relative;
    top:auto;
    height:100%;
    min-height:0;
    overflow:hidden;
    padding:20px;
    border-radius:24px;
    display:flex;
    flex-direction:column;
  }

  .cover-wrap{
    flex:0 0 auto;
  }

  .hero-cover{
    width:100%;
    aspect-ratio:1;
    border-radius:17px;
    transition:
      opacity .42s ease,
      transform .55s cubic-bezier(.2,.75,.2,1),
      filter .42s ease;
    box-shadow:
      0 24px 55px rgba(0,0,0,.42);
  }

  .hero-card:hover .hero-cover{
    transform:scale(1.008);
  }

  .cover-glow{
    inset:10%;
    filter:blur(75px);
    opacity:.22;
  }

  .hero-copy{
    padding:20px 4px 0;
    min-height:0;
  }

  .eyebrow{
    font-size:9px;
    letter-spacing:4.5px;
  }

  .hero-copy h1{
    font-size:34px;
    line-height:1.02;
    margin:11px 0 7px;
    letter-spacing:-1.35px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .hero-copy p{
    font-size:14px;
  }

  .hero-actions{
    margin:19px 0 16px;
  }

  .primary-btn{
    padding:12px 22px;
  }

  .round-btn{
    width:45px;
    height:45px;
  }

  .quote{
    margin-top:0;
    font-size:12px!important;
    line-height:1.45!important;
    padding-top:14px!important;
  }

  /* Центральный плейлист */
  .track-panel{
    height:100%;
    min-height:0;
    border-radius:24px;
    overflow:hidden;

    display:flex;
    flex-direction:column;
  }

  .panel-head{
    flex:0 0 auto;
    padding:25px 30px 19px;
    background:rgba(14,15,15,.55);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }

  .panel-head h2{
    font-size:27px;
    letter-spacing:-.6px;
  }

  /* Главная разница V2:
     теперь прокручивается только список песен */
  .track-list{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  .track-list::-webkit-scrollbar{
    width:7px;
  }

  .track-list::-webkit-scrollbar-track{
    background:transparent;
  }

  .track-list::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.13);
    border-radius:20px;
  }

  .track-list::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.22);
  }

  .track{
    height:70px;
    grid-template-columns:36px 48px 1fr auto 38px;
    gap:13px;
    padding:7px 17px;
    transition:
      background .22s ease,
      transform .22s ease,
      box-shadow .22s ease;
  }

  .track:hover{
    background:rgba(255,255,255,.045);
  }

  .track.active{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.085),
        rgba(255,255,255,.035)
      );
    box-shadow:
      inset 2px 0 0 rgba(255,255,255,.92);
  }

  .track-thumb{
    width:48px;
    height:48px;
    border-radius:8px;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
  }

  .track-title{
    font-size:14px;
    letter-spacing:-.1px;
  }

  .track-artist{
    font-size:11px;
    margin-top:3px;
  }

  .track-duration{
    font-size:11px;
  }

  .track-play{
    opacity:.82;
    transition:
      opacity .2s ease,
      transform .2s ease;
  }

  .track:hover .track-play{
    opacity:1;
    transform:scale(1.08);
  }

  /* Правая карточка */
  .side-card{
    position:relative;
    top:auto;
    height:100%;
    min-height:0;
    border-radius:24px;
  }

  .poster{
    height:100%;
    min-height:0;
    padding:30px 24px;
  }

  .poster-main{
    font-size:clamp(29px,2.35vw,37px);
    line-height:1.03;
  }

  .poster-sign{
    font-size:29px;
  }

  /* Нижний плеер */
  .player-shell{
    height:104px;
    min-height:104px;
    padding:10px 28px;
    grid-template-columns:
      minmax(280px,1fr)
      minmax(460px,2.25fr)
      minmax(200px,1fr);

    background:rgba(9,10,10,.92);
    backdrop-filter:blur(32px) saturate(125%);
    -webkit-backdrop-filter:blur(32px) saturate(125%);
    box-shadow:0 -18px 55px rgba(0,0,0,.28);
  }

  .mini-cover{
    width:62px;
    height:62px;
    border-radius:9px;
    box-shadow:0 8px 22px rgba(0,0,0,.35);
    transition:opacity .35s ease;
  }

  .main-play{
    width:47px;
    height:47px;
    transition:
      transform .18s ease,
      background .18s ease;
  }

  .main-play:hover{
    transform:scale(1.06);
  }

  .control-btn{
    opacity:.86;
  }

  .control-btn:hover{
    opacity:1;
  }

  .timeline{
    max-width:720px;
    width:100%;
    margin:0 auto;
  }

  .volume-box{
    max-width:190px;
  }
}


/* Немного мягче общий фон */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at 18% 55%,
      rgba(20,65,66,.10),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 88% 32%,
      rgba(125,68,32,.10),
      transparent 31%
    );
}


/* Аккуратное выделение выбранной композиции */
.track.active .track-title{
  color:#fff;
}

.track.active .track-thumb{
  box-shadow:
    0 7px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.10);
}



/* =========================================================
   ROMANOVCHEF MUSIC — LIGHT THEME FIX
   ========================================================= */

body.light{
  background:
    linear-gradient(
      90deg,
      rgba(239,236,229,.96) 0%,
      rgba(232,228,220,.92) 45%,
      rgba(225,218,208,.90) 100%
    ),
    var(--bg);

  color:#151515;
}

/* Шапка */
body.light .topbar{
  background:rgba(244,241,234,.82);
  border-bottom-color:rgba(0,0,0,.09);
  box-shadow:0 8px 35px rgba(40,32,22,.05);
}

body.light .brand,
body.light .nav a{
  color:#151515;
}

body.light .icon-button{
  background:rgba(255,255,255,.72);
  color:#111;
  border-color:rgba(0,0,0,.10);
}

/* Основные карточки */
body.light .hero-card,
body.light .track-panel{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.82),
      rgba(247,244,237,.72)
    );

  border-color:rgba(0,0,0,.09);

  box-shadow:
    0 24px 65px rgba(60,45,25,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* Заголовок playlist */
body.light .panel-head{
  background:rgba(250,248,243,.82);
  border-bottom-color:rgba(0,0,0,.08);
}

body.light .panel-head h2,
body.light .hero-copy h1,
body.light .track-title,
body.light .now-copy strong{
  color:#171717;
}

body.light .eyebrow,
body.light .muted,
body.light .hero-copy p,
body.light .track-index,
body.light .track-artist,
body.light .track-duration,
body.light .now-copy span,
body.light .timeline{
  color:#716d66;
}

/* Треки */
body.light .track{
  border-bottom-color:rgba(0,0,0,.075);
}

body.light .track:hover{
  background:rgba(0,0,0,.035);
}

body.light .track.active{
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.075),
      rgba(0,0,0,.025)
    );

  box-shadow:
    inset 2px 0 0 #171717;
}

/* Переопределяем старое принудительное белое название */
body.light .track.active .track-title{
  color:#111;
}

body.light .track-play{
  color:#111;
}

/* Полоса прокрутки */
body.light .track-list::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.16);
}

body.light .track-list::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,.27);
}

/* Кнопки */
body.light .primary-btn{
  background:#151515;
  color:#f8f5ee;
}

body.light .round-btn{
  background:rgba(255,255,255,.75);
  color:#111;
  border-color:rgba(0,0,0,.11);
}

/* Нижний player */
body.light .player-shell{
  background:rgba(247,244,237,.94);
  border-top-color:rgba(0,0,0,.10);
  box-shadow:0 -18px 55px rgba(45,35,22,.10);
}

body.light .control-btn{
  color:#151515;
}

body.light .main-play{
  background:#151515;
  color:#fff;
}

body.light input[type="range"]{
  accent-color:#171717;
}

/*
   Правая GOOD MUSIC карточка специально остаётся тёмной —
   это самостоятельный постер.
*/
body.light .side-card{
  border-color:rgba(0,0,0,.12);
  box-shadow:0 24px 65px rgba(60,45,25,.13);
}

body.light .poster-kicker{
  color:#d5c3aa;
}

/* Убираем слишком тёмное затемнение поверх светлой темы */
body.light::after{
  background:
    radial-gradient(
      ellipse at 18% 55%,
      rgba(63,118,113,.08),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 88% 32%,
      rgba(158,104,63,.09),
      transparent 31%
    );
}


/* =========================================================
   ROMANOVCHEF MUSIC — ABOUT ARTIST
   ========================================================= */

.nav a{
  position:relative;
  transition:opacity .2s ease
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
  opacity:.7
}

.nav a:hover::after,
.nav a.active::after{
  transform:scaleX(1)
}

.about-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .32s ease,visibility .32s ease
}

.about-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto
}

.about-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px)
}

.about-dialog{
  position:relative;
  z-index:1;
  width:min(1120px,92vw);
  max-height:min(760px,84vh);
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:30px;
  background:rgba(15,16,16,.97);
  box-shadow:
    0 45px 130px rgba(0,0,0,.65),
    inset 0 1px rgba(255,255,255,.045);
  transform:translateY(14px) scale(.985);
  transition:transform .34s cubic-bezier(.2,.75,.2,1)
}

.about-modal.open .about-dialog{
  transform:translateY(0) scale(1)
}

.about-identity{
  min-height:650px;
  padding:42px 34px 34px;
  display:flex;
  flex-direction:column;
  color:#e6d5bd;
  background:
    linear-gradient(180deg,rgba(18,11,7,.16),rgba(8,8,8,.88)),
    radial-gradient(circle at 35% 10%,rgba(153,78,35,.72),transparent 34%),
    linear-gradient(145deg,#28170f,#080808 68%)
}

.about-script{
  font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;
  font-size:38px;
  line-height:1
}

.about-brand-sub{
  margin:8px 0 0 39px;
  font-size:8px;
  letter-spacing:7px
}

.about-statement{
  margin:auto 0;
  font-family:Georgia,serif;
  font-size:42px;
  line-height:1.03;
  font-weight:800;
  letter-spacing:-1.4px
}

.about-sign{
  font-family:"Snell Roundhand","Segoe Script",cursive;
  font-size:29px;
  text-align:right;
  opacity:.72;
  transform:rotate(-4deg)
}

.about-content{
  overflow-y:auto;
  padding:52px 60px 46px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent
}

.about-content::-webkit-scrollbar{
  width:7px
}

.about-content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15);
  border-radius:20px
}

.about-content h2{
  margin:13px 0 29px;
  font-size:44px;
  line-height:1;
  letter-spacing:-1.8px
}

.about-text{
  max-width:680px
}

.about-text p{
  margin:0 0 20px;
  color:#b9b8b4;
  font-size:15px;
  line-height:1.72
}

.about-text .about-lead{
  margin:30px 0;
  color:#f4f0e8;
  font-size:21px;
  line-height:1.45;
  font-weight:650;
  letter-spacing:-.35px
}

.about-text .about-final{
  margin-top:31px;
  color:#f4f0e8;
  font-size:17px;
  line-height:1.62;
  font-weight:650
}

.about-author{
  margin-top:32px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.09);
  font-family:"Snell Roundhand","Segoe Script",cursive;
  font-size:27px;
  color:#d4c4ad
}

.about-close{
  position:absolute;
  z-index:3;
  top:18px;
  right:20px;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:29px;
  line-height:35px;
  font-weight:200;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease
}

.about-close:hover{
  transform:rotate(5deg) scale(1.05);
  background:rgba(255,255,255,.11)
}

body.light .about-backdrop{
  background:rgba(34,29,23,.50)
}

body.light .about-dialog{
  background:rgba(249,247,242,.98);
  border-color:rgba(0,0,0,.10);
  box-shadow:0 45px 130px rgba(50,38,25,.25)
}

body.light .about-content h2{
  color:#151515
}

body.light .about-text p{
  color:#625f59
}

body.light .about-text .about-lead,
body.light .about-text .about-final{
  color:#161616
}

body.light .about-author{
  border-top-color:rgba(0,0,0,.10);
  color:#79654d
}

@media(max-width:760px){
  .about-modal{
    padding:14px;
    align-items:flex-end
  }

  .about-dialog{
    width:100%;
    max-height:88vh;
    grid-template-columns:1fr;
    border-radius:25px 25px 18px 18px
  }

  .about-identity{
    min-height:190px;
    padding:27px 25px
  }

  .about-statement{
    margin-top:37px;
    font-size:31px
  }

  .about-sign{
    display:none
  }

  .about-content{
    padding:32px 25px 38px
  }

  .about-content h2{
    font-size:34px
  }

  .about-text p{
    font-size:14px
  }
}

/* ROMANOVCHEF — ARTIST PHOTO */
.about-identity{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.72) 100%),
    linear-gradient(90deg,rgba(0,0,0,.04) 65%,rgba(0,0,0,.42) 100%),
    url("./artist.jpg") center center / cover no-repeat;
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}

/* ARTIST PHOTO — FINAL COMPOSITION */
.about-statement{
  margin:auto 0 24px;
  font-size:36px;
  line-height:1.04;
  max-width:270px;
}

.about-sign{
  display:none;
}


/* =========================================================
   ROMANOVCHEF — ABOUT ARTIST FINAL EDITORIAL LAYOUT
   ========================================================= */

@media (min-width:761px){

  .about-dialog{
    width:min(1320px,92vw);
    height:min(760px,82vh);
    max-height:none;
    grid-template-columns:410px minmax(0,1fr);
  }

  .about-identity{
    min-height:0;
    height:100%;
    padding:40px 34px 36px;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.02) 45%,
        rgba(0,0,0,.18) 64%,
        rgba(0,0,0,.82) 100%
      ),
      linear-gradient(
        90deg,
        rgba(0,0,0,.02) 70%,
        rgba(0,0,0,.30) 100%
      ),
      url("./artist.jpg") center center / cover no-repeat;
  }

  .about-script{
    font-size:39px;
    text-shadow:0 3px 20px rgba(0,0,0,.85);
  }

  .about-brand-sub{
    margin-top:8px;
  }

  .about-statement{
    margin:auto 0 0;
    max-width:330px;
    font-size:39px;
    line-height:1.02;
    letter-spacing:-1.2px;
    text-shadow:
      0 3px 18px rgba(0,0,0,.95),
      0 1px 2px rgba(0,0,0,1);
  }

  .about-sign{
    display:none;
  }

  .about-content{
    height:100%;
    padding:52px 72px 70px 64px;
    overflow-y:auto;
  }

  .about-content h2{
    margin:14px 0 30px;
    font-size:44px;
  }

  .about-text{
    max-width:760px;
    padding-bottom:8px;
  }

  .about-text p{
    margin-bottom:22px;
    font-size:15px;
    line-height:1.68;
  }

  .about-text .about-lead{
    margin:31px 0 27px;
    font-size:20px;
    line-height:1.4;
  }

  .about-text .about-final{
    margin:31px 0 0;
    padding-bottom:12px;
    font-size:16px;
    line-height:1.55;
  }

  .about-author{
    margin-top:24px;
    padding:20px 0 6px;
  }

  .about-close{
    top:20px;
    right:22px;
  }
}


/* ROMANOVCHEF — RIGHT MANIFESTO */
.poster{
  position:relative;
  overflow:hidden;
  min-height:100%;
  padding:34px 28px 28px;
  background:
    linear-gradient(180deg,rgba(8,8,8,.18),rgba(8,8,8,.78)),
    radial-gradient(circle at 55% 8%,rgba(120,66,34,.42) 0,transparent 30%),
    linear-gradient(145deg,#1b120d,#070707 68%);
}

.poster::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.03) 0,
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 4px
    );
}

.poster-kicker,
.poster-rule,
.poster-main,
.poster-bottom{
  position:relative;
  z-index:1;
}

.poster-kicker{
  font-size:9px;
  letter-spacing:4px;
  color:#d4c5b3;
}

.poster-rule{
  margin:22px 0 26px;
  background:rgba(255,255,255,.22);
}

.poster-main{
  font-size:34px;
  line-height:1.02;
  color:#d9c8b1;
  letter-spacing:-.8px;
}

.poster-bottom{
  margin-top:auto;
  padding-top:32px;
}

.poster-phrase{
  margin-bottom:25px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(239,232,222,.72);
  font-size:12px;
  line-height:1.55;
  letter-spacing:.15px;
}

.poster-sign{
  margin-top:0;
  font-size:29px;
  opacity:.72;
}

body.light .poster{
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(30,22,16,.26)),
    radial-gradient(circle at 55% 8%,rgba(120,66,34,.38) 0,transparent 31%),
    linear-gradient(145deg,#2a1b12,#0b0b0b 70%);
}


/* =========================================================
   ROMANOVCHEF MUSIC — MOBILE V2
   ========================================================= */
@media(max-width:760px){

  body{
    padding-bottom:calc(92px + env(safe-area-inset-bottom));
  }

  .topbar{
    height:72px;
    padding:0 18px;
  }

  .page{
    width:min(94vw,560px);
    margin:14px auto 20px;
  }

  .hero-card{
    padding:14px;
    margin-bottom:14px;
    border-radius:22px;
  }

  .cover-wrap{
    width:72%;
    margin:0 auto;
  }

  .hero-cover{
    width:100%;
    border-radius:18px;
  }

  .hero-copy{
    padding:16px 4px 2px;
  }

  .hero-copy h1{
    font-size:28px;
    line-height:1.05;
    margin-top:8px;
  }

  .hero-copy p{
    font-size:14px;
    margin-top:7px;
  }

  .hero-actions{
    margin-top:16px;
  }

  .hero-actions .primary-btn{
    min-height:46px;
    padding:0 20px;
  }

  .track-panel{
    margin-bottom:16px;
    border-radius:22px;
  }

  .panel-head{
    padding:18px 16px 14px;
  }

  .panel-head h2{
    font-size:22px;
  }

  .track{
    height:64px;
    grid-template-columns:26px 44px 1fr auto;
    padding:8px 10px;
  }

  .track-thumb{
    width:44px;
    height:44px;
  }

  .player-shell{
    min-height:82px;
    padding:
      9px
      12px
      calc(9px + env(safe-area-inset-bottom));
  }

  .mini-cover{
    width:50px;
    height:50px;
  }

  .main-play{
    width:44px;
    height:44px;
  }

  .now-copy strong{
    max-width:145px;
  }

  .now-copy span{
    max-width:145px;
  }
}

@media(max-width:430px){

  .cover-wrap{
    width:68%;
  }

  .hero-copy h1{
    font-size:26px;
  }

  .hero-card{
    padding:13px;
  }

  .page{
    width:95vw;
  }
}


/* =========================================================
   ROMANOVCHEF MUSIC — MOBILE PLAYER V2
   ========================================================= */
@media(max-width:760px){

  body{
    padding-bottom:calc(112px + env(safe-area-inset-bottom));
  }

  .player-shell{
    min-height:104px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto 27px;
    column-gap:10px;
    row-gap:5px;

    padding:
      9px
      14px
      calc(8px + env(safe-area-inset-bottom));

    backdrop-filter:blur(28px) saturate(135%);
    -webkit-backdrop-filter:blur(28px) saturate(135%);
  }

  .now{
    min-width:0;
    grid-column:1;
    grid-row:1;
  }

  .mini-cover{
    width:50px;
    height:50px;
    flex:0 0 50px;
    border-radius:8px;
  }

  .now-copy{
    min-width:0;
  }

  .now-copy strong,
  .now-copy span{
    max-width:none;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .now-copy strong{
    font-size:14px;
  }

  .now-copy span{
    margin-top:4px;
    font-size:12px;
  }

  .player-center{
    display:contents;
  }

  .controls{
    grid-column:2;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:11px;
  }

  .control-btn{
    width:27px;
    height:38px;
    padding:0;
    font-size:13px;
  }

  .main-play{
    width:46px;
    height:46px;
    flex:0 0 46px;
    font-size:17px;
  }

  .timeline{
    grid-column:1 / -1;
    grid-row:2;

    display:grid;
    grid-template-columns:38px minmax(0,1fr) 38px;
    align-items:center;
    gap:8px;

    width:100%;
    min-width:0;
  }

  .timeline span{
    font-size:10px;
    line-height:1;
    color:rgba(255,255,255,.58);
    font-variant-numeric:tabular-nums;
    letter-spacing:.1px;
  }

  #currentTime{
    text-align:left;
  }

  #duration{
    text-align:right;
  }

  #seek{
    display:block;
    width:100%;
    height:20px;
    margin:0;

    -webkit-appearance:none;
    appearance:none;
    background:transparent;
    cursor:pointer;
  }

  #seek::-webkit-slider-runnable-track{
    height:3px;
    border-radius:99px;
    background:rgba(255,255,255,.22);
  }

  #seek::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:11px;
    height:11px;
    margin-top:-4px;
    border:0;
    border-radius:50%;
    background:#f4f0e8;
    box-shadow:0 1px 8px rgba(0,0,0,.45);
  }

  #seek::-moz-range-track{
    height:3px;
    border:0;
    border-radius:99px;
    background:rgba(255,255,255,.22);
  }

  #seek::-moz-range-thumb{
    width:11px;
    height:11px;
    border:0;
    border-radius:50%;
    background:#f4f0e8;
  }

  .volume-box{
    display:none;
  }

  body.light .timeline span{
    color:rgba(20,20,20,.56);
  }

  body.light #seek::-webkit-slider-runnable-track{
    background:rgba(20,20,20,.20);
  }

  body.light #seek::-webkit-slider-thumb{
    background:#171717;
  }

  body.light #seek::-moz-range-track{
    background:rgba(20,20,20,.20);
  }

  body.light #seek::-moz-range-thumb{
    background:#171717;
  }
}


/* =========================================================
   ROMANOVCHEF MUSIC — MOBILE V3 FINAL POLISH
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

button,
a,
input{
  -webkit-tap-highlight-color:transparent;
}

button,
.track{
  touch-action:manipulation;
}

@media(max-width:760px){

  html{
    overscroll-behavior-y:none;
  }

  body{
    min-height:100dvh;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:none;

    padding-bottom:
      calc(112px + env(safe-area-inset-bottom));
  }

  .topbar{
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
  }

  /* Удобные зоны нажатия */
  .control-btn,
  .main-play,
  .theme-btn,
  .icon-btn{
    touch-action:manipulation;
  }

  .control-btn{
    min-width:40px;
    min-height:44px;
  }

  .main-play{
    min-width:46px;
    min-height:46px;
  }

  .track{
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
  }

  /*
     Красивый seek:
     белая часть = уже проиграно
     серая = осталось
  */
  #seek{
    --seek-progress:0%;
  }

  #seek::-webkit-slider-runnable-track{
    height:3px;
    border-radius:999px;

    background:
      linear-gradient(
        to right,
        #f4f0e8 0%,
        #f4f0e8 var(--seek-progress),
        rgba(255,255,255,.20) var(--seek-progress),
        rgba(255,255,255,.20) 100%
      );
  }

  #seek::-moz-range-track{
    height:3px;
    border-radius:999px;

    background:
      linear-gradient(
        to right,
        #f4f0e8 0%,
        #f4f0e8 var(--seek-progress),
        rgba(255,255,255,.20) var(--seek-progress),
        rgba(255,255,255,.20) 100%
      );
  }

  body.light #seek::-webkit-slider-runnable-track{
    background:
      linear-gradient(
        to right,
        #171717 0%,
        #171717 var(--seek-progress),
        rgba(20,20,20,.18) var(--seek-progress),
        rgba(20,20,20,.18) 100%
      );
  }

  body.light #seek::-moz-range-track{
    background:
      linear-gradient(
        to right,
        #171717 0%,
        #171717 var(--seek-progress),
        rgba(20,20,20,.18) var(--seek-progress),
        rgba(20,20,20,.18) 100%
      );
  }

  /* Плеер остаётся читаемым на iPhone с Dynamic Island / Home Indicator */
  .player-shell{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }

  /* Чуть приятнее горизонтальный drag timeline */
  #seek{
    touch-action:pan-x;
  }

  /* Изображения нельзя случайно таскать пальцем */
  img{
    -webkit-user-drag:none;
    user-select:none;
    -webkit-user-select:none;
  }
}

/* Устройства без настоящего hover */
@media(hover:none) and (pointer:coarse){

  .hero-card:hover .hero-cover{
    transform:none;
  }

  button:hover,
  a:hover{
    transform:none;
  }
}

/* Уважаем системную настройку "Уменьшение движения" */
@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* ROMANOVCHEF — SHUFFLE / REPEAT */
.mode-btn{
  opacity:.52;
  transition:opacity .18s ease,transform .18s ease;
}

.mode-btn.active{
  opacity:1;
  color:#f4f0e8;
}

.mode-btn.active::after{
  content:"";
  display:block;
  width:4px;
  height:4px;
  margin:2px auto 0;
  border-radius:50%;
  background:currentColor;
}

body.light .mode-btn.active{
  color:#171717;
}

@media(max-width:760px){
  .controls{
    gap:7px;
  }

  .mode-btn{
    min-width:32px;
    width:32px;
    font-size:15px;
  }

  .mode-btn.active::after{
    width:3px;
    height:3px;
    margin-top:1px;
  }
}


/* =========================================================
   ROMANOVCHEF MUSIC — DESKTOP PLAYER STABILITY FIX
   ========================================================= */
@media(min-width:761px){

  .player-shell{
    grid-template-columns:
      minmax(220px,320px)
      minmax(420px,1fr)
      minmax(180px,220px);

    column-gap:24px;
  }

  .now{
    min-width:0;
    max-width:320px;
    overflow:hidden;
  }

  .mini-cover{
    flex:0 0 64px;
  }

  .now-copy{
    min-width:0;
    overflow:hidden;
  }

  .now-copy strong,
  .now-copy span{
    display:block;
    width:100%;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .player-center{
    min-width:0;
    width:100%;
  }

  .controls{
    flex:0 0 auto;
    min-width:max-content;
  }

  .timeline{
    min-width:0;
    width:100%;
  }

  .volume-box{
    min-width:180px;
    width:100%;
    max-width:220px;
  }
}



/* RomanovChef — track sorting */
.track-head-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}

.sort-select{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 15px) 50%/4px 4px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 11px) 50%/4px 4px no-repeat,
    rgba(255,255,255,.045);
  color:inherit;
  font:inherit;
  font-size:12px;
  font-weight:600;
  line-height:1;
  padding:9px 30px 9px 12px;
  border-radius:999px;
  cursor:pointer;
  outline:none;
  transition:border-color .2s ease, background-color .2s ease;
}

.sort-select:hover,
.sort-select:focus{
  border-color:rgba(255,255,255,.28);
}

body.light .sort-select{
  border-color:rgba(0,0,0,.12);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 15px) 50%/4px 4px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 11px) 50%/4px 4px no-repeat,
    rgba(0,0,0,.035);
}

@media(max-width:760px){
  .track-head-tools{
    gap:8px;
  }

  .sort-select{
    max-width:145px;
    font-size:11px;
    padding:8px 26px 8px 10px;
  }
}