/* ============================================================================
   SSM PERFORMANCE — Player Design System (portal zawodnika)
   ----------------------------------------------------------------------------
   Wszystko w tym pliku jest scoped pod #player-app — panel Staff (#app) i
   modale (#modal-bg) nie są dotykane. Struktura:
     1. Tokeny (kolory, typografia, spacing, radius, cienie, ruch)
     2. Mapowanie starych tokenów (--navy-*, --gold, --border…) na nowe, żeby
        reużyte widoki Staff (Monitoring, GPS, Zdrowie, Mental) i inline style
        w js/*.js automatycznie przejęły nową paletę w obrębie portalu
     3. Powłoka: sidebar / rail / topbar / bottom tab bar / content
     4. Komponenty UI kit (.ssm-*) — patrz js/28-player-ui-kit.js
     5. Re-skin klas legacy (.card, .btn, .badge, .tabs, .kv, table…)
     6. Animacje + reduced motion
   ============================================================================ */

/* ---------- 1. TOKENY ----------
   Te same tokeny obowiązują w modalach i toaście portalu (renderują się poza
   #player-app) — tylko gdy <body> ma klasę .ssm-player-mode (ustawianą przez
   powłokę portalu zawodnika; panel Staff nigdy jej nie ma). */
#player-app,
body.ssm-player-mode #modal-bg,
body.ssm-player-mode #toast{
  /* tła i powierzchnie */
  --ssm-bg:#05080f;
  --ssm-bg-2:#070c17;
  --ssm-surface:#0b1220;
  --ssm-surface-2:#0f1829;
  --ssm-surface-3:#152036;
  --ssm-surface-hover:#18243c;
  --ssm-line:rgba(150,172,214,.09);
  --ssm-line-2:rgba(150,172,214,.16);

  /* tekst */
  --ssm-text:#f2f5fb;
  --ssm-text-2:#a5b1c7;
  --ssm-text-3:#6b7790;

  /* marka — złoto używane oszczędnie */
  --ssm-gold:#e3b65a;
  --ssm-gold-2:#f3d798;
  --ssm-gold-3:#b98a33;
  --ssm-gold-rgb:227,182,90;
  --ssm-gold-grad:linear-gradient(135deg,#f3d798 0%,#e3b65a 45%,#c08f37 100%);

  /* semantyka danych */
  --ssm-green:#34d399;   --ssm-green-rgb:52,211,153;    /* pozytywne / readiness */
  --ssm-blue:#4f8dff;    --ssm-blue-rgb:79,141,255;     /* obciążenie / GPS */
  --ssm-violet:#8f7cf8;  --ssm-violet-rgb:143,124,248;  /* sen / regeneracja */
  --ssm-cyan:#2fd4c4;    --ssm-cyan-rgb:47,212,196;     /* szybkość / testy */
  --ssm-amber:#f2c14e;   --ssm-amber-rgb:242,193,78;    /* uwaga (łagodna) */
  --ssm-orange:#f5964b;  --ssm-orange-rgb:245,150,75;   /* ostrzeżenie */
  --ssm-red:#ef5d6b;     --ssm-red-rgb:239,93,107;      /* realny problem */
  --ssm-neutral-rgb:165,177,199;

  /* typografia */
  --ssm-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ssm-font-display:'Sora','Inter',sans-serif;

  /* spacing (skala 4) */
  --ssm-s1:4px; --ssm-s2:8px; --ssm-s3:12px; --ssm-s4:16px;
  --ssm-s5:20px; --ssm-s6:24px; --ssm-s7:32px; --ssm-s8:40px;

  /* radius */
  --ssm-r-xs:8px; --ssm-r-sm:10px; --ssm-r:14px; --ssm-r-lg:18px; --ssm-r-xl:24px;

  /* cienie */
  --ssm-shadow-card:0 1px 0 rgba(255,255,255,.035) inset, 0 18px 40px -24px rgba(0,0,0,.75);
  --ssm-shadow-pop:0 24px 60px -18px rgba(0,0,0,.8);
  --ssm-shadow-gold:0 10px 28px -10px rgba(var(--ssm-gold-rgb),.55);

  /* ruch */
  --ssm-ease:cubic-bezier(.22,.8,.24,1);
  --ssm-fast:.14s; --ssm-med:.22s; --ssm-slow:1.1s;

  /* wymiary powłoki */
  --ssm-sidebar-w:256px;
  --ssm-rail-w:84px;
  --ssm-topbar-h:72px;
  --ssm-tabbar-h:66px;
  --ssm-content-max:1320px;

  /* ---------- 2. MAPOWANIE STARYCH TOKENÓW (tylko w obrębie portalu) ---------- */
  --navy-950:var(--ssm-bg);
  --navy-900:var(--ssm-surface);
  --navy-800:var(--ssm-surface-3);
  --navy-700:#1b2943;
  --navy-600:#25365a;
  --surface:var(--ssm-surface);
  --surface-2:var(--ssm-surface-2);
  --border:var(--ssm-line-2);
  --border-soft:var(--ssm-line);
  --gold:var(--ssm-gold);
  --gold-soft:var(--ssm-gold-2);
  --text-hi:var(--ssm-text);
  --text-mid:var(--ssm-text-2);
  --text-low:var(--ssm-text-3);
  --green:var(--ssm-green);
  --yellow:var(--ssm-amber);
  --orange:var(--ssm-orange);
  --red:var(--ssm-red);
  --radius:var(--ssm-r);
}

/* ---------- 3. POWŁOKA ---------- */
#player-app{
  position:fixed; inset:0; z-index:5;
  display:grid; grid-template-columns:var(--ssm-sidebar-w) minmax(0,1fr);
  background:
    radial-gradient(1200px 520px at 78% -10%, rgba(var(--ssm-blue-rgb),.07), transparent 60%),
    radial-gradient(900px 420px at 10% 0%, rgba(var(--ssm-gold-rgb),.045), transparent 60%),
    var(--ssm-bg);
  color:var(--ssm-text);
  font-family:var(--ssm-font);
  font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}
#player-app *, #player-app *::before, #player-app *::after{ box-sizing:border-box; }
#player-app button{ font-family:inherit; }
#player-app :focus-visible{ outline:2px solid var(--ssm-gold); outline-offset:2px; border-radius:8px; }

/* --- Sidebar (desktop) / rail (tablet) --- */
#player-app .ssm-sidebar{
  grid-column:1; grid-row:1; min-height:0;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(11,18,32,.92), rgba(6,10,19,.96));
  border-right:1px solid var(--ssm-line);
  padding:22px 14px 16px;
  overflow-y:auto; scrollbar-width:none;
}
#player-app .ssm-sidebar::-webkit-scrollbar{ display:none; }
#player-app .ssm-sidebar .ssm-logo{ padding:4px 10px 22px; }
#player-app .ssm-nav-group{ margin-bottom:14px; }
#player-app .ssm-nav-label{
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ssm-text-3); padding:0 12px 8px;
}
#player-app .ssm-nav-item{
  position:relative; width:100%;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin-bottom:2px;
  background:none; border:1px solid transparent; border-radius:var(--ssm-r-sm);
  color:var(--ssm-text-2); font-size:13.5px; font-weight:500; text-align:left;
  cursor:pointer; transition:background var(--ssm-fast), color var(--ssm-fast), border-color var(--ssm-fast);
}
#player-app .ssm-nav-item .ssm-i{ width:19px; height:19px; flex-shrink:0; opacity:.9; }
#player-app .ssm-nav-item:hover{ background:rgba(255,255,255,.035); color:var(--ssm-text); }
#player-app .ssm-nav-item.is-active{
  color:#1b1405; font-weight:600;
  background:var(--ssm-gold-grad);
  box-shadow:var(--ssm-shadow-gold);
}
#player-app .ssm-nav-item.is-active .ssm-i{ opacity:1; }
#player-app .ssm-nav-item .ssm-nav-count{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px;
  background:rgba(var(--ssm-red-rgb),.18); color:#ff9aa4; font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
#player-app .ssm-sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--ssm-line); }

/* --- Main column --- */
#player-app .ssm-main{ grid-column:2; grid-row:1; min-width:0; min-height:0; display:flex; flex-direction:column; }

/* --- Topbar --- */
#player-app .ssm-topbar{
  flex-shrink:0; height:var(--ssm-topbar-h);
  display:flex; align-items:center; gap:16px;
  padding:0 32px;
  border-bottom:1px solid var(--ssm-line);
  /* Bez własnego tła i backdrop-filter: topbar nie nachodzi na treść (scroll
     jest poniżej), a brak izolacji pozwala logo (mix-blend-mode) wtopić się w tło. */
  background:transparent;
}
#player-app .ssm-topbar-lead{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
#player-app .ssm-topbar-titles{ min-width:0; }
#player-app .ssm-topbar-title{
  font-family:var(--ssm-font-display); font-weight:700; font-size:19px; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#player-app .ssm-topbar-sub{ font-size:12.5px; color:var(--ssm-text-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#player-app .ssm-topbar-sub #pa-status-line:not(:empty)::before{ content:"·"; margin:0 7px; color:var(--ssm-text-3); }
#player-app .ssm-topbar-logo{ display:none; }
#player-app .ssm-topbar .ssm-topbar-back{ display:none; }
#player-app .ssm-topbar-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
#player-app .ssm-user-chip{
  display:flex; align-items:center; gap:10px; padding:4px 12px 4px 4px;
  background:var(--ssm-surface-2); border:1px solid var(--ssm-line); border-radius:99px;
  color:var(--ssm-text); cursor:pointer; transition:border-color var(--ssm-fast), background var(--ssm-fast);
}
#player-app .ssm-user-chip:hover{ border-color:var(--ssm-line-2); background:var(--ssm-surface-3); }
#player-app .ssm-user-chip-name{ font-size:13px; font-weight:600; line-height:1.15; text-align:left; }
#player-app .ssm-user-chip-role{ font-size:11px; color:var(--ssm-text-3); }

/* --- Scroll + content --- */
#player-app .ssm-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#player-app #pa-content{
  width:100%; max-width:var(--ssm-content-max); margin:0 auto;
  padding:28px 32px 48px;
}
#player-app #pa-content.ssm-enter{ animation:ssmEnter var(--ssm-med) var(--ssm-ease) both; }

/* --- Bottom tab bar (mobile) --- */
#player-app .ssm-tabbar{ display:none; }

/* --- Tablet: rail --- */
@media (max-width:1279px) and (min-width:768px){
  #player-app{ grid-template-columns:var(--ssm-rail-w) minmax(0,1fr); }
  #player-app .ssm-sidebar{ padding:18px 12px; align-items:center; }
  #player-app .ssm-sidebar .ssm-logo{ padding:2px 0 18px; }
  #player-app .ssm-sidebar .ssm-logo .ssm-logo-word{ display:none; }
  #player-app .ssm-sidebar .ssm-logo-img{ width:64px; }
  #player-app .ssm-nav-label{ display:none; }
  #player-app .ssm-nav-group{ width:100%; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--ssm-line); }
  #player-app .ssm-nav-group:last-of-type{ border-bottom:none; }
  #player-app .ssm-nav-item{ justify-content:center; padding:11px 0; }
  #player-app .ssm-nav-item .ssm-nav-text{ display:none; }
  #player-app .ssm-nav-item .ssm-nav-count{ position:absolute; top:4px; right:8px; min-width:16px; height:16px; font-size:10px; padding:0 4px; }
  #player-app .ssm-sidebar-foot{ width:100%; }
  #player-app .ssm-topbar{ padding:0 24px; }
  #player-app #pa-content{ padding:24px 24px 40px; }
  #player-app .ssm-user-chip-text{ display:none; }
  #player-app .ssm-user-chip{ padding:4px; }
}

/* --- Mobile --- */
@media (max-width:767px){
  #player-app{ grid-template-columns:minmax(0,1fr); --ssm-topbar-h:60px; }
  #player-app .ssm-sidebar{ display:none; }
  #player-app .ssm-main{ grid-column:1; }
  #player-app .ssm-topbar{ padding:0 16px; padding-top:env(safe-area-inset-top); height:calc(var(--ssm-topbar-h) + env(safe-area-inset-top)); gap:10px; }
  #player-app .ssm-topbar-title{ font-size:18px; }
  #player-app .ssm-topbar-sub{ display:none; }
  #player-app .ssm-topbar.is-home .ssm-topbar-logo{ display:block; }
  #player-app .ssm-topbar.is-home .ssm-topbar-titles{ display:none; }
  #player-app .ssm-topbar.is-sub .ssm-topbar-back{ display:inline-flex; margin-left:-8px; }
  #player-app .ssm-topbar.is-sub .ssm-topbar-lead{ justify-content:flex-start; }
  #player-app .ssm-user-chip-text{ display:none; }
  #player-app .ssm-user-chip{ padding:3px; }
  #player-app #pa-content{ padding:16px 16px calc(var(--ssm-tabbar-h) + 28px + env(safe-area-inset-bottom)); }

  #player-app .ssm-tabbar{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:8;
    height:calc(var(--ssm-tabbar-h) + env(safe-area-inset-bottom));
    padding:0 6px env(safe-area-inset-bottom);
    background:rgba(7,11,20,.88);
    backdrop-filter:saturate(150%) blur(18px); -webkit-backdrop-filter:saturate(150%) blur(18px);
    border-top:1px solid var(--ssm-line-2);
  }
  #player-app .ssm-tab{
    position:relative; background:none; border:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    color:var(--ssm-text-3); font-size:11px; font-weight:500; letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent; transition:color var(--ssm-fast);
  }
  #player-app .ssm-tab .ssm-i{ width:22px; height:22px; transition:transform var(--ssm-med) var(--ssm-ease); }
  #player-app .ssm-tab.is-active{ color:var(--ssm-gold); font-weight:600; }
  #player-app .ssm-tab.is-active::before{
    content:""; position:absolute; top:0; left:50%; width:28px; height:2px; margin-left:-14px;
    border-radius:0 0 3px 3px; background:var(--ssm-gold);
    box-shadow:0 0 12px rgba(var(--ssm-gold-rgb),.8);
  }
  #player-app .ssm-tab.is-active .ssm-i{ transform:translateY(-1px); }
  #player-app .ssm-tab:active .ssm-i{ transform:scale(.92); }
  #player-app .ssm-tab .ssm-tab-dot{
    position:absolute; top:10px; left:calc(50% + 8px); width:7px; height:7px; border-radius:50%;
    background:var(--ssm-red); box-shadow:0 0 0 2px rgba(7,11,20,1);
  }
}

