:root{
  --ui-scale:1; --bg:#07080d; --bg2:#0c0e17; --panel:#10131f; --line:rgba(255,255,255,.08);
  --ink:#eef0f7; --muted:#9aa0b5; --faint:#7a82a0;
  --gold:#e3b066; --gold2:#f4d9a3; --ember:#e2603a; --cyan:#6ad6e0; --violet:#a98bf0;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
  --maxw:calc(1220px * var(--ui-scale));
  --header-h:52px; --player-h:0px;
  --z-bg:-2; --z-stars:-1; --z-dropbackdrop:48;
  --z-header:50; --z-droppanel:55;
  --z-drawer:81; --z-player:80; --z-overlay:100; --z-modalert:150;
  --z-auth:200; --z-agentfab:250; --z-agentmodal:260; --z-toast:300;
}
*{box-sizing:border-box;margin:0;padding:0}
img{pointer-events:none;-webkit-user-drag:none;user-select:none}
::-webkit-scrollbar{width:calc(6px * var(--ui-scale));height:calc(6px * var(--ui-scale))}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:calc(3px * var(--ui-scale))}
::-webkit-scrollbar-thumb:hover{background:rgba(227,176,102,.3)}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.locked{overflow:hidden}
.skip-link{position:absolute;top:-100%;left:0;z-index:9999;padding:12px 24px;background:var(--gold);color:#0a0a0a;font-weight:700;font-size:14px;border-radius:0 0 8px 0;transition:top .2s}
.skip-link:focus{top:0;outline:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold);color:#0a0a0a}

/* ── фон: звёздное поле + сияние ──────────────────────── */
.bg-fx{position:fixed;inset:0;z-index:var(--z-bg);background:
  radial-gradient(1200px 700px at 70% -10%, rgba(227,176,102,.10), transparent 60%),
  radial-gradient(900px 600px at 10% 110%, rgba(169,139,240,.10), transparent 60%),
  linear-gradient(180deg,#07080d,#090b13 40%,#07080d);}
.stars{position:fixed;inset:0;z-index:var(--z-stars);pointer-events:none;opacity:.6}
.stars i{position:absolute;background:#fff;border-radius:50%;animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.9}}

/* ── контейнер ───────────────────────────────────────── */
#page-root{min-height:calc(100vh - var(--header-h) - var(--player-h));display:block}
#page-root.no-hero{padding-top:var(--header-h)} /* для страниц без hero-секции */
body.player-active #page-root{padding-bottom:var(--player-h)} /* чтобы контент не перекрывал плеер */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}

/* ── навигация: органические капли ──────────────────── */
header.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px * var(--ui-scale)) calc(20px * var(--ui-scale));backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(7,8,13,.85),rgba(7,8,13,0));
  transition:background .3s,border-color .3s;border-bottom:1px solid transparent;
  gap:calc(8px * var(--ui-scale))}
header.nav.solid{background:rgba(7,8,13,.92);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:calc(10px * var(--ui-scale));font-family:var(--serif);
  font-size:calc(22px * var(--ui-scale));font-weight:600;letter-spacing:.06em;flex:0 0 auto;
  position:relative}
.brand b{color:var(--gold)}
.vip-badge{font-family:var(--sans);font-size:calc(9px * var(--ui-scale));font-weight:700;
  letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold);border-radius:4px;
  padding:1px 6px;text-transform:uppercase;line-height:1.3;cursor:pointer;transition:.25s}
.vip-badge:hover{background:var(--gold);color:#1a0f06}

/* ── «Дыхание» формы: каждая капля колышется по-своему ── */
@keyframes breathe{
  0%,100%{border-radius:44% 56% 56% 44% / 56% 44% 56% 44%}
  25%{border-radius:52% 48% 46% 54% / 48% 54% 46% 52%}
  50%{border-radius:40% 60% 52% 48% / 60% 40% 48% 52%}
  75%{border-radius:56% 44% 48% 52% / 44% 56% 52% 48%}
}
@keyframes breathe2{
  0%,100%{border-radius:52% 48% 44% 56% / 46% 54% 46% 54%}
  33%{border-radius:44% 56% 58% 42% / 56% 46% 54% 44%}
  66%{border-radius:58% 42% 46% 54% / 42% 58% 44% 56%}
}
/* лёгкое колыхание «лужицы»-панели */
@keyframes pool{
  0%,100%{border-radius:calc(24px*var(--ui-scale)) calc(24px*var(--ui-scale)) calc(26px*var(--ui-scale)) calc(22px*var(--ui-scale))}
  50%{border-radius:calc(20px*var(--ui-scale)) calc(28px*var(--ui-scale)) calc(22px*var(--ui-scale)) calc(26px*var(--ui-scale))}
}

/* ── Контейнер капель ── */
.drops{display:flex;align-items:center;gap:calc(8px * var(--ui-scale));flex:1;justify-content:center;overflow:visible}

/* ── Капля-кнопка ── */
.drop{position:relative}
.drop-btn{position:relative;display:flex;align-items:center;gap:calc(6px * var(--ui-scale));
  padding:calc(8px * var(--ui-scale)) calc(18px * var(--ui-scale));
  background:radial-gradient(120% 150% at 50% 0%,rgba(227,176,102,.10),rgba(255,255,255,.03) 60%,rgba(255,255,255,.02));
  border:1px solid var(--line);
  color:var(--muted);font-family:var(--sans);font-size:calc(12px * var(--ui-scale));
  font-weight:600;letter-spacing:.04em;cursor:pointer;white-space:nowrap;overflow:hidden;
  border-radius:44% 56% 56% 44% / 56% 44% 56% 44%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.06),inset 0 -3px 8px rgba(0,0,0,.25);
  transition:color .5s,background .5s,border-color .5s,box-shadow .5s,
             transform .5s cubic-bezier(.34,1.56,.64,1);
  animation:breathe 8s ease-in-out infinite}
.drop-btn .drop-label{text-overflow:ellipsis;overflow:hidden;max-width:calc(80px * var(--ui-scale));display:inline-block}
.drop:nth-child(2n) .drop-btn{animation:breathe2 9s ease-in-out infinite}
.drop:nth-child(3n) .drop-btn{animation-duration:10s}
.drop-btn:hover{color:var(--gold2);border-color:var(--gold);
  background:radial-gradient(120% 170% at 50% -20%,rgba(227,176,102,.28),rgba(227,176,102,.06) 60%,rgba(255,255,255,.02));
  box-shadow:inset 0 1px 2px rgba(255,255,255,.15),inset 0 -4px 10px rgba(0,0,0,.3),0 0 18px rgba(227,176,102,.25);
  transform:translateY(-1px) scale(1.05)}
.drop-btn .drop-label{transition:opacity .3s,transform .3s}
.drop-btn .drop-arrow{width:calc(10px * var(--ui-scale));height:calc(10px * var(--ui-scale));
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);flex:0 0 auto}

/* ── Открытая капля: замирает и вытягивает «шейку» вниз ── */
.drop.open .drop-btn{animation:none;color:var(--gold2);border-color:var(--gold);
  background:radial-gradient(120% 200% at 50% 120%,rgba(227,176,102,.22),rgba(227,176,102,.05) 70%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.15),0 0 20px rgba(227,176,102,.22);
  transform:scale(1.06);
  border-radius:46% 54% 42% 42% / 58% 58% 32% 32%}
.drop.open .drop-btn .drop-arrow{transform:rotate(180deg)}

