*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',system-ui,sans-serif;background:#f8f8f9;color:#111113;display:flex;flex-direction:column}

:root{
  --bg:#f8f8f9;
  --surface:#ffffff;
  --surface2:#f0f0f3;
  --border:#e2e2e6;
  --border2:#c8c8ce;
  --t1:#111113;
  --t2:#6b6b78;
  --t3:#a0a0ab;
  --acc:#2563eb;
  --acc-bg:rgba(37,99,235,0.07);
  --acc-br:rgba(37,99,235,0.22);
  --red:#ef4444;
  --amb:#f59e0b; --amb-bg:rgba(245,158,11,0.1);
  --gr:#16a34a;  --gr-bg:rgba(22,163,74,0.08);
  --pur:#7c3aed; --pur-bg:rgba(124,58,237,0.08);
}

/* ── TOP BAR ── */
.bar{
  height:52px;border-bottom:1px solid var(--border);
  background:var(--surface);
  display:flex;align-items:center;padding:0 24px;flex-shrink:0;
}
.bar-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}

/* ── LAYOUT ── */
.wrap{display:flex;flex:1;overflow:hidden;min-height:0}

/* ── LEFT COLUMN ── */
.left{
  width:clamp(300px,33vw,460px);flex-shrink:0;
  border-right:1px solid var(--border);
  background:var(--surface);
  display:flex;flex-direction:column;
  padding:10px;
  overflow:hidden;
  height:calc(100vh - 52px);
}

/* ── DIAGRAM CARD ── */
.diagram-card{
  position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;
}

/* Front/Back toggle */
.vtoggle{
  position:absolute;top:10px;left:10px;z-index:10;
  display:flex;gap:2px;
  background:rgba(255,255,255,0.92);border:1px solid var(--border2);
  border-radius:8px;padding:3px;
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
.vbtn{
  background:none;border:none;padding:4px 12px;border-radius:5px;
  font-family:inherit;font-size:11px;font-weight:500;
  color:var(--t3);cursor:pointer;transition:all .15s;
}
.vbtn.on{background:var(--t1);color:#fff}

/* Gender button */
.gender-btn{
  position:absolute;top:10px;right:10px;z-index:10;
  background:rgba(255,255,255,0.92);border:1px solid var(--border2);
  border-radius:8px;padding:5px 11px;
  font-family:inherit;font-size:11px;font-weight:500;color:var(--t2);
  cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s;
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
.gender-btn:hover{color:var(--t1)}
#gender-symbol{font-size:14px;line-height:1;color:var(--t1)}

/* SVG stage */
.svg-stage{
  flex:1;min-height:0;overflow:hidden;
  padding:48px 12px 12px;
}
.svg-stage svg{width:100%;height:100%;display:block}

/* SVG paths */
.mr{cursor:pointer;fill:#d4d4dc;transition:fill .15s}
.mr:hover{fill:#b0b0bc}
.bs{fill:#ebebf0;pointer-events:none}

/* ── RIGHT COLUMN ── */
.right{flex:1;overflow-y:auto;padding:28px;background:var(--bg)}
.right::-webkit-scrollbar{width:3px}
.right::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.r-empty{
  height:100%;min-height:300px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--t3);font-size:13px;text-align:center;
}
.r-empty svg{opacity:.25;margin-bottom:4px}

.panel-hdr{margin-bottom:20px}
.panel-title{font-size:22px;font-weight:600;color:var(--t1);letter-spacing:-.02em}


/* ── EXERCISE GRID ── */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ex-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px 16px 14px;cursor:pointer;transition:all .18s;
  display:flex;flex-direction:column;gap:10px;
}
.ex-card:hover{border-color:var(--border2);background:var(--surface2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.ex-card:active{transform:translateY(0)}
.ex-name{font-size:13px;font-weight:500;color:var(--t1);line-height:1.4;flex:1}
.ex-badge{font-size:10px;font-weight:500;padding:2px 8px;border-radius:99px;letter-spacing:.03em;width:fit-content}
.b-compound  {background:var(--pur-bg);color:var(--pur)}
.b-isolation {background:var(--acc-bg);color:var(--acc)}
.b-bodyweight{background:var(--gr-bg);color:var(--gr)}
.b-cable     {background:var(--amb-bg);color:var(--amb)}

/* ── DETAIL MODAL ── */
.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.45);z-index:100;
  align-items:center;justify-content:center;padding:20px;
}
.overlay.on{display:flex}

.detail{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  width:100%;max-width:520px;max-height:90vh;
  overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,0.14);
}

.det-head{
  padding:22px 22px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-shrink:0;
}
.det-title{font-size:18px;font-weight:600;color:var(--t1);line-height:1.3}
.det-meta{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center}
.d-muscle-tag{
  font-size:11px;color:var(--t2);padding:2px 9px;
  background:var(--surface2);border:1px solid var(--border);border-radius:99px;
}
.dclose{
  background:var(--surface2);border:1px solid var(--border);
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  color:var(--t2);font-size:14px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s;
}
.dclose:hover{background:var(--border);color:var(--t1)}

.det-body{padding:22px;display:flex;flex-direction:column;gap:16px}

/* Video / media area */
.video-wrap{
  border-radius:12px;overflow:hidden;background:var(--surface2);
  position:relative;padding-bottom:56.25%;border:1px solid var(--border);
}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

/* GIF — fills the box, auto-loops */
.vid-gif{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* Static image fallback */
.vid-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* YouTube thumbnail + overlay play button */
.vid-thumb{
  position:absolute;inset:0;cursor:pointer;
  display:block;overflow:hidden;
}
.vid-ytthumb{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(0.88);transition:filter .2s;
}
.vid-thumb:hover .vid-ytthumb{filter:brightness(0.75)}
.yt-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.yt-play{
  width:56px;height:56px;background:#ff0000;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s;box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.vid-thumb:hover .yt-play{transform:scale(1.08)}

.vid-none{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--t3);font-size:12px;
}

/* Description */
.desc-box{background:var(--surface2);border-radius:10px;padding:16px;border:1px solid var(--border)}
.desc-lbl{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.desc-txt{font-size:13px;color:var(--t2);line-height:1.7}

/* ── RESPONSIVE ── */
@media(max-width:760px){
  html,body{height:auto;overflow:auto}
  .wrap{flex-direction:column;overflow:visible}
  .left{
    width:100%;border-right:none;border-bottom:1px solid var(--border);
    height:100vw;min-height:480px;max-height:680px;padding:8px;
  }
  .right{overflow:visible;min-height:400px;padding:18px}
  .ex-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .detail{max-height:92vh;width:calc(100vw - 32px)}
  .det-body{padding:16px}
}