/* ---------- 4. KOMPONENTY ---------- */

/* ikony */
#player-app .ssm-i{ width:18px; height:18px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
#player-app .ssm-i.is-fill{ fill:currentColor; stroke:none; }

/* logo */
#player-app .ssm-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
/* oficjalny znak (webp z ciemnym tłem) — lighten wtapia tło w sidebar/topbar */
#player-app .ssm-logo-img{ display:block; width:100%; max-width:196px; height:auto; mix-blend-mode:lighten; }
#player-app .ssm-sidebar .ssm-logo{ padding:0 4px 18px; }
#player-app .ssm-topbar-logo .ssm-logo-img{ height:44px; width:auto; max-width:none; margin-left:-6px; }
#player-app .ssm-logo-mark{ width:34px; height:34px; flex-shrink:0; }
#player-app .ssm-logo-word{ display:flex; flex-direction:column; line-height:1; }
#player-app .ssm-logo-ssm{
  font-family:var(--ssm-font-display); font-weight:800; font-style:italic; font-size:22px; letter-spacing:.02em;
  background:linear-gradient(180deg,#ffffff 0%, #dfe5f0 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#player-app .ssm-logo-perf{ margin-top:4px; font-size:8.5px; font-weight:600; letter-spacing:.36em; color:var(--ssm-gold); }

/* typografia */
#player-app .ssm-display{ font-family:var(--ssm-font-display); font-weight:800; font-size:44px; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
#player-app .ssm-h1{ font-family:var(--ssm-font-display); font-weight:700; font-size:28px; line-height:1.15; letter-spacing:-.015em; }
#player-app .ssm-h2{ font-family:var(--ssm-font-display); font-weight:600; font-size:18px; line-height:1.25; letter-spacing:-.005em; }
#player-app .ssm-h3{ font-weight:600; font-size:15px; line-height:1.3; }
#player-app .ssm-body{ font-size:14px; color:var(--ssm-text-2); }
#player-app .ssm-caption{ font-size:12.5px; color:var(--ssm-text-3); }
#player-app .ssm-overline{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ssm-text-3); }
#player-app .ssm-num{ font-family:var(--ssm-font-display); font-variant-numeric:tabular-nums; }
#player-app .ssm-muted{ color:var(--ssm-text-3); }

/* layout helpers */
#player-app .ssm-stack{ display:flex; flex-direction:column; gap:var(--ssm-s4); }
#player-app .ssm-row{ display:flex; align-items:center; gap:var(--ssm-s3); }
#player-app .ssm-grid{ display:grid; gap:var(--ssm-s4); }
#player-app .ssm-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
#player-app .ssm-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
#player-app .ssm-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
#player-app .ssm-grid-auto{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
@media (max-width:1100px){ #player-app .ssm-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } #player-app .ssm-grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){
  #player-app .ssm-grid{ gap:var(--ssm-s3); }
  #player-app .ssm-grid-3{ grid-template-columns:minmax(0,1fr); }
  #player-app .ssm-grid-2.ssm-keep-2, #player-app .ssm-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #player-app .ssm-grid-2:not(.ssm-keep-2){ grid-template-columns:minmax(0,1fr); }
  #player-app .ssm-display{ font-size:38px; }
  #player-app .ssm-h1{ font-size:24px; }
}

/* karta — 3 warianty: base / highlight / interactive */
#player-app .ssm-card{
  position:relative; min-width:0;
  background:linear-gradient(180deg, var(--ssm-surface-2) 0%, var(--ssm-surface) 100%);
  border:1px solid var(--ssm-line);
  border-radius:var(--ssm-r-lg);
  box-shadow:var(--ssm-shadow-card);
  padding:var(--ssm-s5);
}
#player-app .ssm-card.is-flush{ padding:0; overflow:hidden; }
#player-app .ssm-card.is-tight{ padding:var(--ssm-s4); }
#player-app .ssm-card.is-highlight{
  border-color:rgba(var(--ssm-gold-rgb),.55);
  box-shadow:0 0 0 1px rgba(var(--ssm-gold-rgb),.12), 0 0 32px -8px rgba(var(--ssm-gold-rgb),.35), var(--ssm-shadow-card);
}
#player-app .ssm-card.is-interactive{ cursor:pointer; transition:transform var(--ssm-med) var(--ssm-ease), border-color var(--ssm-fast), background var(--ssm-fast); }
#player-app .ssm-card.is-interactive:hover{ border-color:var(--ssm-line-2); transform:translateY(-2px); }
#player-app .ssm-card.is-interactive:active{ transform:translateY(0) scale(.995); }
#player-app .ssm-card-body > * + *{ margin-top:var(--ssm-s4); }
@media (max-width:767px){ #player-app .ssm-card{ padding:var(--ssm-s4); border-radius:var(--ssm-r); } }

/* section header */
#player-app .ssm-sh{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:var(--ssm-s4); }
#player-app .ssm-sh-main{ min-width:0; display:flex; align-items:center; gap:10px; }
#player-app .ssm-sh-title{ font-family:var(--ssm-font-display); font-weight:600; font-size:16.5px; letter-spacing:-.005em; line-height:1.3; }
#player-app .ssm-sh-sub{ font-size:12.5px; color:var(--ssm-text-3); margin-top:2px; }
#player-app .ssm-sh-info{ color:var(--ssm-text-3); display:inline-flex; }
#player-app .ssm-sh-info .ssm-i{ width:15px; height:15px; }
#player-app .ssm-link{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  background:none; border:none; padding:2px 0; cursor:pointer;
  color:#8fb3ff; font-size:12.5px; font-weight:500; white-space:nowrap;
}
#player-app .ssm-link .ssm-i{ width:14px; height:14px; transition:transform var(--ssm-fast); }
#player-app .ssm-link:hover{ color:#b3cbff; }
#player-app .ssm-link:hover .ssm-i{ transform:translateX(2px); }

/* przyciski */
#player-app .ssm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:var(--ssm-r-sm);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  font-size:14px; font-weight:600; letter-spacing:.005em;
  transition:transform var(--ssm-fast), filter var(--ssm-fast), background var(--ssm-fast), border-color var(--ssm-fast), box-shadow var(--ssm-fast);
  -webkit-tap-highlight-color:transparent;
}
#player-app .ssm-btn .ssm-i{ width:17px; height:17px; }
#player-app .ssm-btn:active{ transform:translateY(1px) scale(.99); }
#player-app .ssm-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; filter:none; }
#player-app .ssm-btn.is-primary{ background:var(--ssm-gold-grad); color:#1d1606; box-shadow:var(--ssm-shadow-gold), inset 0 1px 0 rgba(255,255,255,.35); }
#player-app .ssm-btn.is-primary:hover{ filter:brightness(1.06); }
#player-app .ssm-btn.is-secondary{ background:var(--ssm-surface-3); color:var(--ssm-text); border-color:var(--ssm-line-2); }
#player-app .ssm-btn.is-secondary:hover{ background:var(--ssm-surface-hover); }
#player-app .ssm-btn.is-ghost{ background:transparent; color:var(--ssm-text-2); border-color:var(--ssm-line-2); }
#player-app .ssm-btn.is-ghost:hover{ color:var(--ssm-text); background:rgba(255,255,255,.03); }
#player-app .ssm-btn.is-danger{ background:rgba(var(--ssm-red-rgb),.14); color:#ff9aa4; border-color:rgba(var(--ssm-red-rgb),.3); }
#player-app .ssm-btn.is-sm{ min-height:34px; padding:0 12px; font-size:12.5px; border-radius:var(--ssm-r-xs); }
#player-app .ssm-btn.is-lg{ min-height:54px; padding:0 24px; font-size:15.5px; border-radius:var(--ssm-r); }
#player-app .ssm-btn.is-block{ width:100%; }
#player-app .ssm-icon-btn{
  position:relative; width:42px; height:42px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--ssm-surface-2); border:1px solid var(--ssm-line-2);
  color:var(--ssm-text-2); cursor:pointer; transition:color var(--ssm-fast), background var(--ssm-fast), border-color var(--ssm-fast);
}
#player-app .ssm-icon-btn:hover{ color:var(--ssm-text); background:var(--ssm-surface-3); }
#player-app .ssm-icon-btn .ssm-i{ width:19px; height:19px; }
#player-app .ssm-icon-btn.is-plain{ background:none; border-color:transparent; }
#player-app .ssm-icon-btn .ssm-dot-count{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  background:var(--ssm-red); color:#fff; font-size:10.5px; font-weight:700; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px var(--ssm-bg);
}

/* avatar */
#player-app .ssm-avatar{
  position:relative; flex-shrink:0; border-radius:50%; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#1d2b47,#0f1829); color:var(--ssm-text-2);
  font-family:var(--ssm-font-display); font-weight:700;
}
#player-app .ssm-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
#player-app .ssm-avatar.has-ring{ box-shadow:0 0 0 2px var(--ssm-bg), 0 0 0 3.5px rgba(var(--ssm-gold-rgb),.85); }

/* badge / status */
#player-app .ssm-badge{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:99px; font-size:11.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  background:rgba(var(--ssm-neutral-rgb),.12); color:var(--ssm-text-2);
}
#player-app .ssm-badge .ssm-i{ width:13px; height:13px; }
#player-app .ssm-badge.is-solid{ height:22px; padding:0 9px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
#player-app .ssm-badge .ssm-badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
#player-app .t-success{ --tone:var(--ssm-green); --tone-rgb:var(--ssm-green-rgb); }
#player-app .t-info{ --tone:var(--ssm-blue); --tone-rgb:var(--ssm-blue-rgb); }
#player-app .t-sleep{ --tone:var(--ssm-violet); --tone-rgb:var(--ssm-violet-rgb); }
#player-app .t-speed{ --tone:var(--ssm-cyan); --tone-rgb:var(--ssm-cyan-rgb); }
#player-app .t-amber{ --tone:var(--ssm-amber); --tone-rgb:var(--ssm-amber-rgb); }
#player-app .t-warn{ --tone:var(--ssm-orange); --tone-rgb:var(--ssm-orange-rgb); }
#player-app .t-danger{ --tone:var(--ssm-red); --tone-rgb:var(--ssm-red-rgb); }
#player-app .t-gold{ --tone:var(--ssm-gold); --tone-rgb:var(--ssm-gold-rgb); }
#player-app .t-neutral{ --tone:var(--ssm-text-2); --tone-rgb:var(--ssm-neutral-rgb); }
#player-app .ssm-badge[class*="t-"]{ background:rgba(var(--tone-rgb),.14); color:var(--tone); }
#player-app .ssm-badge.is-solid[class*="t-"]{ background:var(--tone); color:#06101a; }

/* chip ikony (kolorowy kafelek z ikoną) */
#player-app .ssm-chip-ico{
  width:38px; height:38px; flex-shrink:0; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(var(--tone-rgb, var(--ssm-neutral-rgb)),.14); color:var(--tone, var(--ssm-text-2));
  border:1px solid rgba(var(--tone-rgb, var(--ssm-neutral-rgb)),.18);
}
#player-app .ssm-chip-ico .ssm-i{ width:19px; height:19px; }
#player-app .ssm-chip-ico.is-sm{ width:28px; height:28px; border-radius:9px; }
#player-app .ssm-chip-ico.is-sm .ssm-i{ width:15px; height:15px; }
#player-app .ssm-chip-ico.is-lg{ width:46px; height:46px; border-radius:14px; }
#player-app .ssm-chip-ico.is-solid{ background:var(--tone); color:#fff; border-color:transparent; box-shadow:0 8px 18px -8px rgba(var(--tone-rgb),.7); }
#player-app .ssm-chip-ico.is-round{ border-radius:50%; }

/* progress */
#player-app .ssm-progress{ position:relative; height:6px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
#player-app .ssm-progress > span{
  position:absolute; inset:0 auto 0 0; border-radius:inherit;
  background:linear-gradient(90deg, rgba(var(--tone-rgb, var(--ssm-green-rgb)),.75), var(--tone, var(--ssm-green)));
  width:0; transition:width var(--ssm-slow) var(--ssm-ease);
}
#player-app .ssm-progress.is-lg{ height:10px; }
#player-app .ssm-progress.is-xs{ height:4px; }