/* ── «Шейка»: струйка воды, стекающая из кнопки в панель ── */
.drop-btn::after{content:"";position:absolute;left:50%;bottom:calc(-7px * var(--ui-scale));
  width:calc(15px * var(--ui-scale));height:calc(16px * var(--ui-scale));
  transform:translateX(-50%) scaleY(0);transform-origin:top center;
  background:linear-gradient(180deg,var(--gold),rgba(227,176,102,.3));
  border-radius:50% 50% 45% 45%;opacity:0;filter:blur(.4px);pointer-events:none;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.drop.open .drop-btn::after{transform:translateX(-50%) scaleY(1);opacity:.55}

/* ── Панель-«лужица», в которую перетекает капля ── */
.drop-panel{position:absolute;top:calc(100% + 7px * var(--ui-scale));left:50%;z-index:var(--z-droppanel);
  min-width:calc(190px * var(--ui-scale));
  background:radial-gradient(130% 120% at 50% 0%,rgba(22,18,12,.98),rgba(9,11,19,.98));
  backdrop-filter:blur(16px);border:1px solid var(--gold);
  border-radius:calc(24px * var(--ui-scale));
  padding:calc(10px * var(--ui-scale)) 0;overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 1px 2px rgba(227,176,102,.15);
  opacity:0;pointer-events:none;visibility:hidden;
  transform:translateX(-50%) translateY(calc(-16px * var(--ui-scale))) scale(.62);
  transform-origin:top center;
  transition:opacity .4s,transform .6s cubic-bezier(.34,1.55,.5,1)}
.drop.open .drop-panel{opacity:1;pointer-events:auto;visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
  animation:pool 6s ease-in-out .5s infinite}
/* правый край: панель авторизации выравнивается вправо, чтобы не уходить за экран */
.drop.drop-auth .drop-panel{left:auto;right:0;transform-origin:top right;
  transform:translateY(calc(-16px * var(--ui-scale))) scale(.62)}
.drop.drop-auth.open .drop-panel{transform:translateY(0) scale(1)}
.drop-panel a,.drop-panel button{display:block;width:100%;text-align:left;
  padding:calc(10px * var(--ui-scale)) calc(18px * var(--ui-scale));
  font-size:calc(13px * var(--ui-scale));color:var(--muted);white-space:nowrap;
  background:none;border:none;cursor:pointer;font-family:var(--sans);
  transition:color .2s,background .2s}
.drop-panel a:hover,.drop-panel button:hover{color:var(--gold2);background:rgba(227,176,102,.08)}
.drop-panel .user-name{display:block;padding:calc(8px * var(--ui-scale)) calc(18px * var(--ui-scale));
  color:var(--gold2);font-weight:600;font-size:calc(13px * var(--ui-scale))}
.drop-panel .owner-link{display:flex;align-items:center;gap:calc(8px * var(--ui-scale))}
.drop-panel .owner-link svg{width:calc(16px * var(--ui-scale));height:calc(16px * var(--ui-scale));flex:0 0 auto}
.drop-panel .btn-auth{display:block;width:100%;text-align:left;padding:calc(10px * var(--ui-scale)) calc(18px * var(--ui-scale));
  font-size:calc(13px * var(--ui-scale));font-weight:600;cursor:pointer;
  background:none;border:none;color:var(--muted);font-family:var(--sans);transition:color .2s,background .2s}
.drop-panel .btn-auth:hover{color:var(--gold2);background:rgba(227,176,102,.08)}
.drop-panel .btn-auth.reg{color:var(--gold)}
.drop-panel .btn-auth.reg:hover{color:var(--gold2)}

/* ── Backdrop for closing drops ── */
.drop-backdrop{position:fixed;inset:0;z-index:var(--z-dropbackdrop)}
.drop-backdrop{display:none}
.drop-backdrop.open{display:block}

/* ── модалка логина ─────────────────────────────── */
.auth-wrap{position:fixed;inset:0;z-index:var(--z-auth);display:flex;align-items:center;justify-content:center;
  background:rgba(5,6,11,.75);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.auth-wrap.open{opacity:1;pointer-events:auto}
.auth-box{background:linear-gradient(160deg,var(--bg2),var(--bg));border:1px solid var(--line);
  border-radius:calc(20px * var(--ui-scale));padding:calc(38px * var(--ui-scale)) calc(34px * var(--ui-scale)) calc(32px * var(--ui-scale));width:clamp(300px,calc(380px * var(--ui-scale)),92vw);position:relative}
.auth-box .close{position:absolute;top:calc(14px * var(--ui-scale));right:calc(16px * var(--ui-scale));background:none;border:0;color:var(--muted);
  font-size:calc(20px * var(--ui-scale));cursor:pointer;transition:color .2s}
.auth-box .close:hover{color:var(--gold)}
.auth-box h3{font-family:var(--serif);font-size:calc(28px * var(--ui-scale));font-weight:600;color:var(--gold2);margin-bottom:calc(4px * var(--ui-scale))}
.auth-box .sub{font-size:calc(13px * var(--ui-scale));color:var(--muted);margin-bottom:calc(22px * var(--ui-scale))}
.auth-box label{display:block;font-size:calc(12px * var(--ui-scale));color:var(--faint);letter-spacing:.06em;margin-bottom:calc(4px * var(--ui-scale))}
.auth-box input{width:100%;padding:calc(12px * var(--ui-scale)) calc(16px * var(--ui-scale));border-radius:calc(10px * var(--ui-scale));border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink);font-size:calc(15px * var(--ui-scale));outline:0;transition:border-color .2s;margin-bottom:calc(14px * var(--ui-scale))}
.auth-box input:focus{border-color:var(--gold)}
.auth-box .btn-submit{width:100%;padding:calc(12px * var(--ui-scale));border-radius:calc(12px * var(--ui-scale));border:0;font-weight:700;font-size:calc(15px * var(--ui-scale));
  cursor:pointer;background:linear-gradient(120deg,var(--gold),var(--ember));color:#1a0f06;transition:.25s}
.auth-box .btn-submit:hover{transform:translateY(calc(-2px * var(--ui-scale)));box-shadow:0 calc(10px * var(--ui-scale)) calc(24px * var(--ui-scale)) calc(-8px * var(--ui-scale)) rgba(227,176,102,.5)}
.auth-box .switch{text-align:center;margin-top:calc(16px * var(--ui-scale));font-size:calc(13px * var(--ui-scale));color:var(--muted)}
.auth-box .switch a{color:var(--gold);cursor:pointer}
.auth-box .switch a:hover{color:var(--gold2)}
.auth-box .err{color:var(--ember);font-size:calc(13px * var(--ui-scale));margin-bottom:calc(10px * var(--ui-scale));display:none}

/* ── логотип: круг с тремя точками ───────────────────── */
.sigil{width:calc(34px * var(--ui-scale));height:calc(34px * var(--ui-scale));flex:0 0 auto}
.sigil circle.ring,.bigsigil circle.ring,.fsigil circle.ring{fill:none;stroke:var(--gold);stroke-width:2;opacity:.85}
.sigil circle.dot,.bigsigil circle.dot,.fsigil circle.dot{fill:var(--gold2)}
.sigil .spin,.bigsigil .spin,.fsigil .spin{transform-origin:50% 50%;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── HERO ────────────────────────────────────────────── */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:calc(120px * var(--ui-scale)) 24px calc(80px * var(--ui-scale));position:relative}
.bigsigil{width:calc(128px * var(--ui-scale));height:calc(128px * var(--ui-scale));margin-bottom:calc(28px * var(--ui-scale));filter:drop-shadow(0 0 calc(30px * var(--ui-scale)) rgba(227,176,102,.35))}
.hero-emblem{width:clamp(230px,36vw,calc(420px * var(--ui-scale)));aspect-ratio:1;border-radius:50%;margin-bottom:calc(30px * var(--ui-scale));
  object-fit:cover;display:block;
  box-shadow:0 0 0 1px rgba(227,176,102,.30),0 0 70px -4px rgba(227,176,102,.40),
    0 0 140px -24px rgba(106,140,255,.40);
  animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero h1{font-family:var(--serif);font-weight:600;line-height:.95;
  font-size:clamp(64px,16vw,184px);letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,var(--gold) 60%,var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .slogan{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3.4vw,32px);
  color:var(--gold2);letter-spacing:.18em;margin-top:6px}
.hero .sub{margin-top:calc(22px * var(--ui-scale));max-width:calc(640px * var(--ui-scale));color:var(--muted);font-size:clamp(15px,2vw,calc(18px * var(--ui-scale)))}
.hero .tagline{margin-top:calc(30px * var(--ui-scale));font-family:var(--serif);font-size:clamp(18px,2.6vw,calc(24px * var(--ui-scale)));
  color:var(--ink);opacity:.9}
.hero .tagline span{color:var(--ember)}.hero .tagline b{color:var(--cyan);font-weight:400}
.cta{margin-top:calc(42px * var(--ui-scale));display:flex;gap:calc(16px * var(--ui-scale));flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:calc(10px * var(--ui-scale));padding:calc(14px * var(--ui-scale)) calc(30px * var(--ui-scale));border-radius:calc(40px * var(--ui-scale));
  font-weight:600;font-size:calc(15px * var(--ui-scale));cursor:pointer;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ink);transition:.25s}
.btn:hover{transform:translateY(calc(-2px * var(--ui-scale)))}
.btn.primary{background:linear-gradient(120deg,var(--gold),var(--ember));color:#1a0f06;border:0;
  box-shadow:0 calc(10px * var(--ui-scale)) calc(30px * var(--ui-scale)) calc(-10px * var(--ui-scale)) rgba(227,176,102,.6)}
.btn.primary:hover{box-shadow:0 calc(16px * var(--ui-scale)) calc(40px * var(--ui-scale)) calc(-12px * var(--ui-scale)) rgba(227,176,102,.8)}
.scroll-hint{position:absolute;bottom:calc(26px * var(--ui-scale));left:50%;transform:translateX(-50%);
  color:var(--faint);font-size:calc(12px * var(--ui-scale));letter-spacing:.3em;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,8px);opacity:1}}

