:root { --bg:#191B1C; --plate:#222526; --plate2:#2A2E2F; --seam:#3A3F41; --jade:#19BD8B; --silk:#E9E7E1; --dim:#8A8F91;
        --amber:#E3A33B; --red:#E5604D; --blue:#4D8FE5; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--silk); overflow:hidden; font-family:'Golos Text',system-ui,sans-serif; font-size:14px; }
#app { position:fixed; inset:0; display:flex; flex-direction:column; }
#stage { position:relative; flex:1 1 auto; min-height:0; }
canvas { display:block; width:100%; height:100%; touch-action:none; }
.mono { font-family:'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
#status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--dim); pointer-events:none; text-align:center; padding:24px; }
#title { position:absolute; left:14px; top:calc(10px + env(safe-area-inset-top)); font-family:'Oswald',sans-serif; font-size:17px; letter-spacing:.04em; text-transform:uppercase; pointer-events:none; max-width:60%; line-height:1.15; }
#views { position:absolute; right:10px; top:calc(8px + env(safe-area-inset-top)); display:flex; gap:6px; }
button { font:inherit; color:var(--silk); background:var(--plate); border:1px solid var(--seam); cursor:pointer; padding:0; }
button:active { transform:scale(.97); }
#views button { font-size:10px; padding:8px 9px; }
#views button.on, .chip.on, .tab.on, .move.on { border-color:var(--jade); color:var(--jade); }
#hint { position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:9px; color:var(--dim); pointer-events:none; }
#credit { position:absolute; left:14px; bottom:8px; font-size:8px; color:var(--dim); text-decoration:none; }
#panel { flex:0 0 46%; display:flex; flex-direction:column; border-top:1px solid var(--seam); background:var(--bg); min-height:0; padding-bottom:env(safe-area-inset-bottom); }
#tabs { display:flex; flex:0 0 auto; border-bottom:1px solid var(--seam); }
.tab { flex:1; border:0; border-right:1px solid var(--seam); background:transparent; padding:12px 2px; font-size:9.5px; color:var(--dim); }
.tab:last-child { border-right:0; }
.tab.on { background:var(--plate); box-shadow:inset 0 -2px 0 var(--jade); }
.pane { flex:1 1 auto; overflow-y:auto; padding:12px 14px 18px; display:none; -webkit-overflow-scrolling:touch; }
.pane.on { display:block; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-size:12px; padding:9px 11px; }
.chip i { display:inline-block; width:8px; height:8px; margin-right:7px; vertical-align:1px; }
h4 { margin:16px 0 8px; font-size:10px; color:var(--dim); font-weight:400; }
h4:first-child { margin-top:0; }
.row { display:flex; align-items:center; gap:10px; }
input[type=range] { flex:1; accent-color:var(--jade); height:28px; }
.val { width:44px; text-align:right; font-size:10px; color:var(--dim); }
.list .grp { margin:14px 0 4px; font-size:10px; color:var(--dim); }
.list .grp:first-child { margin-top:0; }
.item { display:flex; align-items:stretch; border-bottom:1px solid #2b2f31; }
.item .nm { flex:1; text-align:left; border:0; background:transparent; padding:11px 2px; font-size:14px; line-height:1.25; }
.item .nm small { display:block; color:var(--dim); font-size:11px; font-style:italic; }
.item.sel .nm { color:var(--jade); }
.item .eye { width:44px; border:0; background:transparent; color:var(--dim); font-size:15px; }
.item.off .nm { color:#5c6163; }
.moves { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.move { padding:12px 8px; font-size:13px; text-align:left; }
.move small { display:block; font-size:10px; color:var(--dim); margin-top:3px; }
.legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin:12px 0 4px; font-size:11px; color:var(--dim); }
.legend i, .who i { display:inline-block; width:9px; height:9px; margin-right:6px; }
.who { margin:10px 0 0; }
.who b { display:block; font-weight:500; font-size:10px; color:var(--dim); margin-bottom:4px; }
.who button { display:inline-block; margin:0 6px 6px 0; padding:7px 9px; font-size:12px; text-align:left; }
.note { color:#c9c6bf; line-height:1.45; margin:10px 0 0; }
#card { position:absolute; left:10px; right:10px; bottom:22px; background:rgba(28,31,32,.96); border:1px solid var(--seam); padding:12px 14px; display:none; max-height:62%; overflow-y:auto; }
#card h3 { margin:0 26px 2px 0; font-family:'Oswald',sans-serif; font-weight:500; font-size:18px; letter-spacing:.02em; line-height:1.2; }
#card .la { color:var(--dim); font-style:italic; font-size:12px; }
#card .kind { font-size:9px; color:var(--jade); margin-bottom:6px; }
#card dl { margin:10px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; line-height:1.4; }
#card dt { font-size:9px; color:var(--dim); padding-top:3px; }
#card dt i { display:inline-block; width:8px; height:8px; margin-right:5px; }
#card dd { margin:0; }
#card p { margin:8px 0 0; line-height:1.45; }
#card .acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
#card .acts button { padding:8px 10px; font-size:11px; }
#card .x { position:absolute; right:6px; top:6px; width:32px; height:32px; border:0; background:transparent; color:var(--dim); font-size:18px; }
#labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.lbl { position:absolute; transform:translate(10px,-50%); font-size:10px; line-height:1.2; padding:3px 6px; background:rgba(25,27,28,.86); border-left:2px solid var(--jade); white-space:nowrap; max-width:46vw; overflow:hidden; text-overflow:ellipsis; }
.chain { margin:12px 0 0; padding:0; list-style:none; }
.chain li { display:flex; gap:9px; align-items:flex-start; padding:7px 0; border-bottom:1px solid #2b2f31; line-height:1.3; }
.chain li.out { color:#5c6163; }
.chain li.cur { background:#22292a; box-shadow:inset 3px 0 0 var(--jade); padding-left:8px; }
.chain li button { border:0; background:transparent; text-align:left; padding:0; font-size:14px; color:inherit; }
.chain .dot { flex:0 0 9px; height:9px; margin-top:4px; border-radius:50%; }
.chain .st { flex:0 0 9px; height:9px; margin-top:4px; border:2px solid; transform:rotate(45deg); }
.chain small { display:block; color:var(--dim); font-size:11px; margin-top:2px; }
.chain .sec { display:block; padding:12px 0 2px; border:0; font-size:10px; color:var(--dim); }
.ev { display:inline-block; font-size:10px; padding:3px 7px; border:1px solid; margin-top:8px; }
#zoom { position:absolute; right:10px; bottom:26px; display:flex; flex-direction:column; gap:6px; }
#zoom button { width:40px; height:40px; font-size:20px; line-height:1; }
@media (max-width: 899px) {
  /* на телефоне карточка ложится поверх нижней панели — модель остаётся на виду */
  #card { position:fixed; left:0; right:0; bottom:0; height:46%; max-height:none; border-left:0; border-right:0; border-bottom:0; background:#1C1F20; padding-bottom:calc(14px + env(safe-area-inset-bottom)); z-index:5; }
}
@media (min-width: 900px) {
  #app { flex-direction:row; }
  #panel { flex:0 0 400px; border-top:0; border-left:1px solid var(--seam); }
  #card { left:16px; right:auto; width:400px; bottom:28px; }
}

/* вкладка «Асаны»: выбор позы и её разбор */
#pane-asana select, #pane-glow select { width:100%; font:inherit; font-size:14px; color:var(--silk); background:var(--plate); border:1px solid var(--seam); padding:10px 8px; }
#pane-asana h3 { margin:14px 0 2px; font-family:'Oswald',sans-serif; font-weight:500; font-size:18px; line-height:1.2; }
#pane-asana .sa { color:var(--dim); font-style:italic; font-size:12px; }
#pane-asana .mus, #pane-glow .mus { margin:6px 0 0; padding:0; list-style:none; }
#pane-asana .mus li, #pane-glow .mus li { padding:7px 0; border-bottom:1px solid #2b2f31; line-height:1.35; }
#pane-asana .mus button, #pane-glow .mus button { border:0; background:transparent; padding:0; font-size:14px; text-align:left; }
#pane-asana .mus small, #pane-glow .mus small { display:block; color:var(--dim); font-size:12px; }
#pane-asana .ln { display:block; width:100%; text-align:left; margin:6px 0 0; padding:8px 10px; font-size:13px; }
#pane-asana .ln small { display:block; color:var(--dim); font-size:11.5px; margin-top:2px; }

/* свечение мышц после практик (вкладка «Неделя») */
#pane-glow .mus button small { font-size:11.5px; }
#card .mus li { list-style:none; margin:6px 0 0; }
#card .mus button { text-align:left; }
#card .mus small { display:block; color:var(--dim); font-size:11.5px; }