.pad{height:2rem}
.lbl{font-family:var(--mono); font-size:.66rem; letter-spacing:0; color:var(--muted); text-transform:none}
/* ---- полоска боя ---- */
.strip{display:inline-flex; gap:5px; flex-wrap:nowrap; max-width:100%; overflow-x:auto}
.strip .bt{display:inline-flex; gap:1px}
.strip i{width:var(--c,19px); height:calc(var(--c,19px) * 1.2); border:1px solid var(--line); display:grid; place-items:center;
  font-style:normal; font-family:var(--mono); font-size:calc(var(--c,19px) * .55); font-weight:600; color:var(--ink); background:var(--card); flex:0 0 auto}
.strip i[data-v="D"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.strip i[data-v="U"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.strip i[data-v="X"]{background:var(--ink); color:var(--paper)}
.strip i[data-v="B"]{color:var(--ink)}
.strip i[data-v=""]{border-style:dashed; color:var(--muted)}
.strip i[data-now]{outline:1px solid var(--field); outline-offset:1px; position:relative; z-index:2}
.strip.lg{--c:34px}
.legend{display:flex; gap:.4rem .9rem; flex-wrap:wrap; font-size:.76rem; color:var(--muted); margin:.6rem 0 0}
.legend span{display:inline-flex; align-items:center; gap:.3rem}
.legend .strip{--c:15px}
/* ---- теги, уровень ---- */
.tags{display:flex; gap:.25rem; flex-wrap:wrap}
.tag{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; border:1px solid var(--line); padding:.1rem .4rem; color:var(--muted); white-space:nowrap}
.tag.m{border-color:var(--ink); color:var(--ink); font-weight:600}
.lvl{display:inline-flex; gap:2px; vertical-align:middle}
.lvl s{width:8px; height:8px; border:1px solid var(--ink); display:block; text-decoration:none}
.lvl s[data-on]{background:var(--ink)}
.play{font:inherit; font-family:var(--mono); font-weight:700; font-size:.9rem; width:40px; height:40px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer; flex:0 0 auto; border-radius:var(--rs)}
.play[data-on="1"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.count{font-family:var(--mono); font-size:.78rem; color:var(--muted)}
.count b{color:var(--ink)}
.empty{border:2px dashed var(--line); padding:1.2rem; text-align:center; color:var(--muted); font-size:.92rem}
input.q{font:inherit; font-size:1rem; width:100%; padding:.7rem .8rem; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:var(--rs)}
input.q:focus{outline:none; border-color:var(--accent)}
/* ---- концепт 1: фасеты ---- */
.cat{display:grid; grid-template-columns:15.5rem minmax(0,1fr); gap:1.6rem; align-items:start; margin-top:1.3rem}
@media (max-width:780px){.cat{grid-template-columns:minmax(0,1fr)}}
.facets{position:sticky; top:5rem; display:grid; gap:1.1rem}
@media (max-width:780px){.facets{position:static}}
.facets fieldset{border:0; border-top:1px solid var(--line); padding:.5rem 0 0; margin:0}
.facets legend{font-family:var(--mono); font-size:.66rem; letter-spacing:0; color:var(--muted); padding:0 .3rem 0 0}
.chk{display:flex; align-items:center; gap:.45rem; font-size:.9rem; padding:.18rem 0; cursor:pointer}
.chk input{accent-color:var(--accent); width:15px; height:15px}
.chk em{margin-left:auto; font-style:normal; font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.chk[data-zero]{opacity:.4}
.rowsort{display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:.6rem}
.results{list-style:none; margin:0; padding:0}
.results > li{border-bottom:1px solid var(--line)}
.r-main{display:grid; grid-template-columns:40px minmax(0,1fr); gap:.8rem; padding:.8rem 0; align-items:start; cursor:pointer}
.r-main h3{margin:0; font-size:1.02rem}
.r-main .alt{font-size:.8rem; color:var(--muted); margin:.05rem 0 .4rem}
.r-meta{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.45rem}
.r-more{padding:0 0 1rem 3.3rem}
.r-more p{margin:.2rem 0 .7rem; font-size:.9rem; color:var(--muted)}
.chips{display:flex; gap:.3rem; flex-wrap:wrap; margin:.6rem 0 0}
.chip{font:inherit; font-size:.78rem; border:1px solid var(--ink); background:var(--card); color:var(--ink); padding:.2rem .5rem; cursor:pointer; border-radius:var(--rs)}
.chip::after{content:" ×"; color:var(--muted)}
/* ---- концепт 2: умный поиск ---- */
.hero-search{border:1px solid var(--line); padding:1.1rem; margin-top:1.3rem; background:var(--card)}
.hero-search input.q{font-size:1.3rem; padding:.9rem 1rem; border-width:2px}
.parsed{display:flex; gap:.35rem; flex-wrap:wrap; margin:.7rem 0 0; min-height:1.8rem; align-items:center}
.parsed .chip{border-color:var(--accent); color:var(--accent)}
.parsed .rest{font-family:var(--mono); font-size:.75rem; color:var(--muted)}
.sugg{display:flex; gap:.35rem; flex-wrap:wrap; margin:.6rem 0 0}
.sugg button{font:inherit; font-family:var(--mono); font-size:.74rem; border:1px dashed var(--line); background:transparent; color:var(--muted); padding:.25rem .55rem; cursor:pointer; border-radius:var(--rs)}
.sugg button:hover{border-style:solid; color:var(--ink)}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:1.1rem}
.card{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:.9rem .9rem 1rem; display:grid; gap:.55rem; background:var(--card); min-width:0}
.card h3{margin:0; font-size:1rem}
.card .top2{display:flex; justify-content:space-between; gap:.5rem; align-items:start}
.card .note{font-size:.84rem; color:var(--muted); margin:0}
mark{background:var(--accent-soft); color:var(--accent); padding:0 1px}
/* ---- концепт 3: таблица ---- */
.filters3{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.5rem; margin:1.2rem 0 .8rem}
.filters3 label{display:grid; gap:.2rem; font-family:var(--mono); font-size:.64rem; letter-spacing:0; color:var(--muted)}
.filters3 select,.filters3 input{font:inherit; font-size:.9rem; padding:.45rem .5rem; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:var(--rs); width:100%}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line)}
table.t{border-collapse:collapse; width:100%; min-width:760px; font-size:.88rem}
table.t th{font-family:var(--mono); font-size:.64rem; letter-spacing:0; text-align:left; padding:.55rem .5rem; border-bottom:1px solid var(--line);
  background:var(--sunk); white-space:nowrap; font-weight:500; cursor:pointer; user-select:none}
table.t th[data-dir="asc"]::after{content:" ↑"; color:var(--accent)}
table.t th[data-dir="desc"]::after{content:" ↓"; color:var(--accent)}
table.t th.no{cursor:default}
table.t td{padding:.5rem; border-bottom:1px solid var(--line); vertical-align:middle}
table.t tr[data-sel] td{background:var(--accent-soft)}
table.t td .play{width:34px; height:34px; font-size:.8rem}
table.t td.nm b{display:block}
table.t td.nm span{font-size:.75rem; color:var(--muted)}
table.t input[type=checkbox]{accent-color:var(--accent); width:16px; height:16px}
.dock{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--bar); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px)); transform:translateY(110%); transition:transform .2s}
.dock[data-open]{transform:none}
.dock-in{max-width:var(--w); margin:0 auto; display:grid; gap:.4rem}
.cmp{display:grid; grid-template-columns:8rem minmax(0,1fr) auto; gap:.6rem; align-items:center}
.cmp b{font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmp .strip{--c:16px}
/* ---- концепт 4: по ритму ---- */
.drawpad{border:1px solid var(--line); padding:1rem; margin-top:1.2rem; background:var(--card)}
.draw{display:flex; gap:6px; flex-wrap:wrap; margin:.8rem 0 0}
.draw .bt{display:flex; gap:2px}
.draw button{width:clamp(30px,8.5vw,44px); height:clamp(38px,10.5vw,54px); border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-family:var(--mono); font-size:1.05rem; font-weight:600; cursor:pointer; padding:0; border-radius:var(--rs)}
.draw button[data-v="D"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.draw button[data-v="U"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.draw button[data-v="X"]{background:var(--ink); color:var(--paper)}
.draw button[data-v=""]{border-style:dashed; color:var(--muted)}
.draw button[data-now]{outline:1px solid var(--field); outline-offset:2px}
.match{list-style:none; margin:1rem 0 0; padding:0; border-top:1px solid var(--line)}
.match li{display:grid; grid-template-columns:4.2rem 40px minmax(0,1fr); gap:.8rem; align-items:center; padding:.75rem 0; border-bottom:1px solid var(--line)}
.pct{font-family:var(--mono); font-weight:600; font-size:1.25rem}
.pct small{display:block; height:4px; background:var(--sunk); margin-top:.3rem}
.pct small i{display:block; height:100%; background:var(--accent)}
.match h3{margin:0 0 .3rem; font-size:.98rem}
.diffnote{font-family:var(--mono); font-size:.7rem; color:var(--muted); margin:.3rem 0 0}

/* ===== кастомный селект ===== */
.cs{position:relative; display:inline-block; min-width:7.5rem; vertical-align:middle}
.field .cs,.filters3 .cs,.fbar .cs{display:block; width:100%}
.cs-native{position:absolute!important; opacity:0!important; pointer-events:none!important; width:1px!important; height:1px!important; overflow:hidden}
.cs-btn{font:inherit; font-size:.92rem; width:100%; text-align:left; border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:.5rem 2.1rem .5rem .65rem; cursor:pointer; position:relative; border-radius:var(--rs); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:2.5rem}
.cs-btn::after{content:""; position:absolute; right:.7rem; top:50%; width:7px; height:7px; border-right:1px solid var(--field);
  border-bottom:1px solid var(--field); transform:translateY(-70%) rotate(45deg); transition:transform .12s}
.cs[data-open] .cs-btn{border-color:var(--accent)}
.cs[data-open] .cs-btn::after{transform:translateY(-25%) rotate(-135deg)}
.cs-btn .cs-ph{color:var(--muted)}
.cs-btn .cs-n{font-family:var(--mono); font-size:.7rem; background:var(--accent); color:var(--on-accent); padding:.05rem .35rem; margin-left:.35rem}
.cs-pop{position:absolute; left:0; top:calc(100% + 4px); z-index:80; min-width:100%; width:max-content; max-width:min(22rem,92vw);
  background:var(--card); border:1px solid var(--line); box-shadow:6px 6px 0 rgba(0,0,0,.08); display:none}
.cs[data-up] .cs-pop{top:auto; bottom:calc(100% + 4px)}
.cs[data-open] .cs-pop{display:block}
.cs-search{display:block; border-bottom:1px solid var(--line)}
.cs-search input{font:inherit; font-size:.9rem; width:100%; border:0; padding:.55rem .65rem; background:var(--sunk); color:var(--ink); outline:none}
.cs-list{list-style:none; margin:0; padding:.2rem 0; max-height:16rem; overflow-y:auto}
.cs-opt{display:flex; align-items:center; gap:.55rem; padding:.48rem .65rem; cursor:pointer; font-size:.92rem; user-select:none}
.cs-opt[data-active]{background:var(--sunk)}
.cs-opt[aria-selected="true"]{font-weight:600}
.cs-opt .cs-mk{width:14px; height:14px; flex:0 0 auto; border:1px solid var(--line); display:grid; place-items:center; font-size:.6rem; line-height:1}
.cs-single .cs-opt .cs-mk{border:0}
.cs-opt[aria-selected="true"] .cs-mk{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.cs-single .cs-opt[aria-selected="true"] .cs-mk{background:transparent; color:var(--accent); font-size:.85rem}
.cs-opt[aria-disabled="true"]{opacity:.4; cursor:default}
.cs-opt mark{background:var(--accent-soft); color:var(--accent); padding:0}
.cs-empty{padding:.6rem .65rem; font-size:.85rem; color:var(--muted)}
.cs-foot{display:flex; justify-content:space-between; gap:.4rem; border-top:1px solid var(--line); padding:.35rem .45rem}
.cs-foot button{font:inherit; font-size:.78rem; border:0; background:none; color:var(--muted); cursor:pointer; padding:.2rem .3rem}
.cs-foot button:hover{color:var(--ink)}

.fbar{display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:.55rem; margin:1rem 0 0}
.fbar label{display:grid; gap:.25rem; font-family:var(--mono); font-size:.64rem; letter-spacing:0; color:var(--muted); min-width:0}
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; margin:1rem 0 0;
  border-bottom:1px solid var(--line); padding-bottom:.6rem}
.toolbar .chips{margin:0}
.chip.f{border-color:var(--ink)}
.chip.q{border-color:var(--accent); color:var(--accent)}
.card .foot{display:flex; justify-content:space-between; align-items:center; gap:.5rem; border-top:1px solid var(--line); padding-top:.55rem; margin-top:.1rem}
.card .foot a{font-size:.82rem; color:var(--ink)}
.cmpbtn{font:inherit; font-family:var(--mono); font-size:.72rem; border:1px solid var(--line); background:var(--card); color:var(--muted); padding:.25rem .5rem; cursor:pointer; border-radius:var(--rs)}
.cmpbtn[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.card[data-sel]{outline:2px solid var(--accent); outline-offset:-2px}
[hidden]{display:none!important}
.songs-line{font-size:.82rem; color:var(--muted); margin:0}
.songs-line b{color:var(--ink); font-weight:600}
.songs-line.hit{color:var(--ink)}
td.sg{font-size:.8rem; max-width:14rem}
td.sg b{display:block; font-weight:600}
td.sg span{color:var(--muted)}
.songlist{list-style:none; margin:.8rem 0 0; padding:0; border-top:1px solid var(--line)}
.songlist li{display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; gap:.8rem; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--line)}
.songlist .ix{font-family:var(--mono); font-size:.8rem; color:var(--muted)}
.songlist b{display:block; font-size:.98rem}
.songlist span span{font-size:.84rem; color:var(--muted)}
.songlist em{font-style:normal; font-family:var(--mono); font-size:.68rem; color:var(--accent); display:block; margin-top:.15rem}
.note-box{border-left:3px solid var(--accent); background:var(--accent-soft); padding:.6rem .8rem; font-size:.86rem; margin:.8rem 0 0}
/* ---- страница боя ---- */
.head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap}
.head-row h1{margin:0}
.head-row .pick{min-width:14rem; display:grid; gap:.25rem; font-family:var(--mono); font-size:.64rem; letter-spacing:0; color:var(--muted)}
.viz{border:1px solid var(--line); margin:1.2rem 0 0; background:var(--card)}
.viz-head{display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.5rem .8rem; border-bottom:1px solid var(--line); background:var(--sunk)}
.viz-head b{font-family:var(--mono); font-size:.7rem; letter-spacing:0; font-weight:500}
.viz-head span{font-family:var(--mono); font-size:.7rem; color:var(--muted)}
.viz-body{padding:.6rem .6rem .4rem; overflow-x:auto}
svg.traj{width:100%; min-width:560px; height:auto; display:block}
svg.traj .str{stroke:var(--line); stroke-width:1}
svg.traj .str.b{stroke-width:2}
svg.traj .band{fill:var(--sunk)}
svg.traj .hitseg{stroke:var(--accent); stroke-width:4; fill:none; stroke-linecap:square}
svg.traj .muteseg{stroke:var(--ink); stroke-width:4; fill:none}
svg.traj .miss{stroke:var(--muted); stroke-width:2; stroke-dasharray:4 5; fill:none}
svg.traj .contact{fill:var(--accent)}
svg.traj .mutemark{stroke:var(--ink); stroke-width:3}
svg.traj .bassdot{fill:var(--accent)}
svg.traj text{font-family:var(--mono); font-size:12px; fill:var(--muted)}
svg.traj text.beat{fill:var(--ink); font-weight:600}
svg.traj text.dir{font-size:15px; fill:var(--ink); font-weight:600}
svg.traj .ph{stroke:var(--accent); stroke-width:2}
svg.traj .phdot{fill:var(--accent); stroke:var(--card); stroke-width:3}
svg.traj .lbl2{font-size:10px; letter-spacing:0}
.ctlbar{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; padding:.7rem .8rem; border-top:1px solid var(--line)}
.ctlbar .cs{min-width:11rem}
.two{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:1.4rem; align-items:start; margin-top:1.4rem}
@media (max-width:700px){.two{grid-template-columns:minmax(0,1fr)}}
svg.circ{width:100%; max-width:260px; display:block; margin:0 auto}
svg.circ .ring{fill:none; stroke:var(--line); stroke-width:1}
svg.circ .poly{fill:var(--accent-soft); stroke:var(--accent); stroke-width:2}
svg.circ .pt{fill:var(--card); stroke:var(--line); stroke-width:1.5}
svg.circ .pt[data-v="D"],svg.circ .pt[data-v="U"]{fill:var(--accent); stroke:var(--accent)}
svg.circ .pt[data-v="X"]{fill:var(--ink); stroke:var(--ink)}
svg.circ .pt[data-v="B"]{fill:var(--card); stroke:var(--accent); stroke-width:3}
svg.circ .pt[data-now]{stroke:var(--ink); stroke-width:4}
svg.circ .hand{stroke:var(--ink); stroke-width:2}
svg.circ text{font-family:var(--mono); font-size:11px; fill:var(--muted)}
svg.circ text.c{font-size:22px; font-weight:600; fill:var(--ink)}
.countline{font-family:var(--mono); font-size:1.05rem; line-height:1.9; margin:.6rem 0 0; word-spacing:.15em}
.countline b{color:var(--accent)}
.countline span{color:var(--muted); opacity:.55}
.stages{list-style:none; margin:.8rem 0 0; padding:0; border-top:1px solid var(--line); counter-reset:s}
.stages li{counter-increment:s; display:grid; grid-template-columns:2rem 40px minmax(0,1fr); gap:.7rem; align-items:center; padding:.75rem 0; border-bottom:1px solid var(--line)}
.stages li::before{content:counter(s); font-family:var(--mono); font-weight:600; font-size:1.3rem; color:var(--accent)}
.stages h3{margin:0 0 .3rem; font-size:.95rem}
.stages p{margin:.3rem 0 0; font-size:.84rem; color:var(--muted)}
.sim{list-style:none; margin:.8rem 0 0; padding:0; border-top:1px solid var(--line)}
.sim li{display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; gap:.7rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--line)}
.sim .pct{font-size:1rem}
.sim h3{margin:0 0 .3rem; font-size:.93rem}