/* ==========================================================================
   CoachHub — Design System  ("Charcoal & Crimson")
   Lifted verbatim-in-spirit from coachhub-directions/F-crimson-week-history.html
   Phase 0 scaffold. Mobile-first, safe-area aware, plain CSS.
   ========================================================================== */

/* ---------- Tokens (TRUE-BLACK + micro-speckle, crimson accent) ---------- */
/* base material ported from f03-micro-speckle.html: absolutely no navy/blue   */
/* tint — R/G/B kept neutral (near-equal) so the black reads pure, not cold.   */
:root{
  /* true-black surfaces (neutral grey ramp, zero blue tint) */
  --bg:#eef1f9;       /* app background (true black) */
  --bg2:#e6eaf4;      /* deep panels / status backdrop */
  --card:#f6f7fb;     /* cards, nav bar, week strip */
  --card2:#e9ecf5;    /* raised surfaces, inputs, chevrons, day cells */
  --card3:#dfe3ee;    /* hover / pressed surface */
  --line:#dfe2ec;     /* hairline borders */
  --line2:#d0d5e3;    /* stronger dividers */

  /* text (neutral whites/greys, no cool cast) */
  --ink:#241807;      /* primary */
  --ink2:#76675a;     /* secondary */
  --dim:#a69889;      /* tertiary / placeholder */

  /* lime gradient family (client switched crimson→lime 2026-06-05) */
  --c1:#d2b393;
  --c2:#b4936f;
  --c3:#e3cdb3;
  --c:#a07d5e;                       /* primary accent */
  --c-dim:#8d7966;                   /* pressed / gradient stop */
  --c-soft:rgba(160,125,94,.14);      /* accent tint backgrounds */
  --glow:141,121,102;                  /* shadow/neon rgb: rgba(var(--glow),a) — lime dla klienta */
  --on-accent:#ffffff;               /* tekst/ikony na wypelnieniach akcentu (lime jest jasny → CIEMNY tekst) */

  /* semantic */

  /* Body Balance · Latte (styl 3): neumorfizm z ORION + gradient latte */
  --sh-d:#c6cbde; --sh-l:#ffffff;
  --raise:6px 6px 14px var(--sh-d),-6px -6px 14px var(--sh-l);
  --raise-s:3px 3px 8px var(--sh-d),-3px -3px 8px var(--sh-l);
  --press:inset 4px 4px 10px var(--sh-d),inset -4px -4px 10px var(--sh-l);
  --latte:linear-gradient(135deg,#d2b393 0%,#8d7966 100%);
  --ok:#4f9a6c;
  --warn:#c98a3a;
  --danger:#c2484d;                  /* czerwony zostaje dla błędów/usuwania (nie lime) */

  /* radii */
  --r:22px; --r-s:15px; --r-sm:10px; --r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);

  /* phone frame metrics */
  --frame-w:440px; --frame-h:956px;
  --nav-h:84px;
  /* górny odstęp treści: desktop = miejsce na atrapę status bara (66px).
     Na mobile (≤600px, override niżej) = realny safe-area + mały luz, więc
     w Safari (inset 0) treść siedzi pod paskiem URL bez dziury, a w PWA
     standalone jest czysto pod notchem. */
  --scroll-top:66px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:"Sora",system-ui,-apple-system,"SF Pro",Segoe UI,Roboto,sans-serif;
  background:#e3e7f2;color:var(--ink);
  display:flex;align-items:flex-start;justify-content:center;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit}
[hidden]{display:none !important}

@media (max-width:600px){
  input:not([type=range]):not([type=file]),textarea,select{font-size:16px !important;min-height:44px}
}

/* numbers everywhere should be tabular */
.num,.dn,.val,.streak,.hmeta,.set-row input,.macro b{font-variant-numeric:tabular-nums}

/* ==========================================================================
   PHONE SHELL  (iPhone 16 Pro Max frame on desktop, full-screen on mobile)
   ========================================================================== */
.screen{
  position:relative;
  width:var(--frame-w);height:var(--frame-h);
  max-height:100vh;max-height:100dvh;
  overflow:hidden;isolation:isolate;
  /* TRUE-BLACK material ported from f03: layered neutral radials (no navy) +
     a faint crimson breath near the hero so black stays dominant. */
  background:
    radial-gradient(125% 80% at 50% -8%,#f6f7fb 0%,#eef1f9 34%,#eef1f9 70%,#e6eaf4 100%),
    linear-gradient(180deg,#e6eaf4 0%,#eef1f9 100%);
}
/* ---------- FINE MICRO-SPECKLE (ported from f03-micro-speckle.html) ----------
   Exact f03 method: SVG feTurbulence(fractalNoise) → feColorMatrix(desaturate
   to grey) → feComponentTransfer(steep discrete alpha so only the brightest few
   % survive as sparse specks) → feColorMatrix(tint pure white), inlined here as
   a data-URI background and composited with mix-blend-mode:screen so blacks
   vanish and only faint white dust shows. Two passes (coarse + finer) for even
   density without growing speck size. App-wide, above material, below content. */
.screen::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;opacity:.72;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='956'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.33 0.33 0.33 0 0' result='g'/%3E%3CfeComponentTransfer in='g' result='d'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0.5 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix in='d' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.screen::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='956'%3E%3Cfilter id='s2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='1' seed='29' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.33 0.33 0.33 0 0' result='g'/%3E%3CfeComponentTransfer in='g' result='d'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix in='d' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s2)'/%3E%3C/svg%3E");
}
/* desktop (≥601px): center the phone mockup with a little breathing room.
   Próg podniesiony z 461→601: każdy telefon (nawet ~500px CSS / z lekkim
   zoomem) trafia w tryb full-bleed poniżej, więc NIE ma czarnych pasków po
   bokach na telefonie. Makieta „telefon na czerni" tylko na realnym desktopie. */
@media (min-width:601px){
  body{padding:0;align-items:center;min-height:100vh;min-height:100dvh}
  .screen{
    border-radius:46px;
    box-shadow:0 0 0 11px #eef1f9,0 0 0 13px #e9ecf5,0 40px 120px -20px rgba(93,74,58,0.22);
  }
}
/* phone / wąskie okno (≤600px): apka wypełnia cały ekran, zero czerni po bokach */
@media (max-width:600px){
  /* mobile: górny odstęp = realny safe-area + 12px (Safari: inset 0 → brak dziury;
     PWA standalone: inset notcha → czysto pod statusem). Atrapa status bara jest
     ukryta ≤600px, więc nie trzeba na nią rezerwować 66px. */
  :root{ --scroll-top: calc(env(safe-area-inset-top,0px) + 12px); }
  body{align-items:stretch}
  /* iOS PWA (standalone): bez position:fixed (powodowało rubber-band/„trampolinę").
     Wysokość bierzemy z --app-h (JS = window.innerHeight, przeliczane po starcie),
     fallback 100dvh. To wypełnia realny ekran bez blokowania przewijania. */
  .screen{width:100%;height:100vh;height:var(--app-h,100dvh);max-height:none;border-radius:0;box-shadow:none}
}

/* ---------- Dynamic Island + status bar ---------- */
.island{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:126px;height:36px;background:#000;border-radius:20px;z-index:61;
}
.status{
  position:absolute;top:0;left:0;right:0;height:54px;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 30px;font-size:16px;font-weight:700;color:var(--ink);
  pointer-events:none; /* atrapa paska iOS (zegar) — NIGDY nie łapie klików;
                          bez tego na desktopie nachodzi na pigułkę PL/EN i blokuje ją */
}
.status .sig{display:flex;align-items:center;gap:7px}
/* Atrapa paska iOS (zegar + wyspa) TYLKO na desktopie (makieta „telefon na czerni” =
   wygląda jak apka). Na realnym telefonie (≤600px) ukryj — telefon ma własny zegar
   systemu, atrapa dawałaby podwójny czas. Override PO bazowym .status (kolejność
   źródła wygrywa — @media nie podbija specyficzności). */
@media (max-width:600px){
  .island,.status{display:none}
}

/* ---------- Scroll body (one per visible view) ---------- */
.scroll{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  padding:var(--scroll-top) 20px calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 14px);
  -webkit-overflow-scrolling:touch;
}
.scroll::-webkit-scrollbar{display:none}
/* full-bleed scroll for gate/survey/waiting which carry their own padding */
.scroll.bleed{padding:0}
/* głębsze podstrony bez dolnego paska (router ustawia body.nav-hidden): zerujemy
   --nav-h, więc paddingi-pod-nav (.scroll i widoki) zwijają się i treść schodzi do dołu */
body.nav-hidden{--nav-h:0px}

/* view roots: only the active one is shown (router toggles [hidden]) */
.view{position:absolute;inset:0;z-index:5}