/* ── общие заголовки секций ─────────────────────────── */
.sec{padding:calc(96px * var(--ui-scale)) 0}
.kicker{font-size:calc(12px * var(--ui-scale));letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin-bottom:calc(14px * var(--ui-scale))}
.sec h2{font-family:var(--serif);font-size:clamp(34px,5vw,calc(56px * var(--ui-scale)));font-weight:600;line-height:1.05}
.sec .lead{color:var(--muted);max-width:calc(680px * var(--ui-scale));margin-top:calc(14px * var(--ui-scale));font-size:calc(17px * var(--ui-scale))}

/* ── философия: три столпа ──────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(22px * var(--ui-scale));margin-top:calc(48px * var(--ui-scale))}
.pillar{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:calc(18px * var(--ui-scale));padding:calc(30px * var(--ui-scale)) calc(26px * var(--ui-scale));position:relative;overflow:hidden;transition:.3s}
.pillar:hover{transform:translateY(calc(-4px * var(--ui-scale)));border-color:rgba(227,176,102,.4)}
.pillar .ic{font-family:var(--serif);font-size:calc(46px * var(--ui-scale));line-height:1}
.pillar h3{font-family:var(--serif);font-size:calc(26px * var(--ui-scale));margin:calc(14px * var(--ui-scale)) 0 calc(8px * var(--ui-scale));font-weight:600}
.pillar p{color:var(--muted);font-size:calc(15px * var(--ui-scale))}
.pillar.fire .ic{color:var(--ember)} .pillar.order .ic{color:var(--cyan)} .pillar.truth .ic{color:var(--gold2)}
.pillar:after{content:"";position:absolute;inset:auto -40% -60% -40%;height:140px;
  background:radial-gradient(closest-side,currentColor,transparent);opacity:.10}
.diz-line{margin-top:calc(40px * var(--ui-scale));text-align:center;font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,3vw,calc(30px * var(--ui-scale)));color:var(--gold2)}
.brand-letters{display:flex;justify-content:center;gap:calc(34px * var(--ui-scale));margin-top:calc(46px * var(--ui-scale));flex-wrap:wrap}
.bl{text-align:center;max-width:calc(200px * var(--ui-scale))}
.bl .ch{font-family:var(--serif);font-size:calc(64px * var(--ui-scale));font-weight:700;
  background:linear-gradient(180deg,var(--gold2),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.bl b{display:block;font-size:calc(14px * var(--ui-scale));letter-spacing:.1em;color:var(--ink);margin-top:calc(-6px * var(--ui-scale))}
.bl span{font-size:calc(13px * var(--ui-scale));color:var(--faint)}

/* ── арки/акты ──────────────────────────────────────── */
.arcs{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(18px * var(--ui-scale));margin-top:calc(46px * var(--ui-scale))}
.arc{border:1px solid var(--line);border-radius:calc(16px * var(--ui-scale));padding:calc(24px * var(--ui-scale)) calc(20px * var(--ui-scale));background:rgba(255,255,255,.02)}
.arc .no{font-family:var(--serif);font-size:calc(14px * var(--ui-scale));letter-spacing:.3em;color:var(--gold)}
.arc h4{font-family:var(--serif);font-size:calc(22px * var(--ui-scale));margin:calc(8px * var(--ui-scale)) 0;font-weight:600}
.arc p{font-size:calc(14px * var(--ui-scale));color:var(--muted)}

/* ── сетка альбомов ─────────────────────────────────── */
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(250px * var(--ui-scale)),1fr));gap:calc(24px * var(--ui-scale));margin-top:calc(48px * var(--ui-scale))}
.card{position:relative;border-radius:calc(18px * var(--ui-scale));overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);transition:.35s;isolation:isolate}
.card:hover{transform:translateY(-6px);border-color:rgba(227,176,102,.5);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.8)}
.card .art{aspect-ratio:1;position:relative;display:flex;align-items:flex-end;
  background-size:cover;background-position:center}
.card .art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.card .art .glow{position:absolute;inset:0;mix-blend-mode:overlay;opacity:.5}
.card .num{position:absolute;top:calc(14px * var(--ui-scale));left:calc(16px * var(--ui-scale));font-family:var(--serif);font-size:calc(54px * var(--ui-scale));
  font-weight:700;color:rgba(255,255,255,.9);text-shadow:0 calc(2px * var(--ui-scale)) calc(14px * var(--ui-scale)) rgba(0,0,0,.7);z-index:2}