/* mini bars (sparkline słupkowy) */
#player-app .ssm-bars{ display:flex; align-items:flex-end; gap:3px; height:26px; }
#player-app .ssm-bars > i{
  flex:1 1 0; min-width:3px; max-width:9px; border-radius:2px;
  background:rgba(var(--tone-rgb, var(--ssm-green-rgb)),.5);
  transform-origin:bottom; animation:ssmBarIn .7s var(--ssm-ease) both;
}
#player-app .ssm-bars > i.is-last{ background:var(--tone, var(--ssm-green)); box-shadow:0 0 10px rgba(var(--tone-rgb),.45); }
#player-app .ssm-bars > i.is-empty{ background:rgba(255,255,255,.07); }

/* stat tile */
#player-app .ssm-tile{
  position:relative; min-width:0; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, var(--ssm-surface-2) 0%, var(--ssm-surface) 100%);
  border:1px solid var(--ssm-line); border-radius:var(--ssm-r);
  padding:16px; box-shadow:var(--ssm-shadow-card);
}
#player-app .ssm-tile.is-interactive{ cursor:pointer; transition:border-color var(--ssm-fast), transform var(--ssm-med) var(--ssm-ease); }
#player-app .ssm-tile.is-interactive:hover{ border-color:var(--ssm-line-2); transform:translateY(-2px); }
#player-app .ssm-tile-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
#player-app .ssm-tile-label{ font-size:13px; font-weight:600; color:var(--ssm-text); line-height:1.25; }
#player-app .ssm-tile-sub{ font-size:11.5px; color:var(--ssm-text-3); margin-top:2px; }
#player-app .ssm-tile-value{ display:flex; align-items:baseline; gap:3px; font-family:var(--ssm-font-display); font-variant-numeric:tabular-nums; }
#player-app .ssm-tile-value b{ font-size:28px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--ssm-text); }
#player-app .ssm-tile-value small{ font-size:14px; font-weight:500; color:var(--ssm-text-3); }
#player-app .ssm-tile-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:auto; }
#player-app .ssm-tile .ssm-bars{ flex:1; max-width:120px; }
#player-app .ssm-tile.is-empty .ssm-tile-value b{ color:var(--ssm-text-3); }
#player-app .ssm-delta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; font-family:var(--ssm-font); }
#player-app .ssm-delta .ssm-i{ width:13px; height:13px; stroke-width:2.2; }
#player-app .ssm-delta.is-up{ color:var(--ssm-green); }
#player-app .ssm-delta.is-down{ color:var(--ssm-red); }
#player-app .ssm-delta.is-flat{ color:var(--ssm-text-3); }
#player-app .ssm-delta.is-neutral{ color:var(--ssm-text-2); }
@media (max-width:767px){
  #player-app .ssm-tile{ padding:13px; gap:8px; }
  #player-app .ssm-tile-value b{ font-size:24px; }
  #player-app .ssm-tile-label{ font-size:12.5px; }
}

/* score ring */
#player-app .ssm-ring{ --ring:var(--ring-base, 168px); position:relative; width:var(--ring); height:var(--ring); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
#player-app .ssm-ring > svg{ display:block; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
#player-app .ssm-ring .ssm-ring-track{ stroke:rgba(255,255,255,.06); }
#player-app .ssm-ring .ssm-ring-bar{ transition:stroke-dashoffset var(--ssm-slow) var(--ssm-ease); filter:drop-shadow(0 0 7px rgba(var(--tone-rgb, var(--ssm-green-rgb)),.45)); }
#player-app .ssm-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
#player-app .ssm-ring-value{ font-size:calc(var(--ring) * .29); font-family:var(--ssm-font-display); font-weight:800; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
#player-app .ssm-ring-max{ font-size:max(12px, calc(var(--ring) * .085)); color:var(--ssm-text-3); font-weight:500; margin-top:4px; font-variant-numeric:tabular-nums; }
#player-app .ssm-ring-delta{ margin-top:6px; }

/* score card (ring + breakdown) — responsywność przez container queries:
   ta sama karta działa w wąskiej prawej kolumnie desktopu i na telefonie */
#player-app .ssm-score-card{ container-type:inline-size; }
#player-app .ssm-score{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:center; }
#player-app .ssm-score-meta{ display:flex; flex-direction:column; align-items:center; gap:10px; }
#player-app .ssm-breakdown{ display:grid; grid-template-columns:28px auto minmax(40px,1fr) 30px; column-gap:12px; row-gap:12px; align-items:center; min-width:0; }
#player-app .ssm-bd-row{ display:contents; }
#player-app .ssm-bd-label{ font-size:13px; color:var(--ssm-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#player-app .ssm-bd-label .is-short{ display:none; }
#player-app .ssm-bd-val{ font-family:var(--ssm-font-display); font-weight:600; font-size:13.5px; text-align:right; font-variant-numeric:tabular-nums; }
#player-app .ssm-bd-row.is-empty .ssm-bd-val{ color:var(--ssm-text-3); }
#player-app .ssm-score-note{ display:flex; gap:8px; align-items:flex-start; margin-top:16px; padding:10px 12px; border-radius:var(--ssm-r-sm); background:rgba(255,255,255,.03); border:1px solid var(--ssm-line); font-size:12.5px; color:var(--ssm-text-2); }
#player-app .ssm-score-note .ssm-i{ width:15px; height:15px; margin-top:1px; color:var(--ssm-text-3); }
@container (max-width:470px){
  #player-app .ssm-score{ gap:18px; }
  #player-app .ssm-score .ssm-ring{ --ring:132px; }
  #player-app .ssm-bd-label .is-long{ display:none; }
  #player-app .ssm-bd-label .is-short{ display:inline; }
  #player-app .ssm-breakdown{ column-gap:10px; row-gap:10px; grid-template-columns:24px auto minmax(28px,1fr) 26px; }
  #player-app .ssm-score .ssm-chip-ico.is-sm{ width:24px; height:24px; }
  #player-app .ssm-score .ssm-chip-ico.is-sm .ssm-i{ width:13px; height:13px; }
}
@container (max-width:330px){
  #player-app .ssm-score .ssm-ring{ --ring:116px; }
  #player-app .ssm-score{ gap:14px; }
  #player-app .ssm-breakdown{ grid-template-columns:24px minmax(0,1fr) 26px; }
  #player-app .ssm-bd-row .ssm-progress{ display:none; }
}
@container (max-width:230px){
  #player-app .ssm-score{ grid-template-columns:minmax(0,1fr); justify-items:center; }
  #player-app .ssm-breakdown{ width:100%; }
}

/* list row */
#player-app .ssm-list{ display:flex; flex-direction:column; gap:10px; }
#player-app .ssm-list.is-divided{ gap:0; }
#player-app .ssm-list.is-divided > .ssm-lr + .ssm-lr{ border-top:1px solid var(--ssm-line); }
#player-app .ssm-lr{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:14px 16px; min-height:64px;
  background:linear-gradient(180deg, var(--ssm-surface-2), var(--ssm-surface));
  border:1px solid var(--ssm-line); border-radius:var(--ssm-r);
  color:var(--ssm-text); cursor:default;
}
#player-app .ssm-list.is-divided > .ssm-lr{ background:none; border:none; border-radius:0; padding:12px 2px; }
#player-app button.ssm-lr, #player-app .ssm-lr.is-interactive{ cursor:pointer; transition:background var(--ssm-fast), border-color var(--ssm-fast); }
#player-app button.ssm-lr:hover, #player-app .ssm-lr.is-interactive:hover{ border-color:var(--ssm-line-2); background:var(--ssm-surface-3); }
#player-app .ssm-list.is-divided > button.ssm-lr:hover{ background:rgba(255,255,255,.025); }
#player-app .ssm-lr-main{ min-width:0; flex:1; }
#player-app .ssm-lr-title{ font-size:14px; font-weight:600; line-height:1.3; }
#player-app .ssm-lr-sub{ font-size:12.5px; color:var(--ssm-text-3); margin-top:2px; line-height:1.35; }
#player-app .ssm-lr-meta{ flex-shrink:0; font-size:12.5px; color:var(--ssm-text-2); text-align:right; }
#player-app .ssm-lr-chev{ color:var(--ssm-text-3); flex-shrink:0; }
#player-app .ssm-lr-chev .ssm-i{ width:17px; height:17px; }
#player-app .ssm-lr.is-unread .ssm-lr-title::after{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ssm-gold); margin-left:8px; vertical-align:middle; }

/* segmented tabs */
#player-app .ssm-seg{
  display:flex; gap:4px; padding:4px; max-width:100%;
  background:var(--ssm-surface); border:1px solid var(--ssm-line); border-radius:var(--ssm-r);
  overflow-x:auto; scrollbar-width:none;
}
#player-app .ssm-seg::-webkit-scrollbar{ display:none; }
#player-app .ssm-seg-item{
  flex:1 0 auto; min-height:38px; padding:0 16px; border-radius:10px;
  background:none; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  color:var(--ssm-text-2); font-size:13px; font-weight:500;
  transition:background var(--ssm-fast), color var(--ssm-fast);
}
#player-app .ssm-seg-item:hover{ color:var(--ssm-text); }
#player-app .ssm-seg-item.is-active{ background:var(--ssm-gold-grad); color:#1d1606; font-weight:600; box-shadow:0 6px 16px -8px rgba(var(--ssm-gold-rgb),.7); }

/* empty / coming soon */
#player-app .ssm-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:28px 16px; }
#player-app .ssm-empty-title{ font-weight:600; font-size:14.5px; }
#player-app .ssm-empty-text{ font-size:13px; color:var(--ssm-text-3); max-width:340px; }
#player-app .ssm-soon{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ssm-text-3); padding:4px 10px; border:1px dashed var(--ssm-line-2); border-radius:99px; }

/* skeleton */
#player-app .ssm-skel{
  background:linear-gradient(90deg, rgba(255,255,255,.035) 25%, rgba(255,255,255,.075) 37%, rgba(255,255,255,.035) 63%);
  background-size:400% 100%; animation:ssmShimmer 1.4s ease infinite; border-radius:var(--ssm-r);
}
#player-app .ssm-skel.is-line{ height:12px; border-radius:6px; }
#player-app .ssm-skel.is-tile{ height:118px; }
#player-app .ssm-skel.is-card{ height:220px; border-radius:var(--ssm-r-lg); }

/* divider */
#player-app .ssm-divider{ height:1px; background:var(--ssm-line); border:none; margin:var(--ssm-s4) 0; }

/* swatch (podgląd DS) */
#player-app .ssm-swatch{ display:flex; flex-direction:column; gap:8px; }
#player-app .ssm-swatch i{ display:block; height:38px; border-radius:12px; border:1px solid var(--ssm-line-2); }
#player-app .ssm-swatch b{ font-size:12.5px; font-weight:600; }
#player-app .ssm-swatch span{ font-size:11.5px; color:var(--ssm-text-3); font-family:'JetBrains Mono',monospace; }

/* ---------- 5. RE-SKIN KLAS LEGACY (reużyte widoki w portalu) ---------- */
#player-app .card{
  background:linear-gradient(180deg, var(--ssm-surface-2) 0%, var(--ssm-surface) 100%);
  border:1px solid var(--ssm-line); border-radius:var(--ssm-r-lg);
  box-shadow:var(--ssm-shadow-card); padding:var(--ssm-s5);
}
#player-app .card:hover{ border-color:var(--ssm-line-2); }
#player-app .card.clickable:hover{ transform:translateY(-2px); box-shadow:var(--ssm-shadow-card); }
#player-app .card .section-title, #player-app .section-title{
  font-family:var(--ssm-font-display); font-size:16px; font-weight:600; color:var(--ssm-text);
  text-transform:none; letter-spacing:-.005em; margin-bottom:var(--ssm-s3);
}
#player-app .card .section-title::before{ display:none; }
#player-app .btn{
  background:var(--ssm-gold-grad); color:#1d1606; border:1px solid transparent;
  border-radius:var(--ssm-r-sm); font-weight:600; min-height:40px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
