/* ==========================================================================
   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, no 100vw, 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:#060607;       /* app background (true black) */
  --bg2:#08080a;      /* deep panels / status backdrop */
  --card:#161617;     /* cards, nav bar, week strip */
  --card2:#1c1c1d;    /* raised surfaces, inputs, chevrons, day cells */
  --card3:#262627;    /* hover / pressed surface */
  --line:#262627;     /* hairline borders */
  --line2:#2f2f30;    /* stronger dividers */

  /* text (neutral whites/greys, no cool cast) */
  --ink:#f4f4f6;      /* primary */
  --ink2:#9a9aa0;     /* secondary */
  --dim:#6c6c72;      /* tertiary / placeholder */

  /* crimson gradient family */
  --c1:#ff2d55;
  --c2:#ff5466;
  --c3:#ff7a4d;
  --c:#ff3b5c;                       /* primary accent */
  --c-dim:#9e2333;                   /* pressed / gradient stop */
  --c-soft:rgba(255,59,92,.15);      /* accent tint backgrounds */

  /* semantic */
  --ok:#2ad17e;
  --warn:#f0a93b;
  --danger:#ff3b5c;

  /* 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;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Sora",system-ui,-apple-system,"SF Pro",Segoe UI,Roboto,sans-serif;
  background:#000;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}

/* 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: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(70% 34% at 78% 22%,rgba(255,59,92,.07) 0%,rgba(255,59,92,0) 60%),
    radial-gradient(120% 40% at 10% 108%,rgba(255,90,80,.06),transparent 62%),
    radial-gradient(125% 80% at 50% -8%,#101013 0%,#0a0a0c 34%,#060607 70%,#040405 100%),
    linear-gradient(180deg,#08080a 0%,#050506 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: center the phone column with a little breathing room */
@media (min-width:461px){
  body{padding:0;align-items:center;min-height:100dvh}
  .screen{
    border-radius:46px;
    box-shadow:0 0 0 11px #050505,0 0 0 13px #1d1d1e,0 40px 120px -20px rgba(0,0,0,.9);
  }
}
/* mobile: bleed full-screen */
@media (max-width:460px){
  body{align-items:stretch}
  .screen{width:100%;height: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);
}
.status .sig{display:flex;align-items:center;gap:7px}

/* ---------- Scroll body (one per visible view) ---------- */
.scroll{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  padding:60px 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}

/* 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:#fff;font-size:14px;box-shadow:0 8px 22px -8px rgba(255,45,85,.7)}

/* ==========================================================================
   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(255,59,92,.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(255,45,85,.8)}
.day.sel .dow,.day.sel .dn{color:#fff}
.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;box-shadow:0 22px 50px -18px rgba(255,45,85,.5)}
.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)}
.hero .ov{position:absolute;inset:0;z-index:1;background:
   linear-gradient(180deg,rgba(6,6,7,.15) 0%,rgba(6,6,7,.2) 40%,rgba(6,6,7,.86) 100%),
   linear-gradient(125deg,rgba(255,45,85,.55),rgba(255,90,60,.25) 55%,transparent 80%)}
.hero.rest .bg{filter:saturate(.5) brightness(.55)}
.hero.rest .ov{background:linear-gradient(180deg,rgba(6,6,7,.4),rgba(6,6,7,.9)),linear-gradient(125deg,rgba(140,140,146,.3),transparent 70%)}
.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(255,59,92,.92);color:#fff;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(42,209,126,.92)}
.htag.n{background:rgba(255,255,255,.16)}
.htag.w{background:rgba(240,169,59,.92)}
.htag .d{width:6px;height:6px;border-radius:50%;background:#fff}
.hmeta{font-size:12.5px;font-weight:700;color:#fff;opacity:.92;background:rgba(0,0,0,.3);padding:5px 10px;border-radius:99px}
.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:#fff;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:#fff}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.hact{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:none;font-family:inherit;font-weight:800;font-size:15px;padding:15px;border-radius:var(--r-pill);cursor:pointer;text-transform:uppercase;letter-spacing:.02em;transition:transform .16s var(--ease);color:inherit}
.hact:active{transform:scale(.97)}
.hact.start{background:#fff;color:#101010}
.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:#fff}
.hact.done{background:rgba(42,209,126,.16);color:var(--ok);border:1.5px solid rgba(42,209,126,.4)}
.hact.ghost{background:rgba(255,255,255,.12);color:#fff}

/* 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:#fff}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(140deg,var(--c1),var(--c2));box-shadow:0 14px 30px -12px rgba(255,45,85,.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:#fff;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:#fff}
/* 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:#060607;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,#ff3b5c);text-transform:uppercase}
.boot .m13-spin{width:26px;height:26px;border-width:2.5px;border-color:rgba(255,59,92,.22);border-top-color:var(--c,#ff3b5c)}

/* ==========================================================================
   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:#08110b;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(255,255,255,.045),rgba(255,255,255,.012));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-top:11px}
.coach .ca{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,#3c3c3d,#242425);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:#fff;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:#08110b;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 */
.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:#08110b;border-color:transparent}