.card .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,8,13,.1) 30%,rgba(7,8,13,.92))}
.card .meta{position:relative;z-index:2;padding:0 calc(18px * var(--ui-scale)) calc(18px * var(--ui-scale));width:100%}
.card .meta .t{font-family:var(--serif);font-size:calc(23px * var(--ui-scale));font-weight:600;line-height:1.1}
.card .meta .c{font-size:calc(12px * var(--ui-scale));color:var(--gold2);letter-spacing:.06em;margin-top:calc(6px * var(--ui-scale))}
.card .meta .d{font-size:calc(13px * var(--ui-scale));color:var(--muted);margin-top:calc(8px * var(--ui-scale));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.ep{grid-column:1/-1;justify-self:center;max-width:calc(540px * var(--ui-scale));width:100%}
.card.ep .art{aspect-ratio:2/1}
.card.ep .veil{background:linear-gradient(135deg,rgba(7,8,13,.05) 40%,rgba(7,8,13,.92))}
.card.ep .meta .t{font-size:calc(25px * var(--ui-scale))}
.card.ep .num{right:calc(16px * var(--ui-scale));left:auto;text-align:right}

/* ── оверлеи ────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(5,6,11,.7);
  backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.open{opacity:1;pointer-events:auto}
.sheet{position:absolute;top:0;right:0;height:100%;width:min(calc(680px * var(--ui-scale)),100%);
  background:linear-gradient(180deg,var(--bg2),var(--bg));border-left:1px solid var(--line);
  transform:translateX(calc(40px * var(--ui-scale)));opacity:0;transition:.35s;display:flex;flex-direction:column;
  box-shadow:calc(-30px * var(--ui-scale)) 0 calc(80px * var(--ui-scale)) calc(-30px * var(--ui-scale)) rgba(0,0,0,.9)}
.overlay.open .sheet{transform:translateX(0);opacity:1}
.sheet{overflow:hidden}
.sheet.wide{width:min(calc(920px * var(--ui-scale)),100%)}
/* обёртка панели альбома/трека должна заполнять шторку, чтобы тело могло скроллиться */
#album-pane{display:flex;flex-direction:column;height:100%;min-height:0}
.sheet-head{padding:calc(26px * var(--ui-scale)) calc(30px * var(--ui-scale)) calc(18px * var(--ui-scale));border-bottom:1px solid var(--line);position:relative;flex:0 0 auto}
.sheet-head .close{position:absolute;top:calc(22px * var(--ui-scale));right:calc(24px * var(--ui-scale));background:rgba(255,255,255,.06);
  border:1px solid var(--line);color:var(--ink);width:calc(38px * var(--ui-scale));height:calc(38px * var(--ui-scale));border-radius:50%;
  cursor:pointer;font-size:calc(18px * var(--ui-scale));transition:.2s}
.sheet-head .close:hover{background:var(--gold);color:#0a0a0a;transform:rotate(90deg)}
.sheet-head .eyebrow{font-size:calc(12px * var(--ui-scale));letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.sheet-head h3{font-family:var(--serif);font-size:calc(34px * var(--ui-scale));font-weight:600;margin-top:calc(6px * var(--ui-scale));line-height:1.05;max-width:88%}
.sheet-head p{color:var(--muted);font-size:calc(14px * var(--ui-scale));margin-top:calc(8px * var(--ui-scale));max-width:90%}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(14px * var(--ui-scale)) calc(30px * var(--ui-scale)) calc(60px * var(--ui-scale));flex:1;min-height:0}
/* individual scrollbar overrides removed — using global */

/* ── список треков ──────────────────────────────────── */
.track{display:flex;align-items:center;gap:calc(16px * var(--ui-scale));padding:calc(15px * var(--ui-scale)) calc(14px * var(--ui-scale));border-radius:calc(12px * var(--ui-scale));
  cursor:pointer;border:1px solid transparent;transition:.2s}
.track:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.track .tn{font-family:var(--serif);font-size:calc(20px * var(--ui-scale));color:var(--gold);width:calc(34px * var(--ui-scale));text-align:center;flex:0 0 auto}
.track .ti{flex:1;min-width:0}
.track .ti .tt{font-weight:600;font-size:calc(16px * var(--ui-scale))}
.track .ti .tg{font-size:calc(12px * var(--ui-scale));color:var(--faint);margin-top:calc(2px * var(--ui-scale))}
.track .dur{font-size:calc(13px * var(--ui-scale));color:var(--muted);font-variant-numeric:tabular-nums}
.track .play{flex:0 0 auto;color:var(--faint);transition:.2s;width:calc(30px * var(--ui-scale));height:calc(30px * var(--ui-scale));
  display:flex;align-items:center;justify-content:center;border-radius:50%}
.track .play svg{width:calc(17px * var(--ui-scale));height:calc(17px * var(--ui-scale));display:block}
.track:hover .play{color:var(--gold);background:rgba(227,176,102,.08)}
.track.empty{cursor:default;opacity:.5}.track.empty:hover{background:none;border-color:transparent}

/* ── текст песни ────────────────────────────────────── */
.lyrics{font-size:calc(17px * var(--ui-scale));line-height:1.85;white-space:pre-wrap;color:#dfe2ee;
  font-weight:300;letter-spacing:.01em}
.lyrics .tag{color:var(--gold);font-weight:600;font-size:calc(13px * var(--ui-scale));letter-spacing:.05em;
  text-transform:uppercase;display:inline-block}
.back-link{display:inline-flex;align-items:center;gap:calc(8px * var(--ui-scale));color:var(--gold2);font-size:calc(14px * var(--ui-scale));
  font-weight:600;cursor:pointer;margin-bottom:calc(18px * var(--ui-scale));transition:.2s}
.back-link:hover{gap:calc(12px * var(--ui-scale))}
.lyr-meta{display:flex;gap:calc(18px * var(--ui-scale));flex-wrap:wrap;margin:calc(4px * var(--ui-scale)) 0 calc(24px * var(--ui-scale));font-size:calc(13px * var(--ui-scale));color:var(--muted)}
.lyr-meta b{color:var(--gold2);font-weight:600}

/* ── Мастер-Библия ──────────────────────────────────── */
.bible-layout{display:flex;height:100%;min-height:0}
.toc{width:clamp(240px,calc(300px * var(--ui-scale)),40%);flex:0 0 auto;border-right:1px solid var(--line);overflow-y:auto;padding:calc(20px * var(--ui-scale)) calc(14px * var(--ui-scale)) calc(60px * var(--ui-scale))}
/* toc scrollbar — global */
.toc a{display:block;padding:calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));border-radius:calc(8px * var(--ui-scale));font-size:calc(13px * var(--ui-scale));color:var(--muted);
  cursor:pointer;transition:.18s;border-left:calc(2px * var(--ui-scale)) solid transparent}