#player-app .btn.secondary{ background:var(--ssm-surface-3); color:var(--ssm-text); border-color:var(--ssm-line-2); box-shadow:none; }
#player-app .btn.ghost{ background:transparent; color:var(--ssm-text-2); border-color:var(--ssm-line-2); box-shadow:none; }
#player-app .btn.ghost:hover{ color:var(--ssm-text); background:rgba(255,255,255,.03); }
#player-app .btn.small{ min-height:34px; border-radius:var(--ssm-r-xs); }
#player-app .badge{ border-radius:99px; padding:3px 10px; font-size:11.5px; }
#player-app .badge.green{ background:rgba(var(--ssm-green-rgb),.14); color:var(--ssm-green); }
#player-app .badge.yellow{ background:rgba(var(--ssm-amber-rgb),.14); color:var(--ssm-amber); }
#player-app .badge.orange{ background:rgba(var(--ssm-orange-rgb),.14); color:var(--ssm-orange); }
#player-app .badge.red{ background:rgba(var(--ssm-red-rgb),.14); color:var(--ssm-red); }
#player-app .badge.gray{ background:rgba(var(--ssm-neutral-rgb),.12); color:var(--ssm-text-2); }
#player-app .pill{ background:var(--ssm-surface-3); border-color:var(--ssm-line); color:var(--ssm-text-2); }
#player-app .tabs{
  display:flex; flex-wrap:nowrap; gap:4px; padding:4px; margin-bottom:var(--ssm-s5);
  background:var(--ssm-surface); border:1px solid var(--ssm-line); border-radius:var(--ssm-r);
  overflow-x:auto; scrollbar-width:none;
}
#player-app .tabs::-webkit-scrollbar{ display:none; }
#player-app .tab{ flex:0 0 auto; border:none; border-radius:10px; padding:9px 16px; font-weight:500; color:var(--ssm-text-2); }
#player-app .tab.active{ background:var(--ssm-gold-grad); color:#1d1606; font-weight:600; border:none; }
#player-app .kv{ border-bottom:1px solid var(--ssm-line); padding:9px 0; }
#player-app .kv.clickable:hover{ background:rgba(255,255,255,.03); }
#player-app .empty-state{ color:var(--ssm-text-3); padding:28px 16px; }
#player-app th{ color:var(--ssm-text-3); border-bottom-color:var(--ssm-line-2); }
#player-app td{ border-bottom-color:var(--ssm-line); }
#player-app tr.clickable:hover td{ background:rgba(255,255,255,.025); }
#player-app .progress{ background:rgba(255,255,255,.06); height:6px; border-radius:99px; }
#player-app .progress > div{ background:linear-gradient(90deg, rgba(var(--ssm-green-rgb),.7), var(--ssm-green)); border-radius:99px; }
#player-app .topbar h1{ font-family:var(--ssm-font-display); }
#player-app .field input:not([type="checkbox"]):not([type="radio"]), #player-app .field select, #player-app .field textarea{
  background:var(--ssm-surface); border-color:var(--ssm-line-2); border-radius:var(--ssm-r-sm);
}

/* ---------- 7. DASHBOARD "DZISIAJ" (js/25a-player-today.js) ---------- */
#player-app .pd-layout{ display:flex; flex-direction:column; gap:16px; }
#player-app .pd-col{ display:contents; }
#player-app .pd-s{ min-width:0; }
/* kolejność mobile: hero → raporty → plan → score → metryki → AI → reszta */
#player-app .pd-s-hero{ order:1; } #player-app .pd-s-reports{ order:2; } #player-app .pd-s-plan{ order:3; }
#player-app .pd-s-score{ order:4; } #player-app .pd-s-metrics{ order:5; } #player-app .pd-s-ai{ order:6; }
#player-app .pd-s-recent{ order:7; } #player-app .pd-s-quick{ order:8; }
@media (min-width:1180px){
  #player-app .pd-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,400px); gap:24px; align-items:start; }
  #player-app .pd-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }
}

/* hero */
#player-app .pd-hero{
  position:relative; overflow:hidden; border-radius:var(--ssm-r-xl);
  padding:28px 30px; min-height:196px; display:flex; align-items:flex-end;
  background:
    radial-gradient(520px 220px at 88% -10%, rgba(var(--ssm-gold-rgb),.13), transparent 62%),
    radial-gradient(420px 260px at 0% 120%, rgba(var(--ssm-blue-rgb),.10), transparent 60%),
    linear-gradient(135deg, #101b30 0%, #0a1120 100%);
  border:1px solid var(--ssm-line);
  box-shadow:var(--ssm-shadow-card);
}
#player-app .pd-hero-photo{
  position:absolute; top:0; right:0; bottom:0; width:48%;
  background-size:cover; background-position:center 20%;
  -webkit-mask-image:linear-gradient(to left, #000 35%, transparent 100%); mask-image:linear-gradient(to left, #000 35%, transparent 100%);
  opacity:.85;
}
#player-app .pd-hero-motto{
  position:absolute; top:24px; right:30px; z-index:1;
  font-family:Georgia,'Times New Roman',serif; font-style:italic; text-transform:uppercase;
  font-size:15px; line-height:1.35; letter-spacing:.2em; color:rgba(242,245,251,.72); text-align:left;
}
#player-app .pd-hero-motto span{ display:block; margin-top:9px; font-family:var(--ssm-font); font-style:normal; font-size:8.5px; letter-spacing:.34em; color:var(--ssm-text-3); }
#player-app .pd-hero.has-photo .pd-hero-motto{ display:none; }
#player-app .pd-hero-text{ position:relative; z-index:1; max-width:560px; }
#player-app .pd-s-hero{ container-type:inline-size; }
@container (max-width:640px){
  #player-app .pd-hero-motto{ font-size:11.5px; letter-spacing:.16em; top:20px; right:22px; }
  #player-app .pd-hero-motto span{ font-size:7.5px; margin-top:6px; }
  #player-app .pd-hero-date, #player-app .pd-hero-title{ padding-right:130px; }
  #player-app .pd-hero.has-photo .pd-hero-date, #player-app .pd-hero.has-photo .pd-hero-title{ padding-right:0; }
}
#player-app .pd-hero-date{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ssm-gold); }
#player-app .pd-hero-title{ font-family:var(--ssm-font-display); font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.1; margin-top:8px; }
#player-app .pd-wave{ display:inline-block; transform-origin:70% 80%; animation:pdWave 1.6s .4s var(--ssm-ease) 1; }
#player-app .pd-hero-msg{ font-size:15px; color:var(--ssm-text-2); margin-top:8px; max-width:440px; line-height:1.45; }
#player-app .pd-hero-progress{ display:flex; align-items:center; gap:6px; margin-top:16px; }
#player-app .pd-hero-progress i{ width:26px; height:5px; border-radius:99px; background:rgba(255,255,255,.1); transition:background var(--ssm-med); }
#player-app .pd-hero-progress i.is-on{ background:var(--ssm-green); box-shadow:0 0 10px rgba(var(--ssm-green-rgb),.5); }
#player-app .pd-hero-progress span{ margin-left:6px; font-size:12px; color:var(--ssm-text-3); font-weight:500; }
@keyframes pdWave{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(16deg); } 40%{ transform:rotate(-8deg); } 60%{ transform:rotate(12deg); } 80%{ transform:rotate(-4deg); } }

/* dzisiejsze raporty */
#player-app .pd-rt-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#player-app .pd-rt{
  position:relative; min-width:0; min-height:156px; padding:14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  border-radius:16px; border:1px solid rgba(var(--tone-rgb),.24);
  background:linear-gradient(160deg, rgba(var(--tone-rgb),.17) 0%, rgba(var(--tone-rgb),.04) 70%), var(--ssm-surface);
  color:var(--ssm-text); text-align:left; cursor:pointer; font:inherit;
  transition:transform var(--ssm-med) var(--ssm-ease), border-color var(--ssm-fast), box-shadow var(--ssm-fast);
  -webkit-tap-highlight-color:transparent;
}
#player-app .pd-rt:hover{ border-color:rgba(var(--tone-rgb),.5); transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(var(--tone-rgb),.6); }
#player-app .pd-rt:active{ transform:scale(.98); }
#player-app .pd-rt.is-empty{ align-items:center; justify-content:center; text-align:center; gap:8px; }
#player-app .pd-rt-label{ font-size:13.5px; font-weight:600; color:var(--ssm-text); }
#player-app .pd-rt.is-filled .pd-rt-label{ color:var(--ssm-text-2); font-weight:500; font-size:12.5px; margin-top:4px; }
#player-app .pd-rt-plus{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid rgba(242,245,251,.32); color:var(--ssm-text); transition:background var(--ssm-fast), border-color var(--ssm-fast); }
#player-app .pd-rt:hover .pd-rt-plus{ background:rgba(var(--tone-rgb),.2); border-color:var(--tone); }
#player-app .pd-rt-plus .ssm-i{ width:18px; height:18px; }
#player-app .pd-rt-cta{ font-size:12px; color:var(--ssm-text-2); }
#player-app .pd-rt-head{ display:flex; width:100%; align-items:center; justify-content:space-between; }
#player-app .pd-rt-chev{ color:var(--ssm-text-3); }
#player-app .pd-rt-chev .ssm-i{ width:16px; height:16px; }
#player-app .pd-rt-value{ font-family:var(--ssm-font-display); font-weight:700; font-size:24px; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums; white-space:nowrap; }
#player-app .pd-rt-sub{ font-size:11.5px; color:var(--ssm-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#player-app .pd-rt-status{ margin-top:auto; padding-top:4px; }

/* dzisiejszy plan — oś bez godzin (dane ich nie zawierają) */
#player-app .pd-timeline{ list-style:none; margin:0; padding:0; }
#player-app .pd-tl-item{ position:relative; display:grid; grid-template-columns:96px minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:9px 0; }
#player-app .pd-tl-item::before{ content:""; position:absolute; left:6px; top:0; bottom:0; width:1px; background:repeating-linear-gradient(to bottom, rgba(var(--ssm-gold-rgb),.45) 0 3px, transparent 3px 7px); }
#player-app .pd-tl-item:first-child::before{ top:50%; }
#player-app .pd-tl-item:last-child::before{ bottom:50%; }
#player-app .pd-tl-item:only-child::before{ display:none; }
#player-app .pd-tl-lane{ position:relative; padding-left:22px; font-size:12px; font-weight:500; color:var(--ssm-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#player-app .pd-tl-lane::before{ content:""; position:absolute; left:2px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--ssm-gold); box-shadow:0 0 0 3px rgba(var(--ssm-gold-rgb),.15); }
#player-app .pd-tl-item.is-done .pd-tl-lane::before{ background:var(--ssm-green); box-shadow:0 0 0 3px rgba(var(--ssm-green-rgb),.15); }
#player-app .pd-tl-main{ display:flex; align-items:center; gap:12px; min-width:0; padding:4px; margin:-4px; background:none; border:none; border-radius:12px; color:inherit; text-align:left; cursor:pointer; font:inherit; transition:background var(--ssm-fast); }
#player-app .pd-tl-main:hover{ background:rgba(255,255,255,.03); }
#player-app .pd-tl-main .ssm-chip-ico{ width:42px; height:42px; }
#player-app .pd-tl-text{ min-width:0; display:flex; flex-direction:column; }
#player-app .pd-tl-title{ font-size:14.5px; font-weight:600; line-height:1.3; }
#player-app .pd-tl-desc{ font-size:12.5px; color:var(--ssm-text-3); margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#player-app .pd-tl-tag{ margin-top:6px; }
#player-app .pd-tl-item.is-done .pd-tl-title{ color:var(--ssm-text-2); }
#player-app .pd-st{ width:24px; height:24px; flex-shrink:0; border-radius:50%; border:1.5px solid rgba(165,177,199,.45); display:inline-flex; align-items:center; justify-content:center; }
#player-app .pd-st.is-done{ background:var(--ssm-green); border-color:var(--ssm-green); color:#04120c; box-shadow:0 0 12px rgba(var(--ssm-green-rgb),.35); }
#player-app .pd-st.is-done .ssm-i{ width:14px; height:14px; stroke-width:3; }
#player-app .pd-st.is-progress{ border-color:var(--ssm-amber); background:conic-gradient(var(--ssm-amber) 0 50%, transparent 50% 100%); }
#player-app .pd-st-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:-8px; padding:0; border:none; border-radius:50%; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#player-app .pd-st-btn:hover .pd-st:not(.is-done){ border-color:var(--ssm-green); background:rgba(var(--ssm-green-rgb),.12); }
#player-app .pd-st-btn:hover .pd-st.is-done{ filter:brightness(1.1); }
#player-app .pd-st-btn:disabled{ opacity:.5; cursor:wait; }
#player-app .pd-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:12px; padding-top:12px; border-top:1px solid var(--ssm-line); font-size:12px; color:var(--ssm-text-2); }
#player-app .pd-legend > span{ display:inline-flex; align-items:center; gap:6px; }
#player-app .pd-legend .pd-st{ width:16px; height:16px; }
#player-app .pd-legend .pd-st .ssm-i{ width:10px; height:10px; }

/* kompaktowa oś planu, gdy karta jest wąska (telefon, wąska kolumna desktopu) */
#player-app .pd-plan{ container-type:inline-size; }
@container (max-width:600px){
  #player-app .pd-tl-item{ grid-template-columns:14px minmax(0,1fr) auto; gap:4px 10px; }
  #player-app .pd-tl-lane{ grid-column:1; grid-row:1 / span 2; align-self:stretch; padding-left:14px; font-size:0; }
  #player-app .pd-tl-lane::before{ top:29px; }
  #player-app .pd-tl-main{ grid-column:2; grid-row:1; }
  #player-app .pd-tl-item > .pd-st, #player-app .pd-tl-item > .pd-st-btn{ grid-column:3; grid-row:1; }
  #player-app .pd-tl-item > .ssm-btn{ grid-column:2; grid-row:2; justify-self:start; margin-left:50px; min-height:32px; }
  #player-app .pd-tl-main .ssm-chip-ico{ width:38px; height:38px; }
}

