.gym-hero { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.gym-hero p { margin: 0; color: var(--muted); }
.gym-week-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.gym-session-card { display: grid; gap: 12px; padding: 20px; }
.gym-session-card h2 { margin: 0; }
.gym-session-date, .gym-session-summary { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.gym-session-date b { color: var(--water-dark); }
.gym-session-summary span { padding: 5px 9px; border-radius: 999px; background: #e7f4f3; }
.progress { height: 8px; overflow: hidden; border-radius: 99px; background: #dfebeb; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--water), #52bea5); }
.gym-resume { margin-top: 14px; }
.gym-muscle-card, .gym-program-editor { margin-top: 16px; padding: 20px; }
.muscle-bars { display: grid; gap: 10px; }
.muscle-bars > div { display: grid; grid-template-columns: minmax(100px, 170px) 1fr 35px; gap: 10px; align-items: center; }
.muscle-bars i { height: 9px; overflow: hidden; border-radius: 99px; background: #e3eded; }
.muscle-bars i b { display: block; height: 100%; background: #329da3; }
.gym-program-editor > summary { display: flex; justify-content: space-between; cursor: pointer; }
.gym-program-editor section { margin-top: 18px; }
.program-exercise { display: grid; grid-template-columns: minmax(180px, 1fr) 100px 100px auto; gap: 9px; align-items: end; padding: 9px 0; border-bottom: 1px solid var(--line); }
.program-exercise label { margin: 0; font-size: 11px; }
.program-exercise input { min-height: 40px; }

.gym-workout-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; padding: 15px; }
.gym-workout-head h1 { margin: 0; }
.icon-button { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--water-dark); background: #e5f3f3; font-size: 24px; }
.gym-exercise-list { display: grid; gap: 9px; }
.gym-exercise-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 15px; color: var(--ink); text-align: left; }
.gym-exercise-row > b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--water-dark); background: #e1f2f2; }
.gym-exercise-row > span { display: grid; gap: 4px; }
.gym-exercise-row strong { font-size: 17px; }
.gym-exercise-row small { color: var(--muted); }
.gym-exercise-row > i { color: var(--water); font-size: 28px; font-style: normal; }
.gym-exercise-row.done { border-color: #8bcdb4; background: #f3fcf7; }
.gym-exercise-row.done > b { color: white; background: var(--success); }
.gym-start { position: sticky; bottom: 76px; margin-top: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.17); }

.gym-exercise-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.gym-exercise-head > span { padding: 7px 11px; border-radius: 99px; background: #e4f3f3; font-weight: 800; }
.gym-technique { padding: 15px; }
.gym-technique h1 { margin: 3px 0 7px; }
.gym-technique > p { color: var(--muted); }
.gym-target { display: flex; justify-content: space-between; gap: 8px; padding-top: 11px; border-top: 1px solid var(--line); }
.gym-target span { color: var(--muted); }
.gym-technique-svg { width: 100%; height: min(230px, 40vh); margin-bottom: 12px; border-radius: 16px; background: linear-gradient(150deg,#e6f8f7,#c9eceb); }
.gym-technique-svg text { fill: #315d62; font-size: 9px; }
.gym-machine { fill: none; stroke: #407d82; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.gym-load { fill: #78adb0; }
.gym-cable { fill: none; stroke: #407d82; stroke-width: 2; }
.gym-pad { fill: #8abfc1; }
.gym-head { fill: #f4b584; stroke: #163e43; stroke-width: 2; }
.gym-body { fill: none; stroke: #163e43; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.gym-joint { fill: #fff; stroke: #163e43; stroke-width: 2; }
.gym-person { transform-box: fill-box; transform-origin: center; animation: gym-move 2.4s ease-in-out infinite; }
.motion-hack-squat .gym-person, .motion-leg-press .gym-person, .motion-single-leg-press .gym-person { animation-name: gym-squat; }
.motion-standing-leg-curl .gym-person, .motion-lying-leg-curl .gym-person { animation-name: gym-curl-leg; }
.motion-calf-raise .gym-person { animation-name: gym-calf; }
.motion-bench-press .gym-person, .motion-incline-press .gym-person, .motion-decline-press .gym-person, .motion-triceps-press .gym-person { animation-name: gym-press; }
.motion-assisted-pullup .gym-person, .motion-lat-pulldown .gym-person, .motion-seated-row .gym-person, .motion-machine-curl .gym-person { animation-name: gym-pull; }
.motion-rower .gym-person, .motion-skierg .gym-person { animation-name: gym-row; }
.motion-fitball-crunch .gym-person, .motion-machine-crunch .gym-person, .motion-back-extension .gym-person { animation-name: gym-core; }
@keyframes gym-move { 0%,100% { transform: translateX(-8px) rotate(-2deg); } 50% { transform: translateX(9px) rotate(3deg); } }
@keyframes gym-squat { 0%,100% { transform: translateY(-8px) scaleY(1); } 50% { transform: translateY(22px) scaleY(.78); } }
@keyframes gym-curl-leg { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-13deg); } }
@keyframes gym-calf { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes gym-press { 0%,100% { transform: translateX(-6px) rotate(-8deg); } 50% { transform: translateX(17px) rotate(5deg); } }
@keyframes gym-pull { 0%,100% { transform: translateY(-7px) scaleY(1); } 50% { transform: translateY(13px) scaleY(.92); } }
@keyframes gym-row { 0%,100% { transform: translateX(-15px) rotate(-7deg); } 50% { transform: translateX(18px) rotate(8deg); } }
@keyframes gym-core { 0%,100% { transform: rotate(-8deg); } 50% { transform: translateY(8px) rotate(15deg); } }

.technique-details { margin: 12px 0; padding: 16px; }
.technique-details summary { cursor: pointer; color: var(--water-dark); font-weight: 800; }
.technique-details h3 { margin: 15px 0 6px; }
.technique-details p, .technique-details li { line-height: 1.5; }
.gym-sets { display: grid; gap: 13px; }
.gym-set-card { display: grid; grid-template-columns: 65px 1fr 1fr; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow); }
.gym-set-card > button { grid-column: 2 / -1; }
.gym-set-card.done { border-color: #8bcdb4; background: #f5fcf8; }
.set-number { display: grid; place-items: center; gap: 3px; }
.set-number b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: white; background: var(--water); font-size: 22px; }
.set-number span { color: var(--muted); font-size: 10px; }
.gym-value > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.gym-value > div { display: grid; grid-template-columns: 44px minmax(62px,1fr) 44px; gap: 5px; }
.gym-value button { min-height: 48px; padding: 0; border-radius: 12px; color: var(--water-dark); background: #e1f2f2; font-size: 28px; }
.gym-value input { min-width: 0; min-height: 48px; padding: 7px; text-align: center; font-size: 19px; font-weight: 800; }
.rest-timer { position: fixed; z-index: 45; right: max(12px,env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom)); left: max(12px,env(safe-area-inset-left)); display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 17px; color: white; background: #153f45; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.rest-timer strong { font-size: 27px; text-align: center; }
.rest-timer button { min-height: 38px; padding: 0 9px; color: #123c41; background: white; }
.gym-toast { position: fixed; z-index: 120; top: calc(70px + env(safe-area-inset-top)); left: 50%; width: min(480px,calc(100% - 24px)); padding: 13px; transform: translateX(-50%); border-radius: 13px; color: white; background: #237f68; box-shadow: 0 12px 40px rgba(0,0,0,.25); text-align: center; }
.gym-toast.error { background: #a64040; }
.gym-finish-dialog label { margin-top: 10px; }

.gym-history-summary { margin-bottom: 15px; padding: 20px; }
.gym-history-points { display: grid; grid-template-columns: repeat(auto-fit,minmax(135px,1fr)); gap: 9px; margin: 12px 0; }
.gym-history-points > div { display: grid; gap: 3px; padding: 11px; border-radius: 12px; background: #eef7f7; }
.gym-history-points small { color: var(--muted); }
.gym-muscle-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.gym-muscle-tags span { padding: 6px 9px; border-radius: 99px; background: #e1f1ec; }

  .bottom-nav { grid-template-columns: repeat(4, 1fr); }
  .gym-hero { grid-template-columns: 1fr; }
  .gym-week-grid { grid-template-columns: 1fr; }
  .gym-session-card { padding: 15px; }
  .program-exercise { grid-template-columns: 1fr 82px 82px; }
  .program-exercise > button { grid-column: 1 / -1; }
  .gym-workout-head { grid-template-columns: auto 1fr; }
  .gym-workout-head > .secondary { grid-column: 1 / -1; }
  .gym-technique-svg { height: 180px; }
  .gym-set-card { grid-template-columns: 52px 1fr; padding: 12px; }
  .gym-set-card .gym-value { grid-column: 2; }
  .gym-set-card > button { grid-column: 1 / -1; }
  .rest-timer { grid-template-columns: auto 1fr auto; }
  .rest-timer [data-skip-rest] { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .gym-person { animation: none !important; }
}