/* ================= ORB — entidade viva (camadas: halo → anéis → núcleo → partículas) ================= */
.eon-orb { --size: 220px; --energy: .55; --speed: 7s; --hue: 0deg; position: relative; width: var(--size); height: var(--size); flex: none; display: grid; place-items: center; isolation: isolate; }
.eon-orb[data-state="calm"] { --energy: .38; --speed: 9s; }
.eon-orb[data-state="focus"] { --energy: .62; --speed: 6s; }
.eon-orb[data-state="active"] { --energy: 1; --speed: 3.6s; }
.eon-orb[data-state="alert"] { --energy: .7; --speed: 5s; --hue: 150deg; }
.orb-halo { position: absolute; inset: -34%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(111, 123, 255, calc(.55 * var(--energy))) 0%, rgba(155, 92, 255, calc(.22 * var(--energy))) 38%, transparent 68%); filter: blur(22px); animation: breathe var(--speed) ease-in-out infinite; }
.orb-ring { position: absolute; border-radius: 50%; border: 1px solid transparent; background: conic-gradient(from 0deg, rgba(95, 225, 255, 0), rgba(95, 225, 255, .8), rgba(155, 92, 255, 0) 40%, rgba(155, 92, 255, .6) 70%, rgba(95, 225, 255, 0)) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); opacity: calc(.45 + .5 * var(--energy)); }
.orb-ring.r1 { inset: -6%; animation: spin calc(var(--speed) * 6) linear infinite; }
.orb-ring.r2 { inset: -16%; animation: spin calc(var(--speed) * 9) linear infinite reverse; opacity: calc(.25 + .35 * var(--energy)); }
.orb-core { position: absolute; inset: 6%; border-radius: 50%; background:
  radial-gradient(circle at 34% 28%, rgba(235, 252, 255, .95) 0%, rgba(160, 238, 255, .55) 9%, transparent 30%),
  radial-gradient(circle at 70% 78%, rgba(155, 92, 255, .85) 0%, transparent 52%),
  radial-gradient(circle at 50% 50%, #5C8CFF 0%, #4D5BE8 42%, #2A1C78 78%, #120B3D 100%);
  box-shadow: inset 0 0 36px rgba(255, 255, 255, .18), inset -16px -22px 50px rgba(10, 6, 40, .65), 0 0 calc(40px * var(--energy)) rgba(95, 140, 255, calc(.65 * var(--energy))), 0 24px 60px rgba(0, 0, 0, .45);
  animation: core-float var(--speed) ease-in-out infinite; }
.orb-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 200deg, transparent 0 55%, rgba(95, 225, 255, .35) 70%, transparent 85%); mix-blend-mode: screen; animation: spin calc(var(--speed) * 3) linear infinite; }
.orb-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.orb-particles i { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #BFF3FF; box-shadow: 0 0 8px 1px rgba(95, 225, 255, .9); opacity: .85; animation: orbit var(--d) linear infinite; animation-delay: var(--delay); }
.orb-content { position: relative; z-index: 2; text-align: center; display: grid; place-items: center; color: var(--eon-text); text-shadow: 0 2px 14px rgba(5, 8, 18, .6); }
/* estado de alerta: muda a iluminação de forma sutil (matiz quente) */
.eon-orb[data-state="alert"] .orb-core, .eon-orb[data-state="alert"] .orb-ring, .eon-orb[data-state="alert"] .orb-halo { filter: hue-rotate(150deg); }
.eon-orb[data-state="alert"] .orb-halo { filter: blur(22px) hue-rotate(150deg); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes core-float { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.025) translateY(-1.5%); } }
@keyframes orbit { from { transform: rotate(0deg) translateX(var(--r)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); } }