/* metryki — 4 kolumny tylko, gdy kontener jest dość szeroki */
#player-app .pd-metrics{ container-type:inline-size; }
#player-app .pd-metric-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@container (min-width:600px){ #player-app .pd-metric-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* rekomendacja AI */
#player-app .pd-ai{
  border-color:rgba(var(--tone-rgb),.3);
  background:radial-gradient(460px 180px at 0% 0%, rgba(var(--tone-rgb),.13), transparent 70%), linear-gradient(180deg, var(--ssm-surface-2), var(--ssm-surface));
}
#player-app .pd-ai.t-gold{ border-color:rgba(var(--ssm-gold-rgb),.35); }
#player-app .pd-ai-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
#player-app .pd-ai-mark{ width:42px; height:42px; border-radius:13px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:var(--ssm-gold); background:rgba(var(--ssm-gold-rgb),.12); border:1px solid rgba(var(--ssm-gold-rgb),.25); }
#player-app .pd-ai-mark .ssm-i{ width:22px; height:22px; }
#player-app .pd-ai-status{ margin-bottom:10px; }
#player-app .pd-ai-title{ font-family:var(--ssm-font-display); font-size:17px; font-weight:600; line-height:1.3; }
#player-app .pd-ai-text{ font-size:14px; color:var(--ssm-text-2); line-height:1.5; margin-top:6px; }
#player-app .pd-ai-factors{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
#player-app .pd-ai-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--ssm-line); }

/* szybkie akcje */
#player-app .pd-qa-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#player-app .pd-qa{ display:flex; align-items:center; gap:10px; min-height:50px; padding:8px 10px; border-radius:12px; border:1px solid var(--ssm-line); background:rgba(255,255,255,.02); color:var(--ssm-text); font:inherit; font-size:13px; font-weight:500; text-align:left; cursor:pointer; transition:background var(--ssm-fast), border-color var(--ssm-fast); }
#player-app .pd-qa:hover{ background:rgba(255,255,255,.045); border-color:var(--ssm-line-2); }
#player-app .pd-qa span:last-child{ min-width:0; }

@media (max-width:767px){
  #player-app .pd-layout{ gap:14px; }
  #player-app .pd-hero{ padding:6px 2px 4px; min-height:0; background:none; border:none; box-shadow:none; border-radius:0; overflow:visible; }
  #player-app .pd-hero-photo{ width:56%; top:-16px; bottom:-8px; right:-16px; opacity:.32; }
  #player-app .pd-hero-motto{ top:8px; right:2px; font-size:11px; letter-spacing:.16em; }
  #player-app .pd-hero-motto span{ font-size:7px; letter-spacing:.28em; margin-top:6px; }
  #player-app .pd-hero-date, #player-app .pd-hero-title{ padding-right:118px; }
  #player-app .pd-hero.has-photo .pd-hero-date, #player-app .pd-hero.has-photo .pd-hero-title{ padding-right:0; }
  #player-app .pd-hero-title{ font-size:28px; margin-top:6px; }
  #player-app .pd-hero-msg{ font-size:14.5px; }
  #player-app .pd-hero-progress{ margin-top:12px; }
  #player-app .pd-rt-grid{ gap:8px; }
  #player-app .pd-rt{ min-height:138px; padding:12px 10px; border-radius:14px; }
  #player-app .pd-rt-value{ font-size:20px; }
  #player-app .pd-rt .ssm-chip-ico{ width:34px; height:34px; border-radius:10px; }
  #player-app .pd-rt-plus{ width:34px; height:34px; }
  #player-app .pd-rt .ssm-badge.is-solid{ font-size:9.5px; padding:0 7px; height:20px; letter-spacing:.04em; }
  #player-app .pd-ai-title{ font-size:16px; }
}
@media (max-width:360px){
  #player-app .pd-hero-motto{ display:none; }
  #player-app .pd-hero-date, #player-app .pd-hero-title{ padding-right:0; }
}

/* ---------- 7b. WYKRESY + NAWIGACJA OKRESU (UI kit) ---------- */
#player-app .ssm-period{ display:flex; align-items:center; gap:6px; padding:4px; background:var(--ssm-surface); border:1px solid var(--ssm-line); border-radius:var(--ssm-r); min-width:0; }
#player-app .ssm-period-btn{ width:40px; height:40px; flex-shrink:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--ssm-surface-2); border:1px solid var(--ssm-line); color:var(--ssm-text-2); cursor:pointer; transition:background var(--ssm-fast), color var(--ssm-fast); }
#player-app .ssm-period-btn:hover:not(:disabled){ background:var(--ssm-surface-3); color:var(--ssm-text); }
#player-app .ssm-period-btn:disabled{ opacity:.35; cursor:not-allowed; }
#player-app .ssm-period-label{ flex:1; min-width:0; text-align:center; line-height:1.2; }
#player-app .ssm-period-label span{ display:block; font-family:var(--ssm-font-display); font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#player-app .ssm-period-label small{ display:block; font-size:11.5px; color:var(--ssm-text-3); margin-top:2px; }

#player-app .ssm-chart-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--ssm-text-3); font-size:13px; border:1px dashed var(--ssm-line-2); border-radius:var(--ssm-r); text-align:center; padding:12px; }
#player-app .ssm-chart-empty .ssm-i{ width:22px; height:22px; opacity:.7; }

#player-app .ssm-bar-chart{ position:relative; height:var(--h); }
#player-app .ssm-bc-grid{ position:absolute; left:0; right:0; top:0; bottom:26px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
#player-app .ssm-bc-line{ position:relative; height:0; border-top:1px dashed rgba(150,172,214,.13); }
#player-app .ssm-bc-line span{ position:absolute; left:0; top:-8px; font-size:10.5px; line-height:1; color:var(--ssm-text-3); font-variant-numeric:tabular-nums; background:var(--ssm-surface-2); padding-right:4px; }
#player-app .ssm-bc-area{ position:absolute; left:34px; right:0; top:0; bottom:26px; pointer-events:none; z-index:1; }
#player-app .ssm-bc-target{ position:absolute; left:0; right:0; border-top:1.5px dashed rgba(var(--tone-rgb, var(--ssm-gold-rgb)),.7); }
#player-app .ssm-bc-target span{ position:absolute; right:0; top:-18px; font-size:10.5px; font-weight:600; color:var(--tone, var(--ssm-gold)); background:var(--ssm-surface-2); padding:0 4px; border-radius:4px; }
#player-app .ssm-bc-cols{ position:absolute; left:34px; right:0; top:0; bottom:0; display:flex; gap:8px; }
#player-app .ssm-bc-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; }
#player-app .ssm-bc-track{ flex:1; width:100%; max-width:38px; display:flex; align-items:flex-end; position:relative; }
#player-app .ssm-bc-track > i{ position:relative; display:block; width:100%; border-radius:7px 7px 3px 3px; background:linear-gradient(to top, rgba(var(--tone-rgb, var(--ssm-blue-rgb)),.38), var(--tone, var(--ssm-blue))); transform-origin:bottom; animation:ssmBarIn .7s var(--ssm-ease) both; }
#player-app .ssm-bc-track > i.is-stub{ height:3px; background:rgba(255,255,255,.08); border-radius:2px; animation:none; }
#player-app .ssm-bc-col.is-hl .ssm-bc-track > i:not(.is-stub){ box-shadow:0 0 18px rgba(var(--tone-rgb, var(--ssm-blue-rgb)),.55); }
#player-app .ssm-bc-val{ font-style:normal; position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:5px; font-size:10.5px; font-weight:600; color:var(--ssm-text-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
#player-app .ssm-bc-col.is-hl .ssm-bc-val{ color:var(--ssm-text); }
#player-app .ssm-bc-label{ height:26px; line-height:26px; font-size:11.5px; color:var(--ssm-text-3); }
#player-app .ssm-bc-col.is-hl .ssm-bc-label{ color:var(--ssm-text); font-weight:600; }
@media (max-width:767px){
  #player-app .ssm-bc-cols{ gap:5px; left:30px; }
  #player-app .ssm-bc-area{ left:30px; }
  #player-app .ssm-bc-val{ font-size:9.5px; }
}

#player-app .ssm-line-chart{ position:relative; }
#player-app .ssm-lc-plot{ position:relative; height:var(--h); }
#player-app .ssm-lc-plot svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#player-app .ssm-lc-dot{ position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--ssm-surface); border:2px solid var(--tone, var(--ssm-green)); }
#player-app .ssm-lc-dot.is-last{ background:var(--tone, var(--ssm-green)); box-shadow:0 0 12px rgba(var(--tone-rgb, var(--ssm-green-rgb)),.7); }
#player-app .ssm-lc-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:10.5px; color:var(--ssm-text-3); gap:4px; }
#player-app .ssm-lc-labels span{ white-space:nowrap; }

/* ---------- 7c. MONITORING (js/25b-player-monitoring.js) ---------- */
#player-app .pm-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
#player-app .pm-head .ssm-period{ flex:0 1 340px; }
#player-app .pm-head .ssm-seg{ flex:0 1 auto; }
#player-app .pm-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
#player-app .pm-kpis{ container-type:inline-size; }
#player-app .pm-kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@container (min-width:540px){ #player-app .pm-kpi-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
#player-app .pm-score-slot .ssm-card{ container-type:inline-size; height:100%; }
#player-app .pm-score{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:center; }
#player-app .pm-score-ring{ display:flex; flex-direction:column; align-items:center; gap:10px; }
@container (max-width:440px){
  #player-app .pm-score{ gap:16px; }
  #player-app .pm-score-ring .ssm-ring{ --ring:112px; }
  #player-app .pm-score-ring .ssm-badge{ font-size:10.5px; padding:0 8px; height:22px; }
  #player-app .pm-score .ssm-lc-labels span:nth-child(even){ visibility:hidden; }
  #player-app .pm-score .ssm-overline{ font-size:10px; }
}
#player-app .pm-grid-2{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
#player-app .pm-gps-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
#player-app .pm-tiles-5{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
#player-app .pm-acwr{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-top:16px; padding:10px 12px; border-radius:12px; font-size:12.5px; color:var(--ssm-text-2); background:rgba(var(--tone-rgb),.06); border:1px solid rgba(var(--tone-rgb),.2); }
#player-app .pm-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border-radius:var(--ssm-r-lg); background:linear-gradient(90deg, rgba(var(--ssm-gold-rgb),.08), rgba(var(--ssm-gold-rgb),.02)); border:1px solid rgba(var(--ssm-gold-rgb),.35); }
#player-app .pm-pain{ display:flex; flex-wrap:wrap; gap:6px; }
#player-app .pm-tip .ssm-lr-title{ font-weight:500; font-size:13.5px; line-height:1.45; }
#player-app .pm-tip{ align-items:flex-start; }
#player-app .pm-legacy > .card:first-child, #player-app .pm-legacy .card{ margin-bottom:16px; }
@media (min-width:1180px){
  #player-app .pm-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:stretch; }
  #player-app .pm-grid > #pm-trend{ grid-column:1 / -1; }
  #player-app .pm-grid-2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:767px){
  #player-app .pm-head{ margin-bottom:16px; }
  #player-app .pm-head .ssm-period, #player-app .pm-head .ssm-seg{ flex:1 1 100%; }
  #player-app .pm-gps-grid, #player-app .pm-tiles-5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #player-app .pm-tiles-5 > :last-child:nth-child(odd){ grid-column:1 / -1; }
  #player-app .pm-cta .ssm-btn{ width:100%; }
  #player-app .ssm-seg-item{ padding:0 14px; }
}

/* ---------- 7d. TRENING (js/25c-player-training.js) ---------- */
#player-app .pt-head{ margin-bottom:20px; }
#player-app .pt-head .ssm-seg{ max-width:460px; }
#player-app .pt-layout{ display:flex; flex-direction:column; gap:16px; }
#player-app .pt-o1{ order:1; } #player-app .pt-o2{ order:2; } #player-app .pt-o3{ order:3; } #player-app .pt-o4{ order:4; }
#player-app .pt-o5{ order:5; } #player-app .pt-o6{ order:6; } #player-app .pt-o7{ order:7; } #player-app .pt-o8{ order:8; }
@media (min-width:1180px){
  #player-app .pt-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,400px); gap:24px; align-items:start; }
  #player-app .pt-layout .pd-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }
  #player-app .pt-layout .pd-s{ order:0; } /* na desktopie kolejność = kolejność w kolumnach */
}

/* okładki programów — systemowe ilustracje obszaru (dane nie mają zdjęć) */
#player-app .pt-cover{
  position:relative; overflow:hidden; flex-shrink:0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 78% 28%, rgba(var(--tone-rgb),.5), transparent 58%),
    linear-gradient(135deg, rgba(var(--tone-rgb),.24), rgba(var(--tone-rgb),.04) 70%), #0c1424;
}
#player-app .pt-cover-ico{ position:absolute; right:16px; bottom:12px; color:var(--tone); filter:drop-shadow(0 6px 16px rgba(var(--tone-rgb),.6)); }
#player-app .pt-cover-ico .ssm-i{ width:44px; height:44px; stroke-width:1.5; }
#player-app .pt-cover-area{ position:absolute; left:12px; bottom:10px; right:70px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(242,245,251,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#player-app .pt-cover-num{ position:absolute; top:10px; right:12px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:rgba(242,245,251,.6); }
#player-app .pt-cover-md{ height:108px; }
#player-app .pt-cover-lg{ height:150px; margin:-20px -20px 18px; border-radius:var(--ssm-r-lg) var(--ssm-r-lg) 0 0; }
#player-app .pt-cover-lg .pt-cover-ico .ssm-i{ width:60px; height:60px; }
#player-app .pt-cover-sm{ width:84px; height:84px; border-radius:20px; border:1px solid rgba(var(--tone-rgb),.3); }
#player-app .pt-cover-sm .pt-cover-ico{ inset:0; display:flex; align-items:center; justify-content:center; }
#player-app .pt-cover-sm .pt-cover-ico .ssm-i{ width:38px; height:38px; }
#player-app .pt-cover-sm .pt-cover-area, #player-app .pt-cover-sm .pt-cover-num{ display:none; }

