/* ========================================================================= Mr Gym: AI program builder. RTL · light + dark (syncs with AIHub theme via body[data-lqd-page-color-scheme]). All colours come from CSS vars so the same rules work in both modes. Scoped under .mrgym-wrap. ========================================================================= */ /* ---- Dark (default) ---- */ .mrgym-wrap{ --mg-accent:#e8b923;--mg-accent-2:#f6d365; --mg-accent-text:#f6d365;--mg-accent-soft:rgba(232,185,35,.12); --mg-accent-border:rgba(232,185,35,.42);--mg-accent-glow:rgba(232,185,35,.28); --mg-bg:#14161b;--mg-surface:#1d2027;--mg-surface-2:#181b21; --mg-input:#15171d;--mg-chip:#262b34;--mg-track:#2b303b; --mg-border:#343a46;--mg-border-soft:#2a2f39; --mg-text:#eef1f6;--mg-muted:#a6afbf;--mg-muted-2:#7a8499; --mg-placeholder:#5b6473; --mg-ok:#36d399;--mg-warn:#ffb020;--mg-warn-soft:rgba(255,176,32,.1);--mg-warn-text:#ffd591; --mg-err:#ff6b6b;--mg-err-soft:rgba(255,107,107,.12);--mg-err-text:#ffb3b3; --mg-radius:18px;--mg-radius-sm:12px; --mg-shadow:0 18px 50px -12px rgba(0,0,0,.55); --mg-shadow-sm:0 6px 20px -8px rgba(0,0,0,.5); --mg-ring:0 0 0 3px var(--mg-accent-soft); font-family:inherit;color:var(--mg-text);direction:rtl;line-height:1.95; max-width:920px;margin:0 auto;-webkit-font-smoothing:antialiased; } /* ---- Light (when the theme toggle is light) ---- */ body[data-lqd-page-color-scheme="light"] .mrgym-wrap{ --mg-accent:#e0a800;--mg-accent-2:#f0c040; --mg-accent-text:#9a6b00;--mg-accent-soft:rgba(224,168,0,.14); --mg-accent-border:rgba(224,168,0,.5);--mg-accent-glow:rgba(224,168,0,.32); --mg-bg:#f3f5fa;--mg-surface:#ffffff;--mg-surface-2:#ffffff; --mg-input:#f6f8fc;--mg-chip:#eef1f7;--mg-track:#e7ebf2; --mg-border:#e2e7f0;--mg-border-soft:#edf0f6; --mg-text:#1b2231;--mg-muted:#5a6378;--mg-muted-2:#8a93a5; --mg-placeholder:#a3acba; --mg-warn-soft:rgba(214,141,0,.12);--mg-warn-text:#8a5a00; --mg-err-soft:rgba(220,53,69,.1);--mg-err-text:#b02a37; --mg-shadow:0 18px 45px -16px rgba(40,55,90,.25); --mg-shadow-sm:0 8px 22px -12px rgba(40,55,90,.22); } .mrgym-wrap *{box-sizing:border-box} .mrgym-wrap ::selection{background:var(--mg-accent);color:#1a1400} /* ---------- Hero ---------- */ .mrgym-hero{ position:relative;overflow:hidden;text-align:center;margin:18px 0; padding:44px 26px;border-radius:var(--mg-radius); background: radial-gradient(90% 140% at 100% -10%,var(--mg-accent-soft) 0%,transparent 55%), radial-gradient(80% 120% at 0% 0%,rgba(120,140,255,.06) 0%,transparent 50%), linear-gradient(180deg,var(--mg-surface) 0%,var(--mg-surface-2) 100%); border:1px solid var(--mg-border);box-shadow:var(--mg-shadow); margin: 55px 0; } .mrgym-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(135deg,var(--mg-accent-border),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7} .mrgym-hero__badge{display:inline-flex;align-items:center;gap:6px;background:var(--mg-accent-soft); color:var(--mg-accent-text);border:1px solid var(--mg-accent-border);border-radius:999px; padding:6px 16px;font-size:.85rem;font-weight:800;margin-bottom:16px} .mrgym-hero__title{font-size:clamp(1.6rem,4.5vw,2.3rem);font-weight:900;margin:.1em 0;color:var(--mg-text);line-height:1.45;letter-spacing:0} .mrgym-hero__lead{color:var(--mg-muted);font-size:1.06rem;max-width:660px;margin:14px auto} .mrgym-hero__lead strong{color:var(--mg-accent-text)} /* feature card grid */ .mrgym-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 6px;text-align:right} .mrgym-feat{background:var(--mg-surface-2);border:1px solid var(--mg-border-soft);border-radius:14px;padding:17px 16px; transition:transform .16s,border-color .16s,box-shadow .16s} .mrgym-feat:hover{transform:translateY(-3px);border-color:var(--mg-accent-border);box-shadow:var(--mg-shadow-sm)} .mrgym-feat__ico{font-size:1.5rem;line-height:1;display:block;margin-bottom:10px} .mrgym-feat__t{font-weight:800;color:var(--mg-text);margin:0 0 6px;font-size:.98rem;line-height:1.6} .mrgym-feat__d{color:var(--mg-muted);font-size:.85rem;margin:0;line-height:1.9} /* how-it-works strip */ .mrgym-how{margin:30px 0} .mrgym-how__title{font-size:1.45rem;font-weight:800;color:var(--mg-text);text-align:center;margin:0 0 18px} .mrgym-how__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .mrgym-how__step{position:relative;background:var(--mg-surface);border:1px solid var(--mg-border);border-radius:14px; padding:20px 16px 16px;box-shadow:var(--mg-shadow-sm);transition:transform .16s,border-color .16s} .mrgym-how__step:hover{transform:translateY(-3px);border-color:var(--mg-accent-border)} .mrgym-how__no{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px; background:linear-gradient(135deg,var(--mg-accent),var(--mg-accent-2));color:#231a00;font-weight:900;font-size:1.05rem;margin-bottom:11px} .mrgym-how__t{font-weight:800;color:var(--mg-text);margin:0 0 6px;font-size:.96rem;line-height:1.6} .mrgym-how__d{color:var(--mg-muted);font-size:.84rem;margin:0;line-height:1.9} .mrgym-hero__cta{display:inline-block;margin-top:16px;background:linear-gradient(100deg,var(--mg-accent),var(--mg-accent-2)); color:#231a00;font-weight:900;text-decoration:none;padding:15px 34px;border-radius:999px;font-size:1.08rem; box-shadow:0 12px 28px -6px var(--mg-accent-glow);transition:transform .18s,box-shadow .18s} .mrgym-hero__cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -6px var(--mg-accent-glow)} /* ---------- Form hero (top of page, above the form) ---------- */ .mrgym-formhero{text-align:center;padding:30px 18px 6px;margin:6px 0 0} .mrgym-formhero__badge{display:inline-block;background:var(--mg-accent-soft);color:var(--mg-accent-text); border:1px solid var(--mg-accent-border);border-radius:999px;padding:6px 16px;font-size:.84rem;font-weight:800;margin-bottom:14px} .mrgym-formhero__title{font-size:clamp(1.5rem,4.5vw,2.2rem);font-weight:900;margin:.1em 0;color:var(--mg-text);line-height:1.45;letter-spacing:0} .mrgym-formhero__lead{color:var(--mg-muted);font-size:1.05rem;max-width:680px;margin:12px auto 0} .mrgym-formhero__lead strong{color:var(--mg-accent-text)} .mrgym-formhero__stats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px auto 0;max-width:760px} .mrgym-stat{display:flex;flex-direction:column;gap:3px;flex:1 1 150px;min-width:150px;max-width:200px;text-align:center; background:var(--mg-surface);border:1px solid var(--mg-border);border-radius:14px;padding:12px 14px;box-shadow:var(--mg-shadow-sm);transition:transform .16s,border-color .16s} .mrgym-stat:hover{transform:translateY(-2px);border-color:var(--mg-accent-border)} .mrgym-stat b{color:var(--mg-accent-text);font-size:.98rem;font-weight:900;line-height:1.4} .mrgym-stat i{font-style:normal;color:var(--mg-muted);font-size:.76rem;line-height:1.6} .mrgym-formhero__legend{color:var(--mg-muted);font-size:.86rem;margin:16px auto 0;max-width:560px;background:var(--mg-surface-2);border:1px solid var(--mg-border-soft);border-radius:10px;padding:8px 14px} .mrgym-req{color:#ff6b6b;font-weight:900;margin-inline-start:2px} body[data-lqd-page-color-scheme="light"] .mrgym-req{color:#d6336c} /* ---------- App / steps ---------- */ .mrgym-app{background:var(--mg-surface);border:1px solid var(--mg-border);border-radius:var(--mg-radius); padding:28px 26px;margin:18px 0;box-shadow:var(--mg-shadow);scroll-margin-top:90px} /* stepper chips */ .mrgym-stepper{display:flex;gap:7px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .mrgym-stepper::-webkit-scrollbar{display:none} .mrgym-stepper__item{flex:1 1 0;min-width:72px;display:flex;flex-direction:column;align-items:center;gap:4px; background:var(--mg-input);border:1.5px solid var(--mg-border);border-radius:12px;padding:9px 6px;cursor:pointer; font-family:inherit;color:var(--mg-muted);transition:all .16s;line-height:1.3} .mrgym-stepper__ico{font-size:1.1rem;line-height:1} .mrgym-stepper__lbl{font-size:.72rem;font-weight:700;white-space:nowrap;color:#b8c2d1} .mrgym-stepper__item:hover{border-color:var(--mg-accent-border);color:var(--mg-text)} .mrgym-stepper__item.is-active{border-color:var(--mg-accent);background:var(--mg-accent-soft);color:var(--mg-accent-text);box-shadow:var(--mg-ring)} .mrgym-stepper__item.is-active .mrgym-stepper__lbl{color:var(--mg-accent-text, #ffd34d)} .mrgym-stepper__item.is-done{color:var(--mg-text)} .mrgym-stepper__item.is-done .mrgym-stepper__lbl{color:#eef2f7} .mrgym-stepper__item.is-done .mrgym-stepper__lbl::after{content:" ✓";color:var(--mg-ok);font-weight:900} .mrgym-stepper__item.is-todo{opacity:1 !important;color:#a6b1c2} .mrgym-stepper__item.is-todo .mrgym-stepper__lbl{color:#c5cedb} .mrgym-stepper__item.is-todo:hover{opacity:1;color:#fff} .mrgym-progress{margin-bottom:26px} .mrgym-progress__bar{height:9px;background:var(--mg-track);border-radius:999px;overflow:hidden} .mrgym-progress__bar span{display:block;height:100%;width:12%;background:linear-gradient(90deg,var(--mg-accent),var(--mg-accent-2)); border-radius:999px;transition:width .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px var(--mg-accent-glow)} .mrgym-progress__text{font-size:.85rem;color:var(--mg-muted);margin-top:9px;text-align:center;font-weight:600} .mrgym-step{display:none;border:0;padding:0;margin:0;min-inline-size:auto} .mrgym-step.is-active{display:block;animation:mgFade .4s cubic-bezier(.4,0,.2,1)} @keyframes mgFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .mrgym-step__title{font-size:1.35rem;font-weight:800;color:var(--mg-text);padding:0;margin:0 0 5px} .mrgym-step__hint{color:var(--mg-muted);margin:0 0 20px;font-size:.96rem} .mrgym-field{margin-bottom:20px} .mrgym-field>label{display:block;font-weight:700;margin-bottom:7px} /* invalid state (set by JS validation) */ .mrgym-field.is-invalid>label{color:var(--mg-err-text)} .mrgym-field.is-invalid input,.mrgym-field.is-invalid select,.mrgym-field.is-invalid textarea{border-color:var(--mg-err)} .mrgym-field.is-invalid .mrgym-card__label,.mrgym-field.is-invalid .mrgym-check{border-color:var(--mg-err)} @keyframes mgShake{0%,100%{transform:none}25%{transform:translateX(4px)}75%{transform:translateX(-4px)}} .mrgym-field.is-invalid{animation:mgShake .25s ease 1} .mrgym-help{color:var(--mg-muted);font-size:.85rem;margin:0 0 9px} .mrgym-opt{font-weight:500;color:var(--mg-muted);font-size:.78rem;background:var(--mg-chip);padding:2px 9px;border-radius:7px} .mrgym-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:15px} .mrgym-mt{margin-top:10px} .mrgym-wrap input[type=text],.mrgym-wrap input[type=tel],.mrgym-wrap input[type=number], .mrgym-wrap select,.mrgym-wrap textarea{ width:100%;background:var(--mg-input);border:1.5px solid var(--mg-border);border-radius:var(--mg-radius-sm); color:var(--mg-text);padding:13px 15px;font-family:inherit;font-size:1rem;transition:border-color .15s,box-shadow .15s,background .15s} .mrgym-wrap input:focus,.mrgym-wrap select:focus,.mrgym-wrap textarea:focus{ outline:none;border-color:var(--mg-accent);box-shadow:var(--mg-ring)} .mrgym-wrap textarea{resize:vertical;min-height:64px} .mrgym-wrap input::placeholder,.mrgym-wrap textarea::placeholder{color:var(--mg-placeholder)} .mrgym-wrap select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mg-muted) 50%),linear-gradient(135deg,var(--mg-muted) 50%,transparent 50%); background-position:calc(12px) calc(1.2em),calc(17px) calc(1.2em);background-size:5px 5px,5px 5px;background-repeat:no-repeat} /* radio cards */ .mrgym-cards{display:flex;flex-wrap:wrap;gap:11px} .mrgym-card{position:relative;cursor:pointer;flex:1 1 calc(33.333% - 11px);min-width:128px} .mrgym-card input{position:absolute;opacity:0;inset:0;cursor:pointer} .mrgym-card__label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px; background:var(--mg-input);border:1.5px solid var(--mg-border);border-radius:var(--mg-radius-sm); padding:12px 12px;font-weight:600;transition:all .16s;line-height:1.5} .mrgym-card:hover .mrgym-card__label{border-color:var(--mg-accent-border)} .mrgym-card input:checked~.mrgym-card__label{border-color:var(--mg-accent);background:var(--mg-accent-soft);color:var(--mg-accent-text);font-weight:800;box-shadow:var(--mg-ring)} .mrgym-card input:focus-visible~.mrgym-card__label{box-shadow:var(--mg-ring)} /* checks */ .mrgym-checks{display:flex;flex-wrap:wrap;gap:9px} .mrgym-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:var(--mg-input); border:1.5px solid var(--mg-border);border-radius:var(--mg-radius-sm);padding:10px 14px;font-size:.92rem;transition:all .16s} .mrgym-check:hover{border-color:var(--mg-accent-border)} .mrgym-check input{accent-color:var(--mg-accent);width:18px;height:18px;flex:none} .mrgym-check:has(input:checked){border-color:var(--mg-accent);background:var(--mg-accent-soft);color:var(--mg-accent-text);font-weight:700} .mrgym-consent{align-items:flex-start;line-height:1.75} /* upload */ .mrgym-upload__btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:var(--mg-accent-soft);color:var(--mg-accent-text); border:1.5px dashed var(--mg-accent);border-radius:var(--mg-radius-sm);padding:13px 22px;font-weight:800;transition:background .15s} .mrgym-upload__btn:hover{background:var(--mg-accent-border)} .mrgym-upload__list{display:flex;flex-wrap:wrap;gap:11px;margin-top:13px} .mrgym-thumb{position:relative;width:88px;height:88px;border-radius:var(--mg-radius-sm);overflow:hidden;border:1px solid var(--mg-border);box-shadow:var(--mg-shadow-sm)} .mrgym-thumb img{width:100%;height:100%;object-fit:cover} .mrgym-thumb__rm{position:absolute;top:3px;left:3px;width:23px;height:23px;border:0;border-radius:50%; background:rgba(0,0,0,.72);color:#fff;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center} /* BMI live hint */ .mrgym-bmi{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 16px;font-size:.9rem; margin:0 0 16px;background:var(--mg-accent-soft);border:1px solid var(--mg-accent-border);color:var(--mg-text)} .mrgym-bmi b{color:var(--mg-accent-text);font-weight:900;direction:ltr} .mrgym-bmi.is-ok{background:rgba(54,211,153,.1);border-color:rgba(54,211,153,.45)} .mrgym-bmi.is-ok b{color:var(--mg-ok)} .mrgym-bmi.is-mid,.mrgym-bmi.is-low{background:var(--mg-warn-soft);border-color:var(--mg-accent-border)} .mrgym-bmi.is-mid b,.mrgym-bmi.is-low b{color:var(--mg-warn-text)} .mrgym-bmi.is-high{background:var(--mg-err-soft);border-color:var(--mg-err)} .mrgym-bmi.is-high b{color:var(--mg-err-text)} /* review summary (last step) */ .mrgym-review{background:var(--mg-input);border:1px dashed var(--mg-accent-border);border-radius:var(--mg-radius-sm);padding:15px 17px;margin-bottom:20px} .mrgym-review__title{font-weight:800;font-size:.95rem;margin-bottom:11px;color:var(--mg-text)} .mrgym-review__title span{font-weight:500;color:var(--mg-muted);font-size:.78rem} .mrgym-review__chips{display:flex;flex-wrap:wrap;gap:7px} .mrgym-review__chip{cursor:pointer;background:var(--mg-chip);border:1px solid var(--mg-border-soft);border-radius:999px; color:var(--mg-text);padding:7px 14px;font-size:.84rem;font-family:inherit;font-weight:600;transition:all .15s;line-height:1.5} .mrgym-review__chip:hover{border-color:var(--mg-accent);color:var(--mg-accent-text);background:var(--mg-accent-soft)} /* draft-restored toast */ .mrgym-toast{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; background:var(--mg-accent-soft);border:1px solid var(--mg-accent-border);border-radius:var(--mg-radius-sm); padding:11px 15px;margin-bottom:16px;font-size:.9rem;color:var(--mg-text);animation:mgFade .35s ease} .mrgym-toast button{cursor:pointer;background:transparent;border:1.5px solid var(--mg-border);border-radius:999px; color:var(--mg-muted);padding:5px 14px;font-family:inherit;font-size:.8rem;font-weight:700;transition:all .15s} .mrgym-toast button:hover{border-color:var(--mg-err);color:var(--mg-err-text)} /* notices */ .mrgym-notice{background:var(--mg-surface-2);border:1px solid var(--mg-border);border-radius:var(--mg-radius-sm); padding:13px 16px;font-size:.9rem;color:var(--mg-muted);margin:10px 0} .mrgym-notice--warn{background:var(--mg-warn-soft);border-color:var(--mg-accent-border);color:var(--mg-warn-text)} /* OTP */ .mrgym-otp{margin-top:15px;background:var(--mg-input);border:1px solid var(--mg-border);border-radius:var(--mg-radius-sm);padding:18px} .mrgym-otp__input{margin-top:13px;display:flex;flex-wrap:wrap;gap:11px;align-items:center} .mrgym-otp__input input{max-width:170px;text-align:center;letter-spacing:0;font-size:1.25rem;font-weight:700} .mrgym-otp__timer{color:var(--mg-muted);font-size:.85rem} .mrgym-otp__status{margin:11px 0 0;font-size:.9rem} .mrgym-otp__status.is-ok{color:var(--mg-ok);font-weight:700} /* nav + buttons The two step buttons share one row and are sized by intent: "next" (and the final submit) take the free space so the forward action is always the widest thing on the row, "prev" stays at its own width next to it. On step 1 prev is hidden, so next simply fills the row instead of floating alone at one edge. */ .mrgym-nav{display:flex;align-items:stretch;gap:12px;margin-top:28px} .mrgym-btn{cursor:pointer;border:0;border-radius:999px;padding:14px 28px;font-weight:800;font-size:1rem;font-family:inherit;transition:transform .16s,box-shadow .16s,opacity .15s,background .16s,border-color .16s;line-height:1.2} .mrgym-btn:disabled{opacity:.5;cursor:default;transform:none!important} .mrgym-nav .mrgym-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:14px 22px} .mrgym-nav .mrgym-btn .mg-i{margin-inline-end:0;width:1.05em;height:1.05em} .mrgym-nav [data-mrgym-prev]{flex:0 0 auto} .mrgym-nav [data-mrgym-next],.mrgym-nav [data-mrgym-submit]{flex:1 1 auto} /* Wide enough for the pair to read as buttons rather than one long bar, and back stays on the right where the RTL reader expects to reverse into. */ @media(min-width:641px){ .mrgym-nav{justify-content:space-between} .mrgym-nav [data-mrgym-next],.mrgym-nav [data-mrgym-submit]{flex:0 1 auto;min-width:230px} } .mrgym-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mg-bg),0 0 0 5px var(--mg-accent)} .mrgym-btn--primary{background:linear-gradient(100deg,var(--mg-accent),var(--mg-accent-2));color:#231a00;box-shadow:0 10px 26px -8px var(--mg-accent-glow)} .mrgym-btn--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 30px -8px var(--mg-accent-glow)} .mrgym-btn--primary:active:not(:disabled){transform:translateY(0)} /* Filled rather than outline-only: on the dark surface a transparent button with a #343a46 border all but disappears, and "مرحله قبل" is the escape hatch. */ .mrgym-btn--ghost{background:var(--mg-chip);border:1.5px solid var(--mg-border);color:var(--mg-text)} .mrgym-btn--ghost:hover:not(:disabled){background:var(--mg-accent-soft);border-color:var(--mg-accent-border);color:var(--mg-accent-text)} .mrgym-btn--go{flex:1 1 auto} .mrgym-error{background:var(--mg-err-soft);border:1px solid var(--mg-err);color:var(--mg-err-text); border-radius:var(--mg-radius-sm);padding:13px 16px;margin-top:18px;font-size:.92rem;font-weight:600} /* loading */ .mrgym-loading{text-align:center;padding:56px 20px} .mrgym-loading__spinner{width:60px;height:60px;margin:0 auto 20px;border:5px solid var(--mg-track); border-top-color:var(--mg-accent);border-radius:50%;animation:mgSpin 1s linear infinite} @keyframes mgSpin{to{transform:rotate(360deg)}} .mrgym-loading__title{font-size:1.25rem;font-weight:800;color:var(--mg-text);margin:0 0 8px} .mrgym-loading__sub{color:var(--mg-muted);max-width:460px;margin:0 auto} .mrgym-loading__steps{margin:18px auto 0;max-width:360px;text-align:right;display:grid;gap:8px;color:var(--mg-muted);font-size:.9rem} .mrgym-loading__steps span{opacity:.45;transition:opacity .3s} .mrgym-loading__steps span.is-on{opacity:1;color:var(--mg-accent-text);font-weight:700} /* ---------- Build screen ("forge"): ring + stages + live coach map ---------- */ .mrgym-forge{padding:40px 18px 48px} .mrgym-forge__ring{position:relative;width:128px;height:128px;margin:0 auto 22px} .mrgym-forge__ring svg{width:100%;height:100%;transform:rotate(-90deg)} .mrgym-forge__track{fill:none;stroke:var(--mg-track);stroke-width:8} .mrgym-forge__bar{fill:none;stroke:url(#mgForgeGrad);stroke-width:8;stroke-linecap:round; stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset .3s linear; filter:drop-shadow(0 0 6px var(--mg-accent-glow))} .mrgym-forge__pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px;direction:ltr} .mrgym-forge__pct b{font-size:1.9rem;font-weight:900;color:var(--mg-text);font-variant-numeric:tabular-nums} .mrgym-forge__pct i{font-style:normal;color:var(--mg-muted);font-weight:700;margin-top:.7em} .mrgym-forge__check{position:absolute;inset:0;display:none;align-items:center;justify-content:center} .mrgym-forge__check::after{content:"";width:32px;height:16px;border:5px solid var(--mg-accent);border-top:0;border-right:0; transform:rotate(-45deg) translateY(-5px)} .mrgym-forge__ring.is-done .mrgym-forge__pct{display:none} .mrgym-forge__ring.is-done .mrgym-forge__check{display:flex;animation:mgForgePop .45s cubic-bezier(.2,.9,.3,1.4)} .mrgym-forge__ring.is-done svg{animation:mgForgeGlow 1.2s ease-out} @keyframes mgForgePop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} @keyframes mgForgeGlow{0%{filter:none}45%{filter:drop-shadow(0 0 18px var(--mg-accent-glow))}100%{filter:none}} .mrgym-forge__stages{margin:24px auto 0;max-width:430px;text-align:right;display:grid;gap:10px} .mrgym-forge__st{display:flex;align-items:center;gap:11px;color:var(--mg-muted-2);font-size:.92rem;font-weight:600;transition:color .3s} .mrgym-forge__st-dot{flex:none;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:var(--mg-chip);border:1.5px solid var(--mg-border);color:var(--mg-muted);transition:background .3s,border-color .3s,color .3s} .mrgym-forge__st-dot .mg-i{width:17px;height:17px} .mrgym-forge__st.is-on{color:var(--mg-text)} .mrgym-forge__st.is-on .mrgym-forge__st-dot{border-color:var(--mg-accent-border);color:var(--mg-accent-text); background:var(--mg-accent-soft);animation:mgStPulse 1.6s ease-in-out infinite} @keyframes mgStPulse{0%,100%{box-shadow:0 0 0 0 var(--mg-accent-glow)}50%{box-shadow:0 0 0 7px transparent}} .mrgym-forge__st.is-done{color:var(--mg-muted)} .mrgym-forge__st.is-done .mrgym-forge__st-dot{background:var(--mg-accent);border-color:var(--mg-accent);color:#1a1400;animation:none} .mrgym-forge__st.is-done .mrgym-forge__st-dot .mg-i{display:none} .mrgym-forge__st.is-done .mrgym-forge__st-dot::after{content:"";width:11px;height:6px;border:2.5px solid #1a1400; border-top:0;border-right:0;transform:rotate(-45deg);margin-top:-3px} .mrgym-forge__bp{margin:28px auto 0;max-width:560px;background:var(--mg-surface-2);border:1px solid var(--mg-border); border-radius:var(--mg-radius);padding:18px 16px 12px;box-shadow:var(--mg-shadow-sm);text-align:right} .mrgym-forge__bp-t{font-weight:800;color:var(--mg-accent-text);margin:0 0 13px;font-size:.98rem;display:flex;align-items:center;gap:7px} .mrgym-forge__bp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .mrgym-forge__tile{background:var(--mg-input);border:1px solid var(--mg-border-soft);border-radius:var(--mg-radius-sm); padding:12px 10px;text-align:center;animation:mgTileIn .5s ease-out backwards;animation-delay:calc(var(--i,0)*.12s)} @keyframes mgTileIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} .mrgym-forge__tile .mg-i{width:19px;height:19px;color:var(--mg-accent-text);margin-bottom:4px} .mrgym-forge__tile b{display:block;font-size:1.22rem;font-weight:900;color:var(--mg-text);line-height:1.3;font-variant-numeric:tabular-nums} .mrgym-forge__tile i{font-style:normal;display:block;font-size:.78rem;color:var(--mg-accent-text);font-weight:700} .mrgym-forge__tile span{display:block;font-size:.76rem;color:var(--mg-muted);margin-top:3px} .mrgym-forge__tile.is-ok b{color:var(--mg-ok)} .mrgym-forge__tile.is-mid b,.mrgym-forge__tile.is-low b{color:var(--mg-warn-text)} .mrgym-forge__tile.is-high b{color:var(--mg-err-text)} .mrgym-forge__bp-note{color:var(--mg-muted-2);font-size:.8rem;margin:12px 2px 4px;line-height:1.8} .mrgym-forge__tip{margin:20px auto 0;max-width:520px;color:var(--mg-muted);font-size:.92rem;min-height:2.6em; transition:opacity .26s ease;padding:0 6px} .mrgym-forge__tip.is-swap{opacity:0} .mrgym-forge__tip::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mg-accent); margin-inline-end:8px;vertical-align:2px} @media (max-width:560px){ .mrgym-forge__bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .mrgym-forge__ring{width:110px;height:110px} .mrgym-forge__pct b{font-size:1.6rem} } @media (prefers-reduced-motion: reduce){ .mrgym-forge__bar{transition:none} .mrgym-forge__tile{animation:none} .mrgym-forge__st.is-on .mrgym-forge__st-dot{animation:none} .mrgym-forge__ring.is-done .mrgym-forge__check,.mrgym-forge__ring.is-done svg{animation:none} } /* ---------- Results ---------- */ .mrgym-result-head h2{font-size:clamp(1.4rem,4vw,1.75rem);font-weight:900;color:var(--mg-text);text-align:center;margin:.2em 0} .mrgym-result-summary{color:var(--mg-muted);text-align:center;max-width:640px;margin:10px auto 20px} .mrgym-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px;justify-content:center} .mrgym-tab{cursor:pointer;background:var(--mg-input);border:1.5px solid var(--mg-border);border-radius:999px; color:var(--mg-text);padding:10px 19px;font-weight:700;font-size:.9rem;font-family:inherit;transition:all .15s} .mrgym-tab:hover{border-color:var(--mg-accent-border)} .mrgym-tab.is-active{border-color:var(--mg-accent);background:var(--mg-accent-soft);color:var(--mg-accent-text);box-shadow:var(--mg-ring)} .mrgym-pane{display:none} .mrgym-pane.is-active{display:block;animation:mgFade .3s ease} .mrgym-block{background:var(--mg-surface-2);border:1px solid var(--mg-border);border-radius:var(--mg-radius-sm);padding:20px;margin-bottom:15px} .mrgym-block__title{font-size:1.18rem;font-weight:800;color:var(--mg-text);margin:0 0 14px;border-bottom:1px solid var(--mg-border);padding-bottom:11px} .mrgym-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px} .mrgym-pill{background:var(--mg-accent-soft);border:1px solid var(--mg-accent-border);border-radius:999px;padding:6px 14px;font-size:.85rem} .mrgym-pill b{color:var(--mg-accent-text)} .mrgym-note{color:var(--mg-muted);font-size:.93rem;margin:9px 0} .mrgym-note strong{color:var(--mg-text)} /* --- Workout day + exercise cards (div-based, immune to theme table CSS) --- */ .mrgym-day{margin-top:16px;background:var(--mg-input);border:1px solid var(--mg-border);border-radius:var(--mg-radius-sm);padding:16px} .mrgym-day__head{display:flex;align-items:center;gap:11px;margin-bottom:14px} .mrgym-day__no{flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--mg-accent),var(--mg-accent-2));color:#231a00;font-weight:900;font-size:1.05rem} .mrgym-day__name{font-size:1.06rem;font-weight:800;color:var(--mg-text);margin:0;line-height:1.5} .mrgym-day__focus{font-weight:500;color:var(--mg-muted);font-size:.83rem} .mrgym-exlist{display:grid;gap:10px} .mrgym-exc{display:flex;gap:12px;align-items:flex-start;background:var(--mg-surface-2); border:1px solid var(--mg-border-soft);border-radius:13px;padding:13px 15px;transition:border-color .15s,transform .15s,box-shadow .15s} .mrgym-exc:hover{border-color:var(--mg-accent-border);box-shadow:var(--mg-shadow-sm)} .mrgym-exc__num{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--mg-accent-soft);color:var(--mg-accent-text);font-weight:800;font-size:.88rem;border:1px solid var(--mg-accent-border);margin-top:2px} .mrgym-exc__body{flex:1 1 auto;min-width:0} .mrgym-exc__head{display:flex;flex-direction:column;gap:1px;margin-bottom:9px} .mrgym-exc__name{color:var(--mg-text);text-decoration:none;font-weight:800;font-size:1.04rem;display:inline-flex;align-items:center;gap:5px;line-height:1.6} a.mrgym-exc__name:hover{color:var(--mg-accent-text)} .mrgym-exc__ic{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.65;flex:none} .mrgym-exc__en{color:var(--mg-muted-2);font-size:.78rem;direction:ltr;text-align:right;font-weight:500} .mrgym-exc__stats{display:flex;flex-wrap:wrap;gap:8px} .mrgym-exc__stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px; background:var(--mg-input);border:1px solid var(--mg-border-soft);border-radius:10px;padding:7px 11px;line-height:1.35} .mrgym-exc__stat b{font-size:1rem;color:var(--mg-text);font-weight:800} .mrgym-exc__stat i{font-style:normal;font-size:.72rem;color:var(--mg-muted);font-weight:600} .mrgym-exc__note{color:var(--mg-muted);font-size:.86rem;margin:9px 0 0;line-height:1.75;padding-top:8px;border-top:1px dashed var(--mg-border)} .mrgym-meal{margin:11px 0} .mrgym-meal ul{margin:6px 0 0;padding-inline-start:20px} .mrgym-grocery{margin-top:15px} .mrgym-grocery__items{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px} .mrgym-grocery__items span{background:var(--mg-chip);border:1px solid var(--mg-border-soft);border-radius:9px;padding:5px 11px;font-size:.85rem} .mrgym-sups{display:grid;gap:13px} .mrgym-sup,.mrgym-med{background:var(--mg-input);border:1px solid var(--mg-border);border-radius:var(--mg-radius-sm);padding:15px} .mrgym-sup__head,.mrgym-med__head{display:flex;align-items:center;gap:10px;margin-bottom:7px;flex-wrap:wrap} .mrgym-tag{background:var(--mg-accent-soft);color:var(--mg-accent-text);border-radius:7px;padding:3px 10px;font-size:.78rem;font-weight:700} .mrgym-sup__meta{margin:9px 0 0;padding:0;list-style:none;display:grid;gap:5px;font-size:.88rem;color:var(--mg-muted)} .mrgym-sup__meta b{color:var(--mg-text)} .mrgym-sup__brands{margin-top:11px;font-size:.85rem;color:var(--mg-muted)} .mrgym-sup__brands a{color:var(--mg-accent-text);font-weight:700} .mrgym-med p{font-size:.9rem;margin:6px 0} .mrgym-med__se{color:var(--mg-warn-text)} .mrgym-result-actions{display:flex;gap:11px;justify-content:center;margin-top:20px;flex-wrap:wrap} /* ---------- FAQ / SEO copy ---------- */ .mrgym-faq{margin:30px 0} .mrgym-faq__title{font-size:1.45rem;font-weight:800;color:var(--mg-text);text-align:center;margin-bottom:6px} .mrgym-faq__sub{color:var(--mg-muted);text-align:center;font-size:.92rem;margin:0 0 18px} .mrgym-faq__item{background:var(--mg-surface);border:1px solid var(--mg-border);border-radius:var(--mg-radius-sm);margin-bottom:11px;padding:4px 18px;transition:border-color .15s,box-shadow .15s,background .15s} .mrgym-faq__item:hover{border-color:var(--mg-accent-border)} .mrgym-faq__item[open]{border-color:var(--mg-accent-border);background:var(--mg-surface-2);box-shadow:var(--mg-shadow-sm)} .mrgym-faq__item summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;display:flex;align-items:center;line-height:1.7} .mrgym-faq__item summary::-webkit-details-marker{display:none} .mrgym-faq__item summary::before{content:"+";flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:9px; background:var(--mg-accent-soft);border:1px solid var(--mg-accent-border);color:var(--mg-accent-text);font-weight:900;margin-inline-end:12px;font-size:1.05em;line-height:1;transition:transform .2s} .mrgym-faq__item[open] summary::before{content:"-";transform:rotate(180deg)} .mrgym-faq__answer{color:var(--mg-muted);padding:12px 0 15px;border-top:1px dashed var(--mg-border);line-height:2;animation:mgFade .3s ease} .mrgym-seo-copy{margin-top:26px;color:var(--mg-muted);background:var(--mg-surface);border:1px solid var(--mg-border);border-radius:var(--mg-radius);padding:24px 26px;box-shadow:var(--mg-shadow-sm)} .mrgym-seo-copy h2{color:var(--mg-text);font-size:1.32rem;font-weight:800;margin:0 0 8px} .mrgym-seo-copy h3{color:var(--mg-text);font-size:1.1rem;font-weight:800;margin:16px 0 6px} .mrgym-seo-copy strong{color:var(--mg-accent-text)} .mrgym-seo-copy a{color:var(--mg-accent-text);font-weight:700;text-decoration:none} .mrgym-seo-copy a:hover{opacity:.85;text-decoration:underline;text-underline-offset:3px} /* ---------- Tap-first controls (v4.1 mobile-first form) ---------- */ .mrgym-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px} /* minus / value / plus stepper */ .mrgym-num{display:flex;align-items:center;gap:8px} .mrgym-num input{flex:1 1 auto;min-width:0;text-align:center;font-weight:800;font-size:1.15rem;padding:11px 8px} .mrgym-num__btn{flex:none;width:46px;height:46px;border-radius:14px;border:1.5px solid var(--mg-border); background:var(--mg-chip);color:var(--mg-text);font-size:1.5rem;font-weight:800;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:all .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none} .mrgym-num__btn:hover{border-color:var(--mg-accent);color:var(--mg-accent-text);background:var(--mg-accent-soft)} .mrgym-num__btn:active{transform:scale(.92);background:var(--mg-accent-soft);border-color:var(--mg-accent)} .mrgym-num__unit{flex:none;color:var(--mg-muted);font-size:.8rem;font-weight:600;min-width:52px} /* quick chips (target weight) */ .mrgym-chips{display:flex;flex-wrap:wrap;gap:8px} .mrgym-chip{cursor:pointer;background:var(--mg-input);border:1.5px solid var(--mg-border);border-radius:999px; color:var(--mg-text);padding:10px 16px;font-family:inherit;font-size:.9rem;font-weight:700;transition:all .15s;line-height:1.4;touch-action:manipulation} .mrgym-chip:hover{border-color:var(--mg-accent-border)} .mrgym-chip.is-on{border-color:var(--mg-accent);background:var(--mg-accent-soft);color:var(--mg-accent-text);box-shadow:var(--mg-ring)} .mrgym-target-out{display:flex;align-items:center;gap:12px;margin-top:12px;background:var(--mg-input); border:1px dashed var(--mg-accent-border);border-radius:var(--mg-radius-sm);padding:10px 14px} .mrgym-target-out>span{flex:none;color:var(--mg-muted);font-size:.88rem;font-weight:700} .mrgym-target-out .mrgym-num{flex:1 1 auto} /* radio-card sublabel */ .mrgym-card__label{flex-direction:column;gap:2px} .mrgym-card__sub{display:block;font-style:normal;font-weight:500;font-size:.74rem;color:var(--mg-muted);line-height:1.5} .mrgym-card input:checked~.mrgym-card__label .mrgym-card__sub{color:var(--mg-accent-text);opacity:.85} /* collapsed optional inputs */ .mrgym-more{background:var(--mg-input);border:1px dashed var(--mg-border);border-radius:var(--mg-radius-sm);padding:2px 14px;margin-top:10px;transition:border-color .15s} .mrgym-more[open]{border-color:var(--mg-accent-border);padding-bottom:13px} .mrgym-more summary{cursor:pointer;list-style:none;padding:10px 0;color:var(--mg-muted);font-size:.88rem;font-weight:700;transition:color .15s} .mrgym-more summary::-webkit-details-marker{display:none} .mrgym-more summary:hover{color:var(--mg-accent-text)} .mrgym-more[open] summary{color:var(--mg-accent-text)} .mrgym-more input,.mrgym-more textarea{margin-top:2px} /* ---------- Responsive ---------- */ @media(max-width:860px){ .mrgym-feats{grid-template-columns:1fr 1fr} .mrgym-how__steps{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .mrgym-grid-2{grid-template-columns:1fr} .mrgym-grid-3{grid-template-columns:1fr} .mrgym-card{flex:1 1 calc(50% - 11px)} .mrgym-card__label{min-height:58px} .mrgym-num__btn{width:52px;height:52px} .mrgym-num input{font-size:16px;font-weight:800} .mrgym-check{padding:12px 15px;font-size:16px} .mrgym-chip{padding:12px 17px;font-size:.92rem} .mrgym-wrap input[type=text],.mrgym-wrap input[type=tel],.mrgym-wrap select,.mrgym-wrap textarea{font-size:16px} .mrgym-hero{padding:32px 18px} .mrgym-app{padding:20px 15px} .mrgym-btn{padding:13px 18px;font-size:.92rem} .mrgym-stepper__item{min-width:64px;padding:8px 4px} .mrgym-stepper__lbl{font-size:.68rem} .mrgym-stat{min-width:calc(50% - 10px);max-width:none} .mrgym-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;-webkit-overflow-scrolling:touch} .mrgym-tab{white-space:nowrap;flex:none} .mrgym-ex th:nth-child(4),.mrgym-ex td:nth-child(4){display:none} } @media(max-width:480px){ .mrgym-feats{grid-template-columns:1fr} .mrgym-how__steps{grid-template-columns:1fr} } /* ---------- Reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ .mrgym-wrap *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ---------- Print ---------- */ @media print{ .mrgym-progress,.mrgym-stepper,.mrgym-toast,.mrgym-nav,.mrgym-tabs,.mrgym-result-actions,.mrgym-hero__cta,#mrgym-form,.mrgym-faq__item summary::before{display:none!important} .mrgym-wrap{color:#000;max-width:100%} .mrgym-pane{display:block!important;page-break-before:always} .mrgym-block,.mrgym-sup,.mrgym-med,.mrgym-day{break-inside:avoid;border-color:#ccc} } /* ========================================================================= Inline SVG icons (MRGYM_Icons). One sprite, everywhere. Sizes are in em so an icon always tracks the type next to it, and stroke inherits currentColor so light/dark needs no extra rules. ========================================================================= */ .mrgym-wrap .mg-i{ width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em; fill:none;stroke:currentColor;overflow:visible } .mrgym-wrap .mrgym-sprite{position:absolute;width:0;height:0;overflow:hidden} /* field labels and step legends: icon picks up the gold accent, text stays neutral */ .mrgym-field>label>.mg-i,.mrgym-step__title>.mg-i{color:var(--mg-accent-text);margin-inline-end:5px} .mrgym-step__title>.mg-i{width:1.05em;height:1.05em;vertical-align:-.16em} /* stepper chips */ .mrgym-stepper__ico{display:flex;align-items:center;justify-content:center;line-height:1} .mrgym-stepper__ico .mg-i{width:20px;height:20px;vertical-align:0} .mrgym-stepper__item.is-active .mrgym-stepper__ico{color:var(--mg-accent)} /* hero trust strip */ .mrgym-stat b>.mg-i{width:1.05em;height:1.05em;margin-inline-end:4px;vertical-align:-.16em} .mrgym-formhero__badge .mg-i{width:1em;height:1em;vertical-align:-.14em;margin-inline-end:3px} /* radio cards with an icon above the label */ .mrgym-cards--ico .mrgym-card__label{padding-top:12px;padding-bottom:12px;min-height:96px;gap:6px;justify-content:center} .mrgym-card__ico{width:26px;height:26px;color:var(--mg-muted-2);transition:color .16s,transform .16s} .mrgym-card:hover .mrgym-card__ico{color:var(--mg-accent-text)} .mrgym-card input:checked~.mrgym-card__label .mrgym-card__ico{color:var(--mg-accent);transform:translateY(-1px)} .mrgym-card__text{display:block;line-height:1.5} /* body-shape silhouettes: same picker, six widths */ .mg-i--body{width:32px;height:32px;color:var(--mg-muted-2);transition:color .16s} .mrgym-card:hover .mg-i--body{color:var(--mg-accent-text)} .mrgym-card input:checked~.mrgym-card__label .mg-i--body{color:var(--mg-accent)} /* +/- steppers, upload button, review chips, disclosure summaries */ .mrgym-num__btn .mg-i{width:20px;height:20px;stroke-width:2.4;vertical-align:0} .mrgym-upload__btn .mg-i{width:1.1em;height:1.1em} .mrgym-review__chip .mg-i{width:1em;height:1em;margin-inline-end:2px;vertical-align:-.14em;color:var(--mg-accent-text)} .mrgym-more summary .mg-i{width:1em;height:1em;margin-inline-end:5px;vertical-align:-.14em;color:var(--mg-accent-text)} .mrgym-btn .mg-i{width:1.15em;height:1.15em;margin-inline-end:6px;vertical-align:-.2em} .mrgym-bmi .mg-i{margin-inline-end:5px;color:var(--mg-accent-text)} .mrgym-loading .mg-i,.mrgym-review__title .mg-i{margin-inline-end:5px;color:var(--mg-accent-text)} .mrgym-feat__ico .mg-i,.mrgym-feat__ico{color:var(--mg-accent-text)} .mrgym-feat__ico .mg-i{width:26px;height:26px;vertical-align:0} @media (max-width:560px){ .mrgym-cards--ico .mrgym-card__label{min-height:104px} .mrgym-stepper__ico .mg-i{width:18px;height:18px} } /* ========================================================================= Ready-made splits (templates/seo-programs.php) Tables scroll inside their own box so a long exercise name never pushes the page sideways on a phone. ========================================================================= */ .mrgym-programs{margin:34px 0} .mrgym-programs__title{font-size:clamp(1.35rem,3.6vw,1.75rem);font-weight:900;color:var(--mg-text);margin:0 0 12px;line-height:1.6} .mrgym-programs__lead{color:var(--mg-muted);font-size:1rem;margin:0 0 18px} .mrgym-progjump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px} .mrgym-progjump .mrgym-chip{text-decoration:none;display:inline-block} .mrgym-prog{background:var(--mg-surface);border:1px solid var(--mg-border);border-radius:var(--mg-radius); padding:24px 22px;margin:0 0 18px;box-shadow:var(--mg-shadow-sm);scroll-margin-top:90px} .mrgym-prog__title{font-size:clamp(1.15rem,3vw,1.4rem);font-weight:800;color:var(--mg-text);margin:0 0 10px;line-height:1.6} .mrgym-prog h4{font-size:1.02rem;font-weight:800;color:var(--mg-accent-text);margin:20px 0 6px} .mrgym-prog p{color:var(--mg-muted);margin:0 0 12px} .mrgym-prog a{color:var(--mg-accent-text);text-decoration:none;border-bottom:1px solid var(--mg-accent-border)} .mrgym-prog a:hover{color:var(--mg-accent);border-bottom-color:var(--mg-accent)} .mrgym-prog__note{background:var(--mg-input);border:1px dashed var(--mg-border);border-radius:var(--mg-radius-sm); padding:12px 15px;font-size:.9rem;margin-top:14px} .mrgym-prog__limit{margin:22px 0 12px} .mrgym-prog__stamp{color:var(--mg-muted-2);font-size:.82rem;text-align:center;margin:14px 0 0;line-height:1.9} .mrgym-days{display:flex;flex-direction:column;gap:14px;margin-top:16px} /* one training day, laid out like a dashboard day sheet */ .mrgym-daysheet{background:var(--mg-surface-2);border:1px solid var(--mg-border-soft);border-radius:16px;overflow:hidden} .mrgym-daysheet__head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:13px 16px; background:linear-gradient(90deg,var(--mg-accent-soft),transparent);border-bottom:1px solid var(--mg-border-soft)} .mrgym-daysheet__wd{flex:none;background:linear-gradient(135deg,var(--mg-accent),var(--mg-accent-2));color:#231a00; font-weight:900;font-size:.85rem;border-radius:999px;padding:5px 15px;white-space:nowrap} .mrgym-daysheet__title{font-weight:800;color:var(--mg-text);font-size:.98rem} .mrgym-daysheet__focus{color:var(--mg-muted);font-size:.8rem;margin-inline-start:auto} .mrgym-warmup{margin:0;padding:10px 16px;font-size:.84rem;color:var(--mg-muted);line-height:1.9; border-bottom:1px solid var(--mg-border-soft);background:var(--mg-input)} .mrgym-warmup .mg-i{color:var(--mg-accent-text);margin-inline-end:6px} .mrgym-warmup b{color:var(--mg-text)} /* exercise rows */ .mrgym-exlist{display:flex;flex-direction:column} .mrgym-exr{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-bottom:1px solid var(--mg-border-soft); transition:background .16s} .mrgym-exr:last-child{border-bottom:0} .mrgym-exr:hover{background:var(--mg-accent-soft)} .mrgym-exr__n{flex:none;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center; background:var(--mg-chip);border:1px solid var(--mg-border);color:var(--mg-muted);font-weight:900;font-size:.82rem;margin-top:2px} .mrgym-exr:hover .mrgym-exr__n{border-color:var(--mg-accent-border);color:var(--mg-accent-text)} .mrgym-exr__media{flex:none;width:96px;aspect-ratio:300/160;border-radius:10px;overflow:hidden;display:block; background:var(--mg-input);border:1px solid var(--mg-border-soft)} .mrgym-exr__media img{width:100%;height:100%;object-fit:cover;display:block} .mrgym-exr__media--ph{display:flex;align-items:center;justify-content:center;color:var(--mg-muted-2)} .mrgym-exr__media--ph .mg-i{width:26px;height:26px} .mrgym-exr__body{flex:1 1 auto;min-width:0} .mrgym-exr__names{display:flex;flex-direction:column;gap:1px;margin-bottom:7px} .mrgym-exr__name{color:var(--mg-text);font-weight:800;font-size:.95rem;text-decoration:none;line-height:1.6; display:inline-flex;align-items:center;gap:5px;border-bottom:0} .mrgym-exr__name:hover{color:var(--mg-accent-text)} .mrgym-exr__name .mg-i{width:.85em;height:.85em;color:var(--mg-muted-2);vertical-align:0} .mrgym-exr__name:hover .mg-i{color:var(--mg-accent)} .mrgym-exr__en{color:var(--mg-muted-2);font-size:.75rem;font-weight:600;letter-spacing:0} .mrgym-exr__stats{display:flex;flex-wrap:wrap;gap:6px} .mrgym-exr__stat{display:inline-flex;align-items:baseline;gap:4px;background:var(--mg-chip);border:1px solid var(--mg-border-soft); border-radius:999px;padding:3px 11px;line-height:1.7;white-space:nowrap} .mrgym-exr__stat b{color:var(--mg-accent-text);font-weight:900;font-size:.83rem;font-variant-numeric:tabular-nums} .mrgym-exr__stat i{font-style:normal;color:var(--mg-muted-2);font-size:.72rem} .mrgym-exr__note{margin:8px 0 0;color:var(--mg-muted);font-size:.8rem;line-height:1.9;display:flex;gap:6px;align-items:flex-start} .mrgym-exr__note .mg-i{color:var(--mg-accent-text);margin-top:.35em} @media (max-width:560px){ .mrgym-prog{padding:20px 14px} .mrgym-exr{gap:9px;padding:12px 12px;flex-wrap:wrap} .mrgym-exr__media{width:74px} .mrgym-exr__body{flex:1 1 100%;order:3} .mrgym-exr__names{margin-bottom:6px} .mrgym-daysheet__focus{margin-inline-start:0;flex:1 1 100%} } /* ========================================================================= Parent-theme reset guard. Keep this block last. The theme ships a preflight reset that lands after this file in the combined bundle: [type="button"],[type="reset"],[type="submit"],button { appearance:button; background:0 0 } An attribute selector weighs exactly as much as a class, so on every