/* ==========================================================================
   HEADER (greeting + streak + avatar)
   ========================================================================== */
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.head .eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--c);text-transform:uppercase}
.head .hi{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.head>div:first-child{min-width:0}
.hgr{display:flex;align-items:center;gap:9px;flex:none}
.streak{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 12px;font-weight:800;font-size:13px}
.ava{width:44px;height:44px;border-radius:14px;background:linear-gradient(140deg,var(--c1),var(--c3));display:grid;place-items:center;font-weight:800;color:var(--on-accent);font-size:14px;box-shadow:0 8px 22px -8px rgba(160,125,94,.7)}
/* ===== FULL-BLEED NAGŁÓWEK (1:1 z referencją): wychodzi poza padding .scroll
   (-60px/-20px) na całą szerokość i pod status bar; zaokrąglone tylko dolne rogi.
   Tło = ciemny błyszczący charcoal #f6f7fb + neutralna diagonalna poświata (bez
   crimson — kolor pobrany z referencji: baza #f6f7fb, połysk do ~#4a4a4a). ===== */
.head.card-head{display:block;position:relative;overflow:hidden;margin:calc(-1 * var(--scroll-top)) -20px 18px;padding:var(--scroll-top) 20px 20px;border-radius:0 0 26px 26px;border:none;background:linear-gradient(116deg,transparent 36%,rgba(140,142,148,.22) 49%,rgba(170,172,178,.30) 54%,rgba(80,82,88,.10) 62%,transparent 76%),radial-gradient(120% 112% at 86% -22%,#d0d5e3 0%,#e9ecf5 30%,#f6f7fb 52%,#f6f7fb 74%),#f6f7fb;box-shadow:0 18px 40px -24px rgba(93,74,58,.2)}
.head.card-head::before{content:"";position:absolute;top:-30%;right:-10%;width:86%;height:150%;background:radial-gradient(closest-side,rgba(210,212,218,.22),transparent 70%);transform:rotate(16deg);pointer-events:none}
.head.card-head::after{content:none}
.head.card-head>*{position:relative;z-index:1}
.hd-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hd-date{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);min-width:0}
.hd-date span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-date svg{width:14px;height:14px;flex:none;stroke:var(--c);fill:none;stroke-width:1.9}
.hd-acts{display:flex;align-items:center;gap:9px;flex:none}
.hd-main{display:flex;align-items:center;gap:13px;margin-top:14px}
.hd-ava{width:56px;height:56px;border-radius:50%;flex:none;background:var(--card3) center/cover no-repeat;border:2px solid rgba(255,255,255,.16);box-shadow:0 10px 24px -10px rgba(93,74,58,.2)}
.hd-ava.ini{display:grid;place-items:center;font-weight:800;color:var(--on-accent);font-size:18px;background:linear-gradient(140deg,var(--c1),var(--c3));border-color:transparent}
.hd-txt{min-width:0;flex:1}
.hd-hi{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.08}
.hd-badges{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.hd-badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--ink2);background:rgba(36,24,7,0.042);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.hd-badge.acc{color:var(--c);border-color:rgba(160,125,94,.38);background:var(--c-soft)}

/* ==========================================================================
   WEEK / DAY HISTORY NAVIGATOR  (the signature component)
   ========================================================================== */
.week{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 12px 12px;margin-bottom:18px}
.week .wtop{display:flex;align-items:center;justify-content:space-between;padding:0 4px 12px}
.week .wlabel{font-size:13.5px;font-weight:700;text-align:center}
.week .wlabel small{display:block;font-size:11px;color:var(--dim);font-weight:600;margin-top:1px}
.chev{width:34px;height:34px;border-radius:10px;background:var(--card2);border:1px solid var(--line2);color:var(--ink2);display:grid;place-items:center;cursor:pointer;font-size:16px;transition:all .15s var(--ease)}
.chev:active{transform:scale(.92)}

.days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 0 8px;border-radius:13px;cursor:pointer;border:1.5px solid transparent;transition:all .16s var(--ease)}
.day .dow{font-size:10.5px;font-weight:700;color:var(--dim);letter-spacing:.02em}
.day .dn{font-size:15px;font-weight:800;color:var(--ink2)}
.day .dot{width:6px;height:6px;border-radius:50%;background:transparent}
/* states from SPEC §0.3 */
.day.done .dot{background:var(--ok)}    .day.done .dn{color:var(--ink)}
.day.rest .dot{background:var(--dim)}
.day.plan .dn{color:var(--dim)}                              /* scheduled (future) */
.day.missed .dn{color:var(--ink2)}
.day.missed{box-shadow:inset 0 -2px 0 rgba(240,169,59,.55)}  /* faint amber underline */
.day.today{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 14px -2px rgba(160,125,94,.7)}
.day.today .dn{color:var(--ink)}
.day.sel{background:linear-gradient(150deg,var(--c1),var(--c2));border-color:transparent;box-shadow:0 10px 24px -10px rgba(160,125,94,.8)}
.day.sel .dow,.day.sel .dn{color:var(--on-accent)}
.day.sel .dot{background:#fff}

/* ==========================================================================
   PHOTO HERO  (charcoal scrim + crimson wash)
   ========================================================================== */
.hero{position:relative;border-radius:var(--r);overflow:hidden;min-height:236px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;border:1px solid rgba(36,24,7,0.049);box-shadow:0 18px 40px rgba(93,74,58,0.22)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05) brightness(.82);z-index:0;transition:opacity .25s var(--ease)}
/* markowe tło hero, gdy brak obrazu */
.hero .bg.no-photo{filter:none;background:radial-gradient(120% 90% at 50% 0%,rgba(160,125,94,.20),transparent 58%),linear-gradient(180deg,#f6f7fb,#eef1f9)}
/* czysty overlay: TYLKO przyciemnienie do dołu, ZERO zielonego/czerwonego washu */
.hero .ov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(238,241,249,.18) 0%,rgba(238,241,249,.06) 38%,rgba(238,241,249,.6) 72%,rgba(238,241,249,.9) 100%)}
/* DZIEŃ WOLNY (wariant 08): jaśniejsze zdjęcie + wyśrodkowana treść, bez przycisku */
.hero.rest .bg{filter:brightness(1.12) saturate(1.05)}
.hero.rest .ov{background:linear-gradient(180deg,rgba(238,241,249,.2),rgba(238,241,249,.45) 55%,rgba(238,241,249,.82))}
.hero.rest .htitle{font-size:27px}
.hsub2{font-size:13px;font-weight:500;color:rgba(255,255,255,.8);line-height:1.5;margin-top:4px}
/* UKOŃCZONY (wariant 08): ciemny panel u dołu z odznaką + tekstem + linkiem */
.hpanel{position:relative;z-index:2;margin:0 -20px -20px;padding:18px 20px calc(18px);background:linear-gradient(180deg,rgba(238,241,249,0),rgba(238,241,249,.94) 38%)}
.hpanel-row{display:flex;align-items:center;gap:12px}
.hmedal{width:36px;height:36px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--c2),var(--c));color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;box-shadow:0 6px 18px rgba(160,125,94,.35)}
.hpanel-col{flex:1;min-width:0}
.hpanel-t{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.05}
.hpanel-s{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.72);margin-top:3px}
.hpanel-link{flex:none;color:var(--c);font-weight:800;font-size:14px;white-space:nowrap}
.hpanel-chev{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;line-height:1}
.hmedal svg{width:20px;height:20px;stroke:var(--on-accent);fill:none;stroke-width:2}
/* TRENING (wariant 07): nazwa treningu w lewym górnym rogu, wersaliki, zawija dla długich */
.hero .hname{position:absolute;top:18px;left:20px;right:20px;z-index:3}
.hname .he{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--c);margin-bottom:5px}
.hname .hn{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;line-height:1.25;max-width:82%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero>*{position:relative;z-index:2}
.hr1{display:flex;justify-content:space-between;align-items:center;position:absolute;top:18px;left:18px;right:18px;z-index:2}
.htag{display:inline-flex;align-items:center;gap:6px;background:rgba(160,125,94,.92);color:var(--on-accent);padding:6px 12px;border-radius:var(--r-pill);font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.htag.g{background:rgba(160,125,94,.16);color:var(--c);border:1px solid rgba(160,125,94,.45)}
.htag.n{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
.htag.w{background:rgba(240,169,59,.92)}
.htag .d{width:6px;height:6px;border-radius:50%;background:var(--on-accent)}
.htag.g .d{background:var(--c)}
.htag.n .d{background:#fff}
.hmeta{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.htitle{font-size:32px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.02}
.hsub{font-size:12.5px;font-weight:700;color:#fff;opacity:.85;text-transform:uppercase;letter-spacing:.05em;margin-top:5px}
.hbar{margin:14px 0 16px}
.hbar .t{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--on-accent);opacity:.92;margin-bottom:6px}
.hbar .track{height:7px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}
.hbar .track>i{display:block;height:100%;background:#fff;border-radius:99px;transition:width .3s var(--ease)}

/* progress ring (today's overall completion) overlaid on hero */
.ring{position:absolute;top:18px;right:18px;z-index:3;width:54px;height:54px}
.ring svg{transform:rotate(-90deg)}
.ring .track{stroke:rgba(255,255,255,.2)}
.ring .fill{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset .4s var(--ease)}
.ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--on-accent)}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.hact{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;font-family:inherit;font-weight:800;font-size:15px;height:52px;padding:0 18px;border-radius:14px;cursor:pointer;letter-spacing:0;transition:transform .16s var(--ease);color:inherit}
.hact:active{transform:scale(.97)}
.hact.start{background:#fff;color:#241807}
.hact.start .a{width:23px;height:23px;border-radius:50%;background:linear-gradient(140deg,var(--c1),var(--c3));display:grid;place-items:center;font-size:12px;color:var(--on-accent)}
.hact.done{background:rgba(160,125,94,.14);color:var(--c);border:1.5px solid rgba(160,125,94,.5)}
.hact.ghost{background:rgba(36,24,7,0.07);color:#fff;border:1px solid rgba(255,255,255,.22)}

/* generic buttons (gate / survey / modals) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:15px;padding:15px 20px;border-radius:var(--r-pill);transition:transform .15s var(--ease),opacity .15s var(--ease);color:var(--on-accent)}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(140deg,var(--c1),var(--c2));box-shadow:0 14px 30px -12px rgba(160,125,94,.8)}
.btn-ghost{background:var(--card2);border:1px solid var(--line2);color:var(--ink)}
.btn-ok{background:rgba(42,209,126,.16);color:var(--ok);border:1.5px solid rgba(42,209,126,.4)}
.btn-block{width:100%}
.btn:disabled{opacity:.4;pointer-events:none}

/* ---------- loading feedback: spinner, busy buttons, boot splash ---------- */
@keyframes m13spin{to{transform:rotate(360deg)}}
.m13-spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.28);
  border-top-color:var(--on-accent);border-radius:50%;animation:m13spin .7s linear infinite;vertical-align:-3px}
.btn.is-busy,button.is-busy{pointer-events:none;opacity:.92}
.btn.is-busy .m13-spin{border-color:rgba(255,255,255,.4);border-top-color:var(--on-accent)}
/* ekran startowy: widoczny od razu (zero „pustki"), znika po pierwszym renderze */
.boot{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;background:#eef1f9;transition:opacity .34s var(--ease,ease)}
.boot-hide{opacity:0;pointer-events:none}
.boot .wm{font-size:13px;font-weight:800;letter-spacing:.26em;color:var(--c,#a07d5e);text-transform:uppercase}
.boot .m13-spin{width:26px;height:26px;border-width:2.5px;border-color:rgba(160,125,94,.22);border-top-color:var(--c,#a07d5e)}

/* ==========================================================================
   DAY SUMMARY + TILE GRID
   ========================================================================== */
.dsum{display:flex;align-items:center;gap:8px;margin:16px 4px 11px;font-size:13px;font-weight:700;color:var(--ink2)}
.dsum .sp{flex:1}
.dsum a{color:var(--c);text-decoration:none;font-size:12.5px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:14px;position:relative;transition:opacity .2s var(--ease)}
.tile .ic{width:36px;height:36px;border-radius:11px;background:var(--c-soft);display:grid;place-items:center;margin-bottom:11px}
.tile .ic svg{width:19px;height:19px;stroke:var(--c);fill:none;stroke-width:2}
.tile .lab{font-size:12.5px;color:var(--ink2);font-weight:600}
.tile .val{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.tile .val small{font-size:12px;color:var(--dim);font-weight:600;margin-left:3px}
.tile .chk{position:absolute;top:13px;right:13px;width:20px;height:20px;border-radius:50%;background:var(--ok);display:none;place-items:center;color:#241807;font-size:11px;font-weight:900}
.tile.ok .chk{display:grid}

/* ==========================================================================
   GENERIC CARD (reused across screens)
   ========================================================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:16px}
.card+.card{margin-top:11px}
.card .chead{display:flex;align-items:center;gap:10px;margin:-16px -16px 14px;padding:13px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(36,24,7,0.032),rgba(36,24,7,0.008));border-top-left-radius:var(--r-s);border-top-right-radius:var(--r-s)}
.card .chead .ci{width:34px;height:34px;border-radius:10px;background:var(--c-soft);display:grid;place-items:center;flex:none}
.card .chead .ci svg{width:18px;height:18px;stroke:var(--c);fill:none;stroke-width:2}
.card .chead h3{font-size:15px;font-weight:800;letter-spacing:-.01em;flex:1;min-width:0}
.card .chead .meta{font-size:11.5px;font-weight:700;color:var(--dim)}

.section-title{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink2);margin:20px 4px 10px;text-transform:uppercase}

/* coach message strip */
.coach{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 14px;margin:11px 0 14px}
.coach .ca{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,#c9cfdd,#e9ecf5);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.coach .ct{flex:1;min-width:0}
.coach .ct b{font-size:13.5px;display:flex;align-items:center;gap:7px}
.coach .ct b .new{font-size:9px;background:var(--c);color:var(--on-accent);padding:2px 7px;border-radius:99px;letter-spacing:.04em}
.coach .ct span{display:block;font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.coach .arr{color:var(--dim);font-size:19px}

/* ==========================================================================
   CHIPS  (focus / phase / timing / multi-choice)
   ========================================================================== */
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-pill);background:var(--card2);border:1px solid var(--line2);color:var(--ink2);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s var(--ease)}
.chip.on{background:var(--c-soft);border-color:var(--c);color:var(--c)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* ==========================================================================
   SET ROW  (per-set logger in the Workout Player — Phase 1 uses these)
   ========================================================================== */
.set-row{display:grid;grid-template-columns:34px 1fr 1fr 1fr 40px;align-items:center;gap:8px;padding:10px 12px;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);margin-top:8px}
.set-row .sn{width:26px;height:26px;border-radius:8px;background:var(--card3);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--ink2)}
.set-row input{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--ink);font-size:16px;font-weight:700;text-align:center;padding:9px 4px}
.set-row input:focus{outline:none;border-color:var(--c)}
.set-row .unit{font-size:10px;color:var(--dim);font-weight:700;text-align:center;display:block;margin-top:3px}
.set-row .scol{min-width:0}
.set-row .check{width:34px;height:34px;border-radius:9px;background:var(--card3);border:1px solid var(--line2);display:grid;place-items:center;cursor:pointer;color:var(--dim);font-weight:900;font-size:14px}
.set-row.done{border-color:rgba(42,209,126,.4)}
.set-row.done .check{background:var(--ok);color:#241807;border-color:transparent}

.set-head{display:grid;grid-template-columns:34px 1fr 1fr 1fr 40px;gap:8px;padding:0 12px;margin-top:12px;font-size:10px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.set-head span{text-align:center}

/* exercise row in workout card */
/* posiłek: miniatura zdjęcia w nagłówku + przepis w rozwinięciu */
.meal-thumb{width:44px;height:44px;border-radius:11px;flex:none;background:var(--card2) center/cover no-repeat;border:1px solid var(--line2)}
.meal-recipe{margin-top:10px;padding:11px 13px;background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:12px}
.meal-recipe .mr-t{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-bottom:5px}
.meal-recipe .mr-b{font-size:13px;font-weight:500;color:var(--ink2);line-height:1.5;white-space:pre-wrap}
/* cele dodatkowe diety u klienta: błonnik / woda / pola własne trenera */
.diet-extra{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.diet-extra-chip{font-size:11px;font-weight:600;color:var(--ink2);background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.diet-extra-chip b{color:var(--ink);font-weight:800}
/* dodatkowe bloki dnia widoczne dla klienta: rozgrzewka / rozciąganie / cardio */
.dp-extra{margin-top:10px;padding:11px 13px;background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:12px}
.dp-extra .dpx-l{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-bottom:3px}
.dp-extra .dpx-t{font-size:13px;font-weight:600;color:var(--ink2);line-height:1.45;white-space:pre-wrap}
.ex-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ex-row:last-child{border-bottom:none}
.ex-row .ex-thumb{width:48px;height:48px;border-radius:11px;background:var(--card2) center/cover;flex:none;border:1px solid var(--line2)}
.ex-row .ex-body{flex:1;min-width:0}
.ex-row .ex-body b{font-size:14px;font-weight:700;display:block}
.ex-row .ex-body span{font-size:12px;color:var(--ink2);font-weight:600}
.ex-row .ex-prescr{font-size:11.5px;color:var(--c);font-weight:700;margin-top:2px}
.ex-row .grp{width:24px;height:24px;border-radius:7px;background:var(--c-soft);color:var(--c);display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}

/* macro rings row (Dieta card) */
.macros{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.macro{text-align:center;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:11px 4px}
.macro .ml{font-size:10px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.macro b{display:block;font-size:17px;font-weight:800;margin-top:3px}
.macro small{font-size:10px;color:var(--dim);font-weight:600}

/* habit / supplement row */
.list-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.list-row .lr-body{flex:1;min-width:0}
.list-row .lr-body b{font-size:13.5px;font-weight:700;display:block}
.list-row .lr-body span{font-size:11.5px;color:var(--ink2);font-weight:600}
.list-row .tick{width:30px;height:30px;border-radius:9px;background:var(--card2);border:1px solid var(--line2);display:grid;place-items:center;cursor:pointer;color:var(--dim);font-weight:900;font-size:13px;flex:none;transition:all .15s var(--ease)}
.list-row.on .tick{background:var(--ok);color:#241807;border-color:transparent}

/* ==========================================================================
   BOTTOM NAV
   ========================================================================== */
/* ===== DOK WYNIESIONY (koncepcja #06): pływający frosted dok; aktywna ikona
   wyskakuje w wyniesiony crimson dysk z aureolą. Ikony WYPEŁNIANE (fill). ===== */
.nav{position:absolute;left:16px;right:16px;bottom:calc(2px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:stretch;justify-content:space-between;padding:0 6px;z-index:50;height:66px;
  background:rgba(238,241,249,.92);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(36,24,7,0.056);border-radius:24px;
  box-shadow:0 22px 44px -16px rgba(93,74,58,0.22),inset 0 1px 0 rgba(36,24,7,0.042)}
.nav a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-decoration:none;
  color:var(--dim);cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;
  transition:color .3s var(--ease)}
.nav a .ico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  transition:width .42s var(--ease),height .42s var(--ease),margin-top .42s var(--ease),
    background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.nav a svg{width:34px;height:34px;fill:currentColor;stroke:none}
.nav a .lbl{display:none}
/* zielona kropka „nieprzeczytane" na ikonie Czat (prawy górny róg ikony) */
.nav a .ico{position:relative}
.nav-dot{position:absolute;top:1px;right:1px;width:9px;height:9px;border-radius:50%;background:var(--c);
  box-shadow:0 0 7px var(--c);border:2px solid #eef1f9;z-index:3}
.nav-dot[hidden]{display:none}
.nav a.on{color:var(--ink)}
/* aktywna (nie-awatar): ikona wyskakuje w crimson dysk z dark-notch i poświatą */
.nav a.on .ico:not(.ava){width:56px;height:56px;border-radius:50%;color:var(--on-accent);margin-top:-34px;
  background:linear-gradient(140deg,var(--c1),var(--c3));border:5px solid #eef1f9;
  box-shadow:0 12px 26px -8px rgba(160,125,94,.9),0 0 0 1px rgba(36,24,7,0.056)}
.nav a.on .ico:not(.ava) svg{width:32px;height:32px}
/* Ja = avatar klienta; aktywne wynosi zdjęcie z crimson pierścieniem */
.nav a.nav-me .ava{width:38px;height:38px;border-radius:50%;background:var(--card3) center/cover no-repeat;
  border:1.5px solid var(--line2)}
.nav a.nav-me.on .ava{width:56px;height:56px;margin-top:-34px;border:3px solid var(--c);
  box-shadow:0 0 0 5px #eef1f9,0 12px 26px -8px rgba(160,125,94,.8)}
/* domyślnie ikonka człowieka; gdy klient ma zdjęcie → chowamy ikonkę, widać tło-zdjęcie */
.nav a.nav-me .ava svg{width:22px;height:22px;fill:var(--ink2)}
.nav a.nav-me.on .ava svg{width:30px;height:30px;fill:var(--ink)}
.nav a.nav-me .ava.has-photo svg{display:none}
/* PEDESTAŁ pod dokiem: SOLIDNE tło (zero „dziury"/przebijania napisów na dole),
   pełna szerokość, sięga 40px PONIŻEJ paska (przycięte przez .screen overflow). */
.nav::after{content:"";position:absolute;left:-16px;right:-16px;
  bottom:calc(-40px - env(safe-area-inset-bottom,0px));
  height:calc(100% + 110px + env(safe-area-inset-bottom,0px));
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,var(--bg) 36%,var(--bg) 100%)}
/* center floating action button */
.nav-fab{flex:0 0 auto;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;
  margin-top:-8px;background:linear-gradient(140deg,var(--c1),var(--c2));color:var(--on-accent);
  box-shadow:0 14px 28px -8px rgba(160,125,94,.85),inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .16s var(--ease)}
.nav-fab:active{transform:scale(.9)}
.nav-fab svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:2.5}
/* quick-action sheet rows */
.qa-row{display:flex;align-items:center;gap:14px;width:100%;padding:15px 14px;background:var(--card2);border:1px solid var(--line2);
  border-radius:var(--r-s);margin-bottom:10px;cursor:pointer;color:inherit;font-family:inherit;text-align:left;
  transition:border-color .15s var(--ease),transform .12s var(--ease)}
.qa-row:active{transform:scale(.985)}
.qa-row .qa-ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--c-soft)}
.qa-row .qa-ic svg{width:21px;height:21px;stroke:var(--c);fill:none;stroke-width:2}
.qa-row b{font-size:14.5px;font-weight:800;display:block}
.qa-row span{font-size:12px;color:var(--ink2);font-weight:600}

/* ==========================================================================
   MODAL / BOTTOM SHEET
   ========================================================================== */
.modal{position:absolute;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sheet{width:100%;max-height:88%;overflow-y:auto;background:var(--card);border-top-left-radius:var(--r);border-top-right-radius:var(--r);border:1px solid var(--line);border-bottom:none;padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.sheet::-webkit-scrollbar{display:none}
.sheet .grab{width:40px;height:4px;border-radius:99px;background:var(--line2);margin:6px auto 16px}
.sheet h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.sheet .sub{font-size:13px;color:var(--ink2);font-weight:600;margin-bottom:18px}

/* ==========================================================================
   GATE / SURVEY / WAITING  (later-phase roots, styled now for the shell)
   ========================================================================== */
.fs{position:absolute;inset:0;display:flex;flex-direction:column}
.fs .fs-hero{position:relative;flex:none;height:46%;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 22px}
.fs .fs-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.7) saturate(1.05);z-index:0}
.fs .fs-hero .ov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(238,241,249,.2),rgba(238,241,249,.95) 92%),linear-gradient(125deg,rgba(160,125,94,.45),transparent 65%)}
.fs .fs-hero>*{position:relative;z-index:2}
.fs .fs-body{flex:1;overflow-y:auto;padding:24px 22px calc(24px + env(safe-area-inset-bottom,0px))}
.fs .fs-body::-webkit-scrollbar{display:none}
.fs .mark{font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--on-accent);text-transform:uppercase;opacity:.9}
.fs .fs-hero h1{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--on-accent);margin-top:8px;line-height:1.08}
.fs .fs-hero p{font-size:13.5px;color:var(--on-accent);opacity:.85;font-weight:600;margin-top:8px}

/* survey progress bar */
.progress{height:6px;border-radius:99px;background:var(--card2);overflow:hidden;margin-bottom:18px}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--c1),var(--c2));border-radius:99px;transition:width .3s var(--ease)}

/* form field */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);color:var(--ink);font-size:16px;font-weight:600;padding:14px;font-family:inherit}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--c)}
.field input::placeholder{color:var(--dim)}

/* notice (PAR-Q amber etc.) */
.notice{display:flex;gap:10px;padding:13px 14px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;line-height:1.4}
.notice.amber{background:rgba(240,169,59,.12);border:1px solid rgba(240,169,59,.4);color:var(--warn)}
.notice.crimson{background:var(--c-soft);border:1px solid var(--c);color:var(--c)}

/* empty / locked state (Plan/Czat/Ja before active, future days) */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 30px;gap:14px;color:var(--ink2)}
.empty .ei{width:64px;height:64px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center}
.empty .ei svg{width:30px;height:30px;stroke:var(--dim);fill:none;stroke-width:1.8}
.empty h3{font-size:17px;font-weight:800;color:var(--ink)}
.empty p{font-size:13px;font-weight:600;max-width:240px;line-height:1.45}

/* ==========================================================================
   DEMO ENTRY OVERLAY
   ========================================================================== */
.demo{position:absolute;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:34px;
  background:radial-gradient(120% 60% at 50% -10%,rgba(160,125,94,.22),transparent 60%),var(--bg)}
.demo .logo{font-size:13px;font-weight:800;letter-spacing:.28em;color:var(--c);text-transform:uppercase;margin-bottom:4px}
.demo h1{font-size:30px;font-weight:800;letter-spacing:-.02em;text-align:center;line-height:1.1}
.demo p{font-size:13.5px;color:var(--ink2);font-weight:600;text-align:center;max-width:300px;margin-bottom:14px}
.demo .pick{width:100%;max-width:340px;display:flex;flex-direction:column;gap:11px}
.demo .pick button{display:flex;align-items:center;gap:14px;text-align:left;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-s);padding:15px 16px;cursor:pointer;transition:all .15s var(--ease);color:inherit;font-family:inherit}
.demo .pick button:hover{border-color:var(--c);transform:translateY(-1px)}
.demo .pick button:active{transform:scale(.98)}
.demo .pick .pa{width:46px;height:46px;border-radius:13px;background:linear-gradient(140deg,var(--c1),var(--c3));display:grid;place-items:center;font-weight:800;color:var(--on-accent);font-size:15px;flex:none}
.demo .pick .pa.coach{background:linear-gradient(140deg,#c9cfdd,#e9ecf5)}
.demo .pick .pt{flex:1;min-width:0}
.demo .pick .pt b{font-size:15px;font-weight:800;display:block}
.demo .pick .pt span{font-size:12px;color:var(--ink2);font-weight:600}
.demo .pick button[disabled]{opacity:.45;pointer-events:none}
.demo .pick .soon{font-size:9px;background:var(--card3);color:var(--dim);padding:3px 8px;border-radius:99px;font-weight:800;letter-spacing:.04em}

/* ==========================================================================
   ONBOARDING — Logowanie / Rejestracja (#auth-body)
   ========================================================================== */
#view-auth .scroll.bleed{overflow:hidden}
#auth-body.fs{height:100%;min-height:0;overflow:hidden}
.auth-wrap{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:420px;margin:0 auto;padding:52px 26px calc(36px + env(safe-area-inset-bottom,0px))}
.auth-wrap::-webkit-scrollbar{display:none}
.auth-logo{font-size:13px;font-weight:800;letter-spacing:.28em;color:var(--c);text-transform:uppercase;margin-bottom:14px}
.auth-h1{font-size:28px;font-weight:800;letter-spacing:0;line-height:1.08}
.auth-sub{font-size:13.5px;color:var(--ink2);font-weight:600;line-height:1.5;margin:9px 0 22px;max-width:340px}
.auth-toggle{margin-top:16px;font-size:13px;font-weight:600;color:var(--ink2);text-align:center}
.auth-toggle a{color:var(--c);font-weight:800;cursor:pointer;text-decoration:none}
.auth-divider{display:flex;align-items:center;gap:12px;margin:26px 0 16px;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line2)}

/* --- ekran powitalny (welcome): pełne zdjęcie + 2 pigułki (styl topowych apek) --- */
.auth-welcome{position:absolute;inset:0;overflow:hidden}
.aw-bg{position:absolute;inset:0;z-index:0;background:#000 url(../img/auth/generated/metoda13-quote-hero-centered.png) center center/cover no-repeat}
.aw-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(238,241,249,.5) 0%,rgba(238,241,249,.05) 30%,rgba(238,241,249,.6) 64%,rgba(238,241,249,.97) 100%)}
.aw-logo{position:absolute;top:calc(env(safe-area-inset-top,0px) + 58px);left:0;right:0;z-index:2;text-align:center;
  font-size:15.6px;font-weight:800;letter-spacing:.32em;color:#fff;text-transform:uppercase}
.aw-logo b{color:var(--c)}
.aw-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:13px;
  padding:0 26px calc(34px + env(safe-area-inset-bottom,0px))}
.aw-title{font-size:34px;font-weight:800;letter-spacing:0;line-height:1.04;color:#fff}
.aw-sub{max-width:100%;font-size:14px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.72);margin-bottom:6px;overflow-wrap:break-word}
.auth-glass{background:rgba(36,24,7,0.07);border:1px solid rgba(255,255,255,.24);color:#fff;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.auth-glass:active{background:rgba(255,255,255,.16)}
.aw-legal{font-size:10.5px;line-height:1.5;text-align:center;color:rgba(255,255,255,.5);margin-top:4px}
.aw-legal b{color:rgba(255,255,255,.78);font-weight:700}

/* --- formularz (login/register): pasek zdjęcia u góry + pola-pigułki --- */
.af-hero{position:relative;flex:none;height:36%;min-height:260px;max-height:340px;overflow:hidden}
.af-hero .bg{position:absolute;inset:0;background:#000 url(../img/auth/form-gym.jpg) center/cover no-repeat}
/* miękki, długi zanik zdjęcia w czerń od dołu (bez twardej linii) + delikatny limonkowy poblask spod zdjęcia */
.af-hero .ov{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(238,241,249,.45) 0%,rgba(238,241,249,0) 24%,rgba(238,241,249,.08) 46%,rgba(238,241,249,.5) 70%,rgba(238,241,249,.85) 87%,var(--bg) 100%),
    radial-gradient(120% 42% at 50% 102%,rgba(160,125,94,.14),transparent 60%)}
.af-back{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:16px;z-index:3;
  width:42px;height:42px;border-radius:var(--r-pill);cursor:pointer;color:#fff;
  background:rgba(36,24,7,0.084);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center}
.af-back svg{width:20px;height:20px;fill:none;stroke:currentColor}
.af-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  margin-top:-28px;position:relative;z-index:2;
  padding:0 26px calc(18px + env(safe-area-inset-bottom,0px))}
.af-body::-webkit-scrollbar{display:none}
.af-head{display:flex;flex-direction:column;gap:7px}
.af-form-group{display:flex;flex-direction:column;gap:10px}
/* ekran „Sprawdź skrzynkę" (weryfikacja e-maila) — w stylu panelu logowania */
.notice.ve-ok{border:1px solid var(--c,#a07d5e);background:var(--c-soft,rgba(160,125,94,.14));color:var(--c,#a07d5e);font-weight:700}
.ve-steps{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:2px 16px}
.ve-step{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.ve-step:first-child{border-top:none}
.ve-step .n{width:27px;height:27px;flex:none;border-radius:50%;background:var(--c-soft,rgba(160,125,94,.14));color:var(--c,#a07d5e);display:grid;place-items:center;font-size:12.5px;font-weight:800}
.ve-step .tx{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
/* okienko „Sprawdź skrzynkę" po wysłaniu linku (zmiana hasła / e-maila) */
.ms-sheet{text-align:center}
.ms-sheet .sub{margin-bottom:20px;max-width:330px;margin-left:auto;margin-right:auto;line-height:1.5}
.ms-badge{width:60px;height:60px;border-radius:18px;margin:4px auto 16px;display:grid;place-items:center;background:var(--c-soft,rgba(160,125,94,.14));border:1px solid rgba(160,125,94,.3)}
.ms-badge svg{width:30px;height:30px;stroke:var(--c,#a07d5e);fill:none;stroke-width:2}
.af-body .auth-logo{margin-bottom:0}
.af-body .auth-sub{margin:2px 0 0}
.af-fields{display:flex;flex-direction:column;gap:11px;margin-top:0}
.af-input{display:flex;align-items:center;gap:12px;height:54px;border-radius:var(--r-pill);
  background:var(--card2);border:1px solid var(--line2);padding:0 18px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.af-input .af-ic{width:18px;height:18px;flex:none;color:var(--ink2);opacity:.75}
.af-input input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:600}
.af-input input::placeholder{color:var(--dim);font-weight:500}
.af-input:focus-within{border-color:var(--c);box-shadow:0 0 0 3px var(--c-soft)}
#auth-body.auth-register .af-hero{height:28%;min-height:190px;max-height:250px}
#auth-body.auth-register .af-body{gap:8px;margin-top:-18px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
#auth-body.auth-register .af-head{gap:5px}
#auth-body.auth-register .auth-logo{font-size:11px;margin-bottom:0}
#auth-body.auth-register .auth-h1{font-size:25px}
#auth-body.auth-register .auth-sub{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#auth-body.auth-register .af-form-group{gap:8px}
#auth-body.auth-register .af-fields{gap:8px}
#auth-body.auth-register .af-input{height:48px}
#auth-body.auth-register .auth-divider{margin:8px 0 6px}
#auth-body.auth-register .auth-toggle{margin-top:6px}

@media(max-height:760px){
  .af-hero{height:31%;min-height:210px;max-height:270px}
  .af-body{gap:10px;margin-top:-22px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .auth-h1{font-size:26px}
  .auth-sub{font-size:13px;line-height:1.42}
  .af-fields{gap:9px}
  .af-input{height:50px}
  .auth-divider{margin:10px 0 8px}
  .auth-toggle{margin-top:8px}
  #auth-body.auth-register .af-hero{height:24%;min-height:160px;max-height:210px}
  #auth-body.auth-register .auth-h1{font-size:23px}
  #auth-body.auth-register .auth-sub{display:none}
  #auth-body.auth-register .af-input{height:46px}
  #auth-body.auth-register .btn{min-height:46px;padding-top:12px;padding-bottom:12px}
}

/* WEB / desktop (≥601px, makieta „telefon na czerni"): większe zdjęcie hero +
   napisy (METODA 13 / Zaloguj się) dosunięte w dół do formularza, by zlikwidować
   pustą przestrzeń środkową. Na telefonie (≤600px) układ zostaje bez zmian.
   Strzałka wstecz ukryta — na desktopie atrapa zegara siedzi w tym samym rogu i
   strzałka ją zasłaniała (na telefonie atrapy zegara nie ma, więc tam zostaje). */
@media(min-width:601px){
  .af-back{display:none}
  .af-hero{height:48%;max-height:none}
  .af-body{justify-content:flex-end;gap:20px}
  #auth-body.auth-register .af-hero{height:40%;max-height:none}
}

/* ==========================================================================
   ONBOARDING — ekrany cyklu (pending / waiting / planready)
   ========================================================================== */
.ob{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:70px 24px calc(40px + env(safe-area-inset-bottom,0px));
  /* wariant 10 „Minimal premium": subtelna crimsonowa poświata u góry (mniej pustki) */
  background:radial-gradient(120% 38% at 50% -10%,rgba(160,125,94,.11),transparent 56%)}
.ob::-webkit-scrollbar{display:none}
/* odznaka: minimal — przezroczysta, cienka crimsonowa ramka, bez glow */
.ob-badge{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:28px;margin-bottom:24px;
  background:transparent;border:1px solid rgba(160,125,94,.35);box-shadow:none}
.ob-badge.neutral{background:var(--card);border-color:var(--line2);box-shadow:none}
/* ikona „ładowania" (klepsydra) — zielona, w kolorze akcentu, z delikatnym pulsem */
.ob-badge.loading{color:var(--c);border-color:rgba(160,125,94,.4);
  background:radial-gradient(120% 120% at 50% 20%,rgba(160,125,94,.12),transparent 70%)}
.ob-badge.loading svg{width:32px;height:32px;flex:none;display:block;animation:ob-pulse 2.2s ease-in-out infinite}
@keyframes ob-pulse{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.55;transform:translateY(1px)}}
/* odznaka „akcent" (np. plan gotowy) — zielona ikona, bez animacji */
.ob-badge.accent{color:var(--c);border-color:rgba(160,125,94,.4);
  background:radial-gradient(120% 120% at 50% 20%,rgba(160,125,94,.12),transparent 70%)}
.ob-badge.accent svg{flex:none;display:block}
.ob-h1{font-size:25px;font-weight:700;letter-spacing:-.025em;line-height:1.14}
/* cienka crimsonowa kreska pod tytułem (sygnatura wariantu 10) */
.ob-h1::after{content:"";display:block;width:38px;height:1px;margin:18px auto 0;background:rgba(160,125,94,.55)}
.ob-sub{font-size:13.5px;color:var(--ink2);font-weight:600;line-height:1.5;margin-top:16px;max-width:340px}
.ob-status{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:9px 15px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;background:var(--card);border:1px solid var(--line2);color:var(--ink2)}
.ob-status .dot{width:7px;height:7px;border-radius:50%;background:var(--ink2)}
/* status „w toku" — crimson zamiast pomarańczu: spokojna pigułka + świecąca kropka */
.ob-status.live{background:var(--card2);border-color:var(--line2);color:var(--ink)}
.ob-status.live .dot{background:var(--c);box-shadow:0 0 8px 1px rgba(160,125,94,.7)}
.ob-status.amber{background:rgba(240,169,59,.12);border-color:rgba(240,169,59,.4);color:var(--warn)}
.ob-status.amber .dot{background:var(--warn)}
.ob-card{width:100%;max-width:360px;margin-top:22px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:16px;text-align:left}
.ob-card-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:12px}
.ob-steps{display:flex;flex-direction:column;gap:10px}
.ob-step{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.ob-step .n{width:26px;height:26px;border-radius:8px;background:var(--card2);border:1px solid var(--line2);
  display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;color:var(--dim)}
.ob-step.now{color:var(--ink)} .ob-step.now .n{background:var(--c-soft);border-color:var(--c);color:var(--c)}
.ob-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-kv-i{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px 12px}
.ob-kv-i .k{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.ob-kv-i .v{font-size:13.5px;font-weight:700;margin-top:3px}
/* timeline „Co dla Ciebie przygotowuję" (ekran czekania na plan) */
.ob-tl{position:relative;padding-left:22px}
.ob-tl::before{content:"";position:absolute;left:5px;top:7px;bottom:7px;width:2px;background:var(--line2)}
.ob-tl-node{position:relative;padding:0 0 16px}
.ob-tl-node:last-child{padding-bottom:0}
/* wszystkie kropki jednakowe, crimson */
.ob-tl-node::before{content:"";position:absolute;left:-21px;top:3px;width:11px;height:11px;border-radius:50%;
  background:var(--c);border:2px solid var(--c);box-sizing:border-box}
.ob-tl-node .k{font-size:13.5px;font-weight:800;color:var(--ink)}
.ob-tl-node .v{font-size:12px;font-weight:600;color:var(--ink2);margin-top:3px;line-height:1.45}
.ob-sumlist{width:100%;max-width:360px;margin-top:22px;display:flex;flex-direction:column;gap:11px}
.ob-sumcard{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:15px;text-align:left}
/* ikony kart neutralne (białe) na ciemnym boxie — jak ikony w dolnym pasku, nie jaskrawa zieleń */
.ob-sum-ic{width:42px;height:42px;border-radius:12px;background:var(--card2);border:1px solid var(--line2);
  display:grid;place-items:center;font-size:20px;flex:none;color:var(--ink)}
.ob-sum-ic svg{width:22px;height:22px;flex:none;display:block}
.ob-sum-b{flex:1;min-width:0}
.ob-sum-b b{font-size:14.5px;font-weight:800;display:block}
.ob-sum-b span{font-size:12.5px;color:var(--ink2);font-weight:600;display:block;margin-top:2px}
.ob-actions{width:100%;max-width:360px;margin-top:26px}
.ob-logout{margin-top:16px;font-size:13px;font-weight:700;color:var(--dim);cursor:pointer;text-decoration:none}

/* ==========================================================================
   ANKIETA WSTĘPNA (#survey-body) — top / scrollable mid / sticky nav
   ========================================================================== */
.svy-top{flex:none;padding:var(--scroll-top) 22px 14px}
.svy-eye{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.svy-h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.svy-mid{flex:1;overflow-y:auto;padding:8px 22px 18px}
.svy-mid::-webkit-scrollbar{display:none}
.svy-nav{flex:none;display:flex;gap:11px;padding:12px 22px calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:rgba(238,241,249,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.svy-nav .btn{flex:1}
.svy-q{margin-bottom:18px}
.svy-lab{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px;line-height:1.35}
.svy-lab .req{color:var(--c)}
.svy-q.miss .svy-lab{color:var(--c)}
.svy-q input,.svy-q textarea{width:100%;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);
  color:var(--ink);font-size:16px;font-weight:600;padding:13px;font-family:inherit}
.svy-q input:focus,.svy-q textarea:focus{outline:none;border-color:var(--c)}
.svy-q textarea{resize:vertical;min-height:84px}
.svy-q.miss input,.svy-q.miss textarea,.svy-q.miss .consent-row{border-color:var(--c)}
/* zdjęcie profilowe w ankiecie (sekcja 1) */
.svy-photo{display:flex;align-items:center;gap:15px}
.svy-ava{width:82px;height:82px;border-radius:50%;flex:none;border:1.5px dashed var(--line2);background:var(--card2);
  background-size:cover;background-position:center;display:grid;place-items:center;cursor:pointer;overflow:hidden;
  padding:0;transition:border-color .15s var(--ease)}
.svy-ava.has{border-style:solid;border-color:var(--c)}
.svy-ava svg{width:30px;height:30px;stroke:var(--ink2);fill:none;stroke-width:1.8}
.svy-ava .m13-spin{border-color:rgba(160,125,94,.3);border-top-color:var(--c)}
.svy-photo-rt{flex:1;min-width:0}
.svy-photo-hint{font-size:12.5px;color:var(--ink2);font-weight:600;line-height:1.45}
.svy-photo-btn{margin-top:9px;background:var(--card2);border:1px solid var(--line2);color:var(--ink);
  font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;font-family:inherit}
.svy-photo-btn:active{transform:scale(.97)}
/* kafelki celu (wariant 03): 2 kolumny + „Inne" na całą szerokość + rozwijane pole */
.svy-goal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svy-goalopt{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--card2);border:1px solid var(--line2);
  border-radius:var(--r-s);padding:15px 14px;cursor:pointer;color:var(--ink);font-family:inherit;text-align:left;transition:all .15s var(--ease)}
.svy-goalopt svg{width:24px;height:24px;stroke:var(--ink2);fill:none}
.svy-goalopt .t{font-size:13px;font-weight:700;line-height:1.25}
.svy-goalopt.on{background:linear-gradient(150deg,var(--c1),var(--c2));border-color:transparent;color:var(--on-accent);box-shadow:0 12px 26px -14px rgba(160,125,94,.8)}
.svy-goalopt.on svg{stroke:#fff}
.svy-goalopt.wide{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:center;gap:10px}
.svy-goal-other{grid-column:1 / -1}
.svy-goal-other input{width:100%;background:var(--card2);border:1px solid var(--c);border-radius:var(--r-sm);
  color:var(--ink);font-size:16px;font-weight:600;padding:13px;font-family:inherit}
.svy-goal-other input:focus{outline:none}
/* zdjęcia sylwetki (start): 4 kafle przód/tył/lewo/prawo w siatce 2×2, pionowe 9:16 */
.svy-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svy-shot{position:relative;aspect-ratio:9/16;border-radius:var(--r-sm);border:1.5px dashed var(--line2);background:var(--card2);
  background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;padding:0}
.svy-shot.has{border-style:solid;border-color:var(--c)}
.svy-shot-plus{font-size:26px;font-weight:300;color:var(--ink2);line-height:1}
.svy-shot-cap{position:absolute;left:0;right:0;bottom:0;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:5px 0;text-align:center}
.svy-shot .m13-spin{border-color:rgba(160,125,94,.3);border-top-color:var(--c)}
/* spinner wczytywania zapisanych odpowiedzi ankiety */
.svy-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:90px 20px;color:var(--ink2)}
.svy-loading .m13-spin{width:26px;height:26px;border-color:rgba(160,125,94,.25);border-top-color:var(--c)}
.svy-loading-t{font-size:13px;font-weight:600}
/* kadrownik zdjęć (window.M13Crop) */
.crop-mask{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.82);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s var(--ease)}
.crop-mask.show{opacity:1}
.crop-box{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 30px 70px -24px rgba(93,74,58,0.22)}
.crop-h{font-size:16px;font-weight:800;color:var(--ink);align-self:flex-start}
.crop-stage{width:100%;display:flex;justify-content:center}
.crop-canvas{max-width:280px;width:100%;height:auto;border-radius:12px;touch-action:none;cursor:grab;background:#000}
.crop-zoom{width:100%;accent-color:var(--c)}
.crop-hint{font-size:11.5px;font-weight:600;color:var(--dim);text-align:center;margin-top:-2px}
.crop-actions{display:flex;gap:10px;width:100%}
.crop-btn{flex:1;border:none;font-family:inherit;font-weight:800;font-size:15px;padding:13px;border-radius:var(--r-pill);cursor:pointer}
.crop-btn.ghost{background:var(--card2);border:1px solid var(--line2);color:var(--ink)}
.crop-btn.primary{background:linear-gradient(140deg,var(--c1),var(--c2));color:var(--on-accent);box-shadow:0 12px 26px -14px rgba(160,125,94,.8)}
.svy-info{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:15px 16px;margin-bottom:18px}
.svy-info-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:11px}
.svy-info-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.svy-info-list li{position:relative;padding-left:18px;font-size:12.5px;font-weight:600;color:var(--ink2);line-height:1.45}
.svy-info-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--c)}
.consent-row{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:var(--card2);
  border:1px solid var(--line2);border-radius:var(--r-sm);padding:13px 14px;cursor:pointer;color:inherit;font-family:inherit}
.consent-row.on{border-color:var(--c);background:var(--c-soft)}
.consent-row .cbox{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line2);display:grid;place-items:center;
  flex:none;font-weight:900;font-size:13px;color:var(--on-accent)}
.consent-row.on .cbox{background:var(--c);border-color:transparent}
.consent-row .ctxt{font-size:12.5px;font-weight:600;color:var(--ink2);line-height:1.46}
.consent-row.on .ctxt{color:var(--ink)}

/* ==========================================================================
   BANER DANIELA (window.Cheer) — wyskakujące powiadomienie z awatarem Daniela
   ========================================================================== */
.cheer{position:absolute;top:calc(54px + 8px);left:14px;right:14px;z-index:130;
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:18px;cursor:pointer;
  background:rgba(238,241,249,.93);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--line2);
  box-shadow:0 18px 46px -14px rgba(93,74,58,0.22),0 0 0 1px rgba(160,125,94,.28),0 0 26px -6px rgba(160,125,94,.5);
  transform:translateY(-170%);opacity:0;transition:transform .42s var(--ease),opacity .42s var(--ease)}
.cheer.show{transform:translateY(0);opacity:1}
.cheer .cheer-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--c1),var(--c3)) center/cover;color:var(--on-accent);font-weight:800;font-size:14px;
  box-shadow:0 6px 16px -6px rgba(160,125,94,.8)}
.cheer .cheer-body{flex:1;min-width:0}
.cheer .cheer-body b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.cheer .cheer-body span{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);line-height:1.35;margin-top:1px}
.cheer .cheer-x{flex:none;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;
  background:var(--card3);color:var(--dim);font-size:11px;font-weight:800;font-family:inherit}

/* ===================== LEKI (medications tracker) ===================== */
/* „wzięte" = crimson (NIGDY zieleń, zgodnie z twardą regułą designu) */
.med-next{display:flex;align-items:center;gap:13px;padding:15px 16px;margin:14px 0 4px;
  background:linear-gradient(135deg,rgba(160,125,94,.14),rgba(160,125,94,.04));
  border:1px solid var(--c);border-radius:var(--r-s)}
.med-next .mn-ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--c-soft);
  border:1px solid var(--c);display:grid;place-items:center}