/* ================= Splash / loading ================= */
.splash { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 24px; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.splash h1 { letter-spacing: .22em; font-size: 30px; font-weight: 700; animation: rise 1s .2s var(--eon-ease) both; }
.splash p { color: var(--eon-text-secondary); margin-top: 8px; animation: rise 1s .4s var(--eon-ease) both; }
.loading { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 24px; }
.loading-inner { display: flex; flex-direction: column; align-items: center; gap: 40px; animation: rise .6s var(--eon-ease) both; }
.loading p { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.shimmer { width: 180px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; margin: 14px auto 0; }
.shimmer::after { content: ""; display: block; height: 100%; width: 45%; border-radius: inherit; background: var(--eon-gradient); box-shadow: 0 0 12px rgba(95, 225, 255, .7); animation: slide 1.3s var(--eon-ease) infinite; }
@keyframes slide { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

/* ================= Onboarding ================= */
.ob { display: flex; flex-direction: column; min-height: 100dvh; padding: calc(var(--safe-t) + 18px) var(--pad) calc(var(--safe-b) + 24px); }
.ob-top { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.ob-top .bar { flex: 1; }
.ob-body { flex: 1; display: flex; flex-direction: column; gap: 22px; animation: rise .5s var(--eon-ease) both; }
.ob-body > .lead { color: var(--eon-text-secondary); font-size: 16px; }
.ob-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; }
.welcome-art { display: grid; place-items: center; padding: 34px 0 20px; }
.promises { display: flex; flex-direction: column; gap: 12px; }
.promises div { display: flex; gap: 12px; align-items: center; font-weight: 500; font-size: 15px; }
.promises svg { width: 20px; height: 20px; color: var(--eon-cyan); flex: none; }

/* ================= Home ================= */
.greet { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.greet .hi { font-size: 12px; color: var(--eon-text-muted); font-weight: 600; letter-spacing: .12em; margin-bottom: 8px; }
.streak { display: inline-flex; align-items: center; gap: 6px; background: var(--eon-glass-2); border: 1px solid var(--eon-border); padding: 8px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: 13px; white-space: nowrap; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.home-grid > * { min-width: 0; }
@media (min-width: 900px) { .home-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } .home-grid .wide { grid-column: 1 / -1; } }
.hero-card { position: relative; overflow: hidden; padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.hero-card .orb-wrap { display: grid; place-items: center; padding: 8px 0 20px; min-width: 0; }
.hero-card h2 { font-size: clamp(30px, 6vw, 40px); letter-spacing: -.035em; }
.hero-card .focus-line { color: var(--eon-text-secondary); margin: 6px 0 16px; }
@media (min-width: 640px) { .hero-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 34px; } .hero-card .orb-wrap { grid-column: 2; grid-row: 1 / span 3; padding: 0; } .hero-card .btn-xl { grid-column: 1 / -1; } }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--eon-text-muted); letter-spacing: .06em; }
.wd .b { width: 100%; max-width: 44px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .04); border: 1px solid var(--eon-border); font-size: 15px; color: var(--eon-text-muted); }
.wd .b svg { width: 17px; height: 17px; }
.wd.done .b { background: var(--eon-gradient); color: #050812; border-color: transparent; box-shadow: 0 0 16px rgba(95, 225, 255, .45); }
.wd.plan .b { border-style: dashed; border-color: rgba(120, 150, 255, .4); color: var(--eon-text-secondary); }
.wd.today .b { box-shadow: 0 0 0 3px rgba(95, 225, 255, .16); border-color: var(--eon-cyan); }
.wd.today { color: var(--eon-cyan); }
.wd.miss .b { color: var(--eon-red); border-color: rgba(255, 107, 115, .4); }
/* métricas como elementos da interface, não caixas */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 24px; }
.metric .v { font-size: clamp(34px, 7vw, 46px); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric .l { font-size: 11px; color: var(--eon-text-muted); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; }
.kpi { padding: 4px 0; }
.kpi .v { font-size: clamp(30px, 6vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 11px; color: var(--eon-text-muted); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }
.badge-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.badge-row::-webkit-scrollbar { display: none; }
.ach { flex: none; width: 112px; text-align: center; padding: 14px 8px; border-radius: var(--eon-radius-md); background: var(--eon-glass-2); border: 1px solid var(--eon-border); }
.ach .e { font-size: 26px; filter: grayscale(1) brightness(.7); opacity: .5; }
.ach.on { border-color: var(--eon-border-active); background: var(--eon-gradient-soft); }
.ach.on .e { filter: none; opacity: 1; }
.ach .n { font-size: 12px; font-weight: 600; margin-top: 6px; }
.ach .d { font-size: 10.5px; color: var(--eon-text-muted); margin-top: 2px; }

/* ================= Meus treinos ================= */
.wk-card { display: flex; gap: 16px; align-items: center; }
.wk-letter { width: 56px; height: 56px; border-radius: 18px; background: var(--eon-gradient-soft); border: 1px solid var(--eon-border-active); color: var(--eon-cyan); display: grid; place-items: center; font-weight: 650; font-size: 24px; flex: none; box-shadow: inset 0 0 20px rgba(95, 225, 255, .08); }
.ex-list { display: grid; gap: 16px; }
@media (min-width: 760px) { .ex-list.two { grid-template-columns: 1fr 1fr; } }

/* ================= Sessão ================= */
.sess { min-height: 100dvh; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 14px) var(--pad) calc(var(--safe-b) + 16px); gap: 16px; position: relative; }
.sess.flash::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(circle at 50% 60%, rgba(95, 225, 255, .22), transparent 60%); animation: fadeOut .9s var(--eon-ease) forwards; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.sess-top { display: flex; align-items: center; gap: 10px; }
.sess-top .mid { flex: 1; text-align: center; }
.sess-top .mid .eyebrow { display: block; }
.sess-top .mid b { font-size: 15px; font-weight: 600; }
.sess-name { font-size: clamp(26px, 5vw, 34px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.sess-main { flex: 1; display: flex; flex-direction: column; gap: 16px; animation: rise .5s var(--eon-ease) both; }
.sess-foot { display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 0; padding: 14px 0 4px; background: linear-gradient(0deg, var(--eon-bg) 55%, transparent); z-index: 4; }
.big-stat { display: flex; gap: 8px; }
.big-stat > div { flex: 1; background: var(--eon-glass); border: 1px solid var(--eon-border); border-radius: var(--eon-radius-md); padding: 14px 8px; text-align: center; }
.big-stat b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.big-stat span { font-size: 10.5px; color: var(--eon-text-muted); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.set-log { display: flex; flex-wrap: wrap; gap: 8px; }
.set-log span { background: rgba(95, 225, 255, .08); border: 1px solid rgba(95, 225, 255, .25); color: var(--eon-cyan); border-radius: var(--r-pill); font-weight: 600; padding: 6px 12px; font-size: 13px; }
.quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.help-btn { background: rgba(92, 140, 255, .1); border: 1px solid rgba(92, 140, 255, .35); color: var(--eon-text); min-height: 58px; border-radius: var(--eon-radius-md); font-weight: 600; font-size: 16px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all var(--eon-transition-normal); }
.help-btn:hover { background: rgba(92, 140, 255, .16); box-shadow: var(--eon-glow); }
.help-btn svg { width: 22px; height: 22px; color: var(--eon-cyan); }
.timer-wrap { position: relative; width: min(74vw, 300px); aspect-ratio: 1; margin: 18px auto; display: grid; place-items: center; }
.timer-wrap .eon-orb { position: absolute; inset: 13%; width: auto; height: auto; --size: 100%; }
.timer-wrap > svg { overflow: visible; position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); z-index: 3; }
.timer-wrap .trk { stroke: rgba(255, 255, 255, .06); }
.timer-wrap .prg { stroke: url(#gradLine); transition: stroke-dashoffset .25s linear; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(95, 225, 255, .8)); }
.timer-wrap .t { position: relative; z-index: 4; text-align: center; }
.timer-wrap .t b { font-size: clamp(46px, 14vw, 62px); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.timer-wrap .t span { display: block; font-size: 11px; color: rgba(255, 255, 255, .75); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }
.timer-wrap.done .eon-orb { --energy: 1; }
.active-wrap { display: grid; place-items: center; padding: 20px 0 6px; }
.active-time { font-size: clamp(54px, 16vw, 72px); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.summary-hero { text-align: center; padding: 10px 0 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ================= Calendário ================= */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .h { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--eon-text-muted); padding-bottom: 4px; }
.cal .d { aspect-ratio: 1; border-radius: 14px; background: var(--eon-glass-2); border: 1px solid var(--eon-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 500; font-size: 14px; position: relative; transition: all var(--eon-transition-fast); }
button.d:hover { border-color: var(--eon-border-active); }
.cal .d.out { background: transparent; border-color: transparent; }
.cal .d.today { border-color: var(--eon-cyan); box-shadow: 0 0 0 3px rgba(95, 225, 255, .12); }
.cal .d .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.cal .d .dot.done { background: var(--eon-gradient); box-shadow: 0 0 10px rgba(95, 225, 255, .7); } .cal .d .dot.plan { background: transparent; border: 1.5px solid var(--eon-text-muted); } .cal .d .dot.miss { background: var(--eon-red); opacity: .8; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--eon-text-secondary); font-weight: 500; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ================= Misc ================= */
.hr { height: 1px; background: var(--eon-border); border: 0; margin: 4px 0; }
.switch { position: relative; width: 50px; height: 30px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid var(--eon-border); flex: none; transition: background var(--eon-transition-normal); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--eon-text-secondary); transition: transform var(--eon-transition-normal), background var(--eon-transition-normal); }
.switch[aria-checked="true"] { background: var(--eon-gradient); border-color: transparent; box-shadow: var(--eon-glow); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.setting { display: flex; align-items: center; gap: 14px; padding: 14px 0; min-height: 60px; }
.setting + .setting { border-top: 1px solid var(--eon-border); }
.locked { opacity: .5; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--eon-gradient); color: #050812; display: grid; place-items: center; font-size: 24px; font-weight: 700; flex: none; box-shadow: var(--eon-glow); }
.avatar.sm { width: 34px; height: 34px; font-size: 14px; }
.disclaimer { font-size: 11.5px; color: var(--eon-text-muted); text-align: center; padding: 8px 12px; }

/* ================= Cardio ================= */
.machine-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .machine-grid { grid-template-columns: repeat(4, 1fr); } }
.machine { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px 8px 12px; border-radius: var(--eon-radius-md); background: var(--eon-glass); border: 1px solid var(--eon-border); transition: all var(--eon-transition-normal); }
.machine b { padding: 0 6px; font-weight: 600; }
.machine span { padding: 0 6px; font-size: 12px; color: var(--eon-text-secondary); }
.machine-img { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--eon-bg-2); margin-bottom: 6px; }
.machine-img svg { width: 100%; height: 100%; }
.machine:hover { border-color: var(--eon-border-active); }
.machine[aria-pressed="true"] { border-color: var(--eon-border-active); background: var(--eon-gradient-soft); box-shadow: 0 0 0 1px rgba(95, 225, 255, .2), var(--eon-glow); }
.phase-preview { display: flex; flex-direction: column; gap: 10px; }
.phase-preview .pp { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.phase-preview .pp span { color: var(--eon-text-secondary); text-align: right; }
.timer-wrap.big { width: min(78vw, 320px); }
.level-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px; border-radius: var(--eon-radius-md); background: var(--eon-glass); border: 1px solid var(--eon-border); width: 100%; transition: all var(--eon-transition-normal); }
.level-card .t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; }
.level-card .s { font-size: 13px; color: var(--eon-text-secondary); }
.level-card[aria-pressed="true"] { border-color: var(--eon-border-active); background: var(--eon-gradient-soft); box-shadow: 0 0 0 1px rgba(95, 225, 255, .2), var(--eon-glow); }
.count-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.count-btn { aspect-ratio: 1; border-radius: var(--eon-radius-md); background: rgba(13, 20, 34, .7); border: 1px solid var(--eon-border); font-size: 24px; font-weight: 600; transition: all var(--eon-transition-normal); }
.count-btn[aria-pressed="true"] { background: var(--eon-gradient); color: #050812; border-color: transparent; box-shadow: var(--eon-glow); }
.plan-preview { display: flex; flex-direction: column; gap: 6px; }
.plan-preview .pr { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 12px; border-radius: 12px; background: var(--eon-glass-2); }
.plan-preview .pr b { color: var(--eon-cyan); font-weight: 600; min-width: 36px; }
.plan-preview .pr span { color: var(--eon-text-secondary); text-align: right; }


/* ================= Corpo (Body Map) ================= */
.body-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 20px; }
.bm .v { font-size: clamp(22px, 4vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.bm.muted-v .v { font-size: 15px; color: var(--eon-text-muted); font-weight: 500; letter-spacing: 0; }
.bm .l { font-size: 10.5px; color: var(--eon-text-muted); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.body-layout { display: grid; gap: 22px; }
@media (min-width: 900px) { .body-layout { grid-template-columns: 330px minmax(0, 1fr); align-items: start; gap: 36px; } .body-panel { position: sticky; top: 24px; } }
.body-col { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.body-stage { position: relative; height: min(46dvh, 430px); aspect-ratio: 300 / 640; perspective: 1400px; animation: bodyfloat 9s ease-in-out infinite; }
@keyframes bodyfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.body-face { position: absolute; inset: 0; transition: transform .6s var(--eon-ease), opacity .45s var(--eon-ease); backface-visibility: hidden; }
.body-stage[data-view="front"] .body-face.back { transform: rotateY(-90deg); opacity: 0; pointer-events: none; }
.body-stage[data-view="back"] .body-face.front { transform: rotateY(90deg); opacity: 0; pointer-events: none; }
.body-zoom { width: 100%; height: 100%; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .5s var(--eon-ease); }
.body-stage[data-selecting] .body-zoom { transform: scale(1.07); }
.body-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 20px 40px rgba(92, 100, 255, .12)); }
.body-floor { fill: rgba(92, 140, 255, .22); filter: blur(6px); }
.body-base circle, .body-base rect, .body-base path, .body-base ellipse { fill: url(#bodyFill); stroke: rgba(140, 170, 255, .22); stroke-width: 1; }
.body-hair { fill: #22345a; stroke: rgba(140, 170, 255, .2); stroke-width: 1; }
.body-lines path { fill: none; stroke: rgba(160, 190, 255, .16); stroke-width: .8; stroke-linecap: round; }
.muscle { cursor: pointer; outline: none; transition: opacity .35s, filter .35s; --glow: rgba(95, 225, 255, .8); }
.muscle .mp { stroke: rgba(150, 180, 255, .32); stroke-width: .9; transition: fill .4s, stroke .4s; fill: rgba(120, 140, 190, .1); }
.muscle .hit { fill: transparent; stroke: transparent; stroke-width: 40; stroke-linejoin: round; pointer-events: all; }
.muscle:hover .mp, .muscle:focus-visible .mp { stroke: rgba(210, 225, 255, .6); }
.muscle.m-none .mp { fill: rgba(120, 140, 190, .1); }
.muscle.m-nodata .mp { fill: rgba(92, 140, 255, .24); }
.muscle.m-recent .mp { fill: url(#mgRecent); --glow: rgba(123, 97, 255, .8); }
.muscle.m-recovering .mp { fill: url(#mgRecovering); animation: glowpulse 3.6s ease-in-out infinite; }
.muscle.m-recovered .mp { fill: url(#mgRecovered); }
.muscle.m-attention .mp { fill: url(#mgAttention); --glow: rgba(233, 181, 74, .8); }
@keyframes glowpulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.body-stage[data-selecting] .muscle:not(.sel) { opacity: .45; }
.muscle.sel { filter: drop-shadow(0 0 9px var(--glow)); }
.muscle.sel .mp { stroke: rgba(235, 245, 255, .85); stroke-width: 1.4; }
.body-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: 11px; color: var(--eon-text-secondary); }
.dotc { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: rgba(120, 140, 190, .35); vertical-align: middle; }
.dotc.s-recovered { background: var(--eon-cyan); box-shadow: 0 0 8px var(--eon-cyan); } .dotc.s-recovering { background: var(--eon-blue); box-shadow: 0 0 8px var(--eon-blue); }
.dotc.s-recent { background: var(--eon-violet); } .dotc.s-attention { background: var(--eon-amber); } .dotc.s-nodata { background: rgba(92, 140, 255, .5); } .dotc.s-none { background: rgba(120, 140, 190, .3); }
.m-chip .dotc { margin: 0; }
.muscle-chips { justify-content: center; }
.body-panel { min-height: 120px; }
.body-panel.swap { animation: rise .4s var(--eon-ease) both; }
.panel-hint { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 8px; }
@media (max-width: 599px) { .body-panel { display: none; } .body-stage { height: min(44dvh, 380px); } }
.kv.big dd { font-size: 17px; font-weight: 600; }
.grp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.grp { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--eon-radius-md); background: var(--eon-glass-2); border: 1px solid var(--eon-border); }
.grp b { font-weight: 600; } .grp span { font-size: 12.5px; color: var(--eon-text-secondary); }
.grp.s-free { border-color: rgba(95, 225, 255, .3); } .grp.s-busy { border-color: rgba(123, 97, 255, .35); }
.m-chip { min-height: 44px; }