:root{
  --bg:#c9c4f6;        /* лавандовый фон */
  --ink:#16151b;       /* почти чёрный текст */
  --yellow:#f4e24e;    /* акцент */
  --violet:#5b47e6;    /* второй акцент / аккорды */
  --coral:#ff6a3d;     /* огонь */
  --paper:#f6f4ee;     /* светлые поверхности / лист песни */
  --line:#16151b;      /* рамки — чёрные, как у sychev */
  --line-soft:rgba(22,21,27,.16);
  --muted:#46434f;
  --faint:#6c6878;
  --chord:#5b47e6;
  --r:18px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",Times,serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:6px}
html,body{margin:0;padding:0}
body{
  background-color:var(--bg);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNjAiIGhlaWdodD0iMzYwIiB2aWV3Qm94PSIwIDAgMzYwIDM2MCI+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTYxNTFiIiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utb3BhY2l0eT0iMC4xIj4KICAgIDwhLS0g0LPQuNGC0LDRgNCwIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgsODYpIHJvdGF0ZSgtMTIpIj4KICAgICAgPGVsbGlwc2UgY3g9IjAiIGN5PSIwIiByeD0iMTUiIHJ5PSIxOCIvPgogICAgICA8Y2lyY2xlIGN4PSIwIiBjeT0iMiIgcj0iNCIvPgogICAgICA8cmVjdCB4PSItMyIgeT0iLTQ2IiB3aWR0aD0iNiIgaGVpZ2h0PSIzMCIgcng9IjIiLz4KICAgICAgPHJlY3QgeD0iLTYiIHk9Ii01NSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjkiIHJ4PSIyIi8+CiAgICA8L2c+CiAgICA8IS0tINC90L7RgtCwIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjEwLDU4KSByb3RhdGUoOCkiPgogICAgICA8ZWxsaXBzZSBjeD0iLTciIGN5PSI3IiByeD0iNiIgcnk9IjQuNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTIwIC03IDcpIi8+CiAgICAgIDxwYXRoIGQ9Ik0tMSA1IFYgLTIyIi8+CiAgICAgIDxwYXRoIGQ9Ik0tMSAtMjIgYyAxMCAyIDEyIDggNiAxNCIvPgogICAgPC9nPgogICAgPCEtLSDRh9Cw0LnQvdC40LogLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDAsOTYpIj4KICAgICAgPHBhdGggZD0iTS0xNSAwIHEwIDE0IDE1IDE0IHExNSAwIDE1IC0xNCB6Ii8+CiAgICAgIDxwYXRoIGQ9Ik0tMTEgMCBxMTEgLTkgMjIgMCIvPgogICAgICA8Y2lyY2xlIGN4PSIwIiBjeT0iLTciIHI9IjIuNSIvPgogICAgICA8cGF0aCBkPSJNMTUgLTIgcTExIC0xIDEzIC0xMSIvPgogICAgICA8cGF0aCBkPSJNLTE1IDAgcS0xMSAxIC05IDExIi8+CiAgICA8L2c+CiAgICA8IS0tINC60L7RgdGC0ZHRgCAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMiwxOTIpIj4KICAgICAgPHBhdGggZD0iTTAgLTIwIEMgOSAtNyAxMSAxIDQgMTEgQyAyIDcgLTIgNyAtNCAxMSBDIC0xMSAxIC03IC0xMCAwIC0yMCBaIi8+CiAgICAgIDxwYXRoIGQ9Ik0tMTUgMTYgbDMwIDYiLz4KICAgICAgPHBhdGggZD0iTS0xNSAyMiBsMzAgLTYiLz4KICAgIDwvZz4KICAgIDwhLS0g0LrRgNGD0LbQutCwINGBINC/0LDRgNC+0LwgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzgsMjA2KSByb3RhdGUoNikiPgogICAgICA8cGF0aCBkPSJNLTkgLTcgaDE4IHYxMSBhOSA5IDAgMCAxIC0xOCAwIHoiLz4KICAgICAgPHBhdGggZD0iTTkgLTMgcTcgMCA3IDYgcTAgNiAtNyA2Ii8+CiAgICAgIDxwYXRoIGQ9Ik0tMyAtMTMgcTMgLTMgMCAtNyIvPgogICAgICA8cGF0aCBkPSJNNCAtMTMgcTMgLTMgMCAtNyIvPgogICAgPC9nPgogICAgPCEtLSDQt9Cy0LXQt9C00LAgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NCwyNzIpIj4KICAgICAgPHBhdGggZD0iTTAgLTExIHEyLjUgOC41IDExIDExIHEtOC41IDIuNSAtMTEgMTEgcS0yLjUgLTguNSAtMTEgLTExIHE4LjUgLTIuNSAxMSAtMTEgeiIvPgogICAgPC9nPgogICAgPCEtLSDRgdC10YDQtNGG0LUgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxODQsMzAwKSByb3RhdGUoLTYpIj4KICAgICAgPHBhdGggZD0iTTAgOSBDIC0xMSAtMiAtOCAtMTMgMCAtNiBDIDggLTEzIDExIC0yIDAgOSBaIi8+CiAgICA8L2c+CiAgICA8IS0tINCx0L7QutCw0LvRiyAo0LfQsNGB0YLQvtC70YzQtSkgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTYsMzAwKSI+CiAgICAgIDxwYXRoIGQ9Ik0tMTAgLTE2IGgxMiBsLTIgOSBhNCA0IDAgMCAxIC04IDAgeiBNLTYgLTMgViA5IE0tMTEgMTAgaDEwIi8+CiAgICAgIDxwYXRoIGQ9Ik0yIC0xNiBoMTIgbC0yIDkgYTQgNCAwIDAgMSAtOCAwIHogTTYgLTMgViA5IE0xIDEwIGgxMCIvPgogICAgPC9nPgogICAgPCEtLSDQvNCw0LvQtdC90YzQutCw0Y8g0L3QvtGC0LAgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAsMTIwKSByb3RhdGUoLTYpIj4KICAgICAgPGVsbGlwc2UgY3g9Ii02IiBjeT0iNiIgcng9IjUiIHJ5PSIzLjgiIHRyYW5zZm9ybT0icm90YXRlKC0yMCAtNiA2KSIvPgogICAgICA8cGF0aCBkPSJNLTEgNSBWIC0xNiIvPgogICAgICA8cGF0aCBkPSJNLTEgLTE2IGMgOCAxIDkgNiA1IDExIi8+CiAgICA8L2c+CiAgICA8IS0tINGB0L7Qu9C90YvRiNC60L4gLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMzAsNDApIj4KICAgICAgPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjciLz4KICAgICAgPHBhdGggZD0iTTAgLTEyIFYgLTE1IE0wIDEyIFYgMTUgTS0xMiAwIEgtMTUgTTEyIDAgSDE1IE0tOSAtOSBsLTIgLTIgTTkgOSBsMiAyIE05IC05IGwyIC0yIE0tOSA5IGwtMiAyIi8+CiAgICA8L2c+CiAgICA8IS0tINC30LLQtdC30LTQsCDQvNC10LvQutCw0Y8gLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MCwyMDApIj4KICAgICAgPHBhdGggZD0iTTAgLTcgcTEuNiA1LjQgNyA3IHEtNS40IDEuNiAtNyA3IHEtMS42IC01LjQgLTcgLTcgcTUuNCAtMS42IDcgLTcgeiIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==");
  background-size:360px 360px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;line-height:1.5;
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:680px;margin:0 auto;padding:0 16px;padding-bottom:calc(48px + var(--safe-b))}

/* ---------- Шапка ---------- */
.top{
  position:sticky;top:0;z-index:20;background:var(--bg);
  padding-top:calc(10px + var(--safe-t));padding-bottom:10px;
  border-bottom:2px solid var(--line);margin-bottom:6px;
}
.top-row{display:flex;align-items:center;gap:12px;min-height:48px}
.back{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:2px solid var(--line);background:var(--paper);
  color:var(--ink);font-size:24px;cursor:pointer;border-radius:50%;font-family:var(--sans);
  transition:transform .12s ease,background .12s ease;
}
.back:active{transform:scale(.94);background:var(--yellow)}
.top-title{flex:1;min-width:0;font-family:var(--sans);font-weight:800;font-size:20px;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Главная ---------- */
.hero{padding:calc(22px + var(--safe-t)) 2px 6px}
.hero h1{font-family:var(--sans);font-weight:900;font-size:clamp(40px,13vw,56px);
  line-height:.92;letter-spacing:-.03em;margin:0 0 12px;text-transform:lowercase}
.hero p{margin:0;color:var(--ink);font-size:17px;max-width:30ch}

.epigraph{
  margin:20px 0 6px;padding:14px 16px;
  background:var(--yellow);border:2px solid var(--line);border-radius:var(--r);
  color:var(--ink);font-style:italic;font-size:16px;line-height:1.5;
}
.epigraph cite{display:block;margin-top:8px;font-style:normal;font-weight:700;
  font-family:var(--sans);font-size:13px;letter-spacing:.02em}
.epigraph cite::before{content:"— "}

.searchbar{display:flex;gap:10px;margin:18px 0 6px}
.searchbar input{
  flex:1;min-width:0;background:var(--paper);border:2px solid var(--line);
  color:var(--ink);font-family:var(--serif);font-size:17px;padding:13px 15px;border-radius:14px;outline:none;
}
.searchbar input::placeholder{color:var(--faint)}
.searchbar input:focus{box-shadow:0 0 0 3px var(--violet)}
.go{
  flex:0 0 auto;background:var(--ink);color:var(--yellow);border:2px solid var(--line);
  font-family:var(--sans);font-weight:800;font-size:16px;padding:0 20px;border-radius:14px;cursor:pointer;
  transition:transform .12s ease;
}
.go:active{transform:scale(.96)}
.hint{color:var(--muted);font-size:14px;margin:4px 2px 0;font-style:italic}

.cards{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.card{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:2px solid var(--line);border-radius:var(--r);padding:20px 18px;cursor:pointer;color:var(--ink);
  transition:transform .1s ease;box-shadow:5px 5px 0 var(--line);
}
.card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
.cards .card:nth-child(1){background:var(--yellow)}
.cards .card:nth-child(2){background:var(--coral)}
.cards .card:nth-child(3){background:var(--paper)}
.card .emoji{font-size:34px;line-height:1}
.card .c-body{flex:1;min-width:0}
.card .c-title{font-family:var(--sans);font-weight:800;font-size:21px;letter-spacing:-.01em}
.card .c-sub{font-size:15px;font-style:italic}
.card .c-count{font-family:var(--sans);font-size:12.5px;font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:.03em;opacity:.7}
.card .chev{font-family:var(--sans);font-size:26px;font-weight:800}

/* ---------- Список ---------- */
.results-head{font-family:var(--sans);color:var(--ink);font-size:12.5px;font-weight:800;
  margin:12px 2px 8px;text-transform:uppercase;letter-spacing:.05em}
.list{display:flex;flex-direction:column;margin-top:4px}
.row{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:transparent;border:0;border-bottom:2px solid var(--line-soft);
  color:var(--ink);padding:14px 4px;cursor:pointer;
}
.row:active{background:var(--yellow)}
.num{
  flex:0 0 auto;min-width:42px;height:42px;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);border-radius:11px;
  color:var(--yellow);font-family:var(--sans);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;
}
.row .r-body{flex:1;min-width:0}
.row .r-title{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .r-artist{color:var(--muted);font-size:14px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .r-flags{flex:0 0 auto;font-size:14px;display:flex;gap:6px}
.empty{color:var(--muted);text-align:center;padding:56px 20px;font-style:italic}
.empty .big{font-size:46px;display:block;margin-bottom:12px}

/* ---------- Плейлист ---------- */
.star{
  flex:0 0 auto;width:42px;height:42px;border:0;background:transparent;cursor:pointer;
  font-size:24px;line-height:1;color:#a39ec9;border-radius:11px;font-family:var(--sans);
}
.star.on{color:var(--violet)}
.star:active{background:var(--yellow)}
.pl-bar{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--violet);color:#fff;border:2px solid var(--line);border-radius:var(--r);
  padding:15px 16px;margin-top:16px;box-shadow:4px 4px 0 var(--line);
  font-family:var(--sans);font-weight:700;font-size:16px;
}
.pl-bar:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
.pl-bar .pl-ic{font-size:22px;color:var(--yellow)}
.pl-bar .pl-txt{flex:1;min-width:0}
.pl-bar .chev{font-size:24px;font-weight:800}
.btn.pl-toggle.on{background:var(--violet);color:#fff}
.btn.pl-toggle.on .plic{color:var(--yellow)}
.pl-note{background:var(--yellow);border:2px solid var(--line);border-radius:12px;
  padding:11px 13px;margin:8px 0 0;font-size:14px;font-style:italic}
.setnav{display:flex;align-items:center;gap:10px;margin:16px 0 0}
.setnav .btn{flex:1}
.setnav .btn.ghost{opacity:.35;pointer-events:none}
.setnav .setpos{flex:0 0 auto;font-family:var(--sans);font-weight:800;font-size:14px;
  color:var(--ink);min-width:52px;text-align:center}

/* ---------- Песня ---------- */
.song-head{padding:10px 2px 2px}
.song-num{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
  color:#fff;background:var(--violet);padding:5px 10px;border-radius:8px;margin-bottom:10px;}
.song-num .dot{opacity:.6}
.song-head h2{font-family:var(--sans);font-weight:900;font-size:28px;line-height:1.02;letter-spacing:-.02em;margin:0}
.song-head .artist{color:var(--muted);font-size:17px;font-style:italic;margin-top:4px}

.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;
  text-decoration:none;background:var(--paper);border:2px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:15px;font-weight:700;padding:10px 14px;border-radius:12px;cursor:pointer;
  transition:transform .12s ease,background .12s ease;
}
.btn:active{transform:scale(.96);background:var(--yellow)}
.btn:disabled{opacity:.35;pointer-events:none}
.btn.play{background:var(--ink);color:var(--yellow);border-color:var(--line)}
.btn.minus{background:var(--violet);color:#fff;border-color:var(--line)}
.btn .ic{font-size:16px}
.spacer{flex:1}
.fontbtns{display:inline-flex;gap:6px}
.fontbtns .btn{min-width:46px}

.sheet-wrap{
  background:var(--paper);border:2px solid var(--line);border-radius:var(--r);
  padding:16px 15px;box-shadow:5px 5px 0 var(--line);
}
.sheet{
  font-family:var(--sans);margin:0;font-size:18px;line-height:1.32;
  color:var(--ink);overflow-wrap:break-word;
}
.sheet .ln{padding:1px 0}
.sheet .ln.blank{height:1.3em;padding:0}
.sheet .ln.lyric{padding:2px 0}
.sheet .ln.chordrow{padding-top:4px}
/* аккорд над словом: слово — inline-block, аккорд блоком сверху; перенос по словам */
.sheet .cw{display:inline-block;vertical-align:bottom}
.sheet .cw > .c{
  display:block;font-family:var(--mono);color:var(--chord);font-weight:700;
  font-size:.85em;line-height:1.25;white-space:nowrap;letter-spacing:0;
}
.sheet .cb{font-family:var(--mono);color:var(--chord);font-weight:700}
.sheet .lbl{font-family:var(--sans);color:var(--coral);font-weight:700}

/* режим «во весь экран» — только текст песни */
.exit-reading{
  position:fixed;top:calc(var(--safe-t) + 10px);right:14px;z-index:40;display:none;
  width:46px;height:46px;align-items:center;justify-content:center;
  border:2px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:20px;border-radius:50%;cursor:pointer;font-family:var(--sans);
}
body.reading .exit-reading{display:inline-flex}
body.reading .top,
body.reading .song-head,
body.reading .toolbar,
body.reading footer{display:none}
body.reading .wrap{padding-top:calc(var(--safe-t) + 16px)}
body.reading .sheet-wrap{box-shadow:none}
.nochords-note{color:var(--muted);font-size:14px;margin-top:16px;font-style:italic}

/* ---------- QR / Поделиться ---------- */
.modal-bg{
  position:fixed;inset:0;z-index:50;background:rgba(22,21,27,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade .18s ease-out;
}
.modal{
  background:var(--paper);border:2px solid var(--line);border-radius:22px;
  padding:24px;max-width:340px;width:100%;text-align:center;box-shadow:8px 8px 0 var(--line);
  animation:pop .18s ease-out;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.modal h3{font-family:var(--sans);font-weight:800;margin:0 0 4px;font-size:19px;letter-spacing:-.01em}
.modal p{margin:0 0 16px;color:var(--muted);font-size:14px;font-style:italic}
.qr{background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px;display:inline-block;line-height:0}
.qr svg{width:204px;height:204px;display:block}
.modal .lk{margin-top:14px;color:var(--faint);font-size:12px;word-break:break-all;font-family:var(--mono)}
.modal .note{margin-top:14px;font-size:12.5px;color:var(--ink);font-style:italic;
  background:var(--yellow);border:2px solid var(--line);border-radius:10px;padding:10px 12px;line-height:1.4}
.modal .row-btns{display:flex;gap:8px;margin-top:18px}
.modal .row-btns .btn{flex:1}
.modal .btn.primary{background:var(--yellow);color:var(--ink);border-color:var(--line)}

footer{color:var(--muted);font-size:13px;text-align:center;padding:28px 0 8px;font-style:italic}
a{color:inherit}