:root {
  --ex-green:#b7dc69;
  --ex-panel:rgba(22,24,20,.9);
  --ex-border:rgba(183,220,105,.17);
  --ex-muted:#8a9085;
}

.exercise-body { min-width:320px; overflow-x:hidden; background:#0e100d; }
.exercise-body .dash-bg { filter:grayscale(.68) saturate(.7); }
.exercise-page,.exercise-detail-page { width:min(1480px,calc(100% - 40px)); margin:0 auto; padding:122px 0 76px; }
.exercise-hero { max-width:780px; margin-bottom:28px; }
.exercise-eyebrow,.exercise-panel-kicker { margin:0; color:var(--ex-green); font-size:.76rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.exercise-hero h1,.exercise-detail-intro h1 { margin:7px 0 9px; font-size:clamp(2.5rem,5vw,4.8rem); line-height:.96; letter-spacing:-.055em; }
.exercise-hero > p:last-child,.exercise-detail-intro > p { margin:0; color:var(--ex-muted); font-size:1rem; line-height:1.6; }

.exercise-search-row { display:flex; gap:10px; margin-bottom:18px; }
.exercise-search { min-height:52px; flex:1; display:flex; align-items:center; gap:11px; padding:0 15px; border:1px solid var(--ex-border); border-radius:15px; background:rgba(18,20,16,.88); box-shadow:0 12px 38px rgba(0,0,0,.14); }
.exercise-search > span { color:var(--ex-green); font-size:1.2rem; }
.exercise-search input { min-width:0; flex:1; border:0; outline:0; color:#eef1ea; background:transparent; font:inherit; font-size:.9rem; }
.exercise-search input::placeholder { color:#697065; }
.exercise-search kbd { padding:4px 7px; border:1px solid rgba(255,255,255,.08); border-radius:7px; color:#656b61; background:rgba(255,255,255,.025); font-size:.68rem; }
.exercise-filter-toggle { display:none; min-width:112px; align-items:center; justify-content:center; gap:8px; border-color:var(--ex-border); background:rgba(22,24,20,.9); }
.exercise-filter-toggle span { display:grid; place-items:center; min-width:21px; height:21px; border-radius:999px; color:#172016; background:var(--ex-green); font-size:.68rem; font-weight:900; }

.exercise-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:18px; align-items:start; }
.exercise-filters { position:sticky; top:94px; padding:19px; border:1px solid var(--ex-border); border-radius:18px; background:linear-gradient(145deg,rgba(183,220,105,.04),transparent 42%),var(--ex-panel); box-shadow:0 20px 55px rgba(0,0,0,.18); }
.exercise-filter-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.exercise-filter-head span,.exercise-filter-head strong { display:block; }
.exercise-filter-head span { color:#666d62; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.exercise-filter-head strong { margin-top:2px; font-size:1.08rem; }
.exercise-filter-head button { display:none; width:34px; height:34px; padding:0; border-radius:50%; }
.exercise-filter-group { display:grid; gap:5px; margin:0; padding:17px 0; border:0; border-top:1px solid rgba(255,255,255,.065); }
.exercise-filter-group legend { width:100%; margin-bottom:8px; color:#9bad75; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.exercise-filter-group button { width:100%; min-height:36px; padding:0 11px; border:0; border-radius:9px; color:#858c81; background:transparent; text-align:left; font-size:.82rem; }
.exercise-filter-group button:hover { border:0; color:#eef1e9; background:rgba(255,255,255,.04); }
.exercise-filter-group button.is-active { color:#edf3e3; background:rgba(183,220,105,.11); box-shadow:inset 2px 0 var(--ex-green); }
.exercise-clear { width:100%; min-height:39px; margin-top:4px; border-color:rgba(255,255,255,.08); color:#8b9186; background:rgba(255,255,255,.025); font-size:.76rem; }

.exercise-results { min-width:0; }
.exercise-results-head { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:12px; }
.exercise-results-head span,.exercise-results-head strong { display:block; }
.exercise-results-head span { color:#747b70; font-size:.72rem; }
.exercise-results-head strong { margin-top:2px; color:#e5e9e1; font-size:.93rem; }
.exercise-results-head select { min-height:39px; padding:0 34px 0 11px; border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#a3a99f; background:#171a15; font:inherit; font-size:.75rem; color-scheme:dark; }
.exercise-active-filters { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }
.exercise-active-filters button { min-height:31px; padding:0 10px; border:1px solid rgba(183,220,105,.2); border-radius:999px; color:#bacb99; background:rgba(183,220,105,.07); font-size:.7rem; }

.exercise-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:13px; }
.exercise-card { min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(183,220,105,.14); border-radius:17px; color:#f2f4ef; background:linear-gradient(145deg,rgba(183,220,105,.035),transparent 50%),rgba(22,24,20,.88); text-decoration:none; box-shadow:0 15px 44px rgba(0,0,0,.15); transition:transform .2s,border-color .2s,box-shadow .2s; }
.exercise-card:hover { color:#fff; border-color:rgba(183,220,105,.42); transform:translateY(-3px); box-shadow:0 20px 58px rgba(0,0,0,.26),0 0 0 1px rgba(183,220,105,.05); }
.exercise-card-visual { position:relative; height:196px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 70%,rgba(183,220,105,.12),transparent 58%),rgba(255,255,255,.018); }
.exercise-card-visual::after { content:'CW'; position:absolute; z-index:0; color:rgba(183,220,105,.1); font-size:2rem; font-weight:900; }
.exercise-card-visual img { position:relative; z-index:1; width:180px; height:180px; object-fit:contain; mix-blend-mode:screen; filter:grayscale(.05) contrast(1.03); transition:transform .28s ease; }
.exercise-card:hover .exercise-card-visual img { transform:scale(1.07); }
.exercise-card-visual img.is-missing { display:none; }
.exercise-media-credit { position:absolute; right:8px; bottom:7px; z-index:2; padding:3px 6px; border-radius:6px; color:#6f756b; background:rgba(8,10,7,.72); font-size:.58rem; }
.exercise-card-body { flex:1; display:flex; flex-direction:column; padding:15px; }
.exercise-card-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:9px; }
.exercise-card-tags span { padding:4px 7px; border-radius:999px; color:#93a773; background:rgba(183,220,105,.07); font-size:.62rem; }
.exercise-card h2 { margin:0; font-size:1rem; line-height:1.2; letter-spacing:-.02em; text-transform:capitalize; }
.exercise-card-target { margin:7px 0 16px; color:#757c71; font-size:.75rem; text-transform:capitalize; }
.exercise-card-link { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.06); color:var(--ex-green); font-size:.72rem; font-weight:800; }
.exercise-load-more { min-width:210px; min-height:46px; display:block; margin:25px auto 0; border:0; border-radius:999px; color:#172016; background:var(--ex-green); font-size:.78rem; font-weight:800; }
.exercise-empty { min-height:300px; place-items:center; align-content:center; gap:7px; border:1px dashed rgba(183,220,105,.18); border-radius:17px; color:#80877c; text-align:center; }
.exercise-empty:not([hidden]) { display:grid; }
.exercise-empty strong { color:#e6e9e2; font-size:1.05rem; }
.exercise-empty button { margin-top:8px; color:#172016; border:0; background:var(--ex-green); }
.exercise-filter-overlay { display:none; }
.exercise-source-note { margin:24px 0 0; color:#666d63; font-size:.66rem; line-height:1.55; text-align:center; }
.exercise-source-note a { color:#899979; text-underline-offset:3px; }
.exercise-source-note a:hover { color:var(--ex-green); }

/* Detail page */
.exercise-detail-page { max-width:1260px; }
.exercise-back { display:inline-flex; margin-bottom:22px; color:#939a8f; text-decoration:none; font-size:.8rem; font-weight:700; }
.exercise-back:hover { color:var(--ex-green); }
.exercise-detail-loading { min-height:440px; display:grid; place-items:center; align-content:center; gap:14px; color:#81887d; }
.exercise-detail-loading[hidden] { display:none; }
.exercise-detail-loading span { width:36px; height:36px; border:3px solid rgba(255,255,255,.08); border-top-color:var(--ex-green); border-radius:50%; animation:exercise-spin .8s linear infinite; }
@keyframes exercise-spin { to { transform:rotate(360deg); } }
.exercise-detail-hero { display:grid; grid-template-columns:330px minmax(0,1fr); align-items:center; gap:clamp(28px,5vw,68px); min-height:390px; padding:clamp(24px,4vw,46px); border:1px solid var(--ex-border); border-radius:23px; background:linear-gradient(90deg,rgba(6,8,5,.92),rgba(16,19,14,.66)); box-shadow:0 24px 70px rgba(0,0,0,.25); }
.exercise-detail-media { position:relative; min-height:300px; display:grid; place-items:center; border-radius:18px; background:radial-gradient(circle at 50% 60%,rgba(183,220,105,.15),transparent 58%),rgba(11,13,10,.7); }
.exercise-detail-media img { width:180px; height:180px; object-fit:contain; mix-blend-mode:screen; }
.exercise-detail-media > a { position:absolute; right:12px; bottom:10px; color:#737a6e; font-size:.67rem; text-decoration:none; }
.exercise-detail-intro h1 { max-width:780px; font-size:clamp(2.25rem,4.8vw,4.5rem); text-transform:capitalize; }
.exercise-detail-intro > p { max-width:690px; }
.exercise-detail-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.exercise-detail-tags span { padding:7px 10px; border:1px solid rgba(183,220,105,.17); border-radius:999px; color:#afc687; background:rgba(183,220,105,.07); font-size:.72rem; text-transform:capitalize; }
.exercise-detail-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr); gap:16px; margin-top:16px; }
.exercise-detail-panel { padding:clamp(22px,3vw,32px); border:1px solid var(--ex-border); border-radius:19px; background:var(--ex-panel); }
.exercise-detail-panel h2,.exercise-useful-links h2 { margin:5px 0 22px; font-size:1.45rem; }
.exercise-steps { display:grid; gap:11px; margin:0; padding:0; counter-reset:exercise-step; list-style:none; }
.exercise-steps li { position:relative; min-height:54px; display:flex; align-items:center; padding:12px 12px 12px 56px; border:1px solid rgba(255,255,255,.06); border-radius:12px; color:#a4aaa0; background:rgba(255,255,255,.022); font-size:.86rem; line-height:1.5; counter-increment:exercise-step; }
.exercise-steps li::before { content:counter(exercise-step,decimal-leading-zero); position:absolute; left:13px; width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:#172016; background:var(--ex-green); font-size:.65rem; font-weight:900; }
.exercise-anatomy { display:grid; gap:0; margin:0; }
.exercise-anatomy > div { padding:13px 0; border-top:1px solid rgba(255,255,255,.065); }
.exercise-anatomy dt { color:#70776c; font-size:.7rem; }
.exercise-anatomy dd { margin:4px 0 0; color:#e0e4db; font-size:.84rem; font-weight:700; text-transform:capitalize; }
.exercise-form-note { margin-top:18px; padding:15px; border-left:2px solid var(--ex-green); border-radius:0 11px 11px 0; background:rgba(183,220,105,.055); }
.exercise-form-note strong { font-size:.8rem; }
.exercise-form-note p { margin:5px 0 0; color:#858c81; font-size:.76rem; line-height:1.5; }
.exercise-useful-links { margin-top:16px; padding:clamp(22px,3vw,32px); border:1px solid var(--ex-border); border-radius:19px; background:linear-gradient(145deg,rgba(183,220,105,.045),transparent 45%),var(--ex-panel); }
.exercise-related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.exercise-related-card { min-width:0; display:flex; align-items:center; gap:11px; padding:11px; border:1px solid rgba(255,255,255,.07); border-radius:13px; color:#dce1d7; background:rgba(255,255,255,.025); text-decoration:none; }
.exercise-related-card:hover { color:#fff; border-color:rgba(183,220,105,.3); background:rgba(183,220,105,.055); }
.exercise-related-card img { width:54px; height:54px; flex:0 0 auto; object-fit:contain; border-radius:9px; background:rgba(255,255,255,.025); mix-blend-mode:screen; }
.exercise-related-card strong,.exercise-related-card span { display:block; }
.exercise-related-card strong { overflow:hidden; font-size:.76rem; line-height:1.25; text-transform:capitalize; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.exercise-related-card span { margin-top:4px; color:#77806f; font-size:.64rem; text-transform:capitalize; }
.exercise-library-link { display:inline-flex; margin-top:18px; color:var(--ex-green); font-size:.76rem; font-weight:800; text-decoration:none; }
.exercise-detail-error { min-height:420px; place-items:center; align-content:center; text-align:center; }
.exercise-detail-error:not([hidden]) { display:grid; }
.exercise-detail-error strong { font-size:1.5rem; }
.exercise-detail-error p { color:#81887d; }
.exercise-detail-error a { padding:10px 16px; border-radius:999px; color:#172016; background:var(--ex-green); text-decoration:none; font-weight:800; }

@media (max-width:1000px) {
  .exercise-layout { grid-template-columns:220px minmax(0,1fr); }
  .exercise-grid { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
  .exercise-related-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  .exercise-page,.exercise-detail-page { width:min(100% - 28px,720px); padding-top:104px; }
  .exercise-filter-toggle { display:flex; }
  .exercise-layout { display:block; }
  .exercise-filters { position:fixed; top:0; right:0; bottom:0; z-index:120; width:min(330px,88vw); overflow-y:auto; border-radius:20px 0 0 20px; transform:translateX(105%); transition:transform .24s ease; }
  .exercise-filters.is-open { transform:translateX(0); }
  .exercise-filter-head button { display:block; }
  .exercise-filter-overlay { position:fixed; inset:0; z-index:119; background:rgba(0,0,0,.62); backdrop-filter:blur(3px); }
  .exercise-filter-overlay.is-open { display:block; }
  .exercise-detail-hero { grid-template-columns:1fr; }
  .exercise-detail-media { min-height:245px; }
  .exercise-detail-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .exercise-page,.exercise-detail-page { width:min(100% - 24px,520px); }
  .exercise-search kbd { display:none; }
  .exercise-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .exercise-card-visual { height:150px; }
  .exercise-card-visual img { width:145px; height:145px; }
  .exercise-card-body { padding:12px; }
  .exercise-card h2 { font-size:.86rem; }
  .exercise-card-target { font-size:.68rem; }
  .exercise-card-tags span:nth-child(2) { display:none; }
  .exercise-results-head { align-items:flex-start; }
  .exercise-results-head select { max-width:125px; }
  .exercise-detail-hero { padding:18px; }
  .exercise-detail-intro h1 { font-size:2.25rem; }
  .exercise-related-grid { grid-template-columns:1fr; }
}
@media (max-width:370px) {
  .exercise-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .exercise-card,.exercise-card-visual img,.exercise-filters { transition:none; }
  .exercise-detail-loading span { animation:none; }
}