.med-next .mn-ic svg{width:21px;height:21px;stroke:var(--c);fill:none;stroke-width:1.9}
.med-next .mn-body{flex:1;min-width:0}
.med-next .mn-k{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c)}
.med-next .mn-name{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.med-next .mn-when{font-size:12.5px;font-weight:600;color:var(--ink2);margin-top:2px;font-variant-numeric:tabular-nums}
.med-next .mn-eta{flex:none;text-align:right;min-width:54px}
.med-next .mn-eta b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.med-next .mn-eta span{display:block;font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}

/* dawka do potwierdzenia (ekran Leki + karta Dziś) */
.med-dose-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.med-dose-row:last-child{border-bottom:none}
.med-dose-ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--card2);border:1px solid var(--line2);display:grid;place-items:center}
.med-dose-ic svg{width:19px;height:19px;stroke:var(--ink2);fill:none;stroke-width:1.8}
.med-dose-row.taken .med-dose-ic{background:var(--c-soft);border-color:var(--c)}
.med-dose-row.taken .med-dose-ic svg{stroke:var(--c)}
.med-dose-b{flex:1;min-width:0}
.med-dose-b b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.med-dose-b span{display:block;font-size:11.5px;font-weight:600;color:var(--ink2);margin-top:2px;font-variant-numeric:tabular-nums}
.med-dose-b .med-site{color:var(--c);font-weight:700}
.med-dose-row.taken .med-dose-b b{color:var(--ink2)}
.med-acts{flex:none;display:flex;align-items:center;gap:7px}
.med-take{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--card2);
  color:var(--dim);display:grid;place-items:center;cursor:pointer;font-family:inherit;
  transition:transform .15s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.med-take svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4}