/* dzisiejszy trening */
#player-app .pt-today.is-done{ border-color:rgba(var(--ssm-green-rgb),.35); }
#player-app .pt-today-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
#player-app .pt-today-main{ display:flex; align-items:center; gap:16px; }
#player-app .pt-today-title{ font-family:var(--ssm-font-display); font-size:26px; font-weight:700; letter-spacing:-.015em; line-height:1.15; }
#player-app .pt-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
#player-app .pt-chip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:99px; background:rgba(255,255,255,.04); border:1px solid var(--ssm-line); font-size:12.5px; color:var(--ssm-text-2); white-space:nowrap; }
#player-app .pt-chip .ssm-i{ width:14px; height:14px; }
#player-app .pt-goal{ margin-top:16px; font-size:14px; line-height:1.5; color:var(--ssm-text-2); }
#player-app .pt-goal b{ color:var(--ssm-text); font-weight:600; }
#player-app .pt-rep{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding:10px 12px; border-radius:12px; font-size:13px; color:var(--ssm-text-2); background:rgba(var(--ssm-green-rgb),.07); border:1px solid rgba(var(--ssm-green-rgb),.25); }
#player-app .pt-rep > span{ flex:1; min-width:0; }
#player-app .pt-rep > .ssm-i{ color:var(--ssm-green); }
#player-app .pt-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
#player-app .pt-done-pill{ display:inline-flex; align-items:center; gap:8px; min-height:54px; padding:0 22px; border-radius:var(--ssm-r); background:rgba(var(--ssm-green-rgb),.14); border:1px solid rgba(var(--ssm-green-rgb),.38); color:var(--ssm-green); font-size:15.5px; font-weight:600; }
#player-app .pt-done-pill .ssm-i{ width:19px; height:19px; stroke-width:2.6; }
#player-app .pt-diff{ display:inline-flex; gap:3px; vertical-align:middle; margin-left:2px; }
#player-app .pt-diff i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.16); }
#player-app .pt-diff i.is-on{ background:var(--ssm-gold); }

/* ćwiczenia */
#player-app .pt-ex{ list-style:none; margin:0; padding:0; }
#player-app .pt-ex-item{ display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; align-items:start; padding:11px 0; border-top:1px solid var(--ssm-line); }
#player-app .pt-ex-item:first-child{ border-top:none; padding-top:2px; }
#player-app .pt-ex-idx{ width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--ssm-surface-3); border:1px solid var(--ssm-line-2); font-family:var(--ssm-font-display); font-size:12.5px; font-weight:600; color:var(--ssm-text-2); }
#player-app .pt-ex-item.is-warm .pt-ex-idx{ background:rgba(var(--ssm-amber-rgb),.14); border-color:rgba(var(--ssm-amber-rgb),.3); color:var(--ssm-amber); }
#player-app .pt-ex-idx .ssm-i{ width:15px; height:15px; }
#player-app .pt-ex-row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; padding-top:5px; }
#player-app .pt-ex-name{ font-size:14px; font-weight:600; line-height:1.35; }
#player-app .pt-ex-notes{ font-size:12.5px; color:var(--ssm-text-3); margin-top:3px; line-height:1.45; white-space:pre-line; }
#player-app .pt-ex-meta{ font-size:12.5px; color:var(--ssm-gold-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
#player-app .pt-ex-more{ margin-top:10px; font-size:12.5px; color:var(--ssm-text-3); }
#player-app .pt-ex-fallback{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ssm-text-2); }

/* karty programów + biblioteka */
#player-app .pt-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:2px; }
#player-app .pt-rail::-webkit-scrollbar{ display:none; }
#player-app .pt-rail > *{ scroll-snap-align:start; }
#player-app .pt-card{ position:relative; display:flex; flex-direction:column; min-width:0; padding:0; overflow:hidden; text-align:left; font:inherit; color:var(--ssm-text); cursor:pointer;
  background:linear-gradient(180deg, var(--ssm-surface-2), var(--ssm-surface)); border:1px solid var(--ssm-line); border-radius:16px; box-shadow:var(--ssm-shadow-card);
  transition:transform var(--ssm-med) var(--ssm-ease), border-color var(--ssm-fast); }
#player-app .pt-card:hover{ transform:translateY(-3px); border-color:var(--ssm-line-2); }
#player-app .pt-card:active{ transform:scale(.99); }
#player-app .pt-card-flag{ position:absolute; top:10px; left:10px; }
#player-app .pt-card-body{ display:flex; flex-direction:column; gap:6px; padding:14px; flex:1; }
#player-app .pt-card-name{ font-size:14.5px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#player-app .pt-card-meta{ font-size:12px; color:var(--ssm-text-3); }
#player-app .pt-card-goal{ font-size:12.5px; color:var(--ssm-text-2); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#player-app .pt-card-foot{ margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
#player-app .pt-card-foot .ssm-caption{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; }
#player-app .pt-card-foot .ssm-i{ width:13px; height:13px; }
#player-app .pt-lib-tools{ display:flex; flex-direction:column; gap:12px; }
#player-app .pt-search{ display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; border-radius:var(--ssm-r); background:var(--ssm-surface); border:1px solid var(--ssm-line-2); color:var(--ssm-text-3); transition:border-color var(--ssm-fast); }
#player-app .pt-search:focus-within{ border-color:rgba(var(--ssm-gold-rgb),.55); }
#player-app .pt-search input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--ssm-text); font:inherit; font-size:15px; }
#player-app .pt-search input::placeholder{ color:var(--ssm-text-3); }
#player-app .pt-cats{ display:flex; flex-wrap:wrap; gap:6px; }
#player-app .pt-cat{ height:32px; padding:0 13px; border-radius:99px; border:1px solid var(--ssm-line-2); background:transparent; color:var(--ssm-text-2); font:inherit; font-size:12.5px; cursor:pointer; transition:all var(--ssm-fast); }
#player-app .pt-cat:hover{ color:var(--ssm-text); }
#player-app .pt-cat.is-active{ background:rgba(var(--ssm-gold-rgb),.12); border-color:rgba(var(--ssm-gold-rgb),.5); color:var(--ssm-text); }
#player-app .pt-lib-count{ margin-bottom:10px; }
#player-app .pt-lib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }

/* status / informacje */
#player-app .pt-progress-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
#player-app .pt-mini{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
#player-app .pt-mini-tile{ display:flex; flex-direction:column; gap:3px; min-width:0; padding:10px 12px; border-radius:12px; text-align:left; font:inherit; color:var(--ssm-text); background:rgba(255,255,255,.025); border:1px solid var(--ssm-line); cursor:pointer; transition:border-color var(--ssm-fast); }
#player-app .pt-mini-tile:hover{ border-color:var(--ssm-line-2); }
#player-app .pt-mini-tile span{ font-size:11.5px; color:var(--ssm-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#player-app .pt-mini-tile b{ font-size:21px; font-weight:700; line-height:1.1; }
#player-app .pt-mini-tile small{ font-size:11px; color:var(--ssm-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#player-app .pt-dl{ margin:0; }
#player-app .pt-dl > div{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--ssm-line); font-size:13px; }
#player-app .pt-dl > div:last-child{ border-bottom:none; }
#player-app .pt-dl dt{ color:var(--ssm-text-3); flex-shrink:0; }
#player-app .pt-dl dd{ margin:0; text-align:right; color:var(--ssm-text); min-width:0; }
#player-app .pt-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
#player-app .pt-links a{ text-decoration:none; }

/* plan */
#player-app .pt-plan-sum-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
#player-app .pt-plan-stats{ display:flex; gap:22px; }
#player-app .pt-plan-stats span{ display:flex; flex-direction:column; font-size:12px; color:var(--ssm-text-3); }
#player-app .pt-plan-stats b{ font-size:24px; font-weight:700; color:var(--ssm-text); line-height:1.1; }
#player-app .pt-group-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
#player-app .pt-plan-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
#player-app .pt-plan-card{ padding:16px; }
#player-app .pt-plan-card-top{ display:flex; align-items:flex-start; gap:12px; }
#player-app .pt-plan-name{ font-size:15px; font-weight:600; line-height:1.3; }
#player-app .pt-plan-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:12px; color:var(--ssm-text-3); }
#player-app .pt-plan-meta span{ display:inline-flex; align-items:center; gap:5px; }
#player-app .pt-plan-meta .ssm-i{ width:13px; height:13px; }
#player-app .pt-plan-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

/* szczegóły programu */
#player-app .pt-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
#player-app .pt-note{ display:flex; gap:12px; padding:12px; margin-bottom:10px; border-radius:12px; background:rgba(var(--tone-rgb),.05); border:1px solid rgba(var(--tone-rgb),.18); }
#player-app .pt-note:last-child{ margin-bottom:0; }
#player-app .pt-note-title{ font-size:13px; font-weight:600; }
#player-app .pt-note-text{ font-size:13px; color:var(--ssm-text-2); line-height:1.5; margin-top:2px; white-space:pre-line; }

@media (max-width:767px){
  #player-app .pt-head{ margin-bottom:16px; }
  #player-app .pt-head .ssm-seg{ max-width:none; }
  #player-app .pt-today-title{ font-size:21px; }
  #player-app .pt-cover-sm{ width:64px; height:64px; border-radius:16px; }
  #player-app .pt-cover-sm .pt-cover-ico .ssm-i{ width:30px; height:30px; }
  #player-app .pt-cover-lg{ margin:-16px -16px 16px; height:120px; border-radius:var(--ssm-r) var(--ssm-r) 0 0; }
  #player-app .pt-cta > .ssm-btn.is-primary, #player-app .pt-cta > .pt-done-pill{ flex:1 1 100%; justify-content:center; }
  #player-app .pt-cta > .ssm-btn{ flex:1 1 0; }
  #player-app .pt-lib-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #player-app .pt-lib-grid .pt-cover-md{ height:84px; }
  #player-app .pt-lib-grid .pt-cover-ico .ssm-i{ width:34px; height:34px; }
  #player-app .pt-lib-grid .pt-card-body{ padding:11px; gap:5px; }
  #player-app .pt-lib-grid .pt-card-name{ font-size:13.5px; }
  #player-app .pt-lib-grid .pt-card-goal{ display:none; }
  #player-app .pt-lib-grid .pt-cover-area{ font-size:9px; right:44px; }
  #player-app .pt-plan-grid{ grid-template-columns:minmax(0,1fr); }
  #player-app .pt-plan-stats{ gap:16px; }
  #player-app .pt-rail{ grid-auto-columns:78%; }
}

/* ---------- 7e. ŻYWIENIE (js/25d-player-nutrition.js) ---------- */
#player-app .pn-cover{ position:relative; overflow:hidden; flex-shrink:0; background-size:cover; background-position:center;
  background-image:
    radial-gradient(circle at 75% 25%, rgba(var(--tone-rgb, var(--ssm-orange-rgb)),.5), transparent 58%),
    radial-gradient(circle at 10% 110%, rgba(var(--tone-rgb, var(--ssm-orange-rgb)),.22), transparent 55%),
    linear-gradient(135deg, rgba(var(--tone-rgb, var(--ssm-orange-rgb)),.2), rgba(var(--tone-rgb, var(--ssm-orange-rgb)),.04) 70%);
  background-color:#0d1424; }
#player-app .pn-cover.has-photo{ background-color:var(--ssm-surface-3); }
#player-app .pn-cover-ico{ position:absolute; right:14px; bottom:10px; color:var(--tone); filter:drop-shadow(0 6px 16px rgba(var(--tone-rgb),.6)); }
#player-app .pn-cover-ico .ssm-i{ width:40px; height:40px; stroke-width:1.5; }
#player-app .pn-cover-cat{ position:absolute; left:12px; bottom:10px; right:60px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(242,245,251,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#player-app .pn-cover-md{ height:100px; }
#player-app .pn-cover-lg{ height:150px; margin:-20px -20px 18px; border-radius:var(--ssm-r-lg) var(--ssm-r-lg) 0 0; }
#player-app .pn-cover-lg.has-photo{ height:240px; }
#player-app .pn-cover-lg .pn-cover-ico .ssm-i{ width:58px; height:58px; }
#player-app .pn-cover-sm{ width:58px; height:58px; border-radius:16px; border:1px solid rgba(var(--tone-rgb),.28); }
#player-app .pn-cover-sm .pn-cover-ico{ inset:0; display:flex; align-items:center; justify-content:center; }
#player-app .pn-cover-sm .pn-cover-ico .ssm-i{ width:26px; height:26px; }