.toc a:hover{color:var(--gold2);background:rgba(255,255,255,.04)}
.toc a.book{font-family:var(--serif);font-size:calc(15px * var(--ui-scale));color:var(--gold);font-weight:600;margin-top:calc(12px * var(--ui-scale));letter-spacing:.04em}
.toc a.ch{padding-left:calc(22px * var(--ui-scale))}
.bible-read{flex:1;overflow-y:auto;padding:calc(40px * var(--ui-scale)) calc(56px * var(--ui-scale)) calc(100px * var(--ui-scale));min-width:0}
/* bible-read scrollbar — global */
.bible-read{font-size:calc(17px * var(--ui-scale));line-height:1.85;color:#d7dae6;font-weight:300}
.bible-read .b-h1{font-family:var(--serif);font-size:calc(40px * var(--ui-scale));font-weight:700;margin:calc(54px * var(--ui-scale)) 0 calc(8px * var(--ui-scale));
  background:linear-gradient(180deg,var(--gold2),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.bible-read .b-h2{font-family:var(--serif);font-size:calc(27px * var(--ui-scale));color:var(--gold2);font-weight:600;margin:calc(30px * var(--ui-scale)) 0 calc(6px * var(--ui-scale))}
.bible-read .b-h3{font-family:var(--serif);font-size:calc(23px * var(--ui-scale));color:#fff;font-weight:600;margin:calc(34px * var(--ui-scale)) 0 calc(8px * var(--ui-scale))}
.bible-read p{margin:calc(14px * var(--ui-scale)) 0;max-width:70ch}
.bible-read strong{color:var(--gold2);font-weight:600}
.bible-read em{color:var(--cyan);font-style:italic}
.bible-read hr{border:0;height:1px;background:var(--line);margin:calc(30px * var(--ui-scale)) 0;max-width:70ch}
.bible-read blockquote{border-left:calc(3px * var(--ui-scale)) solid var(--gold);padding:calc(8px * var(--ui-scale)) calc(22px * var(--ui-scale));margin:calc(24px * var(--ui-scale)) 0;
  font-family:var(--serif);font-style:italic;font-size:calc(21px * var(--ui-scale));color:var(--gold2);max-width:70ch}
.bible-read .b-table{border-collapse:collapse;margin:calc(20px * var(--ui-scale)) 0;max-width:70ch;width:100%;
  font-size:calc(15px * var(--ui-scale));line-height:1.6}
.bible-read .b-table th,.bible-read .b-table td{border:1px solid var(--line);
  padding:calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));text-align:left;vertical-align:top}
.bible-read .b-table thead{background:rgba(227,176,102,.08)}
.bible-read .b-table th{font-family:var(--serif);font-size:calc(17px * var(--ui-scale));color:var(--gold2);font-weight:600}
.bible-read .b-table td{color:#d7dae6}

/* ── drawer плейлиста ────────────────────────────────── */
.player-drawer{position:fixed;bottom:var(--player-h,70px);left:0;right:0;z-index:var(--z-drawer);
  background:linear-gradient(0deg,rgba(10,12,20,.98),rgba(14,16,26,.95));
  backdrop-filter:blur(18px);border-top:1px solid rgba(227,176,102,.18);
  max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.player-drawer.open{max-height:85vh;max-height:85dvh}
.pd-inner{max-width:var(--maxw);margin:0 auto;padding:calc(18px * var(--ui-scale)) calc(22px * var(--ui-scale)) calc(12px * var(--ui-scale));
  display:grid;grid-template-columns:calc(200px * var(--ui-scale)) 1fr calc(200px * var(--ui-scale));gap:calc(16px * var(--ui-scale))}
.pd-close{position:absolute;top:calc(8px * var(--ui-scale));right:calc(16px * var(--ui-scale));
  background:none;border:0;color:var(--muted);font-size:calc(22px * var(--ui-scale));cursor:pointer;z-index:2}
.pd-close:hover{color:var(--gold)}

/* flip card — 3 faces */
.pd-flip{perspective:1000px;cursor:pointer;width:100%;aspect-ratio:3/4;position:relative}
.pd-flip-inner{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(12px * var(--ui-scale));
  border:1px solid var(--line);background:rgba(255,255,255,.04)}
.pd-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(10px * var(--ui-scale));background:linear-gradient(160deg,rgba(7,8,13,.95),rgba(10,12,20,.9))}
#pdFaceCover img{width:100%;height:100%;object-fit:contain;border-radius:calc(8px * var(--ui-scale))}
.pd-face-fallback{width:calc(80px * var(--ui-scale));height:calc(80px * var(--ui-scale));border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:calc(40px * var(--ui-scale));
  color:var(--gold);background:rgba(227,176,102,.12);border:2px solid var(--gold)}
.pd-portrait-img{width:calc(120px * var(--ui-scale));height:calc(160px * var(--ui-scale));object-fit:cover;
  border-radius:calc(8px * var(--ui-scale));border:2px solid var(--gold);margin-bottom:calc(6px * var(--ui-scale))}
.pd-char-name{font-family:var(--serif);font-size:calc(16px * var(--ui-scale));font-weight:600;color:var(--gold2);
  text-align:center}
.pd-lyrics{font-size:max(13px,calc(12px * var(--ui-scale)));color:var(--ink);line-height:1.6;white-space:pre-wrap;
  overflow-y:auto;width:100%;height:100%;padding:calc(12px * var(--ui-scale))}
/* dot indicators for flip-card faces */
.pd-flip-dots{display:flex;justify-content:center;gap:calc(6px * var(--ui-scale));margin-top:calc(6px * var(--ui-scale))}
.pd-flip-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);opacity:.3;transition:.2s}
.pd-flip-dot.active{opacity:1;background:var(--gold2)}

/* flip animation */
@keyframes flipOut{0%{transform:rotateY(0);opacity:1}100%{transform:rotateY(-90deg);opacity:0}}
@keyframes flipIn{0%{transform:rotateY(90deg);opacity:0}100%{transform:rotateY(0);opacity:1}}
.pd-face.flip-out{animation:flipOut .25s ease-in forwards}
.pd-face.flip-in{animation:flipIn .25s ease-out forwards}

/* right column */
.pd-right{display:flex;flex-direction:column;gap:calc(6px * var(--ui-scale));min-width:0;
  max-height:calc(200px * var(--ui-scale) * 4 / 3)}
.pd-albums-area .pd-label{font-size:calc(11px * var(--ui-scale));color:var(--faint);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:calc(6px * var(--ui-scale));display:block}
.pd-albums{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:calc(6px * var(--ui-scale));margin-bottom:calc(6px * var(--ui-scale));padding-bottom:calc(4px * var(--ui-scale))}
.pd-albums::-webkit-scrollbar{height:3px}
.pd-albums::-webkit-scrollbar-thumb{background:rgba(227,176,102,.2);border-radius:2px}
.pd-album-btn{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);
  font-size:max(11px,calc(11px * var(--ui-scale)));font-weight:600;white-space:nowrap;flex:0 0 auto;scroll-snap-align:start;
  padding:calc(6px * var(--ui-scale)) calc(14px * var(--ui-scale));border-radius:calc(20px * var(--ui-scale));
  cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--sans)}
.pd-album-btn b{color:var(--gold);font-weight:700;flex:0 0 auto}
.pd-album-btn.active b{color:var(--gold2)}
.pd-album-btn .pd-ab-t{max-width:130px;overflow:hidden;text-overflow:ellipsis}
.pd-album-btn:hover{background:rgba(227,176,102,.1);border-color:var(--gold);color:var(--gold2)}
.pd-album-btn.active{background:rgba(227,176,102,.18);border-color:var(--gold);color:var(--gold2);
  box-shadow:0 0 calc(12px * var(--ui-scale)) rgba(227,176,102,.3)}
.pd-album-btn:active{background:rgba(227,176,102,.2)}
.pd-album-info{margin-bottom:calc(4px * var(--ui-scale))}
#pdAlbumTitle{font-family:var(--serif);font-size:calc(14px * var(--ui-scale));color:var(--gold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-album-desc{font-size:calc(12px * var(--ui-scale));color:var(--muted);line-height:1.5;
  margin-top:calc(2px * var(--ui-scale));max-height:calc(48px * var(--ui-scale));overflow-y:auto}
/* tracklist */
.pd-tracklist-area{overflow-y:auto;flex:1;min-height:0;max-height:none}
.pd-tracklist-area .pd-label{font-size:calc(11px * var(--ui-scale));color:var(--faint);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:calc(6px * var(--ui-scale));display:block}
.pd-track{display:flex;align-items:center;gap:calc(8px * var(--ui-scale));padding:calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
  border-radius:calc(8px * var(--ui-scale));cursor:pointer;transition:.2s;border:1px solid transparent}
.pd-track:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.pd-track:active{background:rgba(227,176,102,.12)}
.pd-track.playing{background:rgba(227,176,102,.08);border-color:rgba(227,176,102,.3)}
.pd-track .pd-tn{font-family:var(--serif);font-size:calc(16px * var(--ui-scale));color:var(--gold);
  width:calc(24px * var(--ui-scale));text-align:center;flex:0 0 auto}