.med-take:active{transform:scale(.9)}
.med-dose-row.taken .med-take{background:var(--c);border-color:transparent;color:var(--on-accent)}
.med-skip{height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:transparent;
  color:var(--dim);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.med-dose-row.skipped{opacity:.5}
.med-dose-row.skipped .med-skip{background:var(--card3);color:var(--ink2);border-color:transparent}
.med-done-all{display:flex;align-items:center;gap:9px;padding:6px 2px;color:var(--ink2);font-size:13px;font-weight:600;line-height:1.4}
.med-done-all svg{flex:none;width:20px;height:20px;stroke:var(--c);fill:none;stroke-width:2}

/* lista leków */
.med-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.med-item:last-child{border-bottom:none}
.med-item-tap{flex:1;min-width:0;display:flex;align-items:center;gap:12px;cursor:pointer;background:none;border:none;padding:0;text-align:left;font-family:inherit;color:inherit}
.med-item-ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--card2);border:1px solid var(--line2);display:grid;place-items:center}
.med-item-ic svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.8}
.med-item-b{flex:1;min-width:0}
.med-item-b b{display:block;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.med-item-b span{display:block;font-size:11.5px;font-weight:600;color:var(--ink2);margin-top:2px;font-variant-numeric:tabular-nums}
.med-item.off .med-item-b b{color:var(--ink2)}
.med-trash{flex:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line2);background:var(--card2);
  color:var(--dim);display:grid;place-items:center;cursor:pointer;font-family:inherit;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.med-trash svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.med-trash:active{color:var(--danger);border-color:var(--danger);background:rgba(160,125,94,.08)}
.med-sw{flex:none;width:46px;height:27px;border-radius:var(--r-pill);background:var(--card3);border:1px solid var(--line2);position:relative;cursor:pointer;padding:0;transition:background .2s var(--ease),border-color .2s var(--ease)}
.med-sw .knob{position:absolute;top:50%;left:3px;transform:translateY(-50%);width:21px;height:21px;border-radius:50%;background:var(--ink2);transition:left .2s var(--ease),background .2s var(--ease)}
.med-sw.on{background:var(--c);border-color:transparent}
.med-sw.on .knob{left:22px;background:#fff}
.med-add{width:100%;margin-top:14px;height:48px;border-radius:var(--r-pill);border:1px dashed var(--line2);
  background:var(--card2);color:var(--ink);font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .2s var(--ease)}
.med-add:active{background:var(--card3)}
.med-add svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}

/* historia */
.med-adh{display:flex;align-items:flex-end;gap:10px;margin-bottom:15px}
.med-adh b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.med-adh span{font-size:12px;font-weight:600;color:var(--ink2);padding-bottom:3px}
.med-mlabel{font-size:12px;font-weight:800;color:var(--ink2);text-transform:capitalize;margin-bottom:9px}
/* grid-auto-rows:52px + BEZ aspect-ratio na komórce: aspect-ratio+auto-rows dawało
   quirk (pierwszy wiersz dni liczył wysokość ze złej szerokości → 120px → DZIURA pod
   1. tygodniem). Stała wysokość wiersza = równe wiersze, zero dziury. grid-template-rows:auto
   trzyma niski wiersz nagłówków dni (PN/WT…), grid-auto-rows dotyka tylko wierszy dni. */
.med-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:52px;gap:5px}
.med-cal .dow{text-align:center;font-size:9.5px;font-weight:800;color:var(--dim);text-transform:uppercase;padding-bottom:2px}
/* kalendarz = heatmapa: kafel zapala się DOPIERO po odhaczeniu, że wzięte (numer zawsze widoczny) */
.med-cell{min-width:0;border-radius:8px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.med-cell.empty{background:transparent}
/* wzięte = pełny crimson, numer biały */
.med-cell.has-taken{background:var(--c);color:var(--on-accent);font-weight:800}
/* pominięte = bursztynowe tło */
.med-cell.has-skip{background:rgba(245,158,11,.18);color:var(--warn)}
/* dziś = obwódka crimson do wewnątrz */
.med-cell.today{outline:2px solid var(--c);outline-offset:-2px}
.med-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.med-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--dim)}
.med-legend i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.med-cal-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink2)}
.med-cal-foot b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