/* cel + kalorie, makro */
#player-app .pn-goal{ container-type:inline-size; }
#player-app .pn-kcal{ margin-top:10px; font-size:13px; color:var(--ssm-text-2); }
#player-app .pn-kcal b{ font-size:22px; font-weight:700; color:var(--ssm-text); }
#player-app .pn-remaining{ display:inline-block; margin-top:8px; font-size:12.5px; color:var(--ssm-text-2); padding:6px 10px; border-radius:9px; background:rgba(var(--ssm-green-rgb),.07); border:1px solid rgba(var(--ssm-green-rgb),.2); }
#player-app .pn-remaining.is-over{ background:rgba(var(--ssm-orange-rgb),.08); border-color:rgba(var(--ssm-orange-rgb),.25); }
#player-app .pn-remaining b{ color:var(--ssm-text); }
#player-app .pn-macros{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#player-app .pn-macro{ padding:12px; border-radius:12px; background:rgba(var(--tone-rgb),.05); border:1px solid rgba(var(--tone-rgb),.16); }
#player-app .pn-macro-top{ display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--ssm-text-2); margin-bottom:10px; }
#player-app .pn-macro-top b{ color:var(--ssm-text); font-weight:700; font-size:19px; }
@media (max-width:560px){ #player-app .pn-macros{ grid-template-columns:minmax(0,1fr); gap:10px; } #player-app .pn-macro-top{ flex-direction:row; justify-content:space-between; align-items:baseline; } #player-app .pn-macro-top b{ font-size:15px; } }

/* cel + alergie */
#player-app .pn-goal-row{ display:flex; align-items:center; gap:18px; }
#player-app .pn-goal-name{ font-family:var(--ssm-font-display); font-size:18px; font-weight:600; }
#player-app .pn-allergy{ display:flex; gap:12px; align-items:flex-start; margin-top:16px; padding:12px; border-radius:12px; background:rgba(var(--ssm-orange-rgb),.07); border:1px solid rgba(var(--ssm-orange-rgb),.22); color:var(--ssm-orange); }
#player-app .pn-allergy.is-danger{ background:rgba(var(--ssm-red-rgb),.08); border-color:rgba(var(--ssm-red-rgb),.3); color:var(--ssm-red); margin-top:16px; }
#player-app .pn-allergy > .ssm-i{ width:18px; height:18px; margin-top:1px; }
#player-app .pn-allergy-title{ font-size:13px; font-weight:600; color:var(--ssm-text); margin-bottom:6px; }
#player-app .pn-allergy-chips{ display:flex; flex-wrap:wrap; gap:6px; }

/* posiłki */
#player-app .pn-meals{ display:flex; flex-direction:column; gap:10px; }
#player-app .pn-meal{ display:flex; flex-direction:column; gap:10px; min-width:0; padding:10px; border-radius:14px; background:rgba(255,255,255,.02); border:1px solid var(--ssm-line); transition:border-color var(--ssm-fast); }
#player-app .pn-meal-row{ display:flex; align-items:center; gap:8px; min-width:0; }
#player-app .pn-meal:hover{ border-color:var(--ssm-line-2); }
#player-app .pn-meal-main{ flex:1; min-width:0; display:flex; align-items:center; gap:14px; background:none; border:none; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
#player-app .pn-meal-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
#player-app .pn-meal .pn-cover-sm{ flex:0 0 auto; }
#player-app .pn-meal-slot{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ssm-text-3); }
#player-app .pn-meal-name{ font-size:14.5px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
#player-app .pn-meal-meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 0; font-size:12.5px; color:var(--ssm-text-2); }
#player-app .pn-meal-sep{ white-space:pre; color:var(--ssm-text-3); }
#player-app .pn-meal-kcal, #player-app .pn-meal-macro{ white-space:nowrap; }
#player-app .pn-meal-meta b{ color:var(--ssm-text); font-weight:600; }
#player-app .pn-meal-flag{ margin-top:4px; }
#player-app .pn-meal-x{ width:36px; height:36px; color:var(--ssm-text-3); }
#player-app .pn-meal-x:hover{ color:var(--ssm-red); }

/* plan — sloty */
#player-app .pn-plan-bar{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
#player-app .pn-plan-total{ display:flex; flex-direction:column; align-items:flex-end; font-size:13px; color:var(--ssm-text-2); }
#player-app .pn-plan-total b{ font-size:24px; color:var(--ssm-text); font-weight:700; }
#player-app .pn-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; }
#player-app .pn-slot{ padding:16px; }
#player-app .pn-slot.is-empty{ border-style:dashed; background:rgba(255,255,255,.015); box-shadow:none; }
#player-app .pn-slot-head{ display:flex; align-items:center; gap:12px; }
#player-app .pn-slot-head + .pn-meals{ margin-top:14px; }
#player-app .pn-slot-name{ font-size:15px; font-weight:600; }

/* przepisy */
#player-app .pn-toggles{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#player-app .pn-toggles .pt-cat{ display:inline-flex; align-items:center; gap:6px; }
#player-app .pn-toggles .pt-cat .ssm-i{ width:14px; height:14px; }
#player-app .pn-mine{ color:var(--ssm-orange); }
#player-app .pn-pick{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border-radius:var(--ssm-r-lg); background:linear-gradient(90deg, rgba(var(--ssm-gold-rgb),.09), rgba(var(--ssm-gold-rgb),.02)); border:1px solid rgba(var(--ssm-gold-rgb),.4); }
#player-app .pn-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
#player-app .pn-card{ position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:16px; background:linear-gradient(180deg, var(--ssm-surface-2), var(--ssm-surface)); border:1px solid var(--ssm-line); box-shadow:var(--ssm-shadow-card); transition:transform var(--ssm-med) var(--ssm-ease), border-color var(--ssm-fast); }
#player-app .pn-card:hover{ transform:translateY(-3px); border-color:var(--ssm-line-2); }
#player-app .pn-card-main{ display:flex; flex-direction:column; flex:1; padding:0; background:none; border:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
#player-app .pn-card-body{ display:flex; flex-direction:column; gap:5px; padding:13px 14px 14px; }
#player-app .pn-card-name{ font-size:14.5px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding-right:4px; }
#player-app .pn-card-meta{ font-size:12.5px; color:var(--ssm-text-2); }
#player-app .pn-card-meta b{ color:var(--ssm-text); }
#player-app .pn-card-macro{ font-size:11.5px; color:var(--ssm-text-3); }
#player-app .pn-card-add{ padding:0 14px 14px; }
#player-app .pn-fav{ position:absolute; top:8px; right:8px; z-index:2; width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(5,8,15,.55); border:1px solid rgba(255,255,255,.12); color:rgba(242,245,251,.8); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:color var(--ssm-fast), transform var(--ssm-fast); }
#player-app .pn-fav .ssm-i{ width:17px; height:17px; }
#player-app .pn-fav:hover{ transform:scale(1.06); }
#player-app .pn-fav.is-on{ color:var(--ssm-gold); }
#player-app .pn-fav.is-on .ssm-i{ fill:currentColor; }
#player-app .pn-d-hero{ position:relative; }
#player-app .pn-d-hero > .pn-fav{ top:14px; right:14px; }

/* szczegóły przepisu */
#player-app .pn-d-macros{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:16px; }
#player-app .pn-d-macros > div{ padding:12px 10px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--ssm-line); text-align:center; }
#player-app .pn-d-macros b{ display:block; font-size:21px; font-weight:700; }
#player-app .pn-d-macros span{ font-size:11.5px; color:var(--ssm-text-3); }
#player-app .pn-d-add{ margin-top:18px; padding-top:16px; border-top:1px solid var(--ssm-line); }
#player-app .pn-d-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:10px; }
#player-app .pn-slot-btn{ display:flex; align-items:center; gap:8px; min-height:46px; padding:8px 12px; border-radius:12px; text-align:left; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
  background:rgba(255,255,255,.03); border:1px solid var(--ssm-line-2); color:var(--ssm-text); transition:border-color var(--ssm-fast), background var(--ssm-fast); }
#player-app .pn-slot-btn .ssm-i{ width:16px; height:16px; color:var(--ssm-text-2); flex-shrink:0; }
#player-app .pn-slot-btn span{ flex:1; min-width:0; }
#player-app .pn-slot-btn small{ display:block; font-size:11px; font-weight:500; color:var(--ssm-text-3); margin-top:1px; }
#player-app .pn-slot-btn:hover:not(:disabled){ border-color:rgba(var(--ssm-gold-rgb),.55); background:rgba(var(--ssm-gold-rgb),.07); }
#player-app .pn-slot-btn.is-suggested{ border-color:rgba(var(--ssm-gold-rgb),.45); }
#player-app .pn-slot-btn.is-suggested small{ color:var(--ssm-gold-2); }
#player-app .pn-slot-btn.is-in{ cursor:default; background:rgba(var(--ssm-green-rgb),.08); border-color:rgba(var(--ssm-green-rgb),.35); }
#player-app .pn-slot-btn.is-in .ssm-i, #player-app .pn-slot-btn.is-in small{ color:var(--ssm-green); }
#player-app .pn-d-sec{ margin-top:14px; }
#player-app .pn-d-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#player-app .pn-d-chips .pt-chip{ height:auto; min-height:28px; padding:4px 10px; white-space:normal; }
#player-app .pn-ingr{ list-style:none; margin:0; padding:0; }
#player-app .pn-ingr li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--ssm-line); font-size:13.5px; }
#player-app .pn-ingr li:last-child{ border-bottom:none; }
#player-app .pn-ingr li span:last-child{ color:var(--ssm-text-2); white-space:nowrap; }
#player-app .pn-instr{ font-size:14px; line-height:1.65; color:var(--ssm-text-2); white-space:pre-line; }
#player-app .pn-benefits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
#player-app .pn-benefits li{ display:flex; gap:8px; font-size:13px; color:var(--ssm-text-2); }
#player-app .pn-benefits .ssm-i{ width:15px; height:15px; color:var(--ssm-green); margin-top:2px; flex-shrink:0; }

/* ETAP 8.1 — wykonanie posiłku: karty ze zdjęciem + status */
#player-app .pn-count{ margin-bottom:18px; }
#player-app .pn-count-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
#player-app .pn-count-num{ font-size:14px; color:var(--ssm-text-2); }
#player-app .pn-count-num b{ font-size:22px; color:var(--ssm-text); }
#player-app .pn-mgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
#player-app .pn-mcard{ position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:16px; background:rgba(255,255,255,.02); border:1px solid var(--ssm-line); transition:border-color var(--ssm-fast); }
#player-app .pn-mcard:hover{ border-color:var(--ssm-line-2); }
#player-app .pn-mcard.is-done{ border-color:rgba(var(--ssm-green-rgb),.35); }
#player-app .pn-mcard-media{ position:relative; display:block; width:100%; padding:0; border:none; background:none; cursor:pointer; }
#player-app .pn-cover-card{ height:150px; }
#player-app .pn-cover-card .pn-cover-ico .ssm-i{ width:48px; height:48px; }
#player-app .pn-mcard.is-done .pn-cover{ filter:saturate(.75) brightness(.85); }
#player-app .pn-mcard-check{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--ssm-green); color:#04120c; box-shadow:0 6px 18px -4px rgba(var(--ssm-green-rgb),.7); }
#player-app .pn-mcard-check .ssm-i{ width:18px; height:18px; stroke-width:2.8; }
#player-app .pn-mcard-body{ display:flex; flex-direction:column; gap:4px; padding:14px; flex:1; }
#player-app .pn-mcard-name{ padding:0; border:none; background:none; color:var(--ssm-text); font:inherit; font-size:15.5px; font-weight:600; line-height:1.3; text-align:left; cursor:pointer; }
#player-app .pn-mcard-name{ max-width:100%; overflow-wrap:anywhere; }
#player-app .pn-mcard-name:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ssm-line-2); }
#player-app .pn-mcard-kcal{ margin-top:4px; font-size:13px; color:var(--ssm-text-2); }
#player-app .pn-mcard-kcal b{ font-size:20px; color:var(--ssm-text); }
#player-app .pn-mcard .pn-status{ margin-top:auto; padding-top:12px; }
#player-app .pn-status{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
#player-app .pn-status-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:44px; padding:0 14px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--ssm-line-2); color:var(--ssm-text); font:inherit; font-size:13.5px; font-weight:600; transition:background var(--ssm-fast), border-color var(--ssm-fast); }
#player-app .pn-status-btn:hover{ border-color:rgba(var(--ssm-green-rgb),.5); background:rgba(var(--ssm-green-rgb),.06); }
#player-app .pn-status-ring{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(165,177,199,.6); flex-shrink:0; }
#player-app .pn-status-pill{ display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 12px; border-radius:99px; background:rgba(var(--ssm-green-rgb),.14); border:1px solid rgba(var(--ssm-green-rgb),.35); color:var(--ssm-green); font-size:13px; font-weight:600; }
#player-app .pn-status-pill .ssm-i{ width:15px; height:15px; stroke-width:2.6; }
#player-app .pn-status-undo{ padding:4px 2px; border:none; background:none; color:var(--ssm-text-3); font:inherit; font-size:12.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
#player-app .pn-status-undo:hover{ color:var(--ssm-text); }
#player-app .pn-meal.is-done{ border-color:rgba(var(--ssm-green-rgb),.3); }
#player-app .pn-meal-state{ padding-top:10px; border-top:1px solid var(--ssm-line); }
#player-app .pn-meal-state .pn-status-btn{ width:auto; min-height:34px; font-size:12.5px; }
#player-app .pn-meal-state .pn-status-pill{ min-height:30px; font-size:12px; }
#player-app .pn-meal-x.is-locked{ cursor:not-allowed; opacity:.55; }
#player-app .pd-tl-photo{ width:42px; height:42px; flex-shrink:0; border-radius:12px; background-size:cover; background-position:center; border:1px solid var(--ssm-line-2); }
@media (max-width:767px){
  #player-app .pn-mgrid{ grid-template-columns:minmax(0,1fr); }
  #player-app .pn-cover-card{ height:140px; }
}