.pd-track .pd-tt{flex:1;font-size:max(13px,calc(13px * var(--ui-scale)));font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-track .pd-na{font-size:calc(10px * var(--ui-scale));color:var(--faint);font-style:italic}
.pd-track .pd-play{flex:0 0 auto;width:calc(24px * var(--ui-scale));height:calc(24px * var(--ui-scale));
  display:flex;align-items:center;justify-content:center;color:var(--muted)}
.pd-track.playing .pd-play{color:var(--gold)}
.pd-track .dl{font-size:max(11px,calc(11px * var(--ui-scale)));font-weight:700;letter-spacing:.04em;color:var(--faint);
  border:1px solid var(--line);border-radius:calc(6px * var(--ui-scale));padding:calc(3px * var(--ui-scale)) calc(7px * var(--ui-scale));cursor:pointer;transition:.2s}
.pd-track .dl:hover{color:var(--gold2);border-color:var(--gold);background:rgba(227,176,102,.06)}
.pd-track .dl:active{background:rgba(227,176,102,.15)}
.pd-empty{color:var(--faint);font-size:calc(14px * var(--ui-scale));text-align:center;padding:calc(20px * var(--ui-scale))}

/* right cover column */
.pd-cover-art{width:100%;aspect-ratio:3/4;border-radius:calc(12px * var(--ui-scale));
  border:1px solid var(--line);background:rgba(255,255,255,.04);overflow:hidden;
  background-size:cover;background-position:center;background-color:#11131f}
.pd-cover-art .pd-cover-fallback{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:calc(48px * var(--ui-scale));
  color:var(--gold);background:rgba(227,176,102,.08)}

@media(max-width:700px){
  .pd-inner{grid-template-columns:1fr;max-height:70vh;overflow-y:auto}
  .pd-flip{width:calc(180px * var(--ui-scale));max-height:none;margin:0 auto calc(8px * var(--ui-scale))}
  .pd-portrait-img{width:calc(90px * var(--ui-scale));height:calc(120px * var(--ui-scale))}
  .pd-char-name{font-size:calc(13px * var(--ui-scale))}
  .pd-lyrics{font-size:calc(11px * var(--ui-scale));padding:calc(8px * var(--ui-scale))}
  .pd-right{max-height:none}
  .pd-cover-art{display:none}
  .player-drawer.open{max-height:85vh}
  .player-drawer.open .pd-inner{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  body.drawer-open{overflow:hidden}
}
@media(max-width:460px){
  .pd-inner{padding:calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale))}
  /* пилюля с числом + коротким именем; НЕ фиксировать 40px (текст переливался) */
  .pd-album-btn{min-height:40px;font-size:max(11px,calc(11px * var(--ui-scale)))}
  .pd-album-btn .pd-ab-t{max-width:100px}
}
/* ── drawer handle (chevron) ───────────────────── */
.p-drawer-handle{position:absolute;top:-20px;left:50%;transform:translateX(-50%);z-index:calc(var(--z-player)+1);width:64px;height:20px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px}
.p-drawer-handle::after{content:'';width:40px;height:4px;border-radius:3px;background:rgba(227,176,102,.25);transition:.2s}
.p-drawer-handle:active::after,.p-drawer-handle:hover::after{background:rgba(227,176,102,.5);height:5px}
.p-drawer-handle[aria-expanded="true"]{z-index:calc(var(--z-drawer)-1)}
.p-drawer-handle[aria-expanded="true"]::after{background:rgba(227,176,102,.15)}

/* ── глобальный плеер (фиксированный низ) ────────────── */
.player{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-player);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:linear-gradient(180deg,rgba(14,16,26,.96),rgba(10,12,20,.975));
  backdrop-filter:blur(18px);border-top:1px solid rgba(227,176,102,.18);
  box-shadow:0 -10px 40px -22px rgba(0,0,0,.9);
  transform:translateY(115%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.player.active{transform:translateY(0)}
.player-inner{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(calc(150px * var(--ui-scale)),1.25fr) auto;
  grid-template-areas:'left controls progress vol';
  align-items:center;gap:calc(18px * var(--ui-scale));padding:calc(11px * var(--ui-scale)) calc(22px * var(--ui-scale))}
.p-left{grid-area:left;display:flex;align-items:center;gap:calc(12px * var(--ui-scale));min-width:0}
.p-cover{width:calc(46px * var(--ui-scale));height:calc(46px * var(--ui-scale));border-radius:calc(9px * var(--ui-scale));flex:0 0 auto;background-size:cover;
  background-position:center;background-color:#11131f;border:1px solid var(--line);
  box-shadow:0 3px 12px -5px rgba(0,0,0,.7)}
.player-info{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.player-album{font-size:max(10px,calc(10.5px * var(--ui-scale)));color:var(--gold);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:calc(2px * var(--ui-scale))}
.player-track{font-family:var(--serif);font-size:calc(16px * var(--ui-scale));font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.player-controls{grid-area:controls;display:flex;align-items:center;gap:calc(8px * var(--ui-scale))}
.p-btn{background:none;border:0;color:var(--muted);cursor:pointer;width:calc(36px * var(--ui-scale));height:calc(36px * var(--ui-scale));padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:color .2s,background .2s,transform .15s;position:relative}
.p-btn svg{width:calc(20px * var(--ui-scale));height:calc(20px * var(--ui-scale));display:block}
.p-btn:hover{color:var(--gold2);background:rgba(255,255,255,.07)}
.p-btn:active{transform:scale(.92)}
.p-btn.p-play{width:calc(44px * var(--ui-scale));height:calc(44px * var(--ui-scale));color:#120a02;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 calc(6px * var(--ui-scale)) calc(18px * var(--ui-scale)) calc(-6px * var(--ui-scale)) rgba(227,176,102,.6)}
.p-btn.p-play svg{width:calc(22px * var(--ui-scale));height:calc(22px * var(--ui-scale))}
.p-btn.p-play:hover{color:#120a02;background:linear-gradient(135deg,#fff7e8,var(--gold2));transform:scale(1.05)}
.p-btn.p-shuffle.active,.p-btn.p-repeat.active{color:var(--gold)}
.p-btn.p-shuffle.active::after,.p-btn.p-repeat.active::after{content:'';position:absolute;bottom:calc(2px * var(--ui-scale));
  left:50%;transform:translateX(-50%);width:calc(4px * var(--ui-scale));height:calc(4px * var(--ui-scale));border-radius:50%;background:var(--gold)}
.p-btn.p-loading{pointer-events:none}
.p-btn .spin{animation:spin .8s linear infinite;transform-origin:center}
.player-progress{grid-area:progress;display:flex;align-items:center;gap:calc(10px * var(--ui-scale));min-width:0}
.p-time{font-size:max(11px,calc(11px * var(--ui-scale)));color:var(--faint);font-variant-numeric:tabular-nums;width:calc(40px * var(--ui-scale));
  text-align:center;flex:0 0 auto;letter-spacing:.02em}
.p-eq{flex:1;min-width:0;cursor:pointer;position:relative;padding:calc(4px * var(--ui-scale)) 0}
.p-eq-time{display:flex;justify-content:space-between;padding:0 2px;margin-bottom:calc(3px * var(--ui-scale));
  font-size:max(10px,calc(9px * var(--ui-scale)));color:var(--faint);font-variant-numeric:tabular-nums;pointer-events:none}
.p-eq-bars{display:flex;align-items:flex-end;gap:2px;height:calc(24px * var(--ui-scale));position:relative}
.eq-bar{flex:1;background:rgba(255,255,255,.08);border-radius:1px;height:4%;min-height:2px;transition:height .06s ease}
.eq-bar.filled{background:linear-gradient(180deg,var(--gold2),var(--ember))}
.eq-bar.buffered{background:rgba(255,255,255,.06);height:15% !important}
.eq-bar.active{background:var(--gold);transition:background .15s}
.p-eq-thumb{position:absolute;bottom:0;width:4px;height:100%;pointer-events:none;z-index:2}
.p-eq-thumb::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--gold2);box-shadow:0 0 6px rgba(227,176,102,.5)}
.p-eq{padding:calc(6px * var(--ui-scale)) 0;touch-action:none}
.p-eq.grabbing{cursor:grabbing}
.p-right{grid-area:vol;display:flex;align-items:center;gap:calc(8px * var(--ui-scale));justify-content:flex-end}
.p-vbar{width:calc(84px * var(--ui-scale));height:calc(5px * var(--ui-scale));background:rgba(255,255,255,.13);border-radius:calc(5px * var(--ui-scale));cursor:pointer;position:relative}
.p-vfill{height:100%;background:var(--muted);border-radius:calc(5px * var(--ui-scale));width:70%}
.p-vbar:hover .p-vfill{background:var(--gold2)}
/* элементы мобильного коллапса: вне свёрнутого состояния скрыты ВЕЗДЕ,
   иначе span/div без grid-area ломают сетку плеера на десктопе */
.p-track-num{display:none}
.p-drag-handle{display:none}
/* ── инлайн-иконки (меню, кнопки) ─────────────────────── */
.nav-links a svg{width:calc(15px * var(--ui-scale));height:calc(15px * var(--ui-scale));vertical-align:calc(-3px * var(--ui-scale));margin-right:calc(5px * var(--ui-scale))}
.btn svg{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale));vertical-align:calc(-3px * var(--ui-scale));margin-right:calc(8px * var(--ui-scale))}
.track.playing{background:rgba(227,176,102,.08);border-color:rgba(227,176,102,.3)}
.track.playing .play{color:var(--gold)}
.track .play{pointer-events:auto}
.track .play.muted{color:var(--faint);cursor:default;opacity:.4}
.track .play.muted:hover{background:none}
.track .ti{cursor:pointer}.track .play{cursor:pointer}
.track .dlwrap{display:flex;gap:calc(6px * var(--ui-scale));flex:0 0 auto}
.track .dl{font-size:calc(11px * var(--ui-scale));font-weight:700;letter-spacing:.04em;color:var(--faint);
  border:1px solid var(--line);border-radius:calc(6px * var(--ui-scale));padding:calc(3px * var(--ui-scale)) calc(7px * var(--ui-scale));cursor:pointer;transition:.2s}
.track .dl:hover{color:var(--gold2);border-color:var(--gold);background:rgba(227,176,102,.06)}
/* album-player removed — replaced by eq-wave in albums.html */

@media(max-width:760px){
  .player-inner{grid-template-columns:1fr auto;
    grid-template-areas:'left controls' 'progress progress';
    gap:6px 10px;padding:6px 10px}
  .p-right{display:none}
  .player-progress{width:100%}
  .player-controls{gap:4px}
  .p-left{align-items:center}
  .p-cover{width:calc(40px * var(--ui-scale));height:calc(40px * var(--ui-scale))}
  .player-track{font-size:calc(14px * var(--ui-scale))}
  .p-eq-time{display:none}
}
@media(max-width:460px){
  .player-controls .p-shuffle,.player-controls .p-repeat{display:none}
  .player-inner{padding:7px 11px;gap:6px 10px}
  .p-cover{width:calc(38px * var(--ui-scale));height:calc(38px * var(--ui-scale));border-radius:calc(8px * var(--ui-scale))}
  .p-time{width:calc(34px * var(--ui-scale));font-size:calc(10px * var(--ui-scale))}
  .p-btn{width:calc(34px * var(--ui-scale));height:calc(34px * var(--ui-scale))}
  .p-btn.p-play{width:calc(42px * var(--ui-scale));height:calc(42px * var(--ui-scale))}
}

/* ── кнопка оглавления библии (только мобильные) ─────── */
.toc-btn{display:none;align-items:center;gap:calc(8px * var(--ui-scale));margin-top:calc(14px * var(--ui-scale));
  padding:calc(9px * var(--ui-scale)) calc(16px * var(--ui-scale));border-radius:calc(30px * var(--ui-scale));font-size:calc(13px * var(--ui-scale));font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--gold2)}
.toc-btn:active{background:var(--gold);color:#0a0a0a}

/* ── футер ──────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:calc(60px * var(--ui-scale)) 0 calc(50px * var(--ui-scale));margin-top:calc(60px * var(--ui-scale));text-align:center}
footer .fsigil{width:calc(50px * var(--ui-scale));height:calc(50px * var(--ui-scale));margin:0 auto calc(18px * var(--ui-scale))}
footer .fbrand{font-family:var(--serif);font-size:calc(30px * var(--ui-scale));letter-spacing:.1em}
footer .fbrand b{color:var(--gold)}
footer .fsl{font-family:var(--serif);font-style:italic;color:var(--gold2);letter-spacing:.16em;margin-top:calc(4px * var(--ui-scale))}
footer .stats{display:flex;justify-content:center;gap:calc(46px * var(--ui-scale));margin:calc(30px * var(--ui-scale)) 0;flex-wrap:wrap}
footer .stat .n{font-family:var(--serif);font-size:calc(40px * var(--ui-scale));color:var(--gold2)}
footer .stat .l{font-size:calc(12px * var(--ui-scale));letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
footer .small{color:var(--faint);font-size:calc(13px * var(--ui-scale));margin-top:calc(14px * var(--ui-scale))}

/* ── адаптив ────────────────────────────────────────── */
@media(max-width:860px){:root{--ui-scale:.88}}
@media(max-width:600px){:root{--ui-scale:.78}}
@media(max-width:400px){:root{--ui-scale:.72}}
@media(max-width:360px){:root{--ui-scale:.65}}
@media(min-width:1800px){:root{--ui-scale:1.15}}
@media(min-width:2400px){:root{--ui-scale:1.3}}

@keyframes mnFade{0%{opacity:0}100%{opacity:1}}

@media(max-width:768px){
  header.nav{padding:calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale))}

  /* drops как на десктопе, компактнее */
  .drops{gap:calc(4px * var(--ui-scale));flex:1;min-width:0}
  .drop-btn{padding:calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));font-size:calc(11px * var(--ui-scale));animation:none!important}
  .drop-btn::after{display:none!important}
  .drop-btn .drop-label{max-width:calc(56px * var(--ui-scale))}
  .drop-btn .drop-arrow{width:calc(8px * var(--ui-scale));height:calc(8px * var(--ui-scale))}
  .drop-panel{min-width:calc(160px * var(--ui-scale))}
  .drop.drop-auth .drop-panel{left:auto;right:0}

  .pillars,.arcs{grid-template-columns:1fr;gap:16px}
  .sec{padding:calc(72px * var(--ui-scale)) 0}
  .sec h2{font-size:clamp(30px,8vw,calc(44px * var(--ui-scale)))}

  /* шторки выезжают снизу, на весь экран */
  .sheet,.sheet.wide{width:100%;border-left:0;border-top:1px solid var(--line);
    transform:translateY(60px)}
  .overlay.open .sheet{transform:translateY(0)}
  .sheet-head{padding:calc(22px * var(--ui-scale)) calc(20px * var(--ui-scale)) calc(16px * var(--ui-scale))}
  .sheet-head h3{font-size:calc(28px * var(--ui-scale));max-width:80%}
  .sheet-body{padding:calc(14px * var(--ui-scale)) calc(18px * var(--ui-scale)) calc(60px * var(--ui-scale))}

  /* мастер-библия: оглавление как выезжающая панель */
  .toc-btn{display:inline-flex}
  .bible-layout{flex-direction:column;position:relative}
  .toc{position:absolute;inset:0;width:100%;max-height:none;z-index:3;
    background:var(--bg2);border-right:0;border-bottom:0;padding:16px 14px 60px;
    transform:translateX(-102%);transition:transform .3s}
  .bible-layout.toc-open .toc{transform:translateX(0)}
  .toc a{padding:calc(13px * var(--ui-scale)) calc(14px * var(--ui-scale));font-size:calc(15px * var(--ui-scale))}
  .bible-read{padding:calc(24px * var(--ui-scale)) calc(20px * var(--ui-scale)) calc(90px * var(--ui-scale));font-size:calc(16px * var(--ui-scale))}
  .bible-read .b-h1{font-size:calc(30px * var(--ui-scale))}.bible-read .b-h2{font-size:calc(23px * var(--ui-scale))}.bible-read .b-h3{font-size:calc(20px * var(--ui-scale))}
  .bible-read blockquote{font-size:calc(18px * var(--ui-scale));padding:calc(8px * var(--ui-scale)) calc(16px * var(--ui-scale))}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .hero{padding:calc(100px * var(--ui-scale)) 18px calc(70px * var(--ui-scale))}
  .albums{grid-template-columns:1fr;gap:calc(16px * var(--ui-scale))}
  .card.ep{grid-column:1/-1;max-width:100%}
  .card .num{font-size:calc(46px * var(--ui-scale))}
  .card .meta .t{font-size:calc(21px * var(--ui-scale))}
  .brand-letters{gap:calc(16px * var(--ui-scale))}
  .arc,.pillar{padding:calc(20px * var(--ui-scale)) calc(18px * var(--ui-scale))}
  footer .stats{gap:calc(24px * var(--ui-scale))}
  footer .stat .n{font-size:calc(34px * var(--ui-scale))}
  .lyrics{font-size:calc(16px * var(--ui-scale));line-height:1.8}
  .track{padding:calc(14px * var(--ui-scale)) calc(8px * var(--ui-scale));gap:calc(12px * var(--ui-scale))}
  .track .tn{width:calc(26px * var(--ui-scale));font-size:calc(18px * var(--ui-scale))}
}
@media(max-width:420px){
  .hero .cta{flex-direction:column;width:100%;max-width:calc(300px * var(--ui-scale))}
  .hero .cta .btn{width:100%;justify-content:center}
  .brand-letters{flex-direction:column;align-items:center;gap:calc(22px * var(--ui-scale))}
  .bl{max-width:none}
}

