/* ═══════════════════════════════════════════════════════ TRAINING V2 — Premium dark fitness UI Matches the mockup: wider panels, larger avatar, cleaner cards, better spacing and hierarchy ═══════════════════════════════════════════════════════ */ :root { --tv2-bg: #0a0a0a; --tv2-surface: #141414; --tv2-surface-alt: #1a1a1a; --tv2-border: #222; --tv2-border-light: #2a2a2a; --tv2-accent: #c8ff00; --tv2-accent-dim: rgba(200, 255, 0, 0.12); --tv2-accent-glow: rgba(200, 255, 0, 0.25); --tv2-text: #fff; --tv2-text-muted: #888; --tv2-text-dim: #555; --tv2-radius: 16px; --tv2-radius-sm: 12px; --tv2-radius-xs: 8px; } /* ─── Site header (GLOBAL — shared across all modes) ─── */ .site-header { background: rgba(10, 10, 10, 0.92) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid var(--tv2-border) !important; border-left: none !important; border-right: none !important; border-top: none !important; height: 64px !important; padding: 0 28px !important; z-index: 200 !important; } .site-logo { font-size: 1.1rem !important; font-weight: 800 !important; letter-spacing: 0.06em !important; color: var(--tv2-text) !important; } .site-logo::before { content: "" !important; display: inline-flex !important; width: 32px !important; height: 32px !important; margin-right: 10px !important; border-radius: 50% !important; background: var(--tv2-accent) !important; vertical-align: middle !important; } .header-auth-button { background: var(--tv2-surface) !important; border: 1px solid var(--tv2-border) !important; border-radius: 999px !important; padding: 6px 16px 6px 8px !important; color: var(--tv2-text) !important; gap: 8px !important; } .profile-avatar { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: var(--tv2-accent) !important; color: #000 !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.8rem !important; } .profile-account-label { color: var(--tv2-text) !important; font-weight: 600 !important; font-size: 0.88rem !important; } /* ─── Background & depth (GLOBAL) ─── */ body { background: var(--tv2-bg) !important; } .control-panel { background: transparent !important; border: none !important; } /* ─── Viewer / avatar area ─── */ body.training-mode .viewer { background: radial-gradient(ellipse 600px 400px at 50% 60%, rgba(200, 255, 0, 0.04), transparent 70%), radial-gradient(ellipse 800px 300px at 50% 95%, rgba(200, 255, 0, 0.03), transparent 60%), var(--tv2-bg) !important; } body.training-mode .viewer::after { content: "" !important; position: absolute !important; bottom: 80px !important; left: 50% !important; transform: translateX(-50%) !important; width: 300px !important; height: 20px !important; border-radius: 50% !important; background: radial-gradient(ellipse, rgba(200, 255, 0, 0.08), transparent 70%) !important; pointer-events: none !important; z-index: 0 !important; } /* ─── Viewer image centering ─── */ .viewer { display: flex !important; align-items: center !important; justify-content: center !important; } .viewer .image-wrap { display: flex !important; align-items: center !important; justify-content: center !important; } /* ─── View switch (Front/Back) — GLOBAL, below header ─── */ .view-switch { background: var(--tv2-surface) !important; border: 1px solid var(--tv2-border) !important; border-radius: 14px !important; padding: 4px !important; gap: 0 !important; width: 240px !important; top: 72px !important; z-index: 190 !important; } .view-button { border-radius: 10px !important; background: transparent !important; border: none !important; color: var(--tv2-text-muted) !important; font-weight: 600 !important; font-size: 0.9rem !important; padding: 10px 24px !important; transition: all 0.2s ease !important; min-height: 40px !important; } .view-button.is-active { background: var(--tv2-accent) !important; color: #000 !important; font-weight: 700 !important; box-shadow: 0 0 16px rgba(200, 255, 0, 0.2) !important; } /* ─── Mode switch (bottom nav) — GLOBAL ─── */ .mode-switch { background: var(--tv2-surface) !important; border: 1px solid var(--tv2-border) !important; border-radius: 20px !important; padding: 8px 12px !important; gap: 4px !important; bottom: 20px !important; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4) !important; width: min(820px, calc(100vw - 40px)) !important; } .mode-button { background: transparent !important; border: none !important; border-radius: 14px !important; color: var(--tv2-text-muted) !important; font-weight: 600 !important; font-size: 0.82rem !important; padding: 12px 20px !important; gap: 6px !important; transition: all 0.2s ease !important; position: relative !important; display: inline-flex !important; align-items: center !important; flex-direction: row !important; } .mode-button svg { stroke: var(--tv2-text-muted) !important; opacity: 0.7 !important; flex-shrink: 0 !important; } .mode-button.is-active { background: rgba(200, 255, 0, 0.08) !important; color: var(--tv2-accent) !important; } .mode-button.is-active svg { stroke: var(--tv2-accent) !important; opacity: 1 !important; } .mode-button.is-active::after { content: "" !important; position: absolute !important; bottom: 2px !important; left: 50% !important; transform: translateX(-50%) !important; width: 24px !important; height: 3px !important; border-radius: 2px !important; background: var(--tv2-accent) !important; } /* ═══════════════════════════════════════════ LEFT PANEL — Profile & Filters ═══════════════════════════════════════════ */ body.training-mode .training-panel { background: var(--tv2-surface) !important; border: 1px solid var(--tv2-border) !important; border-radius: 0 24px 24px 0 !important; padding: 24px 20px !important; gap: 0 !important; width: min(380px, 28vw) !important; top: 72px !important; left: 0 !important; box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3) !important; } body.training-mode .training-panel::before, body.training-mode .training-panel::after { content: none !important; display: none !important; } body.training-mode.has-workout-sidebar:not(.workout-active) .training-panel { width: min(380px, 28vw) !important; } body.training-mode:not(.workout-active) .viewer { left: min(380px, 28vw) !important; } body.training-mode.has-workout-sidebar:not(.workout-active) .viewer { left: min(380px, 28vw) !important; right: min(380px, 28vw) !important; } body.training-mode.workout-active .viewer { right: min(420px, 32vw) !important; } /* Hide the sidebar collapse toggle */ body.training-mode .sidebar-toggle { display: none !important; } /* ─── Sidebar controls container ─── */ body.training-mode .training-sidebar-controls { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; gap: 16px !important; } /* Section title */ body.training-mode .training-sidebar-controls::before { content: "PROFILE & FILTERS" !important; display: block !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; color: var(--tv2-text-muted) !important; margin-bottom: 4px !important; } /* Profile selector */ body.training-mode .training-sidebar-controls .field.compact-field { background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: var(--tv2-radius-sm) !important; padding: 10px 14px !important; gap: 0 !important; } body.training-mode .training-sidebar-controls .field.compact-field > span { display: none !important; } body.training-mode .training-sidebar-controls .field.compact-field select, body.training-mode .training-sidebar-controls .field.compact-field input { background: transparent !important; border: none !important; color: var(--tv2-text) !important; font-size: 0.95rem !important; font-weight: 600 !important; padding: 0 !important; min-height: 28px !important; height: 28px !important; } /* ─── Profile summary ─── */ body.training-mode .training-profile-summary { gap: 12px !important; } body.training-mode .training-profile-name-row { display: none !important; } body.training-mode .training-stat-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } body.training-mode .training-stat-card { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; padding: 14px 8px !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: var(--tv2-radius-sm) !important; } body.training-mode .training-stat-value { font-size: 1.15rem !important; font-weight: 700 !important; color: var(--tv2-text) !important; } body.training-mode .training-stat-icon { display: flex !important; align-items: center !important; justify-content: center !important; color: var(--tv2-accent) !important; } body.training-mode .training-stat-icon svg { stroke: var(--tv2-accent) !important; } body.training-mode .training-stat-label { font-size: 0.72rem !important; color: var(--tv2-text-muted) !important; text-transform: capitalize !important; } body.training-mode .training-profile-chips { display: none !important; } /* ─── Filter pills ─── */ body.training-mode .exercise-filter-pills { display: flex !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: var(--tv2-radius-sm) !important; padding: 4px !important; gap: 4px !important; } body.training-mode .exercise-filter-pill { flex: 1 !important; padding: 10px 12px !important; border-radius: var(--tv2-radius-xs) !important; background: transparent !important; border: none !important; color: var(--tv2-text-muted) !important; font-size: 0.82rem !important; font-weight: 600 !important; transition: all 0.2s ease !important; cursor: pointer !important; } body.training-mode .exercise-filter-pill.is-active { background: var(--tv2-accent) !important; color: #000 !important; font-weight: 700 !important; } /* ─── Session drawer ─── */ body.training-mode .training-session-drawer { border-top: 1px solid var(--tv2-border) !important; padding-top: 12px !important; margin-top: 4px !important; } body.training-mode .training-session-drawer > summary { color: var(--tv2-accent) !important; font-size: 0.8rem !important; } body.training-mode .training-session-drawer .field select, body.training-mode .training-session-drawer .field input { background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; color: var(--tv2-text) !important; border-radius: var(--tv2-radius-xs) !important; } body.training-mode .training-session-drawer .reset-button { background: var(--tv2-accent) !important; color: #000 !important; border: none !important; border-radius: var(--tv2-radius-xs) !important; font-weight: 700 !important; } /* ─── Selected muscle card ─── */ body.training-mode .training-muscle { margin-top: 16px !important; padding-top: 0 !important; } body.training-mode .training-muscle > .eyebrow { display: block !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--tv2-text-muted) !important; margin-bottom: 8px !important; } body.training-mode .training-muscle h3 { font-size: 1.3rem !important; font-weight: 700 !important; color: var(--tv2-text) !important; margin: 0 0 12px !important; } /* ─── Exercise cards ─── */ body.training-mode .exercise-category { border: none !important; background: transparent !important; margin-bottom: 4px !important; } body.training-mode .exercise-category summary { background: transparent !important; border: none !important; color: var(--tv2-text-muted) !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 8px 4px !important; min-height: 32px !important; } body.training-mode .exercise.rich-exercise { display: grid !important; grid-template-columns: 64px 1fr auto !important; gap: 14px !important; align-items: center !important; padding: 14px !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: var(--tv2-radius) !important; margin-bottom: 8px !important; transition: border-color 0.2s ease !important; } body.training-mode .exercise.rich-exercise:hover { border-color: var(--tv2-border-light) !important; } body.training-mode .exercise-thumb { width: 64px !important; height: 64px !important; border-radius: var(--tv2-radius-sm) !important; overflow: hidden !important; background: var(--tv2-surface) !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; } body.training-mode .exercise-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; } body.training-mode .exercise-info { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; } body.training-mode .exercise-info strong { font-size: 0.92rem !important; font-weight: 700 !important; color: var(--tv2-text) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.training-mode .exercise-info .exercise-english { font-size: 0.78rem !important; color: var(--tv2-text-muted) !important; } body.training-mode .exercise-info .exercise-equipment { font-size: 0.75rem !important; color: var(--tv2-text-dim) !important; } body.training-mode .exercise-info span { font-size: 0.78rem !important; color: var(--tv2-text-muted) !important; display: flex !important; align-items: center !important; gap: 5px !important; } body.training-mode .exercise-info span svg { flex-shrink: 0 !important; opacity: 0.5 !important; } body.training-mode .exercise-rest { padding-left: 17px !important; } body.training-mode .workout-add-button { background: var(--tv2-accent) !important; color: #000 !important; border: none !important; border-radius: var(--tv2-radius-xs) !important; padding: 8px 18px !important; font-weight: 700 !important; font-size: 0.82rem !important; white-space: nowrap !important; cursor: pointer !important; transition: opacity 0.2s ease !important; } body.training-mode .workout-add-button:hover { opacity: 0.85 !important; } /* ─── Exercise list scroll area ─── */ body.training-mode .training-muscle .exercise-list { padding: 0 !important; overflow-y: auto !important; } body.training-mode .exercise-category-list { padding: 0 !important; } /* ═══════════════════════════════════════════ RIGHT PANEL — Current Session ═══════════════════════════════════════════ */ body.training-mode .workout-panel { background: var(--tv2-surface) !important; border: 1px solid var(--tv2-border) !important; border-radius: 24px 0 0 24px !important; padding: 24px 20px !important; gap: 16px !important; width: min(380px, 28vw) !important; box-shadow: -4px 0 30px rgba(0, 0, 0, 0.3) !important; } body.training-mode .workout-panel::before, body.training-mode .workout-panel::after { content: none !important; display: none !important; } body.training-mode.workout-active .workout-panel { width: min(420px, 32vw) !important; } /* ─── Panel header ─── */ body.training-mode .workout-panel-header { display: flex !important; align-items: center !important; justify-content: space-between !important; } body.training-mode .workout-panel-title { font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; color: var(--tv2-text-muted) !important; } body.training-mode .workout-clear-all-btn { background: transparent !important; border: none !important; color: var(--tv2-text-dim) !important; font-size: 0.78rem !important; cursor: pointer !important; padding: 4px 8px !important; } /* ─── Timer ─── */ body.training-mode .workout-header { display: flex !important; justify-content: center !important; } body.training-mode .workout-timer { width: 100% !important; min-height: 100px !important; display: grid !important; place-items: center !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-accent-dim) !important; border-radius: var(--tv2-radius) !important; color: var(--tv2-accent) !important; font-size: 3rem !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important; box-shadow: none !important; text-shadow: 0 0 30px rgba(200, 255, 0, 0.15) !important; } /* ─── Status card ─── */ body.training-mode .workout-status-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; text-align: center !important; gap: 4px !important; } body.training-mode .workout-status-card span { font-size: 0.85rem !important; color: var(--tv2-text-muted) !important; } body.training-mode .workout-status-card strong { font-size: 1rem !important; color: var(--tv2-text) !important; } body.training-mode .workout-status-card small { display: none !important; } /* ─── Action buttons ─── */ body.training-mode .workout-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } body.training-mode .workout-actions #startWorkoutButton { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; grid-column: 1 / -1 !important; padding: 16px 24px !important; background: var(--tv2-accent) !important; color: #000 !important; border: none !important; border-radius: var(--tv2-radius) !important; font-size: 1.05rem !important; font-weight: 800 !important; cursor: pointer !important; transition: opacity 0.2s ease !important; } body.training-mode .workout-actions #startWorkoutButton:hover { opacity: 0.9 !important; } body.training-mode .workout-actions #startWorkoutButton svg { fill: #000 !important; } body.training-mode .workout-actions .pause-reset-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } body.training-mode .workout-actions #nextWorkoutSetButton, body.training-mode .workout-actions #resetWorkoutButton { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 12px 16px !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: var(--tv2-radius-sm) !important; color: var(--tv2-text) !important; font-size: 0.88rem !important; font-weight: 600 !important; cursor: pointer !important; } body.training-mode .workout-actions #nextWorkoutSetButton svg, body.training-mode .workout-actions #resetWorkoutButton svg { flex-shrink: 0 !important; } /* ─── Pain section ─── */ body.training-mode .pain-section { display: none !important; } /* ─── Session queue ─── */ body.training-mode .workout-section .eyebrow { font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--tv2-text-muted) !important; } body.training-mode .session-queue-title { display: none !important; } body.training-mode .session-counter { font-size: 0.82rem !important; color: var(--tv2-text-dim) !important; font-weight: 500 !important; } body.training-mode .workout-builder-heading { margin-bottom: 12px !important; } /* ─── Workout plan items ─── */ body.training-mode .workout-plan-list { gap: 8px !important; padding: 0 !important; } body.training-mode .workout-plan-item { display: grid !important; grid-template-columns: 18px 36px 1fr auto !important; gap: 10px !important; align-items: center !important; padding: 14px !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: var(--tv2-radius) !important; box-shadow: none !important; cursor: grab !important; transition: opacity 0.2s, border-color 0.2s !important; } body.training-mode .workout-plan-item.is-dragging { opacity: 0.4 !important; } body.training-mode .workout-plan-item.drag-over { border-color: var(--tv2-accent) !important; box-shadow: 0 0 0 1px var(--tv2-accent-dim) !important; } body.training-mode .workout-drag-handle { display: flex !important; align-items: center !important; justify-content: center !important; color: var(--tv2-text-dim) !important; cursor: grab !important; } body.training-mode .workout-drag-handle:active { cursor: grabbing !important; } body.training-mode .workout-plan-item.is-current { border-color: var(--tv2-accent-dim) !important; background: rgba(200, 255, 0, 0.04) !important; } body.training-mode .workout-order { width: 36px !important; height: 36px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: var(--tv2-accent) !important; color: #000 !important; font-size: 0.82rem !important; font-weight: 800 !important; flex-shrink: 0 !important; } body.training-mode .workout-plan-item > div:nth-child(3) { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; } body.training-mode .workout-plan-item strong { font-size: 0.9rem !important; font-weight: 700 !important; color: var(--tv2-text) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.training-mode .workout-plan-item span { font-size: 0.78rem !important; color: var(--tv2-text-muted) !important; } /* Hide move/remove buttons, show subtle menu */ body.training-mode .workout-item-actions { display: flex !important; gap: 2px !important; opacity: 0 !important; transition: opacity 0.2s ease !important; } body.training-mode .workout-plan-item:hover .workout-item-actions { opacity: 1 !important; } body.training-mode .workout-item-actions button { width: 28px !important; height: 28px !important; display: grid !important; place-items: center !important; border-radius: 6px !important; background: transparent !important; border: none !important; color: var(--tv2-text-dim) !important; font-size: 1rem !important; cursor: pointer !important; } body.training-mode .workout-item-actions button:hover { background: var(--tv2-surface) !important; color: var(--tv2-text) !important; } /* ─── Empty state ─── */ body.training-mode .workout-empty { background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: var(--tv2-radius) !important; box-shadow: none !important; padding: 20px !important; text-align: center !important; } body.training-mode .workout-empty strong { color: var(--tv2-text) !important; } body.training-mode .workout-empty span { color: var(--tv2-text-muted) !important; } /* ─── Add exercise button ─── */ body.training-mode .add-exercise-to-session { background: transparent !important; border: 1px dashed var(--tv2-border-light) !important; border-radius: var(--tv2-radius-sm) !important; color: var(--tv2-text-muted) !important; font-size: 0.85rem !important; padding: 14px !important; cursor: pointer !important; text-align: center !important; transition: border-color 0.2s ease !important; margin-top: 4px !important; } body.training-mode .add-exercise-to-session:hover { border-color: var(--tv2-accent) !important; color: var(--tv2-accent) !important; } /* ─── History section ─── */ body.training-mode .workout-history-list { gap: 6px !important; padding: 0 !important; } body.training-mode .workout-history-item { background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: var(--tv2-radius-sm) !important; box-shadow: none !important; padding: 10px 14px !important; } /* ═══════════════════════════════════════════ MUSCLE HOVER TOOLTIP / FLOATING CARD ═══════════════════════════════════════════ */ body.training-mode .muscle-info-tooltip { background: var(--tv2-surface) !important; border: 1px solid var(--tv2-accent-dim) !important; border-radius: var(--tv2-radius) !important; color: var(--tv2-text) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important; } /* ═══════════════════════════════════════════ SVG SHAPE STYLES — desaturate non-active ═══════════════════════════════════════════ */ body.training-mode .viewer svg .shape-group path { opacity: 0.25 !important; transition: opacity 0.2s ease !important; } body.training-mode .viewer svg .shape-group path:hover, body.training-mode .viewer svg .shape-group path.is-hovered, body.training-mode .viewer svg .shape-group path.is-active, body.training-mode .viewer svg .shape-group path.is-pinned { opacity: 1 !important; fill: var(--tv2-accent) !important; filter: drop-shadow(0 0 8px rgba(200, 255, 0, 0.3)) !important; } body.training-mode.has-active-muscle .viewer svg .shape-group path:not(.is-active):not(.is-pinned):not(.is-hovered) { opacity: 0.15 !important; } /* ═══════════════════════════════════════════ GENERAL OVERRIDES ═══════════════════════════════════════════ */ body.training-mode .eyebrow { color: var(--tv2-text-muted) !important; } body.training-mode .mini-feedback { color: var(--tv2-text-dim) !important; font-size: 0.75rem !important; } body.training-mode .compact-toolbar { gap: 6px !important; } body.training-mode .compact-toolbar .reset-button { background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; color: var(--tv2-text) !important; border-radius: var(--tv2-radius-xs) !important; font-weight: 600 !important; } body.training-mode .check-field, body.training-mode .compact-check-field { color: var(--tv2-text) !important; } body.training-mode .check-field span, body.training-mode .compact-check-field span { color: var(--tv2-text-muted) !important; } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 1100px) { body.training-mode .training-panel { width: min(340px, 35vw) !important; } body.training-mode:not(.workout-active) .viewer { left: min(340px, 35vw) !important; } body.training-mode .workout-panel { width: min(340px, 30vw) !important; } body.training-mode.has-workout-sidebar:not(.workout-active) .viewer { left: min(340px, 35vw) !important; right: min(340px, 30vw) !important; } } @media (max-width: 768px) { body.training-mode .training-panel { width: 100vw !important; border-radius: 0 !important; position: relative !important; height: auto !important; } body.training-mode .workout-panel { width: 100vw !important; border-radius: 0 !important; } body.training-mode .workout-timer { font-size: 2.2rem !important; min-height: 80px !important; } } /* ═══════════════════════════════════════════ PREMIUM REFINEMENTS (v2.1) ═══════════════════════════════════════════ */ /* Unified typography in training mode */ body.training-mode, body.training-mode * { font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, sans-serif !important; } body.training-mode .workout-timer { font-family: 'JetBrains Mono', ui-monospace, monospace !important; } /* Subtle background grid + ambient glow */ body.training-mode::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 48px 48px; background-position: center center; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, transparent 90%); } /* Stylized logo mark replaces plain circle */ .site-logo::before { background: linear-gradient(135deg, var(--tv2-accent) 0%, #8fb800 100%) !important; border-radius: 8px !important; clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%) !important; box-shadow: 0 0 12px rgba(200,255,0,0.35) !important; width: 26px !important; height: 26px !important; } .site-logo { letter-spacing: 0.22em !important; font-weight: 700 !important; font-size: 1rem !important; } /* Floating panels — push away from edges */ body.training-mode .training-panel { top: 84px !important; left: 16px !important; bottom: 100px !important; height: auto !important; border-radius: 20px !important; width: min(340px, 26vw) !important; padding: 22px 18px !important; border-color: var(--tv2-border-light) !important; } body.training-mode .workout-panel { top: 84px !important; right: 16px !important; bottom: 100px !important; height: auto !important; border-radius: 20px !important; width: min(340px, 26vw) !important; padding: 22px 18px !important; border-color: var(--tv2-border-light) !important; } body.training-mode:not(.workout-active) .viewer, body.training-mode.has-workout-sidebar:not(.workout-active) .viewer { left: calc(min(340px, 26vw) + 32px) !important; right: calc(min(340px, 26vw) + 32px) !important; } body.training-mode.workout-active .viewer { right: calc(min(340px, 26vw) + 32px) !important; } /* Hide everything we no longer want in left panel */ body.training-mode .training-session-drawer, body.training-mode .program-save-drawer, body.training-mode #workoutGeneratorFeedback, body.training-mode #generateWorkoutButton, body.training-mode .template-preview { display: none !important; } /* Selected Muscle: compact card with icon, name, category, count */ body.training-mode .training-muscle { background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border-light) !important; border-radius: 14px !important; padding: 14px !important; margin-top: 18px !important; display: grid !important; grid-template-columns: 40px 1fr !important; grid-template-rows: auto auto !important; column-gap: 12px !important; row-gap: 2px !important; align-items: center !important; } body.training-mode .training-muscle::before { content: ""; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 10px; background: radial-gradient(circle at 35% 35%, var(--tv2-accent) 0 35%, transparent 36%), var(--tv2-accent-dim); border: 1px solid var(--tv2-accent-dim); } body.training-mode .training-muscle > .eyebrow { grid-column: 2; margin: 0 !important; font-size: 0.65rem !important; letter-spacing: 0.14em !important; order: 2; } body.training-mode .training-muscle h3 { grid-column: 2; margin: 0 !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--tv2-text) !important; font-family: 'Inter Tight', sans-serif !important; order: 1; } body.training-mode .training-muscle .exercise-list { grid-column: 1 / -1 !important; margin-top: 10px !important; max-height: 40vh !important; } /* Front/Back switch — wider, centered, more rounded */ .view-switch { width: 280px !important; border-radius: 999px !important; padding: 5px !important; left: 50% !important; transform: translateX(-50%) !important; } .view-button { border-radius: 999px !important; padding: 10px 28px !important; } /* Bottom nav — wider floating capsule */ .mode-switch { border-radius: 999px !important; padding: 8px !important; bottom: 24px !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.02) !important; } .mode-button { border-radius: 999px !important; padding: 12px 22px !important; } /* Timer card — add stopwatch icon, accent glow */ body.training-mode .workout-header { position: relative !important; } body.training-mode .workout-timer { position: relative !important; padding-top: 14px !important; } body.training-mode .workout-timer::before { content: ""; position: absolute; top: 14px; left: 16px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--tv2-accent); box-shadow: 0 -3px 0 -0.5px var(--tv2-accent); opacity: 0.85; } /* Status card phrase only */ body.training-mode .workout-status-card span { display: none !important; } body.training-mode .workout-status-card strong { font-size: 0.95rem !important; font-weight: 600 !important; color: var(--tv2-text-muted) !important; } /* Pause / Reset side-by-side row */ body.training-mode .workout-actions { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.training-mode .workout-actions #startWorkoutButton { grid-column: 1 / -1 !important; } /* Add-exercise button — centered, plus icon, fine border */ body.training-mode .add-exercise-to-session { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border: 1px solid var(--tv2-border-light) !important; border-radius: 12px !important; padding: 12px 16px !important; font-weight: 600 !important; } /* Session items: always-visible three-dot menu */ body.training-mode .workout-item-actions { opacity: 1 !important; } body.training-mode .workout-plan-item { padding: 12px !important; grid-template-columns: 16px 32px 1fr auto !important; } body.training-mode .workout-order { width: 32px !important; height: 32px !important; font-size: 0.78rem !important; } /* Muscle SVG outlines — fine and discreet */ body.training-mode .viewer svg .shape-group path { stroke: rgba(255,255,255,0.18) !important; stroke-width: 0.6 !important; fill: rgba(180,180,180,0.18) !important; } body.training-mode .viewer svg .shape-group path.is-hovered, body.training-mode .viewer svg .shape-group path.is-active, body.training-mode .viewer svg .shape-group path.is-pinned { stroke: var(--tv2-accent) !important; stroke-width: 0.8 !important; } /* Ambient ground glow under feet */ body.training-mode .viewer::after { bottom: 60px !important; width: 360px !important; height: 28px !important; background: radial-gradient(ellipse, rgba(200,255,0,0.18), transparent 70%) !important; filter: blur(6px) !important; } /* Force panels above the bg grid */ body.training-mode .site-header, body.training-mode .training-panel, body.training-mode .workout-panel, body.training-mode .viewer, body.training-mode .control-panel { position: relative; z-index: 1; } body.training-mode .site-header { z-index: 200 !important; } /* ═══════════════════════════════════════════ v2.2 — Closer-to-mockup polish ═══════════════════════════════════════════ */ /* Logo: circular "C" mark with notch (approx mockup) */ .site-logo::before { background: transparent !important; border: 2.5px solid var(--tv2-accent) !important; border-radius: 50% !important; clip-path: polygon(0 0, 70% 0, 70% 35%, 100% 35%, 100% 65%, 70% 65%, 70% 100%, 0 100%) !important; box-shadow: 0 0 10px rgba(200,255,0,0.25) !important; width: 28px !important; height: 28px !important; } /* Floating muscle card next to the body */ .floating-muscle-card { position: absolute; right: -180px; bottom: 80px; width: 200px; background: rgba(20,20,20,0.92); border: 1px solid var(--tv2-accent-dim); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto auto; column-gap: 12px; row-gap: 2px; align-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,255,0,0.04); z-index: 5; font-family: 'Inter Tight', sans-serif; } body:not(.training-mode) .floating-muscle-card { display: none; } .fmc-thumb { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 10px; background: radial-gradient(circle at 50% 50%, var(--tv2-accent) 0 30%, transparent 32%), linear-gradient(135deg, rgba(200,255,0,0.15), rgba(200,255,0,0.04)); border: 1px solid var(--tv2-accent-dim); } .fmc-eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--tv2-text-muted); font-weight: 700; } .fmc-name { font-size: 1.1rem; font-weight: 700; color: var(--tv2-accent); } .fmc-cat { font-size: 0.78rem; color: var(--tv2-text-muted); } .fmc-sep { grid-column: 1 / -1; height: 1px; background: var(--tv2-border); margin: 8px 0 4px; } .fmc-count { grid-column: 1 / -1; font-size: 0.78rem; color: var(--tv2-accent); font-weight: 500; } /* Profile stat cards — icons green outlined, two-line layout */ body.training-mode .training-stat-card { flex-direction: row !important; gap: 8px !important; text-align: left !important; padding: 10px 12px !important; } body.training-mode .training-stat-icon { width: 22px !important; height: 22px !important; border-radius: 6px !important; background: var(--tv2-accent-dim) !important; } body.training-mode .training-stat-icon svg { width: 14px !important; height: 14px !important; } body.training-mode .training-stat-card > div { display: flex !important; flex-direction: column !important; gap: 0 !important; } body.training-mode .training-stat-value { font-size: 0.95rem !important; line-height: 1.1 !important; } body.training-mode .training-stat-label { font-size: 0.65rem !important; line-height: 1 !important; color: var(--tv2-text-muted) !important; } /* Profile selector caret hint */ body.training-mode .training-sidebar-controls .field.compact-field { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 12px 14px !important; } body.training-mode .training-sidebar-controls .field.compact-field::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--tv2-text-muted); background: radial-gradient(circle at 50% 38%, var(--tv2-text-muted) 0 30%, transparent 32%), radial-gradient(ellipse at 50% 100%, var(--tv2-text-muted) 0 60%, transparent 62%); flex-shrink: 0; } /* Bottom nav: ensure proper centering and large */ .mode-switch { left: 50% !important; transform: translateX(-50%) !important; width: min(900px, calc(100vw - 60px)) !important; padding: 10px !important; } .mode-button { padding: 14px 20px !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* Timer: bigger stopwatch indicator + softer card */ body.training-mode .workout-timer { font-size: 3.4rem !important; letter-spacing: 0.02em !important; } body.training-mode .workout-timer::before { width: 22px; height: 22px; border-width: 2px; top: 14px; left: 50%; margin-left: -90px; border-radius: 50%; box-shadow: 0 -4px 0 -1px var(--tv2-accent), 4px -4px 0 -2px var(--tv2-accent); } /* Status card: single subtitle line under timer */ body.training-mode .workout-status-card { margin-top: -8px !important; } /* "Selected Muscle" left card — slightly more contrast */ body.training-mode .training-muscle { border-color: var(--tv2-accent-dim) !important; box-shadow: 0 0 0 1px rgba(200,255,0,0.04), 0 8px 24px rgba(0,0,0,0.3) !important; } @media (max-width: 1280px) { .floating-muscle-card { right: -140px; width: 180px; } } @media (max-width: 1100px) { .floating-muscle-card { right: 8px; bottom: 16px; } } /* ═══════════════════════════════════════════ v2.3 — Layout fix: force fixed positioning + show workout panel ═══════════════════════════════════════════ */ body.training-mode .training-panel, body.training-mode .workout-panel { position: fixed !important; z-index: 50 !important; } /* Force-show the workout panel in training mode even when JS hides it */ body.training-mode .workout-panel[hidden] { display: grid !important; visibility: visible !important; } body.training-mode .workout-panel { display: flex !important; flex-direction: column !important; overflow-y: auto !important; } /* Hide the pain section + history (not in mockup) */ body.training-mode .pain-section, body.training-mode .workout-history-list, body.training-mode .workout-section:has(.workout-history-list), body.training-mode .workout-section:last-child { display: none !important; } /* Re-show the queue section even if last-child matches */ body.training-mode .workout-section:has(.workout-plan-list) { display: block !important; } /* Make sure viewer keeps its fixed full-screen positioning between panels */ body.training-mode .viewer { position: fixed !important; top: 72px !important; bottom: 92px !important; } /* Make training panel scroll internally instead of breaking layout */ body.training-mode .training-panel { overflow-y: auto !important; overflow-x: hidden !important; } /* Hide the sidebar collapse toggles (carried over) */ body.training-mode .sidebar-toggle { display: none !important; } /* ═══════════════════════════════════════════ v2.4 — Premium floating footer nav (mode-switch) ═══════════════════════════════════════════ */ .mode-switch { position: fixed !important; bottom: 30px !important; left: 50% !important; transform: translateX(-50%) !important; width: min(70vw, 980px) !important; min-height: 72px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 12px 16px !important; z-index: 100 !important; background: linear-gradient(180deg, rgba(28,28,28,0.85) 0%, rgba(10,10,10,0.82) 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 999px !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(190,255,0,0.06), inset 0 1px 0 rgba(255,255,255,0.05) !important; } .mode-button { position: relative !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 14px 20px !important; background: transparent !important; border: none !important; border-radius: 999px !important; color: rgba(255,255,255,0.78) !important; font-family: 'Inter Tight','Inter',system-ui,sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background-color 200ms ease, color 200ms ease !important; white-space: nowrap !important; } .mode-button svg { width: 20px !important; height: 20px !important; stroke: rgba(255,255,255,0.85) !important; opacity: 1 !important; flex-shrink: 0 !important; transition: stroke 200ms ease !important; } .mode-button:hover:not(.is-active) { background: rgba(255,255,255,0.05) !important; color: #fff !important; } .mode-button:hover:not(.is-active) svg { stroke: #fff !important; } /* Discreet vertical separators between items */ .mode-button + .mode-button::before { content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); width: 1px; height: 28px; background: rgba(255,255,255,0.08); pointer-events: none; } .mode-button.is-active + .mode-button::before, .mode-button + .mode-button.is-active::before { background: transparent; } /* Active item — green capsule with glow (high specificity to beat per-mode rules) */ .mode-switch .mode-button[data-mode-button].is-active, .mode-switch .mode-button.is-active { padding: 16px 24px !important; color: #C8FF1A !important; background-color: rgba(15,20,8,0.85) !important; background-image: radial-gradient(ellipse at center, rgba(190,255,0,0.18) 0%, rgba(15,20,8,0) 75%) !important; border: 1px solid rgba(190,255,0,0.45) !important; box-shadow: 0 0 24px rgba(200,255,0,0.22), inset 0 0 14px rgba(190,255,0,0.12) !important; } .mode-switch .mode-button[data-mode-button].is-active svg, .mode-switch .mode-button.is-active svg { stroke: #C8FF1A !important; } /* Glowing bar under the active item */ .mode-button.is-active::after { content: "" !important; position: absolute !important; bottom: -14px !important; left: 50% !important; transform: translateX(-50%) !important; width: 96px !important; height: 4px !important; border-radius: 999px !important; background: #C8FF1A !important; box-shadow: 0 0 12px rgba(200,255,0,0.7), 0 0 22px rgba(200,255,0,0.35) !important; } /* Override the v2 ::after underline rule (smaller bar) */ body.training-mode .mode-button.is-active::after { width: 96px !important; height: 4px !important; bottom: -14px !important; } /* ═══════════════════════════════════════════ v2.5 — Atmospheric 3D scene (background, halo, floor) ═══════════════════════════════════════════ */ /* Layer 1: deep black base */ body.training-mode { background-color: #050507 !important; } /* Layer 2: fine technical grid, brighter at center, fades to edges */ body.training-mode::before { content: "" !important; position: fixed !important; inset: 0 !important; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) !important; background-size: 56px 56px !important; background-position: center center !important; pointer-events: none !important; z-index: 0 !important; mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 10%, rgba(0,0,0,0.5) 55%, transparent 90%) !important; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 10%, rgba(0,0,0,0.5) 55%, transparent 90%) !important; } /* Layer 3: ambient vignette + central lift on the viewer */ body.training-mode .viewer { background: radial-gradient(ellipse 45% 60% at 50% 45%, rgba(200,255,0,0.07) 0%, transparent 60%), radial-gradient(ellipse 80% 80% at 50% 50%, rgba(20,30,10,0.35) 0%, transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%) !important; } /* Layer 4: large diffuse green halo behind the body */ body.training-mode .viewer::before { content: "" !important; position: absolute !important; top: 12% !important; left: 50% !important; transform: translateX(-50%) !important; width: 520px !important; height: 620px !important; border-radius: 50% !important; background: radial-gradient(ellipse at center, rgba(200,255,0,0.16) 0%, rgba(200,255,0,0.06) 35%, transparent 70%) !important; filter: blur(30px) !important; pointer-events: none !important; z-index: 0 !important; } /* Layer 5: holographic floor — concentric flat rings under the feet */ body.training-mode .viewer::after { content: "" !important; position: absolute !important; bottom: 30px !important; left: 50% !important; transform: translateX(-50%) !important; width: 520px !important; height: 130px !important; border-radius: 50% !important; background: radial-gradient(ellipse at center, rgba(200,255,0,0.28) 0%, rgba(200,255,0,0.10) 14%, transparent 18%), repeating-radial-gradient(ellipse at center, transparent 0, transparent 18px, rgba(200,255,0,0.10) 18px, rgba(200,255,0,0.10) 19px, transparent 19px, transparent 28px, rgba(255,255,255,0.05) 28px, rgba(255,255,255,0.05) 29px), radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 70%) !important; filter: blur(0.4px) !important; opacity: 0.9 !important; pointer-events: none !important; z-index: 0 !important; mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.7) 60%, transparent 100%) !important; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.7) 60%, transparent 100%) !important; } /* Ensure the body image floats above the halo + floor */ body.training-mode .image-wrap { position: relative !important; z-index: 2 !important; } /* Soft dark drop-shadow under the character so it grounds onto the floor */ body.training-mode #bodyImage { filter: drop-shadow(0 32px 18px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(200,255,0,0.06)) !important; } /* ═══════════════════════════════════════════ v2.6 — Static image, wider sidebars, header cleanup, inactive button bg removal, bust glow, "+" grid ═══════════════════════════════════════════ */ /* Remove background on image-wrap + disable any zoom/pan */ body.training-mode .image-wrap { background: none !important; background-color: transparent !important; transform: none !important; transition: none !important; cursor: default !important; pointer-events: none !important; touch-action: none !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; } body.training-mode .image-wrap > * { pointer-events: auto; } body.training-mode #bodyImage { width: auto !important; height: 100% !important; max-height: calc(100vh - 220px) !important; max-width: 100% !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; user-select: none !important; -webkit-user-drag: none !important; } body.training-mode .stage { display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } /* Wider sidebars so content never gets cut */ body.training-mode .training-panel, body.training-mode .workout-panel { width: 380px !important; min-width: 360px !important; padding: 22px 20px !important; gap: 14px !important; } body.training-mode:not(.workout-active) .viewer, body.training-mode.has-workout-sidebar:not(.workout-active) .viewer, body.training-mode.workout-active .viewer { left: 412px !important; right: 412px !important; } /* Prevent overlapping items inside sidebars */ body.training-mode .training-sidebar-controls, body.training-mode .workout-panel > * { flex-shrink: 0 !important; } body.training-mode .training-stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } body.training-mode .training-stat-card { min-width: 0 !important; overflow: hidden !important; } body.training-mode .training-stat-value, body.training-mode .training-stat-label { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* mode-switch width = fit content + breathing room (never overflow viewport) */ .mode-switch { width: auto !important; max-width: calc(100vw - 40px) !important; padding: 8px 12px !important; gap: 4px !important; overflow: visible !important; } .mode-button { padding: 12px 16px !important; } .mode-switch .mode-button[data-mode-button].is-active, .mode-switch .mode-button.is-active { padding: 13px 18px !important; } /* Header right side: profile picture only */ .site-header .site-auth #headerLoginButton.header-auth-button, body .header-auth-button { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; } .profile-avatar { width: 38px !important; height: 38px !important; border-radius: 50% !important; font-size: 0.9rem !important; } /* mode-button inactive: no background, white text */ .mode-switch .mode-button:not(.is-active) { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #ffffff !important; border: none !important; box-shadow: none !important; } .mode-switch .mode-button:not(.is-active) svg { stroke: #ffffff !important; } .mode-switch .mode-button:not(.is-active):hover { background-color: rgba(255,255,255,0.05) !important; } /* Soft green radial glow behind the bust */ body.training-mode .viewer::before { top: 18% !important; width: 460px !important; height: 380px !important; background: radial-gradient(ellipse at center, rgba(200,255,0,0.18) 0%, rgba(200,255,0,0.08) 35%, transparent 70%) !important; filter: blur(40px) !important; } /* Site-wide subtle "+" grid pattern */ body.training-mode::after { content: "" !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; background-image: url("data:image/svg+xml;utf8,") !important; background-size: 36px 36px !important; mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, #000 30%, rgba(0,0,0,0.5) 65%, transparent 95%) !important; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, #000 30%, rgba(0,0,0,0.5) 65%, transparent 95%) !important; } /* Make sure pluses sit above the line grid */ body.training-mode { isolation: isolate; } @media (max-width: 1280px) { body.training-mode .training-panel, body.training-mode .workout-panel { width: 340px !important; min-width: 320px !important; } body.training-mode .viewer { left: 372px !important; right: 372px !important; } } /* ═══════════════════════════════════════════ v2.7 — Wider sidebars (+33%), front-plane switches, centered static image ═══════════════════════════════════════════ */ /* Sidebars +1/3 wider */ body.training-mode .training-panel, body.training-mode .workout-panel { width: 506px !important; min-width: 460px !important; } body.training-mode:not(.workout-active) .viewer, body.training-mode.has-workout-sidebar:not(.workout-active) .viewer, body.training-mode.workout-active .viewer { left: 538px !important; right: 538px !important; } /* Mode-switch + front/back switch always on top */ .mode-switch { z-index: 9999 !important; } .view-switch { z-index: 9999 !important; position: fixed !important; top: 84px !important; left: 50% !important; transform: translateX(-50%) !important; } /* Image strictly centered, no pan/zoom — keep image-wrap relative so SVG overlay aligns */ body.training-mode .stage { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; touch-action: none !important; } body.training-mode .image-wrap { position: relative !important; margin: 0 auto !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; translate: none !important; display: inline-block !important; width: auto !important; height: auto !important; background: none !important; background-color: transparent !important; } body.training-mode #bodyImage { margin: 0 !important; background: none !important; background-color: transparent !important; } body.training-mode #muscleOverlay { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } /* ═══════════════════════════════════════════ v2.8 — Workout list: actions inline-right; floating card removed ═══════════════════════════════════════════ */ .floating-muscle-card { display: none !important; } body.training-mode .workout-plan-list .workout-plan-item, body.training-mode .workout-plan-item { display: grid !important; grid-template-columns: 18px 34px minmax(0, 1fr) auto !important; grid-template-rows: auto !important; grid-auto-flow: column !important; column-gap: 10px !important; row-gap: 0 !important; align-items: center !important; } body.training-mode .workout-plan-item > * { min-width: 0 !important; } body.training-mode .workout-plan-item > .workout-item-actions { grid-column: 4 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; display: inline-flex !important; flex-direction: row !important; width: auto !important; flex-shrink: 0 !important; opacity: 1 !important; } body.training-mode .workout-item-actions button { width: 28px !important; height: 28px !important; border-radius: 6px !important; font-size: 1.1rem !important; line-height: 1 !important; } /* ═══════════════════════════════════════════ v2.9 — Left sidebar exact match (stats fit, Selected Muscle on top) ═══════════════════════════════════════════ */ /* Stat cards — tighter so values never get cut */ body.training-mode .training-stat-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } body.training-mode .training-stat-card { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; padding: 10px !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: 12px !important; min-width: 0 !important; } body.training-mode .training-stat-icon { width: 22px !important; height: 22px !important; border-radius: 6px !important; background: var(--tv2-accent-dim) !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; } body.training-mode .training-stat-icon svg { width: 13px !important; height: 13px !important; stroke: var(--tv2-accent) !important; } body.training-mode .training-stat-card > div, body.training-mode .training-stat-card .training-stat-info { display: flex !important; flex-direction: column !important; gap: 0 !important; min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; } body.training-mode .training-stat-value { font-size: 0.9rem !important; font-weight: 700 !important; color: #fff !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.1 !important; } body.training-mode .training-stat-label { font-size: 0.66rem !important; color: var(--tv2-text-muted) !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.1 !important; } /* Selected Muscle block — guaranteed order: icon | (eyebrow + title) on top, then exercises below */ body.training-mode .training-muscle { display: flex !important; flex-direction: column !important; gap: 10px !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-accent-dim) !important; border-radius: 14px !important; padding: 14px !important; margin-top: 18px !important; } body.training-mode .training-muscle::before { content: none !important; display: none !important; } body.training-mode .training-muscle > .eyebrow { order: 1 !important; display: block !important; font-size: 0.65rem !important; letter-spacing: 0.14em !important; color: var(--tv2-text-muted) !important; margin: 0 !important; text-transform: uppercase !important; } body.training-mode .training-muscle h3, body.training-mode #trainingMuscleTitle { order: 2 !important; margin: 0 !important; font-size: 1.15rem !important; font-weight: 700 !important; color: var(--tv2-accent) !important; font-family: 'Inter Tight', sans-serif !important; } body.training-mode .training-muscle .exercise-list { order: 3 !important; margin-top: 4px !important; padding: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } /* Hide the category bodyweight/equipment/other group headers (mockup has flat list) */ body.training-mode .training-muscle .exercise-category > summary, body.training-mode .training-muscle .exercise-category-list > .exercise-category > summary { display: none !important; } body.training-mode .training-muscle .exercise-category { display: contents !important; } /* "EXERCISES" caption above the list, like mockup */ body.training-mode .training-muscle .exercise-list::before { content: "EXERCISES"; display: block; font-size: 0.65rem; letter-spacing: 0.14em; color: var(--tv2-text-muted); margin-bottom: 4px; text-transform: uppercase; } /* ═══════════════════════════════════════════ v3.0 — Stage bg removed + right panel layout fix ═══════════════════════════════════════════ */ body.training-mode .stage { background: none !important; background-color: transparent !important; } /* Workout panel: enforce vertical flex (kill the conflicting grid rows) */ body.training-mode .workout-panel, body.training-mode .workout-panel[hidden] { display: flex !important; flex-direction: column !important; gap: 14px !important; grid-template-rows: none !important; grid-template-columns: none !important; overflow-y: auto !important; align-items: stretch !important; } body.training-mode .workout-panel > * { width: 100% !important; min-width: 0 !important; flex-shrink: 0 !important; } /* Timer card: stopwatch icon left + big lime number, status inside */ body.training-mode .workout-header { display: block !important; position: relative !important; } body.training-mode .workout-timer { width: 100% !important; min-height: 96px !important; padding: 16px 18px !important; font-family: 'Inter Tight','Inter',system-ui,sans-serif !important; font-size: 2.6rem !important; font-weight: 800 !important; letter-spacing: 0.04em !important; color: var(--tv2-accent) !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-accent-dim) !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; text-shadow: 0 0 24px rgba(200,255,0,0.18) !important; } body.training-mode .workout-timer::before { content: "" !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; border: 2px solid var(--tv2-accent) !important; box-shadow: 0 -4px 0 -1px var(--tv2-accent) !important; background: transparent !important; opacity: 0.9 !important; } /* Status text inside timer card */ body.training-mode .workout-status-card { margin-top: -6px !important; background: transparent !important; border: none !important; padding: 0 6px 4px !important; text-align: center !important; } body.training-mode .workout-status-card span { display: none !important; } body.training-mode .workout-status-card strong { display: block !important; font-size: 0.85rem !important; font-weight: 500 !important; color: var(--tv2-text-muted) !important; } body.training-mode .workout-status-card small { display: none !important; } /* Action buttons: Start full width then Pause | Reset side by side */ body.training-mode .workout-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.training-mode .workout-actions #startWorkoutButton { grid-column: 1 / -1 !important; padding: 16px 24px !important; background: var(--tv2-accent) !important; color: #000 !important; border: none !important; border-radius: 14px !important; font-size: 1.05rem !important; font-weight: 800 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; } body.training-mode .workout-actions #nextWorkoutSetButton, body.training-mode .workout-actions #resetWorkoutButton { padding: 12px 14px !important; background: var(--tv2-surface-alt) !important; border: 1px solid var(--tv2-border) !important; border-radius: 12px !important; color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-weight: 600 !important; } /* Session queue header + list spacing */ body.training-mode .workout-section { display: block !important; margin-top: 4px !important; } body.training-mode .workout-plan-list { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 8px !important; } /* ═══════════════════════════════════════════ v3.1 — view-switch premium + new timer icon + B&W body + single muscle ═══════════════════════════════════════════ */ /* view-switch styled like mode-switch (premium glass capsule) */ .view-switch { z-index: 9999 !important; position: fixed !important; top: 84px !important; left: 50% !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(28,28,28,0.85) 0%, rgba(10,10,10,0.82) 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(190,255,0,0.06), inset 0 1px 0 rgba(255,255,255,0.05) !important; width: auto !important; pointer-events: auto !important; } .view-switch .view-button { position: relative !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 999px !important; color: #ffffff !important; font-family: 'Inter Tight','Inter',system-ui,sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 12px 22px !important; min-height: 0 !important; cursor: pointer !important; box-shadow: none !important; transition: background-color 200ms ease, color 200ms ease !important; } .view-switch .view-button:hover:not(.is-active) { background-color: rgba(255,255,255,0.05) !important; } .view-switch .view-button.is-active { padding: 13px 24px !important; color: #C8FF1A !important; background-color: rgba(15,20,8,0.85) !important; background-image: radial-gradient(ellipse at center, rgba(190,255,0,0.18) 0%, rgba(15,20,8,0) 75%) !important; border: 1px solid rgba(190,255,0,0.45) !important; box-shadow: 0 0 24px rgba(200,255,0,0.22), inset 0 0 14px rgba(190,255,0,0.12) !important; } /* New stopwatch icon for the timer (SVG mask) */ body.training-mode .workout-timer::before { content: "" !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; width: 26px !important; height: 26px !important; border: none !important; background: var(--tv2-accent) !important; box-shadow: none !important; -webkit-mask-image: url("data:image/svg+xml;utf8,") !important; mask-image: url("data:image/svg+xml;utf8,") !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-position: center !important; mask-position: center !important; filter: drop-shadow(0 0 6px rgba(200,255,0,0.4)) !important; } /* Force-remove profile-account-label even if rendered dynamically */ .profile-account-label, .header-auth-button .profile-account-label, .header-auth-button span:not(.profile-avatar) { display: none !important; } /* Viewer background — new spec */ body.training-mode .viewer { background: radial-gradient(ellipse 45% 60% at 50% 45%, rgba(200,255,0,0.07) 0%, transparent 60%), radial-gradient(ellipse 80% 80% at 50% 50%, rgba(20,30,10,0.35) 0%, transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.0) 100%) !important; } /* Remove extra labels inside training-profile-summary (keep only icon + stat values) */ body.training-mode .training-profile-summary .training-profile-name-row, body.training-mode .training-profile-summary .training-profile-chips, body.training-mode .training-profile-summary > p, body.training-mode .training-profile-summary > label, body.training-mode .training-profile-summary .field > span, body.training-mode .training-stat-label { display: none !important; } /* Body image: black & white (grayscale) */ body.training-mode #bodyImage { filter: grayscale(1) contrast(1.05) brightness(0.95) drop-shadow(0 32px 18px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(200,255,0,0.06)) !important; } /* Muscle SVG: only the hovered / active / pinned path is visible */ body.training-mode #muscleOverlay .muscle-path, body.training-mode .viewer svg .shape-group path, body.training-mode .viewer svg path.muscle-path, body.training-mode .viewer svg polygon.muscle-path, body.training-mode .viewer svg polyline.muscle-path { opacity: 0 !important; fill: transparent !important; stroke: transparent !important; pointer-events: auto !important; cursor: pointer !important; transition: opacity 180ms ease, fill 180ms ease, stroke 180ms ease, filter 180ms ease !important; } body.training-mode #muscleOverlay .muscle-path:hover, body.training-mode #muscleOverlay .muscle-path.is-active, body.training-mode #muscleOverlay .muscle-path.is-hovered, body.training-mode #muscleOverlay .muscle-path.is-pinned, body.training-mode .viewer svg .muscle-path:hover, body.training-mode .viewer svg .muscle-path.is-active { opacity: 1 !important; fill: rgba(190,255,0,0.18) !important; stroke: rgba(190,255,0,0.75) !important; stroke-width: 1.4 !important; filter: drop-shadow(0 0 14px rgba(200,255,0,0.45)) drop-shadow(0 0 6px rgba(190,255,0,0.35)) !important; } /* ═══════════════════════════════════════════ v3.2 — Selected Muscle card (image-exact), wider exercise cards, front/back clickable, bigger image-wrap ═══════════════════════════════════════════ */ /* Reset training-muscle container: no border/bg, eyebrow above the card */ body.training-mode .training-muscle { display: flex !important; flex-direction: column !important; gap: 8px !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin-top: 18px !important; box-shadow: none !important; } body.training-mode .training-muscle::before { content: none !important; display: none !important; } body.training-mode .training-muscle > .eyebrow { order: 0 !important; font-size: 0.7rem !important; letter-spacing: 0.16em !important; color: var(--tv2-text-muted) !important; font-weight: 600 !important; text-transform: uppercase !important; margin: 0 0 4px !important; padding-left: 2px !important; } /* The actual selected-muscle bordered card (.tm-card) */ body.training-mode .tm-card { order: 1 !important; display: grid !important; grid-template-columns: 64px 1fr !important; column-gap: 14px !important; align-items: center !important; padding: 14px !important; background: var(--tv2-surface-alt) !important; border: 1px solid rgba(190,255,0,0.45) !important; border-radius: 14px !important; box-shadow: 0 0 24px rgba(200,255,0,0.10), inset 0 0 14px rgba(190,255,0,0.06) !important; } /* Muscle thumbnail (SVG abs silhouette) */ body.training-mode .tm-thumb { width: 64px !important; height: 64px !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(200,255,0,0.10), rgba(200,255,0,0.02)) !important; border: 1px solid rgba(190,255,0,0.30) !important; -webkit-mask-image: none !important; position: relative !important; } body.training-mode .tm-thumb::after { content: "" !important; position: absolute !important; inset: 8px !important; background: var(--tv2-accent) !important; -webkit-mask-image: url("data:image/svg+xml;utf8,") !important; mask-image: url("data:image/svg+xml;utf8,") !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-position: center !important; mask-position: center !important; } /* Info block in the card */ body.training-mode .tm-info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; } body.training-mode .tm-info #trainingMuscleTitle { margin: 0 !important; font-size: 1.25rem !important; font-weight: 800 !important; color: var(--tv2-accent) !important; font-family: 'Inter Tight', sans-serif !important; line-height: 1.1 !important; } body.training-mode .tm-info .tm-cat { font-size: 0.82rem !important; color: var(--tv2-text-muted) !important; font-weight: 500 !important; } body.training-mode .tm-info .tm-count { font-size: 0.78rem !important; color: var(--tv2-accent) !important; font-weight: 600 !important; margin-top: 2px !important; } /* Exercise list pushed below card, taking full width */ body.training-mode .training-muscle .exercise-list { order: 2 !important; width: 100% !important; margin-top: 4px !important; } body.training-mode .exercise.rich-exercise { width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* Front/Back switch — guaranteed top-most & clickable */ .control-panel { pointer-events: none !important; } .view-switch, .view-switch .view-button, .mode-switch, .mode-switch .mode-button { pointer-events: auto !important; } .view-switch { z-index: 10000 !important; } /* Bigger image-wrap: more vertical room (below view-switch, above mode-switch) */ body.training-mode .viewer { top: 140px !important; bottom: 120px !important; } body.training-mode #bodyImage { max-height: calc(100vh - 280px) !important; height: 100% !important; } /* ═══════════════════════════════════════════ v3.3 — Body fills stage, click-pin persists, per-muscle thumb icon ═══════════════════════════════════════════ */ /* Image fills the stage but never overlaps the view-switch above */ body.training-mode .viewer { top: 152px !important; bottom: 110px !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; padding-bottom: 50px !important; } body.training-mode .stage { width: 100% !important; height: 100% !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; } /* Image-wrap uses image's native aspect-ratio so SVG mask stays perfectly aligned */ body.training-mode .image-wrap { position: relative !important; display: block !important; height: 100% !important; max-height: 100% !important; aspect-ratio: 717 / 1086 !important; width: auto !important; line-height: 0 !important; margin: 0 auto !important; } body.training-mode #bodyImage { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: fill !important; object-position: center !important; display: block !important; } body.training-mode #muscleOverlay { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: auto !important; } /* Holographic floor at feet level, wider, fewer rings */ body.training-mode .viewer::after { bottom: 80px !important; width: 900px !important; max-width: 90% !important; height: 160px !important; background: radial-gradient(ellipse at center, rgba(200,255,0,0.42) 0%, rgba(200,255,0,0.14) 14%, transparent 22%), repeating-radial-gradient(ellipse at center, transparent 0, transparent 56px, rgba(200,255,0,0.12) 56px, rgba(200,255,0,0.12) 57px, transparent 57px, transparent 96px, rgba(255,255,255,0.06) 96px, rgba(255,255,255,0.06) 97px), radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 70%) !important; filter: blur(0.5px) !important; opacity: 0.95 !important; mask-image: radial-gradient(ellipse at center, #000 40%, rgba(0,0,0,0.5) 70%, transparent 100%) !important; -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, rgba(0,0,0,0.5) 70%, transparent 100%) !important; } /* Exercise card thumbnails ALWAYS 100x100 (any .exercise variant) */ body.training-mode .exercise, body.training-mode .exercise.rich-exercise { grid-template-columns: 100px 1fr auto !important; column-gap: 14px !important; } body.training-mode .exercise .exercise-thumb, body.training-mode .exercise-thumb { width: 100px !important; height: 100px !important; min-width: 100px !important; min-height: 100px !important; max-width: 100px !important; max-height: 100px !important; border-radius: 14px !important; flex-shrink: 0 !important; background: var(--tv2-surface) !important; overflow: hidden !important; } body.training-mode .exercise .exercise-thumb img, body.training-mode .exercise-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Click-pinned muscle: stays visible until another is pinned */ body.training-mode #muscleOverlay .muscle-path.is-pinned, body.training-mode .viewer svg .muscle-path.is-pinned { opacity: 1 !important; fill: rgba(190,255,0,0.22) !important; stroke: rgba(190,255,0,0.85) !important; stroke-width: 1.6 !important; filter: drop-shadow(0 0 16px rgba(200,255,0,0.55)) drop-shadow(0 0 8px rgba(190,255,0,0.4)) !important; } /* Per-muscle thumbnail icons (recognizable silhouettes) */ body.training-mode .tm-thumb[data-muscle]::after { -webkit-mask-image: var(--tm-icon, none) !important; mask-image: var(--tm-icon, none) !important; } body.training-mode .tm-thumb[data-muscle="obliques"]::after, body.training-mode .tm-thumb[data-muscle="abs"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="chest"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="shoulders"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="biceps"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="triceps"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="forearms"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="lats"]::after, body.training-mode .tm-thumb[data-muscle="back"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="traps"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="glutes"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="quads"]::after, body.training-mode .tm-thumb[data-muscle="quadriceps"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="hamstrings"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="calves"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="adductors"]::after, body.training-mode .tm-thumb[data-muscle="abductors"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="neck"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } body.training-mode .tm-thumb[data-muscle="default"]::after { --tm-icon: url("data:image/svg+xml;utf8,"); } /* Floating muscle card: top-right of stage */ .floating-muscle-card { position: absolute !important; top: 24px !important; right: 24px !important; bottom: auto !important; left: auto !important; z-index: 50 !important; } @media (max-width: 1400px) { body.training-mode .training-panel, body.training-mode .workout-panel { width: 500px !important; min-width: 460px !important; } body.training-mode .viewer { left: 532px !important; right: 532px !important; } } /* ═══════════════════════════════════════════ v3.4 — Training-only view-switch, global "+" grid, transparent wide panels ═══════════════════════════════════════════ */ /* view-switch shown only in training mode */ .view-switch { display: none !important; } body.training-mode .view-switch { display: flex !important; } /* "+" grid visible on every page (HIGH specificity so it never gets disabled) */ html body::after, html body.training-mode::after, html body.planning-mode::after, html body.diet-mode::after, html body.equipment-mode::after, html body.social-mode::after, html body.profile-mode::after { content: "" !important; display: block !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: 999 !important; background-image: url("data:image/svg+xml;utf8,") !important; background-size: 36px 36px !important; background-repeat: repeat !important; mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, rgba(0,0,0,0.4) 70%, transparent 100%) !important; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, rgba(0,0,0,0.4) 70%, transparent 100%) !important; mix-blend-mode: screen !important; } body { isolation: auto !important; } /* Remove dark-gray background from wide panels (equipment / social / diet) */ .equipment-library.app-panel.wide-panel, .social-panel.app-panel.wide-panel, .diet-panel.app-panel.wide-panel, .equipment-library.wide-panel, .social-panel.wide-panel, .diet-panel.wide-panel, body .equipment-library, body .social-panel, body .diet-panel { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; }