/* suplementacja */
#player-app .pn-soon{ max-width:640px; margin:0 auto; }
#player-app .pn-soon-note{ display:flex; gap:10px; align-items:flex-start; margin-top:4px; padding:12px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--ssm-line); font-size:13px; color:var(--ssm-text-2); line-height:1.5; }
#player-app .pn-soon-note .ssm-i{ width:16px; height:16px; margin-top:2px; color:var(--ssm-text-3); }

@media (max-width:767px){
  #player-app .pn-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #player-app .pn-grid .pn-cover-md{ height:78px; }
  #player-app .pn-grid .pn-cover-ico .ssm-i{ width:30px; height:30px; }
  #player-app .pn-grid .pn-cover-cat{ font-size:9px; right:44px; }
  #player-app .pn-card-body{ padding:10px 11px 12px; }
  #player-app .pn-card-name{ font-size:13.5px; }
  #player-app .pn-card-macro{ display:none; }
  #player-app .pn-card-add{ padding:0 10px 10px; }
  #player-app .pn-card-add .ssm-btn span{ overflow:hidden; text-overflow:ellipsis; }
  #player-app .pn-fav{ width:32px; height:32px; top:6px; right:6px; }
  #player-app .pn-slots{ grid-template-columns:minmax(0,1fr); }
  #player-app .pn-cover-lg{ margin:-16px -16px 16px; height:120px; border-radius:var(--ssm-r) var(--ssm-r) 0 0; }
  #player-app .pn-cover-lg.has-photo{ height:200px; }
  #player-app .pn-d-macros{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #player-app .pn-meal-main{ gap:12px; }
  #player-app .pn-meal-state .pn-status-btn{ width:100%; }
  #player-app .pn-cover-sm{ width:50px; height:50px; border-radius:14px; }
  #player-app .pn-plan-total{ align-items:flex-start; }
}

/* ---------- 8. MODALE I TOAST PORTALU (poza #player-app) ----------
   Wyłącznie body.ssm-player-mode — logika modali (showModal/closeModal,
   formularze w js/11-monitoring.js itd.) bez zmian, tylko wygląd. */
body.ssm-player-mode #modal-bg{ color-scheme:dark; background:rgba(2,5,11,.74); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-family:var(--ssm-font); }
body.ssm-player-mode #modal-bg .modal{
  width:580px; max-height:88vh; padding:28px 28px 0;
  background:linear-gradient(180deg, var(--ssm-surface-2) 0%, var(--ssm-surface) 100%);
  border:1px solid var(--ssm-line-2); border-radius:var(--ssm-r-xl);
  box-shadow:var(--ssm-shadow-pop), 0 0 0 1px rgba(255,255,255,.02) inset;
  color:var(--ssm-text); font-size:14px;
  scrollbar-width:thin; scrollbar-color:var(--ssm-surface-3) transparent;
}
body.ssm-player-mode #modal-bg .modal > :last-child:not(.modal-actions){ margin-bottom:28px; }
body.ssm-player-mode #modal-bg .modal h3{ font-family:var(--ssm-font-display); font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.25; margin-bottom:20px; padding-right:8px; }
body.ssm-player-mode #modal-bg .field{ margin-bottom:16px; }
body.ssm-player-mode #modal-bg .field label{ font-size:12.5px; font-weight:500; color:var(--ssm-text-2); margin-bottom:7px; }
body.ssm-player-mode #modal-bg .field input:not([type="checkbox"]):not([type="radio"]),
body.ssm-player-mode #modal-bg .field select,
body.ssm-player-mode #modal-bg .field textarea{
  background:#09101d; border:1px solid var(--ssm-line-2); border-radius:12px;
  min-height:46px; padding:11px 14px; color:var(--ssm-text); font-size:14.5px;
  font-variant-numeric:tabular-nums; color-scheme:dark;
}
body.ssm-player-mode #modal-bg .field textarea{ min-height:84px; line-height:1.45; }
body.ssm-player-mode #modal-bg .field input:focus, body.ssm-player-mode #modal-bg .field select:focus, body.ssm-player-mode #modal-bg .field textarea:focus{
  border-color:rgba(var(--ssm-gold-rgb),.7); box-shadow:0 0 0 3px rgba(var(--ssm-gold-rgb),.14); outline:none;
}
body.ssm-player-mode #modal-bg input[type="checkbox"], body.ssm-player-mode #modal-bg input[type="radio"]{ accent-color:var(--ssm-gold); }
body.ssm-player-mode #modal-bg .row2, body.ssm-player-mode #modal-bg .row3, body.ssm-player-mode #modal-bg .row4{ gap:12px; }
body.ssm-player-mode #modal-bg .checklist{ gap:8px; }
body.ssm-player-mode #modal-bg .checklist label{
  padding:10px 12px; border:1px solid var(--ssm-line-2); border-radius:12px; background:rgba(255,255,255,.02);
  color:var(--ssm-text-2); cursor:pointer; transition:border-color var(--ssm-fast), background var(--ssm-fast), color var(--ssm-fast);
}
body.ssm-player-mode #modal-bg .checklist label:has(input:checked){ border-color:rgba(var(--ssm-gold-rgb),.55); background:rgba(var(--ssm-gold-rgb),.08); color:var(--ssm-text); }
body.ssm-player-mode #modal-bg .kv{ padding:11px 0; border-bottom:1px solid var(--ssm-line); font-size:13.5px; }
body.ssm-player-mode #modal-bg .kv span:first-child{ color:var(--ssm-text-2); }
body.ssm-player-mode #modal-bg .badge{ border-radius:99px; padding:3px 10px; font-size:11.5px; }
body.ssm-player-mode #modal-bg .badge.green{ background:rgba(var(--ssm-green-rgb),.14); color:var(--ssm-green); }
body.ssm-player-mode #modal-bg .badge.yellow{ background:rgba(var(--ssm-amber-rgb),.14); color:var(--ssm-amber); }
body.ssm-player-mode #modal-bg .badge.orange{ background:rgba(var(--ssm-orange-rgb),.14); color:var(--ssm-orange); }
body.ssm-player-mode #modal-bg .badge.red{ background:rgba(var(--ssm-red-rgb),.14); color:var(--ssm-red); }
body.ssm-player-mode #modal-bg .badge.gray{ background:rgba(var(--ssm-neutral-rgb),.12); color:var(--ssm-text-2); }
body.ssm-player-mode #modal-bg .pill{ background:var(--ssm-surface-3); border-color:var(--ssm-line); color:var(--ssm-text-2); }
body.ssm-player-mode #modal-bg .card{ background:rgba(255,255,255,.02); border:1px solid var(--ssm-line); border-radius:var(--ssm-r); }
body.ssm-player-mode #modal-bg .btn{
  min-height:46px; padding:0 20px; border-radius:12px; font-weight:600; font-size:14px; border:1px solid transparent;
  background:var(--ssm-gold-grad); color:#1d1606; box-shadow:var(--ssm-shadow-gold), inset 0 1px 0 rgba(255,255,255,.3);
}
body.ssm-player-mode #modal-bg .btn.secondary{ background:var(--ssm-surface-3); color:var(--ssm-text); border-color:var(--ssm-line-2); box-shadow:none; }
body.ssm-player-mode #modal-bg .btn.ghost{ background:transparent; color:var(--ssm-text-2); border-color:var(--ssm-line-2); box-shadow:none; }
body.ssm-player-mode #modal-bg .btn.ghost:hover{ color:var(--ssm-text); background:rgba(255,255,255,.04); }
body.ssm-player-mode #modal-bg .btn.danger{ background:rgba(var(--ssm-red-rgb),.14); color:#ff9aa4; border-color:rgba(var(--ssm-red-rgb),.3); box-shadow:none; }
body.ssm-player-mode #modal-bg .btn.small{ min-height:36px; padding:0 14px; font-size:12.5px; border-radius:10px; }
body.ssm-player-mode #modal-bg .modal-actions{
  position:sticky; bottom:0; z-index:2; margin:24px -28px 0; padding:16px 28px;
  background:linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.96) 28%);
  border-top:1px solid var(--ssm-line); gap:10px;
}
body.ssm-player-mode #modal-bg .modal-actions + *{ margin-top:0; }
body.ssm-player-mode #modal-bg .pa-scale{ gap:6px; }
body.ssm-player-mode #modal-bg .pa-scale button{ width:40px; height:40px; border-radius:11px; border:1px solid var(--ssm-line-2); background:#09101d; color:var(--ssm-text); font-family:var(--ssm-font-display); font-variant-numeric:tabular-nums; transition:background var(--ssm-fast), border-color var(--ssm-fast); }
body.ssm-player-mode #modal-bg .pa-scale button:hover{ border-color:rgba(var(--ssm-gold-rgb),.5); }
body.ssm-player-mode #modal-bg .pa-scale button.sel{ background:var(--ssm-gold-grad); color:#1d1606; border-color:transparent; }
body.ssm-player-mode #modal-bg #ai-question{ font-size:13.5px; line-height:1.5; }
body.ssm-player-mode #modal-bg #ai-answer{ padding:14px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--ssm-line); line-height:1.55; }
body.ssm-player-mode #modal-bg #ai-answer:empty{ display:none; }
body.ssm-player-mode #modal-bg table th{ color:var(--ssm-text-3); border-bottom-color:var(--ssm-line-2); }
body.ssm-player-mode #modal-bg table td{ border-bottom-color:var(--ssm-line); }
body.ssm-player-mode #toast.success{ border-color:rgba(var(--ssm-green-rgb),.45); color:var(--ssm-green); }
body.ssm-player-mode #toast.error{ border-color:rgba(var(--ssm-red-rgb),.45); color:#ff9aa4; }
body.ssm-player-mode #toast{ background:var(--ssm-surface-3); color:var(--ssm-text); border:1px solid var(--ssm-line-2); border-radius:14px; box-shadow:var(--ssm-shadow-pop); font-family:var(--ssm-font); }

@media (max-width:767px){
  body.ssm-player-mode #modal-bg{ padding:0; align-items:flex-end; }
  body.ssm-player-mode #modal-bg .modal{
    width:100%; max-height:92vh; max-height:92dvh; border-radius:24px 24px 0 0; border-bottom:none;
    padding:12px 18px 0;
  }
  body.ssm-player-mode #modal-bg .modal::before{ content:""; display:block; width:40px; height:4px; border-radius:99px; background:rgba(255,255,255,.18); margin:0 auto 16px; }
  body.ssm-player-mode #modal-bg .modal h3{ font-size:19px; margin-bottom:18px; }
  body.ssm-player-mode #modal-bg .field input:not([type="checkbox"]):not([type="radio"]),
  body.ssm-player-mode #modal-bg .field select, body.ssm-player-mode #modal-bg .field textarea{ font-size:16px; min-height:48px; }
  body.ssm-player-mode #modal-bg .modal-actions{ margin:20px -18px 0; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); flex-wrap:nowrap; }
  body.ssm-player-mode #modal-bg .modal-actions .btn{ flex:1 1 0; min-height:50px; padding:0 12px; }
  /* krótkie pola liczbowe obok siebie — mniej przewijania formularza na telefonie */
  body.ssm-player-mode #modal-bg .row2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.ssm-player-mode #modal-bg .checklist{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.ssm-player-mode #modal-bg .checklist label{ padding:10px; min-width:0; }
  body.ssm-player-mode #modal-bg .row3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  body.ssm-player-mode #modal-bg .row2 .field label, body.ssm-player-mode #modal-bg .row3 .field label{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body.ssm-player-mode #modal-bg .row3 .field input:not([type="checkbox"]):not([type="radio"]){ padding:11px 8px; }
  body.ssm-player-mode #modal-bg .pa-scale{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
  body.ssm-player-mode #modal-bg .pa-scale button{ width:100%; height:44px; }
  body.ssm-player-mode #toast{ bottom:calc(var(--ssm-tabbar-h, 66px) + 14px + env(safe-area-inset-bottom)); }
}

/* ---------- 6. ANIMACJE ---------- */
@keyframes ssmEnter{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes ssmBarIn{ from{ transform:scaleY(.15); opacity:.2; } to{ transform:scaleY(1); opacity:1; } }
@keyframes ssmShimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
@keyframes ssmPop{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); } }
#player-app .ssm-pop{ animation:ssmPop .45s var(--ssm-ease) both; }

@media (prefers-reduced-motion: reduce){
  #player-app *, #player-app *::before, #player-app *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}