/* ── touch-цели (сенсорные экраны) ───────────────── */
@media(hover:none) and (pointer:coarse), (pointer:coarse){
  .track{padding:calc(16px * var(--ui-scale)) calc(10px * var(--ui-scale))}
  .track .play{width:38px;height:38px;min-width:38px;min-height:38px}
  .track .play svg{width:20px;height:20px}
  .track .dl{padding:calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
  .card .meta{padding:0 calc(14px * var(--ui-scale)) calc(14px * var(--ui-scale))}
  .drop-btn{padding:calc(10px * var(--ui-scale)) calc(16px * var(--ui-scale))}
  .btn{padding:calc(16px * var(--ui-scale)) calc(28px * var(--ui-scale));min-height:48px}
  .chapter-item{padding:calc(14px * var(--ui-scale)) 10px}
  .h-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-arrow{width:44px;height:44px}
  .p-btn{width:44px;height:44px;min-width:44px;min-height:44px}
  .p-btn.p-play{width:52px;height:52px}
  .p-btn svg{width:22px;height:22px}
  .track .dl,.pd-track .dl{min-width:44px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .pd-track{padding:calc(10px * var(--ui-scale)) calc(8px * var(--ui-scale));min-height:48px}
  .track:active{background:rgba(227,176,102,.12)}
  .track .dl:active,.pd-track .dl:active{background:rgba(227,176,102,.15)}
  .track .play:active{background:rgba(227,176,102,.2);color:var(--gold2)}
  .pd-album-btn:active{background:rgba(227,176,102,.2)}
  .slide-btn,.bm-popup-add{padding:calc(14px * var(--ui-scale)) 0;min-height:48px}
}

/* таблицы: горизонтальный скролл */
.b-table{overflow-x:auto;display:block;max-width:100%}

/* ── микро-анимации плеера ──────────────────────────── */
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(227,176,102,.4)}
  50%{box-shadow:0 0 0 8px rgba(227,176,102,0)}
}
.p-btn.p-play.playing{animation:pulse-glow 1.8s ease-in-out infinite}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.p-eq-bars.eq-idle .eq-bar{animation:fade-in .3s ease}
@keyframes shimmer{
  0%{opacity:.6}
  50%{opacity:1}
  100%{opacity:.6}
}
.p-eq-bars.eq-idle .eq-bar:nth-child(odd){animation:shimmer 1.2s ease-in-out infinite}
.p-eq-bars.eq-idle .eq-bar:nth-child(even){animation:shimmer 1.2s ease-in-out infinite .2s}
.player.active{animation:fade-in .35s ease}

