.technique-entry{ margin-top:8px; }
.app.with-navbar.on-technique .bar{ grid-template-columns:minmax(0,1fr) auto; column-gap:8px; background:var(--bg); }
.app.with-navbar.on-technique .bar-section-title{ min-width:0; width:100%; max-width:none; font-size:16px; line-height:1.2; white-space:normal; }
.app.with-navbar.on-technique .bar-mana{ grid-column:2; }
.technique-intro{ color:var(--text-dim); font-size:14px; line-height:1.5; margin:4px 0 16px; }
.technique-search{ margin:0 0 16px; width:100%; }
.technique-status{ color:var(--text-dim); font-size:14px; padding:24px 0; }
.technique-groups{ display:grid; gap:10px; }
.technique-group{ overflow:hidden; padding:0; }
.technique-group-toggle{ width:100%; border:0; background:none; color:var(--text); display:flex; align-items:center; gap:12px; padding:16px; text-align:left; cursor:pointer; font:inherit; }
.technique-group-toggle strong{ font-size:16px; flex:1; }
.technique-group-count{ color:var(--text-dim); font-size:13px; }
.technique-chevron{ width:18px; height:18px; flex:none; transition:transform .25s; }
.technique-group-toggle[aria-expanded="true"] .technique-chevron{ transform:rotate(90deg); }
.technique-rows{ border-top:1px solid var(--border-soft); }
.technique-row{ width:100%; display:flex; align-items:center; gap:12px; padding:10px 14px; border:0; border-bottom:1px solid var(--border-soft); background:none; color:var(--text); text-align:left; font:inherit; cursor:pointer; }
.technique-row:last-child{ border-bottom:0; }
.technique-avatar{ width:58px; height:58px; flex:none; object-fit:contain; border-radius:15px; background:var(--panel-2); }
/* Упражнение без собственных материалов: буква названия вместо чужой картинки. */
.technique-avatar-empty{ display:grid; place-items:center; font-size:22px; font-weight:600; color:var(--text-dim); text-transform:uppercase; }
.technique-row-text{ flex:1; min-width:0; }
.technique-row-name{ display:block; font-size:14px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.technique-row-meta{ display:block; font-size:12px; color:var(--text-dim); margin-top:4px; }
.technique-back{ color:var(--accent); background:none; border:0; font:inherit; padding:12px 0; cursor:pointer; display:flex; align-items:center; gap:6px; }
.technique-back svg{ transform:rotate(180deg); }
.technique-detail-head{ display:flex; align-items:center; gap:12px; margin:8px 0 18px; }
.technique-detail-head h2{ margin:0; font-size:22px; line-height:1.2; overflow-wrap:anywhere; }
.technique-description{ margin:8px 0 0; color:var(--text-dim); font-size:14px; line-height:1.45; }
.technique-demo{ position:relative; padding:0; overflow:hidden; }
.technique-demo img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.technique-pending{ padding:32px 18px; color:var(--text-dim); text-align:center; font-size:14px; }
.technique-motion-toggle{ position:absolute; bottom:12px; right:12px; border:1px solid var(--border); border-radius:12px; background:var(--bg-2); color:var(--text); padding:9px 12px; min-height:42px; font:inherit; font-size:13px; cursor:pointer; }
.technique-card{ margin-top:14px; }
.technique-card h3{ margin:0 0 12px; font-size:17px; }
.technique-steps{ padding-left:21px; margin:0; font-size:14px; line-height:1.55; }
.technique-steps li+li{ margin-top:9px; }
.technique-note{ font-size:13px; line-height:1.5; color:var(--text-dim); margin:12px 0 0; }
.technique-anatomy{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:18px; align-items:center; }
.technique-anatomy-art{ position:relative; width:100%; aspect-ratio:var(--art-ratio,1); overflow:hidden; }
.technique-anatomy-art img{ position:absolute; max-width:none; width:var(--art-width,100%); height:auto; left:var(--art-left,0); top:var(--art-top,0); }
.technique-muscles{ min-width:0; display:flex; flex-direction:column; justify-content:center; padding:6px 0; gap:10px; }
.technique-muscle-label{ font-size:11px; line-height:1.25; margin-bottom:5px; color:var(--text); }
.technique-muscle .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.technique-anatomy.without-image{ grid-template-columns:minmax(0,1fr); }
.technique-anatomy.without-image .technique-muscles{ gap:14px; padding:8px 0; }
.technique-anatomy.without-image .technique-muscle-label{ font-size:13px; }
.technique-muscle-line{ height:4px; border-radius:4px; width:var(--muscle-width); background:var(--accent); transform-origin:left; transform:scaleX(0); }
.technique-anatomy.is-revealed .technique-muscle-line{ animation:techniqueMuscleReveal .65s cubic-bezier(.2,.8,.2,1) var(--muscle-delay) both; }
.technique-muscle[data-role="secondary"] .technique-muscle-line{ opacity:.65; }
.technique-muscle[data-role="stabilizer"] .technique-muscle-line{ opacity:.4; }
@keyframes techniqueMuscleReveal{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.technique-retry{ margin-top:10px; }
.technique-row:focus-visible,.technique-group-toggle:focus-visible,.technique-back:focus-visible,.technique-motion-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
@media (prefers-reduced-motion:reduce){
  .technique-chevron{ transition:none; }
  .technique-anatomy .technique-muscle-line{ transform:scaleX(1); animation:none!important; }
}
@media (max-width:360px){
  .technique-detail-head h2{font-size:20px}
  .technique-muscles{gap:7px}
  .technique-muscle-label{font-size:10px}
}
@media (max-width:420px){
  .technique-anatomy{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .technique-anatomy-art{ max-width:340px; margin:0 auto; }
  .technique-muscle-label{ font-size:12px; }
}
.wf-technique{ position:relative; flex:none; margin-top:12px; }
.wf-body.has-technique .wf-center{ flex:1 0 auto; }
.wf-technique-visual{ width:100%; height:210px; }
.wf-technique-visual img{ display:block; width:100%; height:100%; object-fit:contain; padding-right:70px; }
.wf-technique-controls{ position:absolute; top:8px; right:0; display:flex; flex-direction:column; align-items:center; gap:8px; width:76px; }
.wf-technique-eye{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:14px; background:var(--panel); color:var(--text); cursor:pointer; }
.wf-technique-eye svg{ width:23px; height:23px; }
.wf-technique-more{ border:0; padding:6px 0; background:none; color:var(--accent); font:inherit; font-size:11px; cursor:pointer; }
.wf-technique.is-hidden{ min-height:76px; }
.wf-technique.is-hidden .wf-technique-controls{ position:static; margin-left:auto; }
.wf-technique-info{ background:var(--panel); border:1px solid var(--border-soft); border-radius:18px; padding:16px; margin:12px 0; }
.wf-technique-info h3{ margin:0 0 12px; font-size:17px; }
.wf-technique-info .technique-steps{ font-size:14px; }
.wf-technique-status{ color:var(--text-dim); font-size:13px; padding:24px 80px 24px 0; }