/* sheet (dodaj / edytuj lek) */
.medsheet{position:fixed;inset:0;z-index:4200;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,4,6,0);transition:background .22s ease}
.medsheet.on{background:rgba(4,4,6,.72)}
.medsheet-card{position:relative;width:100%;max-width:480px;max-height:92%;overflow:auto;background:#f6f7fb;
  border:1px solid var(--line2);border-top-left-radius:22px;border-top-right-radius:22px;
  padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px));transform:translateY(18px);opacity:0;
  transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease;-webkit-overflow-scrolling:touch}
.medsheet.on .medsheet-card{transform:none;opacity:1}
.medsheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.medsheet-h b{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.medsheet-x{flex:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line2);background:var(--card2);color:var(--ink2);font-size:16px;font-weight:800;cursor:pointer;font-family:inherit}
.med-field{margin-top:15px}
.med-field>label{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.med-in{width:100%;box-sizing:border-box;background:var(--card2);border:1px solid var(--line2);border-radius:12px;color:var(--ink);font-family:inherit;font-size:16px;font-weight:600;padding:12px 13px}
.med-in:focus{outline:none;border-color:var(--c)}
.med-in.err{border-color:var(--c);background:var(--c-soft)}
textarea.med-in{resize:none;min-height:62px;line-height:1.4}
.med-seg{display:flex;gap:6px;flex-wrap:wrap}
.med-seg button{flex:1 1 0;min-width:64px;padding:10px 6px;border-radius:11px;border:1px solid var(--line2);background:var(--card2);color:var(--ink2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.med-seg button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.med-seg button.on{background:var(--c-soft);border-color:var(--c);color:var(--c)}
.med-days{display:flex;gap:6px;flex-wrap:wrap}
.med-day{width:40px;height:40px;border-radius:11px;border:1px solid var(--line2);background:var(--card2);color:var(--ink2);font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.med-day.on{background:var(--c-soft);border-color:var(--c);color:var(--c)}
.med-interval{display:flex;align-items:center;gap:10px}
.med-interval input{width:80px;text-align:center}
.med-interval span{font-size:13.5px;font-weight:600;color:var(--ink2)}
.med-time-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.med-time-row input{flex:1}
.med-time-x{flex:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line2);background:var(--card2);color:var(--dim);font-size:16px;font-weight:800;cursor:pointer;font-family:inherit}
.med-add-time{background:none;border:none;color:var(--c);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;padding:4px 0}
.med-row-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px}
.med-row-line .med-rl-txt b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.med-row-line .med-rl-txt span{display:block;font-size:11.5px;font-weight:600;color:var(--ink2);margin-top:2px;max-width:230px;line-height:1.35}
.medsheet-acts{display:flex;gap:10px;margin-top:22px}
.medsheet-acts .ghost{flex:1;height:50px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--card2);color:var(--ink);font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:transform .15s var(--ease)}
.medsheet-acts .save{flex:2;height:50px;border-radius:var(--r-pill);border:none;background:var(--c);color:var(--on-accent);font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:transform .15s var(--ease)}
.medsheet-acts .save:active,.medsheet-acts .ghost:active{transform:scale(.98)}
.med-del{display:block;width:100%;margin-top:14px;background:none;border:none;color:var(--danger);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;padding:6px 0;text-align:center}
.med-empty{text-align:center;padding:18px 8px;color:var(--ink2);font-size:13px;font-weight:600;line-height:1.5}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── szkielet ładowania klienta (render-gating: ekran ładowania → wszystko naraz) ── */
.sk{position:relative;overflow:hidden;background:var(--card2,#e9ecf5)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(36,24,7,0.035),transparent);animation:sksh 1.15s infinite}
@keyframes sksh{to{transform:translateX(100%)}}
.sk-wrap{padding:16px 16px 0;animation:skfade .2s ease}
@keyframes skfade{from{opacity:.45}to{opacity:1}}

/* ===== Zakładka Trening: czysty nagłówek strony (jak „Centrum") ===== */
.tr-pagehead{padding:6px 2px 2px;margin-bottom:4px}
.tph-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tph-l{min-width:0}
.tph-eye{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:6px}
.tph-title{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.tph-chips{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.tph-chip{font-size:11.5px;font-weight:800;padding:7px 12px;border-radius:99px;border:1px solid var(--line2);background:var(--card2);color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.tph-chip.acc{border-color:rgba(160,125,94,.4);color:var(--c);background:var(--c-soft,rgba(160,125,94,.12))}

/* ==========================================================================
   BODY BALANCE · LATTE (styl 3, zatwierdzony 2026-10-13)
   Biel ORION #eef1f9 + neumorfizm (#c6cbde/#fff) + gradient latte.
   Ten blok nadpisuje elementy, które w Metodzie 13 były projektowane pod czerń.
   ========================================================================== */
.hero{border:0;background:linear-gradient(135deg,#d2b393 0%,#b4936f 55%,#8d7966 100%);box-shadow:var(--raise)}
.hero .bg{left:36%;filter:none;background-position:center 18%}
.hero .bg.no-photo{left:0}
.hero .ov,.hero.rest .ov{background:linear-gradient(90deg,#b4936f 34%,rgba(180,147,111,0) 68%),linear-gradient(0deg,rgba(93,74,58,.75) 0%,rgba(93,74,58,0) 46%)}
.hero.rest .bg{filter:none}
.hpanel{background:none}
.hpanel-link{color:#fff}
.hname .he{color:rgba(255,255,255,.86)}
.hpanel-chev{border-color:rgba(255,255,255,.55)}

/* --- ekran powitalny: zdjęcie Żanety u góry przechodzące w biel ORION --- */
.aw-bg{background:#eef1f9 url(../img/auth/bb-welcome.jpg) center 12%/cover no-repeat;bottom:30%}
.aw-scrim{background:linear-gradient(180deg,rgba(238,241,249,.0) 0%,rgba(238,241,249,0) 46%,rgba(238,241,249,.75) 64%,#eef1f9 72%,#eef1f9 100%)}
.aw-logo{color:#241807;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;letter-spacing:.34em}
.aw-logo::before{content:"";width:58px;height:58px;border-radius:15px;background:url(../img/icon-192-bb.png) center/cover;box-shadow:0 10px 24px -10px rgba(93,74,58,.55)}
.aw-logo b{color:#241807}
.aw-title{color:#241807;font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:36px;letter-spacing:-.01em}
.aw-sub{color:#76675a}
.auth-glass{background:var(--bg);border:0;color:#241807;box-shadow:var(--raise);-webkit-backdrop-filter:none;backdrop-filter:none}
.auth-glass:active{background:var(--bg);box-shadow:var(--press)}
.aw-legal{color:#76675a}.aw-legal b{color:#76675a}
.af-hero .bg{background:#eef1f9 url(../img/auth/bb-form.jpg) center 22%/cover no-repeat}
.af-hero .ov{background:linear-gradient(180deg,rgba(238,241,249,0) 0%,rgba(238,241,249,0) 55%,rgba(238,241,249,.8) 85%,var(--bg) 100%)}
.af-back{color:#241807;background:rgba(238,241,249,.85);border:0;box-shadow:var(--raise-s)}
.aw-logo{display:block}
.aw-logo::before{display:block;margin:0 auto 12px}
.aw-bg{top:150px;background-position:center 8%}
.aw-scrim{background:linear-gradient(180deg,#eef1f9 0%,#eef1f9 15%,rgba(238,241,249,0) 26%,rgba(238,241,249,0) 46%,rgba(238,241,249,.75) 64%,#eef1f9 72%,#eef1f9 100%)}
/* powitanie: szara ściana ze zdjęcia dociągnięta do samej góry (prośba Nikodema 13.10) */
.auth-welcome{background:radial-gradient(130% 70% at 50% 30%,#c6c9ce 0%,#b9bcc2 55%,#a6a9b0 100%)}
.aw-bg{background-color:transparent;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px);mask-image:linear-gradient(180deg,transparent 0,#000 110px)}
.aw-scrim{background:linear-gradient(180deg,rgba(238,241,249,0) 0%,rgba(238,241,249,0) 50%,rgba(238,241,249,.75) 64%,#eef1f9 72%,#eef1f9 100%)}

/* --- karta „Trening dnia" wg makiety stylu 3 (zatwierdzona przez Nikodema 13.10) --- */
.hero.bbh{min-height:286px;padding:16px;justify-content:space-between}
.hero.bbh .bg{left:30%;background-position:center}
.hero.bbh .ov{background:linear-gradient(90deg,#b4936f 30%,rgba(180,147,111,.55) 52%,rgba(180,147,111,0) 72%),linear-gradient(0deg,rgba(93,74,58,.78) 0%,rgba(93,74,58,0) 50%)}
.bbh-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px}
.bbh-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.88);color:#8d7966;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.bbh-dot{width:6px;height:6px;border-radius:50%;background:#a07d5e}
.bbh-meta{padding:7px 11px;border-radius:99px;background:rgba(36,24,7,.35);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap}
.bbh-bottom{position:relative;z-index:2;color:#fff}
.bbh-title{font-size:30px;font-weight:800;line-height:1.04;letter-spacing:-.02em;max-width:62%;overflow-wrap:break-word}
.bbh-sub{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.88);margin-top:6px;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbh-prog{margin-top:12px}
.bbh-prow{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:6px}
.bbh-bar{height:5px;border-radius:9px;background:rgba(255,255,255,.35);overflow:hidden}.bbh-bar i{display:block;height:100%;border-radius:9px;background:#fff}
.bbh-cta{margin-top:12px;height:48px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:800;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.bbh-arr{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.3);font-size:14px;letter-spacing:0}
.hero.bbh .bg{left:38%}
.hero.bbh .ov{background:linear-gradient(90deg,#b4936f 38%,rgba(180,147,111,.5) 56%,rgba(180,147,111,0) 76%),linear-gradient(0deg,rgba(93,74,58,.78) 0%,rgba(93,74,58,0) 50%)}
/* kafelki skrótów: ikona w jasnym kwadracie latte jak w makiecie stylu 3 */
.qtiles .qtile svg{width:38px;height:38px;padding:8px;border-radius:12px;background:linear-gradient(135deg,#ecdfd0,#d4bea4);stroke:#5d4a3a;filter:none;box-sizing:border-box}
.qtiles .qtile::after{display:none}
.qtiles .qtile span{color:#3a2c20;font-weight:700}

/* --- czytelność: liczby na czarno, kalorie bordowe (prośba Nikodema 13.10) --- */
:root{--bordo:#8a2234;--bordo-soft:rgba(138,34,52,.09)}
body .dta-schema-macro{color:#241807;font-weight:700}
body .dta-schema-kcal{color:var(--bordo);background:var(--bordo-soft);border-color:rgba(138,34,52,.18)}
body .cmp-ib .mc-kcal{color:var(--bordo)}
body .cmp-ib .mc-mac{color:#241807}
body .cmp-mac.m-p .bar>i{background:#ff8a73}
body .cmp-mac.m-c .bar>i{background:#22d3ee}
body .cmp-mac.m-f .bar>i{background:#ffd23f}
body .cmp-mac .bar.over>i{background:var(--warn)}
body .cmp-mac .ml{color:#241807}
body .rp-meas .rp-lab{color:#241807}
body .rp-inwrap .rp-unit{color:#241807}
body .rp-prev .lbl{color:#8a7b6c}
body .rp-prev .val{color:#241807}
body .rp-prev .dlt.good{color:#241807}

/* --- poprawki Nikodema 13.10 (2): kalorie w komponowaniu w głównym latte, raport po terminie na czerwono --- */
body .cmp-ib .mc-kcal{color:#a07d5e}
body .rp-sched.late{border-color:rgba(194,40,52,.45);background:rgba(194,40,52,.07)}
body .rp-sched.late .rp-sched-t{color:#c22834}
body .rp-sched-warn{color:#c22834}

/* --- poprawki Nikodema 13.10 (3) --- */
/* karta „Trening dnia” 1:1 z makietą stylu 3: kadr od głowy, pełny latte po lewej, ciemny dół pod napisami */
.hero.bbh{min-height:268px}
.hero.bbh .bg{left:38%;background-position:center 18%;background-size:cover}
.hero.bbh .ov{background:linear-gradient(90deg,#b4936f 36%,rgba(180,147,111,0) 70%),linear-gradient(0deg,rgba(93,74,58,.8) 0%,rgba(93,74,58,0) 45%)}
/* „Informacja od Żanety”: ciemniejszy nagłówek */
body .dinfo .di-who{color:#7a5f48}
/* lista ćwiczeń: powtórzenia ciemniejsze, liczba serii czytelniejsza */
body .s4-ex .rp .v{color:#6f5644}
/* makroskładniki: białe pola na karcie, kcal wyróżnione latte, posiłki białe z kawowym kcal */
body .macro{background:#fff;border:1px solid rgba(141,121,102,.16);box-shadow:0 4px 12px -6px rgba(93,74,58,.18)}
body .macro .ml{color:#8d7966}
body .macro b{color:#241807}
body .macros .macro:first-child{background:linear-gradient(135deg,#d2b393,#8d7966);border-color:transparent}
body .macros .macro:first-child .ml,body .macros .macro:first-child b,body .macros .macro:first-child small{color:#fff}
body .pl-meal{background:#fff !important;border-color:rgba(141,121,102,.16) !important}
body .pl-kcal{background:linear-gradient(135deg,#d2b393,#8d7966) !important;border-color:transparent !important;color:#fff !important}
/* kalorie w kolorze marki zamiast bordo (prośba Nikodema 13.10) */
:root{--bordo:#7a5f48;--bordo-soft:rgba(160,125,94,.12)}
body .dta-schema-kcal{border-color:rgba(141,121,102,.3)}
/* PRYDE: białe logo na espresso, żeby było widoczne */
body .rec-creator .rec-logo{background:#241807 !important;border-bottom-color:transparent}
/* progresja: sylwetka z partią mięśni widoczna na jasnym tle (biała sylwetka, partia espresso, kafel latte) */
body .pg-exrow .grp{background:linear-gradient(135deg,#ecdfd0,#d4bea4)}
body .pg-exrow .grp .body{fill:rgba(255,255,255,.92)}
body .pg-exrow .grp .hl{fill:#5d4a3a}
body .pg-exrow .grp .hls{stroke:#5d4a3a}