/* ── мобильный коллапс плеера (touch) ────────────────── */
@media(hover:none) and (pointer:coarse){
  .player.collapsible{
    transition:transform .35s cubic-bezier(.4,0,.2,1)
  }
  .player.collapsed{
    transform:translateY(calc(100% - 48px));
    background:none;backdrop-filter:none;border-top:none;box-shadow:none
  }
  .player.collapsed .player-inner{
    grid-template-columns:36px auto auto 1fr;
    grid-template-areas:'play track thumb progress';
    gap:0 8px;padding:0 12px 0 6px;max-width:100%;
    height:48px;align-items:center
  }
  /* во время интерактивного вытягивания transition выключен — плеер следует за пальцем */
  .player.p-dragging{transition:none !important}
  .player.collapsed .p-left{display:none}
  .player.collapsed .p-cover{display:none}
  .player.collapsed .player-info{display:none}
  /* кнопка play живёт в .player-controls — прячем соседние кнопки, а не весь блок */
  .player.collapsed .player-controls{display:flex;grid-area:play;gap:0;justify-content:center}
  .player.collapsed .player-controls .p-btn{display:none}
  .player.collapsed .player-controls .p-btn.p-play{display:flex;width:36px;height:36px;box-shadow:none}
  .player.collapsed .player-controls .p-btn.p-play svg{width:18px;height:18px}
  .player.collapsed .p-right{display:none}
  .player.collapsed .player-progress{grid-area:progress;width:100%;gap:0;overflow:hidden}
  .player.collapsed .p-time{display:none}
  .player.collapsed .p-eq-time{display:none}
  .player.collapsed .p-eq{padding:0;width:100%}
  .player.collapsed .p-eq-bars{height:20px}
  .player.collapsed .p-track-num{
    grid-area:track;display:flex;align-items:center;
    font-size:11px;color:var(--faint);letter-spacing:.06em;white-space:nowrap
  }
  /* язычок — элемент сетки МЕЖДУ номером трека и шкалой (не absolute-оверлей:
     оверлей на всю ширину перехватывал тапы по кнопке play и шкале) */
  .p-drag-handle{
    grid-area:thumb;width:56px;height:48px;flex:0 0 auto;
    cursor:grab;touch-action:none;align-items:center;justify-content:center
  }
  .player.collapsed .p-drag-handle{display:flex}
  .p-drag-handle::before{
    content:'';width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);
    transition:background .2s
  }
  .p-drag-handle:active{cursor:grabbing}
  .p-drag-handle:active::before{background:var(--gold)}
  /* шеврон шторки не должен торчать над свёрнутой полосой */
  .player.collapsed .p-drawer-handle{display:none}
}

/* ── экстремально узкие экраны (<360px) ─────────── */
@media(max-width:360px){
  .drops{gap:2px}
  .drop-btn .drop-arrow{display:none}
  .drop-btn{padding:calc(5px * var(--ui-scale)) calc(6px * var(--ui-scale));font-size:10px}
  .drop-btn .drop-label{max-width:48px}
  .brand{font-size:calc(18px * var(--ui-scale))}
}