/* ==========================================================================
   BOTTOM NAV
   ========================================================================== */
/* floating pill nav (5 slots: Dziś · Plan · [ + ] · Czat · Ja-avatar) */
.nav{position:absolute;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:50;
  background:rgba(20,20,22,.82);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid var(--line2);border-radius:26px;
  box-shadow:0 18px 46px -16px rgba(0,0,0,.88),inset 0 1px 0 rgba(255,255,255,.05)}
.nav a{flex:0 0 auto;width:46px;height:46px;display:flex;align-items:center;justify-content:center;text-decoration:none;
  color:var(--dim);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:14px;
  transition:color .2s var(--ease),background .2s var(--ease)}
.nav a:active{background:var(--card3)}
.nav a .ico{display:flex;align-items:center;justify-content:center}
.nav a svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2.1}
.nav a.on{color:var(--c)}
.nav a.on .ico{filter:drop-shadow(0 0 9px rgba(255,59,92,.7))}
/* Ja tab = client avatar circle */
.nav a.nav-me .ava{width:30px;height:30px;border-radius:50%;background:var(--card3) center/cover no-repeat;
  border:1.5px solid var(--line2);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.nav a.nav-me.on .ava{border-color:var(--c);box-shadow:0 0 0 2px rgba(255,59,92,.35),0 0 10px rgba(255,59,92,.5)}
/* 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:#fff;
  box-shadow:0 14px 28px -8px rgba(255,45,85,.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(6,6,7,.2),rgba(6,6,7,.95) 92%),linear-gradient(125deg,rgba(255,45,85,.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:#fff;text-transform:uppercase;opacity:.9}
.fs .fs-hero h1{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-top:8px;line-height:1.08}
.fs .fs-hero p{font-size:13.5px;color:#fff;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(255,45,85,.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:#fff;font-size:15px;flex:none}
.demo .pick .pa.coach{background:linear-gradient(140deg,#3c3c3d,#242425)}
.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)
   ========================================================================== */
.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:-.02em;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)}

/* ==========================================================================
   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:64px 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(255,59,92,.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(255,59,92,.35);box-shadow:none}
.ob-badge.neutral{background:var(--card);border-color:var(--line2);box-shadow:none}
.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(255,59,92,.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(255,59,92,.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}
.ob-sumlist{width:100%;max-width:360px;margin-top:22px;display:flex;flex-direction:column;gap:11px}
.ob-sumcard{display:flex;align-items:flex-start;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:15px;text-align:left}
.ob-sum-ic{width:42px;height:42px;border-radius:12px;background:var(--c-soft);display:grid;place-items:center;font-size:20px;flex:none}
.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:60px 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(8,8,10,.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(255,59,92,.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)}
.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:#fff}
.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(22,22,24,.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(0,0,0,.9),0 0 0 1px rgba(255,59,92,.28),0 0 26px -6px rgba(255,59,92,.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:#fff;font-weight:800;font-size:14px;
  box-shadow:0 6px 16px -6px rgba(255,45,85,.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}

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