/* Токены и базовые стили публичных страниц МузПо — перенесены из
   E:\CODE\Audiopoetry\index.html (раздел "MuzPo catalog redesign") дословно,
   чтобы публичные страницы визуально совпадали с прототипом. Порт неполный —
   взяты стили, нужные каталогам и странице стихотворения; остальное
   (личный кабинет и т.д.) переносится отдельно при миграции SPA-части. */

*{box-sizing:border-box}
/* Любой компонент, где display выставлен без условия (.profile-menu,
   .my-modal-backdrop, .fullscreen-layer и т.п.), иначе побеждает атрибут
   hidden в каскаде (источник важнее специфичности) — элемент никогда
   реально не скрывается, JS может выставлять hidden=true сколько угодно.
   Один раз и навсегда, а не точечно на каждый новый компонент. */
[hidden]{ display:none !important; }
:root{
  --ink:#10213e; --ink-soft:#32445f; --paper:#f8f6f0; --paper-raised:#fffefa;
  --line:#e7e1d6; --muted:#737986; --gold:#d38212; --gold-soft:#faead1;
  --green:#2f6752; --green-soft:#e4f0e9; --danger:#a9473f;
  --shadow:0 4px 18px rgba(25,39,56,.07); --radius:18px; --topbar-h:72px; --transport-h:86px;
}
html,body{ margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans",Arial,sans-serif; }
body{ padding-inline:max(18px,calc((100vw - 1440px)/2)); }
h1,h2,h3{ font-family:"Fraunces",Georgia,serif; font-weight:600; text-wrap:balance; margin:0; }
a{ color:var(--green); text-decoration:none; }
a:hover{ text-decoration:underline; }

.topbar{
  min-height:var(--topbar-h); padding-block:10px; border-bottom:1px solid rgba(16,33,62,.08);
  display:flex; align-items:center; gap:22px; position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter:blur(12px);
}
.brand{ display:flex; gap:8px; align-items:center; white-space:nowrap; text-decoration:none; }
.brand:hover{ text-decoration:none; }
.brand-note{ font-size:27px; color:var(--gold); line-height:1; transform:translateY(-1px); }
.wordmark{ font:700 30px/1 "Fraunces",Georgia,serif; color:var(--ink); }
.wordmark em{ color:var(--gold); font-style:normal; }
.tabs{ display:flex; gap:5px; margin-inline:auto; }
.tabs a{ padding:10px 18px; border-radius:999px; color:var(--ink-soft); font-size:15px; text-decoration:none; }
.tabs a:hover{ background:rgba(255,254,250,.75); text-decoration:none; }
.tabs a.active{ background:#f5ead8; color:var(--ink); font-weight:600; }
.auth-cta{ display:flex; gap:8px; }
.btn{ border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer; background:var(--paper-raised); color:var(--ink-soft); text-decoration:none; display:inline-block; }
.btn.primary{ background:var(--green); border-color:var(--green); color:#fff; }
.btn:hover{ border-color:rgba(211,130,18,.5); text-decoration:none; }

.topbar-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.balance-chip{ display:flex; align-items:center; gap:8px; background:var(--paper-raised); border:1px solid var(--line); border-radius:999px; padding:8px 16px; box-shadow:var(--shadow); font-size:14px; cursor:pointer; color:inherit; text-decoration:none; }
.balance-chip:hover{ text-decoration:none; }
.balance-chip .amt{ font-weight:600; }
.wallet-icon{ color:var(--gold); font-size:16px; }
.profile-wrap{ position:relative; }
.profile-btn{ width:38px; height:38px; border:0; background:transparent; border-radius:50%; font-size:21px; color:var(--ink); cursor:pointer; }
.profile-btn:hover{ background:var(--paper-raised); }
.header-avatar{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--green-soft); color:var(--green); font-weight:700; font-size:14px; overflow:hidden; border:1px solid rgba(47,103,82,.12); }
.header-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile-menu{ position:absolute; right:0; top:calc(100% + 10px); z-index:40; min-width:190px; background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; gap:1px; }
.profile-menu a, .profile-menu button{ text-align:left; background:none; border:none; padding:10px 13px; border-radius:9px; font-size:14px; color:var(--ink-soft); cursor:pointer; text-decoration:none; display:block; width:100%; font-family:inherit; }
.profile-menu a:hover, .profile-menu button:hover{ background:var(--paper); color:var(--ink); text-decoration:none; }
.menu-divider{ height:1px; background:var(--line); margin:5px 7px; }

main{ padding:28px 0 64px; }
.shell{ max-width:1320px; margin:0 auto; }

.eyebrow{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px; }

/* каталог: hero */
.catalog-hero{ min-height:244px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); gap:24px; align-items:center; padding:28px 28px 18px; position:relative; overflow:hidden; margin-bottom:20px; }
.hero-copy{ position:relative; z-index:2; max-width:760px; }
.hero-copy h1{ font:700 clamp(36px,4.2vw,58px)/1.02 "Fraunces",Georgia,serif; letter-spacing:-.025em; margin:0 0 10px; color:var(--ink); }
.hero-copy h1 em{ color:var(--gold); font-style:normal; }
.hero-copy h2{ font:600 23px/1.25 "Fraunces",Georgia,serif; margin:0 0 8px; color:var(--ink); }
.hero-copy p{ margin:0; max-width:760px; color:var(--muted); font-size:16px; line-height:1.55; }
.hero-stat{ display:flex; gap:10px; margin-top:10px; align-items:center; color:var(--muted); font-size:15px; }
.hero-stat strong{ color:var(--ink); }
.hero-art{ position:relative; height:220px; align-self:end; }
.hero-art::before{ content:""; position:absolute; inset:5% 0 0 7%; background:radial-gradient(circle at 65% 52%,rgba(220,153,50,.14),transparent 43%),linear-gradient(165deg,transparent 0 58%,rgba(47,103,82,.08) 59% 61%,transparent 62%); border-radius:50%; }
.sun{ position:absolute; width:110px; height:110px; border-radius:50%; right:24%; top:6%; background:radial-gradient(circle,#f6c46f 0,#f6c46f 14%,rgba(246,196,111,.26) 15%,rgba(246,196,111,0) 68%); }
.book{ position:absolute; right:7%; bottom:16px; width:270px; height:105px; filter:drop-shadow(0 12px 12px rgba(40,31,18,.12)); }
.book-page{ position:absolute; bottom:0; width:50%; height:92px; background:#fffdf6; border:1px solid #dfd3be; box-shadow:inset 0 -8px 0 #efe2c8; }
.book-page::before,.book-page::after{ content:""; position:absolute; height:1px; background:#d9d0c0; left:25px; right:15px; }
.book-page::before{ top:32px; box-shadow:0 12px 0 #d9d0c0,0 24px 0 #d9d0c0; }
.book-page.left{ left:0; border-radius:12px 2px 8px 18px; transform:skewY(4deg) rotate(-2deg); transform-origin:right bottom; }
.book-page.right{ right:0; border-radius:2px 12px 18px 8px; transform:skewY(-4deg) rotate(2deg); transform-origin:left bottom; }
.book-spine{ position:absolute; left:50%; bottom:0; width:4px; height:88px; background:#c0aa82; border-radius:50%; transform:translateX(-50%); }
.note{ position:absolute; color:var(--gold); font-family:Georgia,serif; opacity:.85; }
.n1{ font-size:30px; left:26%; top:38%; transform:rotate(-8deg); } .n2{ font-size:38px; left:44%; top:18%; transform:rotate(5deg); } .n3{ font-size:28px; right:4%; top:18%; }
.leaf{ position:absolute; width:34px; height:18px; background:#db8c2e; border-radius:90% 10% 90% 10%; opacity:.85; }
.l1{ right:39%; bottom:26px; transform:rotate(22deg); } .l2{ right:29%; bottom:10px; transform:rotate(-28deg); background:#b96e2b; } .l3{ right:2%; bottom:34px; transform:rotate(38deg); background:#c9953d; }

.catalog-tools{ display:grid; grid-template-columns:minmax(320px,1.2fr) minmax(480px,1fr); gap:18px; align-items:center; margin-bottom:20px; }
.search-wrap{ display:flex; align-items:center; gap:12px; background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:0 18px; box-shadow:0 4px 16px rgba(25,39,56,.05); }
.search-icon{ width:17px; height:17px; border:2px solid var(--ink); border-radius:50%; position:relative; flex:0 0 auto; opacity:.82; }
.search-icon::after{ content:""; position:absolute; width:7px; height:2px; background:var(--ink); right:-5px; bottom:-2px; transform:rotate(45deg); border-radius:1px; }
.search{ border:0; background:transparent; box-shadow:none; padding:14px 0; font-size:15.5px; min-width:0; width:100%; color:var(--ink); }
.search:focus{ outline:none; }
.grade-filter{ display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-end; padding:2px 0; scrollbar-width:none; }
.grade-filter::-webkit-scrollbar{ display:none; }
.chip{ min-width:38px; height:38px; padding:0 11px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); font-size:13.5px; box-shadow:0 2px 8px rgba(25,39,56,.04); text-decoration:none; }
.chip:hover{ text-decoration:none; }
.chip.active{ background:var(--green); color:#fff; border-color:var(--green); }
.grade-filter .chip:first-child{ padding-inline:16px; min-width:max-content; }
.auth-note{ justify-self:end; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px; }
.auth-note strong{ color:var(--green); }
#authorsHero .hero-stat strong{ color:var(--green); }

/* каталог: сетка карточек — общий компонент, переиспользуется в Избранном */
.grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; display:grid; }
.card{
  display:grid; grid-template-columns:108px minmax(0,1fr); gap:14px; padding:10px; min-height:176px; cursor:pointer;
  border:1px solid rgba(16,33,62,.07); border-radius:16px; box-shadow:0 5px 18px rgba(25,39,56,.055);
  background:rgba(255,254,250,.96); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  text-decoration:none; color:inherit; position:relative;
}
.card:not(.locked):hover{ transform:translateY(-2px); box-shadow:0 9px 24px rgba(25,39,56,.09); border-color:rgba(211,130,18,.55); text-decoration:none; }
.card.locked{ opacity:.62; cursor:default; }
.poem-cover{ position:relative; border-radius:13px; overflow:hidden; min-height:154px; background:#d9d0c2; }
.poem-cover::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:44%; background:linear-gradient(to top,rgba(11,29,48,.28),transparent); }
.cover-mark{ position:absolute; right:8px; top:7px; color:rgba(255,255,255,.92); font-size:18px; text-shadow:0 1px 4px rgba(0,0,0,.2); z-index:2; }
.placeholder-cover{ background:linear-gradient(155deg,#fbefd9 0 50%,#e4efe9 51% 100%); }
.placeholder-cover.variant-2{ background:linear-gradient(155deg,#eaf1f8 0 52%,#f9ead8 53% 100%); }
.placeholder-cover.variant-3{ background:linear-gradient(155deg,#efe9f6 0 50%,#e5f0e8 51% 100%); }
.placeholder-brand{ position:absolute; left:11px; bottom:10px; z-index:2; font-family:"Fraunces",serif; font-weight:700; font-size:18px; line-height:1; color:var(--ink); }
.placeholder-note{ position:absolute; z-index:2; color:var(--gold); font-family:Georgia,serif; font-size:30px; left:16px; top:12px; transform:rotate(-8deg); }
.placeholder-note.two{ left:auto; right:17px; top:33px; color:var(--green); font-size:39px; transform:rotate(7deg); }
.card-content{ min-width:0; display:flex; flex-direction:column; padding:4px 2px 2px 0; }
.card-top{ display:flex; justify-content:space-between; gap:8px; }
.card h3{ font-size:18px; line-height:1.18; color:var(--ink); margin:0 0 5px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-family:"Fraunces",Georgia,serif; font-weight:600; }
.card .meta{ font-size:13.5px; margin:0 0 3px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .grade-meta{ opacity:.88; }
.card .desc{ font-size:12.5px; line-height:1.42; color:var(--muted); margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* SVG вместо текстовых символов/эмодзи (♥/♡, 👍) — разные браузеры и ОС
   подставляют разные резервные шрифты для этих глифов (особенно ♡, Chrome)
   и по-разному рисуют эмодзи (Firefox), из-за чего иконка визуально "прыгала"
   в размере/форме при смене состояния или между браузерами. Форма SVG
   всегда одна и та же, меняется только заливка через .active. */
.heart-svg,.thumb-svg{ display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; flex-shrink:0; }
.heart-btn.active .heart-svg,.fav.active .heart-svg,.like-action.active .thumb-svg{ fill:currentColor; }

.heart-btn{ border:0; background:transparent; color:var(--muted); width:28px; height:28px; padding:0; display:grid; place-items:center; cursor:pointer; flex-shrink:0; }
.heart-btn.active{ color:var(--gold); }
.card .tag.locked{ background:#ece9e1; color:#6f716f; border-radius:999px; padding:5px 9px; font-size:11px; align-self:flex-start; }
.card-bottom{ display:flex; align-items:center; gap:9px; margin-top:auto; min-width:0; }
.round-play{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 6px rgba(25,39,56,.06); flex:0 0 auto; transition:background-color .18s ease,color .18s ease,border-color .18s ease; }
.round-play svg{ display:block; }
.card:not(.locked):hover .round-play{ background:var(--green); color:#fff; border-color:var(--green); }
.round-play.disabled{ opacity:.6; cursor:default; background:#fff; color:var(--muted); border-color:var(--line); }
.wave{ height:32px; flex:1; display:flex; align-items:center; gap:2px; justify-content:space-between; min-width:35px; opacity:.6; overflow:hidden; transition:opacity .18s ease; }
.card:not(.locked):hover .wave{ opacity:1; }
.wave i{ display:block; width:2px; border-radius:3px; background:var(--muted); height:6px; flex:0 0 auto; transition:background-color .18s ease; }
.card:not(.locked):hover .wave i{ background:var(--green); }
.wave i:nth-child(2){height:10px}.wave i:nth-child(3){height:8px}.wave i:nth-child(4){height:14px}.wave i:nth-child(5){height:11px}.wave i:nth-child(6){height:18px}.wave i:nth-child(7){height:13px}.wave i:nth-child(8){height:22px}.wave i:nth-child(9){height:16px}.wave i:nth-child(10){height:26px}.wave i:nth-child(11){height:19px}.wave i:nth-child(12){height:24px}.wave i:nth-child(13){height:15px}.wave i:nth-child(14){height:20px}.wave i:nth-child(15){height:12px}.wave i:nth-child(16){height:17px}.wave i:nth-child(17){height:9px}.wave i:nth-child(18){height:13px}.wave i:nth-child(19){height:7px}.wave i:nth-child(20){height:10px}
.muted-wave{ opacity:.23; }
.muted-wave i{ background:var(--muted); }
.duration{ font-size:12.5px; margin-left:auto; align-self:center; color:var(--muted); }

.empty{ margin-top:26px; text-align:center; padding:42px 20px; background:var(--paper-raised); border:1px solid var(--line); border-radius:20px; color:var(--muted); }
.empty strong{ display:block; color:var(--ink); font-family:"Fraunces",serif; font-weight:600; font-size:23px; margin-bottom:6px; }

/* каталог: «Как работает МузПо» */
.how-it-works{ margin-top:28px; background:rgba(255,254,250,.9); border:1px solid rgba(16,33,62,.055); border-radius:26px; padding:24px 28px 28px; box-shadow:0 8px 28px rgba(25,39,56,.045); }
.how-it-works>h2{ font:700 34px/1.15 "Fraunces",Georgia,serif; margin:0 0 18px; color:var(--ink); }
.how-it-works>h2 span{ color:var(--gold); }
.info-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.info-item{ display:grid; grid-template-columns:58px 1fr; gap:14px; padding:4px 22px 4px 0; margin-right:22px; border-right:1px solid var(--line); }
.info-item:last-child{ border-right:0; margin-right:0; padding-right:0; }
.info-icon{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:19px; font-family:"IBM Plex Sans",sans-serif; }
.info-icon.green{ background:#e3efe8; color:var(--green); } .info-icon.gold{ background:#fbecd8; color:#c57a0e; } .info-icon.blue{ background:#e3f0f7; color:#245b78; } .info-icon.violet{ background:#efe8f6; color:#61517b; }
.info-item h3{ font-family:"IBM Plex Sans",sans-serif; font-size:16px; line-height:1.25; margin:0 0 7px; color:var(--ink); }
.info-item p{ font-size:13.5px; line-height:1.48; margin:0; color:var(--muted); }
.info-item strong{ color:var(--ink); }
.inline-action{ margin-top:11px; border:0; border-radius:999px; background:var(--green); color:#fff; padding:9px 14px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; }
.inline-action:hover{ text-decoration:none; filter:brightness(.98); }

/* подвал: юридические/справочные ссылки */
.footer-legal{ display:flex; gap:14px; flex-wrap:wrap; }
.footer-legal-link{ border:0; background:none; padding:0; font:inherit; font-size:12.5px; color:var(--muted); cursor:pointer; text-decoration:none; text-align:left; }
.footer-legal-link:hover{ color:var(--ink-soft); text-decoration:underline; }

/* страница стихотворения / плеер */
.poem-page{ padding-bottom:calc(var(--transport-h) + 24px); }
.context-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 12px; }
.back{ border:0; background:transparent; padding:0; color:var(--muted); cursor:pointer; font-size:14px; text-decoration:none; }
.back:hover{ color:var(--ink-soft); text-decoration:none; }
.free-chip{ background:var(--paper-raised); border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-size:12.5px; color:var(--muted); box-shadow:var(--shadow); white-space:nowrap; flex-shrink:0; }
.free-chip .mono,.free-chip strong{ color:var(--ink); font-weight:600; }

.player-stage{ display:grid; grid-template-columns:minmax(0,1.95fr) minmax(320px,.82fr); gap:18px; height:calc(100vh - var(--topbar-h) - 130px); min-height:520px; max-height:760px; align-items:stretch; }
.text-panel,.info-panel{
  min-height:0; background:rgba(255,254,250,.92); border:1px solid rgba(16,33,62,.07);
  border-radius:22px; box-shadow:var(--shadow);
}
.text-panel{ display:flex; flex-direction:column; overflow:hidden; position:relative; }
.panel-head{ flex:0 0 auto; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px 12px 20px; border-bottom:1px solid var(--line); background:rgba(255,254,250,.95); }
.panel-head-left{ min-width:0; }
.panel-kicker{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:2px; }
.panel-title{ font:600 19px/1.18 "Fraunces",Georgia,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fullscreen-btn{ flex:0 0 auto; border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 13px; display:flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-soft); }
.fullscreen-btn:hover{ border-color:rgba(47,103,82,.45); color:var(--green); }
.fullscreen-icon{ font-size:15px; line-height:1; }
.poem-scroll{ flex:1; min-height:0; overflow:auto; padding:28px 34px 38px; scrollbar-color:#d9d2c6 transparent; scrollbar-width:thin; }
.poem-scroll::-webkit-scrollbar{ width:8px; height:8px; }
.poem-scroll::-webkit-scrollbar-thumb{ background:#d9d2c6; border-radius:999px; }
.stanza{ margin-bottom:1.05em; }
.stanza:last-child{ margin-bottom:0; }
.line{ font:500 clamp(22px,2.1vw,32px)/1.5 "Fraunces",Georgia,serif; letter-spacing:-.012em; color:#9a9c92; white-space:nowrap; }
.word{ display:inline-block; position:relative; z-index:0; cursor:pointer; border-radius:6px; transition:color .14s ease; }
.word:hover{ color:var(--ink-soft); }
.word.played{ color:var(--ink); }
.word.current{ color:var(--ink); }
.word.current::before{
  content:""; position:absolute; inset:-3px -8px -2px; z-index:-1;
  background:var(--gold-soft); opacity:.84; transform:rotate(-1deg);
  border-radius:44% 56% 52% 48% / 58% 42% 58% 42%;
}
.helper{ position:absolute; left:20px; bottom:10px; font-size:11.5px; color:var(--muted); background:linear-gradient(90deg,var(--paper-raised) 70%,transparent); padding-right:20px; pointer-events:none; }

.info-panel{ overflow:auto; padding:18px 18px 20px; scrollbar-color:#d9d2c6 transparent; scrollbar-width:thin; }
.info-top{ display:grid; grid-template-columns:minmax(0,1fr) 86px; gap:14px; align-items:start; }
.info-title-wrap{ min-width:0; }
.info-panel h1{ font:600 clamp(26px,2.2vw,34px)/1.06 "Fraunces",Georgia,serif; letter-spacing:-.02em; margin:0 0 6px; color:var(--ink); overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
.author{ font:500 17px/1.28 "Fraunces",Georgia,serif; color:var(--muted); margin-bottom:10px; }
.info-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.info-tag{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 8px; color:var(--muted); font-size:11.5px; }
.cover-mini{ width:86px; height:108px; border-radius:14px; position:relative; overflow:hidden; border:1px solid rgba(16,33,62,.07); box-shadow:0 5px 14px rgba(25,39,56,.07); flex-shrink:0; }
.cover-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.cover-mini:not(.has-image):before{ content:"♪"; position:absolute; right:8px; top:5px; color:#fff; font:22px Georgia,serif; text-shadow:0 1px 5px rgba(0,0,0,.22); }
.info-actions{ display:flex; align-items:center; gap:8px; margin:14px 0 16px; flex-wrap:wrap; }
.fav{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 12px; display:flex; align-items:center; gap:7px; cursor:pointer; font-weight:600; font-size:13px; }
.fav.active{ color:#d36f17; border-color:#edc69e; background:#fff9f3; }
.like-action{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 12px; display:flex; align-items:center; gap:7px; cursor:pointer; font-weight:600; font-size:13px; color:var(--ink-soft); text-decoration:none; }
.like-action.active{ color:var(--green); border-color:#bcdccb; background:var(--green-soft); }
.icon-action{ width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--ink-soft); flex-shrink:0; margin-left:auto; }
.icon-action:hover{ border-color:rgba(16,33,62,.18); color:var(--ink); }
.player-audio{ width:100%; margin:10px 0 16px; }

/* попап "Поделиться" */
.share-icons{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.share-icon{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px; text-decoration:none; flex-shrink:0; transition:transform .12s ease; }
.share-icon:hover{ transform:translateY(-2px); }
.share-vk{ background:#0077ff; }
.share-ok{ background:#ee8208; }
.share-tg{ background:#26a5e4; }
.share-max{ background:#6c4ff2; }
.share-copy{ width:100%; border:1px solid var(--line); background:#fff; border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:9px; cursor:pointer; font-weight:600; font-size:13.5px; color:var(--ink-soft); }
.share-copy:hover{ border-color:rgba(16,33,62,.18); color:var(--ink); }
.share-copy-icon{ font-size:16px; }
.info-divider{ height:1px; background:var(--line); margin:4px 0 16px; }
.info-block+.info-block{ margin-top:17px; padding-top:17px; border-top:1px solid var(--line); }
.info-block h2{ font:600 18px/1.18 "Fraunces",Georgia,serif; margin:0 0 6px; color:var(--ink); }
.info-block p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; }

/* похожие произведения: карусель */
.recs{ margin-top:26px; }
.recs-head{ display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.recs-head h2{ font:600 28px/1.14 "Fraunces",Georgia,serif; margin:0; color:var(--ink); }
.recs-head p{ margin:4px 0 0; color:var(--muted); font-size:13.5px; }
.arrows{ display:flex; gap:7px; }
.arrow{ width:39px; height:39px; border-radius:50%; border:1px solid var(--line); background:var(--paper-raised); cursor:pointer; font-size:18px; }
.carousel{ display:flex; gap:13px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:2px 2px 12px; scrollbar-width:none; }
.carousel::-webkit-scrollbar{ display:none; }
.rec{ flex:0 0 300px; scroll-snap-align:start; display:grid; grid-template-columns:88px minmax(0,1fr); gap:11px; background:var(--paper-raised); border:1px solid rgba(16,33,62,.07); border-radius:17px; padding:9px; box-shadow:0 5px 17px rgba(25,39,56,.04); text-decoration:none; color:inherit; }
.rec:hover{ text-decoration:none; }
.rec-cover{ border-radius:11px; min-height:108px; position:relative; overflow:hidden; }
.rec-cover:not(.has-image):after{ content:"♫"; position:absolute; right:7px; top:5px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.25); }
.rec-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.rec-copy{ display:flex; flex-direction:column; min-width:0; padding:2px 1px; }
.reason{ font-size:10px; color:var(--gold); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px; }
.rec h3{ font:600 16px/1.18 "Fraunces",Georgia,serif; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink); }
.rec-meta{ font-size:12px; color:var(--muted); line-height:1.35; }
.rec-bottom{ display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:5px; }
.rec-play{ width:31px; height:31px; border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:50%; cursor:pointer; display:grid; place-items:center; padding:0; }
.rec-play svg{ display:block; }
.rec-time{ margin-left:auto; font:11.5px "IBM Plex Mono",monospace; color:var(--muted); }

/* нижний транспорт (play/перемотка/время) */
.transport{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--paper-raised); border-top:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(28,34,51,.06);
  padding:16px clamp(16px,4vw,40px);
  display:flex; align-items:center; gap:16px;
}
.transport-inner{ max-width:900px; margin-inline:auto; width:100%; display:flex; align-items:center; gap:16px; }
.play-btn{ width:54px; height:54px; border-radius:50%; background:var(--green); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:18px; }
.seek-wrap{ flex:1; display:flex; align-items:center; gap:10px; }
input[type=range]{ flex:1; accent-color:var(--green); height:20px; }
.time{ color:var(--muted); font-size:13px; min-width:82px; text-align:right; flex-shrink:0; }

/* полноэкранный режим чтения */
body.full-mode{ overflow:hidden; }
body.full-mode .transport{ display:none; }
.fullscreen-layer{ position:fixed; inset:0; z-index:100; background:var(--paper); display:flex; flex-direction:column; }
.fullscreen-top{ height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 clamp(16px,4vw,40px); border-bottom:1px solid var(--line); background:rgba(248,246,240,.96); }
.fullscreen-title{ min-width:0; }
.fullscreen-title strong{ font:600 18px "Fraunces",Georgia,serif; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.fullscreen-title span{ display:block; color:var(--muted); font-size:11.5px; margin-top:2px; }
.exit-full{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 13px; cursor:pointer; font-weight:600; font-size:13px; }
.fullscreen-body{ flex:1; min-height:0; display:flex; justify-content:center; overflow:hidden; padding:0 clamp(14px,4vw,40px); }
.fullscreen-scroll{ width:100%; min-height:0; overflow:auto; padding:34px 28px calc(var(--transport-h) + 34px); scrollbar-width:thin; scrollbar-color:#d9d2c6 transparent; }
.fullscreen-sheet{ min-width:max-content; }
.fullscreen-sheet .line{ font-size:clamp(30px,3.1vw,48px); line-height:1.5; }
.fullscreen-transport{ position:absolute; left:0; right:0; bottom:0; background:rgba(255,254,250,.97); backdrop-filter:blur(16px); border-top:1px solid var(--line); box-shadow:0 -8px 28px rgba(25,39,56,.08); padding:11px clamp(16px,4vw,40px); }

.site-footer{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; row-gap:8px; column-gap:20px; padding:22px 8px 32px; margin-top:16px; color:var(--muted); font-size:12.5px; }
.site-footer>span:first-child{ grid-column:1; grid-row:1; white-space:nowrap; }
.site-footer>span:last-child{ grid-column:3; grid-row:1; white-space:nowrap; justify-self:end; }
.site-footer .footer-legal{ grid-column:1/-1; grid-row:2; }

@media(max-width:1180px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-tools{ grid-template-columns:1fr; }
  .grade-filter{ justify-content:flex-start; }
  .auth-note{ justify-self:start; }
  .info-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 0; }
  .info-item:nth-child(2){ border-right:0; }
  .info-item:nth-child(3),.info-item:nth-child(4){ padding-top:6px; }
  .player-stage{ grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr); }
}
@media(max-width:900px){
  .catalog-hero{ grid-template-columns:1fr; padding:24px 4px 16px; }
  .hero-art{ display:none; }
  .hero-copy h1{ font-size:42px; }
  .hero-copy h2{ font-size:21px; }
}
@media(max-width:860px){
  .player-stage{ grid-template-columns:1fr; height:auto; min-height:0; max-height:none; }
  .text-panel{ height:60vh; min-height:420px; }
  .info-panel{ overflow:visible; }
  .line{ font-size:clamp(24px,4.5vw,32px); }
}
@media(max-width:760px){
  body{ padding-inline:16px; }
  .topbar{ flex-wrap:wrap; }
  .brand{ order:1; }
  .topbar-right{ order:2; }
  .auth-cta{ order:2; }
  .tabs{ order:3; width:100%; overflow-x:auto; justify-content:flex-start; margin:0; padding-top:4px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs a{ white-space:nowrap; }
}
@media(max-width:620px){
  .grid{ grid-template-columns:1fr; }
  .card{ grid-template-columns:96px 1fr; }
  .poem-cover{ min-height:145px; }
  .info-grid{ grid-template-columns:1fr; }
  .info-item{ border-right:0; border-bottom:1px solid var(--line); padding:0 0 18px; margin:0 0 18px; }
  .info-item:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
  .how-it-works{ padding:22px 18px; }
  .how-it-works>h2{ font-size:29px; }
  .line{ font-size:clamp(22px,6vw,28px); }
  .fullscreen-sheet .line{ font-size:clamp(22px,6.5vw,30px); }
  .info-top{ grid-template-columns:minmax(0,1fr) 72px; }
  .cover-mini{ width:72px; height:90px; }
  .rec{ flex-basis:260px; grid-template-columns:76px 1fr; }
  .fullscreen-top{ height:58px; flex-basis:58px; padding-inline:13px; }
  .fullscreen-title strong{ font-size:16px; }
  .site-footer{ grid-template-columns:1fr; row-gap:6px; }
  .site-footer>span:first-child{ grid-column:1; grid-row:1; justify-self:start; }
  .site-footer .footer-legal{ grid-column:1; grid-row:2; }
  .site-footer>span:last-child{ grid-column:1; grid-row:3; justify-self:start; }
}

/* ---------- правовые документы ---------- */
.legal-shell{ max-width:1160px; margin:0 auto; }
.legal-hero{ display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:30px; align-items:end; margin-bottom:22px; }
.legal-hero h1{ font:700 clamp(36px,4.6vw,54px)/1.05 "Fraunces",Georgia,serif; letter-spacing:-.025em; margin:0 0 10px; }
.legal-hero p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:720px; }
.legal-version{ text-align:right; color:var(--muted); font-size:12.5px; line-height:1.5; }
.legal-anchorbar{ display:flex; gap:8px; overflow-x:auto; padding:4px 0 18px; scrollbar-width:none; }
.legal-anchorbar::-webkit-scrollbar{ display:none; }
.legal-anchorbar a{ white-space:nowrap; border:1px solid var(--line); background:var(--paper-raised); border-radius:999px; padding:9px 14px; color:var(--ink-soft); font-size:13px; font-weight:600; text-decoration:none; box-shadow:0 2px 8px rgba(25,39,56,.035); }
.legal-anchorbar a:hover{ border-color:rgba(47,103,82,.35); color:var(--green); }
.legal-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.legal-side{ position:sticky; top:100px; background:rgba(255,254,250,.86); border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:0 4px 16px rgba(25,39,56,.035); }
.legal-side a{ display:block; padding:9px 10px; border-radius:9px; color:var(--muted); font-size:12.5px; text-decoration:none; line-height:1.35; }
.legal-side a:hover{ background:var(--paper); color:var(--ink); }
.legal-docs{ display:flex; flex-direction:column; gap:18px; }
.legal-doc{ background:var(--paper-raised); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:28px 30px; scroll-margin-top:100px; }
.legal-doc-title{ font:700 33px/1.1 "Fraunces",Georgia,serif; margin:0 0 7px; }
.legal-doc-sub{ color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:22px; }
.legal-internal-title{ font:700 19px/1.25 "Fraunces",Georgia,serif; color:var(--ink); margin-bottom:4px; }
.legal-doc h3{ font:700 17px/1.3 "IBM Plex Sans",Arial,sans-serif; margin:26px 0 9px; scroll-margin-top:100px; }
.legal-doc p{ font-size:14px; line-height:1.68; color:var(--ink-soft); margin:0 0 10px; }
.legal-doc ul{ margin:5px 0 12px; padding-left:22px; color:var(--ink-soft); }
.legal-doc li{ font-size:14px; line-height:1.62; margin:4px 0; }
.legal-revision{ font-size:12px; color:var(--muted); margin:0 0 20px; }
.legal-notice{ background:var(--gold-soft); border:1px solid rgba(211,130,18,.18); border-radius:14px; padding:14px 16px; margin-bottom:18px; font-size:13px; line-height:1.55; color:var(--ink-soft); }
.legal-notice strong{ color:var(--ink); }
.legal-note{ background:var(--green-soft); border:1px solid rgba(47,103,82,.16); border-radius:14px; padding:14px 16px; margin-top:18px; color:var(--ink-soft); font-size:12.5px; line-height:1.55; }

@media(max-width:960px){
  .legal-hero{ grid-template-columns:1fr; } .legal-version{ text-align:left; }
  .legal-layout{ grid-template-columns:1fr; } .legal-side{ display:none; }
}
@media(max-width:620px){
  .legal-doc{ padding:22px 18px; border-radius:18px; }
  .legal-doc-title{ font-size:27px; }
}

/* ---------- справка ---------- */
.help-shell{ max-width:1160px; margin:0 auto; }
.help-hero{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:34px; align-items:end; margin-bottom:26px; }
.help-hero h1{ font:700 clamp(38px,4.8vw,56px)/1.04 "Fraunces",Georgia,serif; letter-spacing:-.028em; margin:0 0 10px; }
.help-hero p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:720px; }
.help-hero-card{ background:var(--green-soft); border:1px solid rgba(47,103,82,.14); border-radius:16px; padding:15px 16px; color:var(--ink-soft); font-size:12.5px; line-height:1.55; }
.help-hero-card strong{ display:block; color:var(--green); font-size:13px; margin-bottom:4px; }
.help-layout{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; align-items:start; }
.help-toc{ position:sticky; top:100px; background:rgba(255,254,250,.9); border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:0 4px 16px rgba(25,39,56,.035); max-height:calc(100vh - 120px); overflow:auto; }
.help-toc-title{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--gold); font-weight:700; padding:7px 9px 5px; }
.help-toc a{ display:flex; gap:8px; align-items:flex-start; padding:8px 9px; border-radius:9px; color:var(--muted); font-size:12px; line-height:1.35; text-decoration:none; }
.help-toc a b{ color:var(--gold); font-weight:700; min-width:15px; }
.help-toc a:hover{ background:var(--paper); color:var(--ink); }
.help-content{ display:flex; flex-direction:column; gap:16px; }
.help-section{ background:var(--paper-raised); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:26px 28px; scroll-margin-top:100px; }
.help-section h2{ font:700 28px/1.14 "Fraunces",Georgia,serif; margin:0 0 18px; display:flex; gap:12px; align-items:center; }
.help-section h2 span{ width:32px; height:32px; border-radius:50%; background:var(--gold-soft); color:var(--gold); display:grid; place-items:center; font:700 13px/1 "IBM Plex Sans",Arial,sans-serif; flex:0 0 auto; }
.help-section h3{ font:700 17px/1.3 "IBM Plex Sans",Arial,sans-serif; margin:22px 0 8px; scroll-margin-top:100px; }
.help-section p{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0 0 10px; }
.help-section ul{ margin:6px 0 12px; padding-left:22px; color:var(--ink-soft); }
.help-section li{ font-size:14px; line-height:1.62; margin:4px 0; }
.help-route{ display:inline-flex; align-items:center; background:var(--green-soft); border:1px solid rgba(47,103,82,.14); border-radius:10px; padding:8px 11px; color:var(--green); font-size:13px; font-weight:700; margin:2px 0 11px; }
.help-price-line{ background:var(--gold-soft); border:1px solid rgba(211,130,18,.16); border-radius:11px; padding:10px 12px; color:var(--ink); font-weight:700; font-size:13.5px; margin:6px 0 10px; }
.help-shot-slot{ margin:18px 0 22px; min-height:170px; border:1.5px dashed var(--line); border-radius:16px; background:linear-gradient(135deg,rgba(248,246,240,.7),rgba(255,254,250,.9)); display:flex; align-items:center; justify-content:center; gap:14px; padding:22px; color:var(--muted); text-align:left; }
.help-shot-slot .help-shot-icon{ width:44px; height:44px; border-radius:12px; background:var(--paper-raised); border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); font-size:22px; flex:0 0 auto; }
.help-shot-slot strong{ display:block; color:var(--ink-soft); font-size:13px; margin-bottom:3px; }
.help-shot-slot span{ display:block; font-size:12px; line-height:1.45; }
.help-shot{ margin:18px 0 22px; border:1px solid var(--line); border-radius:16px; background:var(--paper-raised); padding:16px; text-align:center; }
.help-shot img{ display:block; max-width:420px; width:100%; min-width:0; height:auto; margin:0 auto; border-radius:10px; border:1px solid var(--line); }
.help-shot figcaption{ margin-top:10px; font-size:12px; color:var(--muted); }
.help-section.support{ background:var(--green-soft); border-color:rgba(47,103,82,.16); }

@media(max-width:980px){
  .help-hero{ grid-template-columns:1fr; }
  .help-layout{ grid-template-columns:minmax(0,1fr); }
  .help-toc{ position:relative; top:auto; max-height:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .help-toc-title{ grid-column:1/-1; }
}
@media(max-width:620px){
  .help-section{ padding:20px 18px; border-radius:18px; }
  .help-section h2{ font-size:25px; align-items:flex-start; }
  .help-toc{ grid-template-columns:1fr; }
  .help-toc-title{ grid-column:auto; }
  .help-shot-slot{ min-height:140px; align-items:flex-start; }
}

/* ---------- контакты ---------- */
.contacts-shell{ max-width:1160px; margin:0 auto; }
.contacts-hero{ margin-bottom:26px; }
.contacts-hero h1{ font:700 clamp(38px,5vw,56px)/1.05 "Fraunces",Georgia,serif; letter-spacing:-.025em; margin:0 0 10px; }
.contacts-hero p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:640px; }
.contacts-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.contacts-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:24px; }
.contacts-card h2{ font:700 27px/1.15 "Fraunces",Georgia,serif; margin:0 0 8px; }
.contacts-card-sub{ color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 20px; }
.contacts-list{ display:flex; flex-direction:column; gap:10px; }
.contacts-item{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--paper-raised); transition:.18s ease; color:inherit; text-decoration:none; }
.contacts-item:hover{ border-color:rgba(47,103,82,.36); transform:translateY(-1px); text-decoration:none; }
.contacts-icon{ width:42px; height:42px; border-radius:12px; background:var(--green-soft); color:var(--green); display:grid; place-items:center; flex:0 0 auto; font-size:18px; font-weight:700; }
.contacts-copy{ min-width:0; }
.contacts-label{ color:var(--muted); font-size:11.5px; margin-bottom:3px; }
.contacts-value{ color:var(--ink); font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.contacts-item.mail .contacts-icon{ background:var(--gold-soft); color:var(--gold); }
.contacts-company-block{ display:flex; flex-direction:column; gap:16px; }
.contacts-company-name{ font:700 21px/1.25 "Fraunces",Georgia,serif; }
.contacts-detail{ padding-top:15px; border-top:1px solid var(--line); }
.contacts-detail:first-of-type{ padding-top:0; border-top:0; }
.contacts-detail-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin-bottom:5px; }
.contacts-detail-value{ font-size:14px; line-height:1.55; color:var(--ink-soft); }
.contacts-social-card{ grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; }
.contacts-social-copy h2{ margin-bottom:6px; }
.contacts-social-copy p{ margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.contacts-socials{ display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.contacts-social-link{ min-width:145px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--paper-raised); border-radius:13px; padding:11px 14px; color:var(--ink-soft); text-decoration:none; }
.contacts-social-link:hover{ border-color:rgba(47,103,82,.35); text-decoration:none; }
.contacts-social-mark{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--green-soft); color:var(--green); font-weight:700; font-size:12px; }
.contacts-social-link.telegram .contacts-social-mark{ background:var(--gold-soft); color:var(--gold); }
.contacts-social-text strong{ display:block; font-size:13px; }
.contacts-social-text span{ display:block; color:var(--muted); font-size:10.5px; margin-top:1px; }
.contacts-support-note{ margin-top:16px; padding:15px 17px; border-radius:15px; border:1px solid rgba(47,103,82,.13); background:var(--green-soft); color:var(--ink-soft); font-size:13px; line-height:1.55; }
.contacts-support-note strong{ color:var(--green); }

@media(max-width:820px){
  .contacts-grid{ grid-template-columns:1fr; }
  .contacts-social-card{ grid-column:auto; grid-template-columns:1fr; }
  .contacts-socials{ justify-content:flex-start; }
}
@media(max-width:560px){
  .contacts-card{ padding:19px; border-radius:18px; }
  .contacts-socials{ display:grid; grid-template-columns:1fr; }
  .contacts-social-link{ min-width:0; }
}

/* ---------- оплата и возврат ---------- */
.pay-shell{ max-width:1080px; margin:0 auto; }
.pay-hero{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:end; margin-bottom:26px; }
.pay-hero h1{ font:700 clamp(38px,5vw,56px)/1.05 "Fraunces",Georgia,serif; letter-spacing:-.025em; margin:0 0 10px; }
.pay-hero p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:680px; }
.pay-hero-note{ background:var(--green-soft); border:1px solid rgba(47,103,82,.13); border-radius:16px; padding:14px 16px; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
.pay-hero-note strong{ display:block; color:var(--green); margin-bottom:4px; }
.pay-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.pay-toc{ position:sticky; top:100px; background:rgba(255,254,250,.9); border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:0 4px 16px rgba(25,39,56,.035); }
.pay-toc-title{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--gold); font-weight:700; padding:7px 9px 5px; }
.pay-toc a{ display:block; padding:8px 9px; border-radius:9px; color:var(--muted); font-size:12.5px; line-height:1.35; text-decoration:none; }
.pay-toc a:hover{ background:var(--paper); color:var(--ink); }
.pay-content{ background:var(--paper-raised); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:28px 30px; }
.pay-section{ scroll-margin-top:100px; padding-bottom:5px; }
.pay-section+.pay-section{ border-top:1px solid var(--line); margin-top:26px; padding-top:26px; }
.pay-section h2{ font:700 26px/1.16 "Fraunces",Georgia,serif; margin:0 0 12px; }
.pay-section p{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0 0 10px; }
.pay-section ul, .pay-section ol{ color:var(--ink-soft); padding-left:22px; margin:8px 0 12px; }
.pay-section li{ font-size:14px; line-height:1.62; margin:5px 0; }
.pay-price-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:13px 0 15px; }
.pay-price-card{ border:1px solid var(--line); background:var(--paper-raised); border-radius:14px; padding:15px; }
.pay-price-label{ font-size:11.5px; color:var(--muted); margin-bottom:5px; }
.pay-price{ font:700 22px/1.1 "Fraunces",Georgia,serif; color:var(--ink); }
.pay-price small{ font:500 12px/1.4 "IBM Plex Sans",Arial,sans-serif; color:var(--muted); }
.pay-formula{ background:var(--gold-soft); border:1px solid rgba(211,130,18,.15); border-radius:13px; padding:12px 14px; margin:11px 0; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.pay-formula strong{ color:var(--ink); }
.pay-notice{ background:var(--green-soft); border:1px solid rgba(47,103,82,.14); border-radius:13px; padding:12px 14px; margin:12px 0; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.pay-notice strong{ color:var(--green); }
.pay-warning{ background:var(--gold-soft); border:1px solid rgba(211,130,18,.18); border-radius:13px; padding:12px 14px; margin:12px 0; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.pay-contact-box{ display:flex; gap:12px; flex-wrap:wrap; margin-top:13px; }
.pay-contact-link{ display:inline-flex; align-items:center; border:1px solid var(--line); background:var(--paper-raised); border-radius:11px; padding:10px 13px; font-size:13px; font-weight:600; color:var(--green); cursor:pointer; }
.pay-contact-link:hover{ border-color:rgba(47,103,82,.35); }
.pay-reqs{ display:grid; grid-template-columns:140px 1fr; gap:8px 14px; font-size:13.5px; line-height:1.5; margin:0; }
.pay-reqs dt{ color:var(--muted); }
.pay-reqs dd{ margin:0; color:var(--ink-soft); }

@media(max-width:900px){
  .pay-hero{ grid-template-columns:1fr; }
  .pay-layout{ grid-template-columns:1fr; }
  .pay-toc{ position:relative; top:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pay-toc-title{ grid-column:1/-1; }
}
@media(max-width:620px){
  .pay-content{ padding:21px 18px; border-radius:18px; }
  .pay-price-grid{ grid-template-columns:1fr; }
  .pay-toc{ grid-template-columns:1fr; }
  .pay-toc-title{ grid-column:auto; }
  .pay-reqs{ grid-template-columns:1fr; gap:2px; }
  .pay-reqs dd{ margin-bottom:8px; }
}

/* ---------- создать песню ---------- */
.create-storage-note{ flex:0 0 auto; max-width:310px; border:1px solid var(--line); background:rgba(255,254,250,.88); border-radius:16px; padding:13px 15px; color:var(--muted); font-size:12.5px; line-height:1.45; box-shadow:0 4px 16px rgba(25,39,56,.035); }
.create-storage-note strong{ color:var(--ink); }

.create-grid{ display:grid; grid-template-columns:minmax(0,1.22fr) minmax(390px,.78fr); gap:18px; align-items:start; }
.create-panel{ background:rgba(255,254,250,.96); border:1px solid rgba(16,33,62,.07); border-radius:22px; box-shadow:var(--shadow); }
.create-text-panel{ position:sticky; top:92px; overflow:hidden; }
.create-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.create-panel-head h2{ font-size:24px; line-height:1.15; }
.create-panel-head p{ margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
.create-textarea-wrap{ padding:18px 18px 12px; }
.create-textarea-wrap textarea{
  width:100%; min-height:420px; resize:vertical; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:16px; padding:19px 20px; font:500 19px/1.62 "Fraunces",Georgia,serif; outline:none;
  box-shadow:inset 0 1px 0 rgba(16,33,62,.02);
}
.create-textarea-wrap textarea:focus{ border-color:rgba(47,103,82,.55); box-shadow:0 0 0 3px rgba(47,103,82,.08); }
.create-textarea-wrap textarea::placeholder{ color:#aaa89f; }
.create-text-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 20px 18px; color:var(--muted); font-size:12.5px; }
.correct-text-group{ display:flex; align-items:center; gap:6px; }
.correct-text-btn{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 13px; font-size:12px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.correct-text-btn:hover{ border-color:rgba(47,103,82,.4); color:var(--ink); }
.correct-text-btn:disabled{ opacity:.5; cursor:default; }
.tooltip-wrap{ position:relative; display:inline-flex; }
.tooltip-trigger{ width:20px; height:20px; border:1px solid var(--line); background:#fff; border-radius:50%; color:var(--muted); font-size:12px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0; }
.tooltip-trigger:hover,.tooltip-trigger:focus-visible{ color:var(--ink); border-color:rgba(47,103,82,.4); }
.tooltip-bubble{
  position:absolute; right:0; bottom:calc(100% + 8px); z-index:20;
  width:240px; background:var(--ink); color:#fff; border-radius:10px;
  padding:10px 12px; font-size:12px; line-height:1.45; font-weight:400;
  text-align:left; box-shadow:0 8px 20px rgba(16,33,62,.22);
  opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .14s ease,transform .14s ease;
}
.tooltip-trigger:hover+.tooltip-bubble,.tooltip-trigger:focus-visible+.tooltip-bubble{ opacity:1; transform:translateY(0); pointer-events:auto; }

.create-settings-panel{ padding:18px; }
.create-settings-panel>h2{ font-size:25px; margin-bottom:4px; }
.create-settings-intro{ margin:0 0 18px; color:var(--muted); font-size:13.5px; line-height:1.5; }
.create-mode-toggle{ margin-bottom:18px; }
.create-mode-toggle button{ font-size:13.5px; padding:10px 12px; }
.create-setting{ padding:16px 0; border-top:1px solid var(--line); }
.create-setting:first-of-type{ border-top:0; padding-top:4px; }
.create-setting-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.create-setting-title{ font-weight:700; font-size:14px; color:var(--ink); }
.create-setting-hint{ font-size:11.5px; color:var(--muted); }
.create-chip{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px; font-size:13px; color:var(--ink-soft); cursor:pointer; }
.create-chip:hover{ border-color:rgba(47,103,82,.4); }
.create-chip.active{ background:var(--green-soft); border-color:rgba(47,103,82,.35); color:var(--green); font-weight:600; }
.create-chip.secondary.active{ background:#f4ead8; border-color:#e2cda9; color:var(--ink); }
.create-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.create-more-btn{ border:0; background:transparent; color:var(--green); font-size:12.5px; font-weight:600; padding:7px 2px; margin-top:7px; cursor:pointer; }
.create-more-btn:hover{ text-decoration:underline; }

.create-tempo-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.create-tempo{ border:1px solid var(--line); background:#fff; border-radius:13px; padding:10px 7px; text-align:center; min-width:0; cursor:pointer; transition:.15s ease; }
.create-tempo:hover{ border-color:rgba(47,103,82,.42); transform:translateY(-1px); }
.create-tempo strong{ display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.create-tempo span{ display:block; color:var(--muted); font:11px/1.25 "IBM Plex Mono",monospace; margin-top:3px; }
.create-tempo.active{ background:var(--green-soft); border-color:rgba(47,103,82,.35); }
.create-tempo.active strong,.create-tempo.active span{ color:var(--green); }

.create-vocal-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.create-vocal{ border:1px solid var(--line); background:#fff; border-radius:13px; padding:11px 9px; text-align:left; font-size:12.5px; line-height:1.25; min-height:50px; display:flex; align-items:center; gap:8px; cursor:pointer; transition:.15s ease; }
.create-vocal::before{ content:"♪"; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--paper); color:var(--gold); font-family:Georgia,serif; flex:0 0 auto; }
.create-vocal:hover{ border-color:rgba(47,103,82,.42); transform:translateY(-1px); }
.create-vocal.active{ background:var(--green-soft); border-color:rgba(47,103,82,.35); color:var(--green); font-weight:600; }
.create-vocal.active::before{ background:#fff; color:var(--green); }

.create-additional{ margin-top:18px; overflow:hidden; }
.create-additional-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; border:0; background:transparent; padding:18px 20px; text-align:left; cursor:pointer; }
.create-additional-toggle:hover{ background:rgba(250,234,209,.22); }
.create-additional-toggle h2{ font-size:24px; margin-bottom:4px; }
.create-additional-toggle p{ margin:0; color:var(--muted); font-size:13px; }
.create-chevron{ width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; transition:transform .18s ease; }
.create-additional.open .create-chevron{ transform:rotate(180deg); }
.create-additional-body{ border-top:1px solid var(--line); padding:4px 20px 20px; }
.create-advanced-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
.create-advanced-grid .create-setting:nth-child(1),.create-advanced-grid .create-setting:nth-child(2){ border-top:0; }
.create-setting-wide{ grid-column:1 / -1; }
.create-user-prompt{ width:100%; min-height:220px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; font:inherit; font-size:13px; color:var(--ink); outline:none; resize:vertical; box-sizing:border-box; line-height:1.5; }
.create-user-prompt:focus{ border-color:rgba(47,103,82,.5); }
.create-user-prompt::placeholder{ color:#aaa89f; }

.create-select-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 16px;
  font-size:13px; color:var(--ink); cursor:pointer; text-align:left; transition:border-color .15s ease;
}
.create-select-btn:hover{ border-color:rgba(47,103,82,.42); }
.create-select-chevron{ color:var(--muted); font-size:11px; flex:0 0 auto; }
.create-segmented{ display:flex; padding:3px; background:var(--paper); border:1px solid var(--line); border-radius:12px; gap:3px; }
.create-segmented button{ flex:1; border:0; background:transparent; border-radius:9px; padding:9px 10px; color:var(--muted); font-size:12.5px; cursor:pointer; }
.create-segmented button.active{ background:#fff; color:var(--ink); font-weight:600; box-shadow:0 2px 8px rgba(25,39,56,.06); }
.create-bpm-row{ display:grid; grid-template-columns:1fr 120px; gap:8px; align-items:center; }
.create-bpm-row .create-hintbox{ color:var(--muted); font-size:12.5px; line-height:1.35; }
.create-bpm-input{ width:100%; border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; text-align:center; font-family:"IBM Plex Mono",monospace; outline:none; }
.create-bpm-input:focus{ border-color:rgba(47,103,82,.5); }

.create-action-bar{ margin-top:18px; background:rgba(255,254,250,.96); border:1px solid rgba(16,33,62,.07); border-radius:22px; box-shadow:var(--shadow); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.create-summary{ min-width:0; }
.create-summary-label{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:4px; }
.create-summary-text{ font:600 18px/1.2 "Fraunces",Georgia,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.create-summary-sub{ margin-top:3px; color:var(--muted); font-size:11.5px; }
.create-summary-cost{ margin-top:7px; font:600 13px/1.3 "IBM Plex Mono",monospace; color:var(--ink-soft); }
.create-summary-cost.insufficient{ color:var(--danger); }
.create-summary-reason{ margin-top:7px; max-width:520px; font-size:12.5px; line-height:1.4; color:var(--danger); }

.impersonation-banner{ background:#3a1f1f; color:#fff; text-align:center; padding:10px 16px; font-size:13px; }
.impersonation-banner button{ margin-left:10px; border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff; border-radius:999px; padding:4px 12px; font-size:12px; cursor:pointer; }
.impersonation-banner button:hover{ background:rgba(255,255,255,.12); }
.create-submit-btn{ border:0; background:var(--green); color:#fff; border-radius:999px; padding:13px 22px; font-weight:700; min-width:176px; cursor:pointer; box-shadow:0 6px 16px rgba(47,103,82,.18); }
.create-submit-btn:hover{ filter:brightness(.97); transform:translateY(-1px); }
.create-submit-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

.create-progress-card{ margin-top:18px; padding:18px 20px; }
.create-progress-card h2{ font-size:24px; margin-bottom:4px; }
.create-progress-card>p{ margin:0 0 16px; color:var(--muted); font-size:13px; }
.create-progress-track{ height:8px; border-radius:999px; background:var(--line); overflow:hidden; margin-bottom:14px; }
.create-progress-fill{ height:100%; width:0; background:var(--green); border-radius:999px; transition:width .4s ease; }
.create-steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.create-step{ font-size:11.5px; color:var(--muted); line-height:1.3; padding-top:10px; border-top:2px solid var(--line); }
.create-step.active{ color:var(--ink); border-color:var(--green); font-weight:600; }
.create-step.done{ color:var(--green); border-color:var(--green); }
.create-result-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; align-items:center; }
.create-result-actions .btn{ min-height:40px; }
.create-result-audio{ width:100%; margin:14px 0 4px; }
.create-result-note{ margin-top:12px; color:var(--muted); font-size:11.5px; line-height:1.4; }
.create-result-error{ margin-top:12px; padding:12px 14px; border-radius:13px; background:var(--danger-soft); color:#7f3432; font-size:13px; line-height:1.5; }

.create-picker-list{ display:flex; flex-wrap:wrap; gap:8px; }

@media(max-width:1120px){
  .create-grid{ grid-template-columns:1fr 380px; }
  .create-tempo-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:900px){
  .create-grid{ grid-template-columns:1fr; }
  .create-text-panel{ position:static; }
  .create-advanced-grid{ grid-template-columns:1fr; }
  .create-advanced-grid .create-setting:nth-child(2){ border-top:1px solid var(--line); }
}
@media(max-width:620px){
  .create-panel-head{ padding:16px 16px 13px; }
  .create-textarea-wrap{ padding:14px 14px 10px; }
  .create-textarea-wrap textarea{ min-height:340px; font-size:17px; padding:16px; }
  .create-text-meta{ padding:0 16px 15px; }
  .create-settings-panel{ padding:16px; }
  .create-vocal-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .create-tempo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .create-action-bar{ align-items:stretch; flex-direction:column; }
  .create-summary-text{ white-space:normal; }
  .create-submit-btn{ width:100%; }
  .create-steps{ grid-template-columns:1fr; }
  .create-step{ padding:7px 0 0; }
}