/* ==========================================================================
   manawaFLOW - Portal Self-Coachingowy
   System designu: Biel_Galeria / Gleboki_Granat / Artystyczny_Fiolet /
                   Blekit_Kobalt / Akcent_Zloto
   Typografia: Poppins (naglowki, CTA) + Lato (tekst glowny)
   ========================================================================== */

:root{
  /* --- Paleta marki --- */
  --biel:        #FFFFFF;
  --granat:      #0F1219;
  --fiolet:      #6A0DAD;
  --kobalt:      #0047AB;
  --zloto:       #FDC500;

  /* --- Warianty pochodne --- */
  --fiolet-800:  #55098B;
  --fiolet-100:  #F3E9FB;
  --fiolet-050:  #FAF5FE;
  --kobalt-100:  #E6EEF8;
  --zloto-100:   #FFF6D9;
  --granat-700:  #2A2F3B;
  --granat-500:  #5A616F;
  --granat-300:  #9AA0AC;
  --linia:       #E7E9EF;
  --tlo-alt:     #F7F8FB;

  /* --- Semantyka --- */
  --ok:          #1B9E5A;
  --ok-100:      #E4F5EC;
  --uwaga:       #C97A00;
  --alarm:       #C62828;
  --alarm-100:   #FCEBEB;

  /* --- Ksztalt i glebia --- */
  --r-sm: 0;
  --r:    0;
  --r-lg: 0;
  --r-pill: 0;
  --sh-1: 0 1px 2px rgba(15,18,25,.06), 0 2px 8px rgba(15,18,25,.04);
  --sh-2: 0 4px 12px rgba(15,18,25,.07), 0 12px 32px rgba(15,18,25,.06);
  --sh-3: 0 18px 60px rgba(15,18,25,.16);

  /* --- Typografia --- */
  --f-head: Poppins, "Segoe UI", system-ui, sans-serif;
  --f-body: Lato, "Segoe UI", system-ui, sans-serif;

  --sidebar-w: 268px;

  /* Szerokosc kolumny tresci w aplikacji. Pasek gorny, widok i stopka trzymaja
     sie tej samej wartosci i sa WYSRODKOWANE - bez tego na szerokim monitorze
     cala nadwyzka miejsca zbierala sie po prawej stronie. */
  --view-max: 1520px;
  --view-pad: 2rem;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Atrybut hidden musi wygrywac z display:grid/flex ustawionym w klasach
   (.auth-screen, .app, .modal) - inaczej ukryte sekcje nadal sie wyswietlaja. */
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; }
body{
  font-family:var(--f-body);
  font-size:16px; line-height:1.62;
  color:var(--granat);
  background:var(--biel);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{ font-family:var(--f-head); font-weight:700; color:var(--granat); margin:0 0 .4em; line-height:1.22; letter-spacing:-.015em; }
h1{ font-size:clamp(1.5rem,2.4vw,2rem); }
h2{ font-size:clamp(1.25rem,1.9vw,1.6rem); }
h3{ font-size:1.075rem; font-weight:600; }
h4{ font-size:.95rem; font-weight:600; }
p{ margin:0 0 1em; }
a{ color:var(--fiolet); text-decoration:none; }
a:hover{ text-decoration:underline; }
strong,b{ font-weight:700; }
small{ font-size:.8125rem; }
hr{ border:0; border-top:1px solid var(--linia); margin:1.5rem 0; }
::selection{ background:var(--zloto); color:var(--granat); }

.accent{ color:var(--fiolet); }
.muted{ color:var(--granat-500); }
.tiny{ font-size:.78rem; }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.mb0{ margin-bottom:0; }

/* ============ LOGO ============ */
.logo{ font-family:var(--f-head); font-weight:700; font-size:1.32rem; letter-spacing:-.03em; line-height:1; white-space:nowrap; }
.logo-a{ color:var(--fiolet); }
.logo-b{ color:var(--zloto); }
.logo-lg{ font-size:2.4rem; }

/* ============ PRZYCISKI ============ */
.btn{
  font-family:var(--f-head); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.06em;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.72em 1.35em; border:2px solid transparent; border-radius:var(--r-pill);
  cursor:pointer; transition:transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
  text-decoration:none; background:none;
}
.btn:hover{ transform:translateY(-1px); text-decoration:none; }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--zloto); outline-offset:2px; }
.btn-gold{   background:var(--zloto);  color:var(--granat); box-shadow:var(--sh-1); }
.btn-gold:hover{ background:#ffd633; box-shadow:var(--sh-2); }
.btn-purple{ background:var(--fiolet); color:var(--biel); box-shadow:var(--sh-1); }
.btn-purple:hover{ background:var(--fiolet-800); box-shadow:var(--sh-2); }
.btn-cobalt{ background:var(--kobalt); color:var(--biel); box-shadow:var(--sh-1); }
.btn-cobalt:hover{ background:#003A8C; box-shadow:var(--sh-2); }
.btn-dark{   background:var(--granat); color:var(--biel); }
.btn-outline{ border-color:var(--fiolet); color:var(--fiolet); }
.btn-outline:hover{ background:var(--fiolet-050); }
.btn-ghost{ border-color:var(--linia); color:var(--granat-700); }
.btn-ghost:hover{ background:var(--tlo-alt); }
.btn-danger{ border-color:var(--alarm); color:var(--alarm); }
.btn-danger:hover{ background:var(--alarm-100); }
.btn-sm{ padding:.52em 1em; font-size:.72rem; }
.btn-xs{ padding:.34em .7em; font-size:.66rem; letter-spacing:.04em; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* Ikonowe mikroprzyciski */
.ibtn{
  width:30px; height:30px; border-radius:0; border:1px solid var(--linia);
  background:var(--biel); color:var(--granat-500); cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; font-size:.95rem;
  transition:all .14s ease; flex:0 0 auto;
}
.ibtn:hover{ border-color:var(--fiolet); color:var(--fiolet); background:var(--fiolet-050); }
.ibtn.is-danger:hover{ border-color:var(--alarm); color:var(--alarm); background:var(--alarm-100); }

/* ============ FORMULARZE ============ */
.field{ display:block; margin-bottom:1rem; }
.field-label{ display:block; font-family:var(--f-head); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--granat-700); margin-bottom:.35rem; }
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%; font-family:var(--f-body); font-size:.95rem; color:var(--granat);
  padding:.68em .9em; border:1.5px solid var(--linia); border-radius:var(--r-sm);
  background:var(--biel); transition:border-color .14s ease, box-shadow .14s ease;
}
textarea{ resize:vertical; min-height:96px; line-height:1.6; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--fiolet); box-shadow:0 0 0 4px var(--fiolet-100); }
input::placeholder,textarea::placeholder{ color:var(--granat-300); }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--granat-500) 50%),linear-gradient(135deg,var(--granat-500) 50%,transparent 50%); background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.2em; }
.field-inline{ display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; }
.field-inline .field{ flex:1 1 160px; margin-bottom:0; }
.check{ display:flex; align-items:flex-start; gap:.55rem; font-size:.92rem; cursor:pointer; margin-bottom:.5rem; }
.check input{ width:18px; height:18px; margin-top:.22rem; accent-color:var(--fiolet); flex:0 0 auto; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }

/* Suwak */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--r-pill); background:var(--linia); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:0; background:var(--fiolet); border:3px solid var(--biel); box-shadow:0 1px 6px rgba(106,13,173,.45); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:0; background:var(--fiolet); border:3px solid var(--biel); box-shadow:0 1px 6px rgba(106,13,173,.45); cursor:pointer; }

/* ============ EKRAN LOGOWANIA ============ */
.auth-screen{ min-height:100vh; display:grid; place-items:center; padding:2rem 1.25rem; position:relative; overflow:hidden; background:var(--biel); }
.auth-bg{ position:absolute; inset:0; z-index:0; }
.blob{ position:absolute; border-radius:0; filter:blur(70px); }
.blob-1{ width:460px; height:460px; background:var(--fiolet); top:-140px; left:-120px; opacity:.22; }
.blob-2{ width:380px; height:380px; background:var(--kobalt); bottom:-120px; right:-90px; opacity:.18; }
.blob-3{ width:300px; height:300px; background:var(--zloto); bottom:120px; left:12%; opacity:.28; }
.auth-card{
  position:relative; z-index:1; width:100%; max-width:430px; background:var(--biel);
  border:1px solid var(--linia); border-radius:var(--r-lg); padding:2.4rem 2rem 1.6rem;
  box-shadow:var(--sh-3); text-align:center;
}
.auth-tagline{ font-family:var(--f-head); font-weight:600; color:var(--granat-500); font-size:.9rem; margin:.5rem 0 1.6rem; }
.auth-tabs{ display:flex; gap:.35rem; background:var(--tlo-alt); padding:.3rem; border-radius:var(--r-pill); margin-bottom:1.5rem; }
.auth-tab{ flex:1; font-family:var(--f-head); font-weight:600; font-size:.8rem; padding:.6em; border:0; border-radius:var(--r-pill); background:transparent; color:var(--granat-500); cursor:pointer; transition:all .14s ease; }
.auth-tab.is-active{ background:var(--biel); color:var(--fiolet); box-shadow:var(--sh-1); }
.auth-form{ text-align:left; }
.auth-form .btn{ margin-top:.5rem; }
.auth-error{ background:var(--alarm-100); color:var(--alarm); font-size:.85rem; padding:.6em .9em; border-radius:var(--r-sm); margin:.2rem 0 .6rem; }
.auth-links{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.84rem; margin:1rem 0 0; }
.auth-back{ font-size:.82rem; margin:1.2rem 0 0; }
.auth-note{ font-size:.74rem; color:var(--granat-300); margin:1.4rem 0 0; line-height:1.5; }

/* ============ SZKIELET APLIKACJI ============ */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--granat); color:#C9CDD6;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:40;
}
.sidebar-head{ padding:1.4rem 1.3rem 1rem; display:flex; align-items:center; justify-content:space-between; }
.sidebar-close{ display:none; background:none; border:0; color:#C9CDD6; font-size:1.7rem; line-height:1; cursor:pointer; }
.nav{ flex:1; overflow-y:auto; padding:.2rem .7rem 1rem; }
.nav::-webkit-scrollbar{ width:6px; }
.nav::-webkit-scrollbar-thumb{ background:#2B303C; border-radius:0; }
.nav-group{ font-family:var(--f-head); font-weight:600; font-size:.65rem; text-transform:uppercase; letter-spacing:.14em; color:#5C6472; margin:1.2rem .6rem .4rem; }
.nav-item{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--r-sm);
  color:#C9CDD6; font-size:.9rem; text-decoration:none; transition:all .13s ease;
}
.nav-item:hover{ background:#1A1F2B; color:var(--biel); text-decoration:none; }
.nav-item.is-active{ background:var(--fiolet); color:var(--biel); font-weight:700; }
.nav-item.is-active .nav-ico{ color:var(--zloto); }
.nav-ico{ width:20px; text-align:center; font-size:1rem; color:#7C8492; flex:0 0 auto; }
.nav-item:hover .nav-ico{ color:var(--zloto); }
.sidebar-foot{ padding:1rem 1.1rem 1.3rem; border-top:1px solid #1F242F; }
.user-chip{ display:flex; align-items:center; gap:.65rem; margin-bottom:.8rem; }
.avatar{ width:38px; height:38px; border-radius:0; background:var(--zloto); color:var(--granat); font-family:var(--f-head); font-weight:700; display:grid; place-items:center; flex:0 0 auto; }
.user-meta{ display:flex; flex-direction:column; overflow:hidden; }
.user-meta strong{ font-family:var(--f-head); font-size:.88rem; color:var(--biel); }
.user-meta small{ font-size:.72rem; color:#7C8492; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-foot .btn-ghost{ border-color:#2B303C; color:#9AA0AC; }
.sidebar-foot .btn-ghost:hover{ background:#1A1F2B; color:var(--biel); }
.sidebar-scrim{ display:none; position:fixed; inset:0; background:rgba(15,18,25,.55); z-index:35; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--tlo-alt); }
.topbar{
  background:var(--biel); border-bottom:1px solid var(--linia);
  position:sticky; top:0; z-index:30;
}
/* Wnetrze paska: ta sama szerokosc i to samo wysrodkowanie co .view, zeby
   tytul strony i przyciski staly w jednej linii z trescia pod nimi. */
.topbar-in{
  display:flex; align-items:center; gap:1rem;
  width:100%; max-width:var(--view-max); margin-inline:auto;
  padding:1.1rem var(--view-pad);
}
.topbar-title{ flex:1; min-width:0; }
.topbar-title h1{ margin:0; font-size:1.28rem; }
.topbar-title p{ margin:0; font-size:.82rem; color:var(--granat-500); }
.topbar-actions{ display:flex; align-items:center; gap:.7rem; }
.streak-pill{ font-family:var(--f-head); font-size:.82rem; font-weight:600; background:var(--zloto-100); color:var(--granat); padding:.35em .8em; border-radius:var(--r-pill); }
.burger{ display:none; background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--granat); }
.view{ flex:1; width:100%; max-width:var(--view-max); margin-inline:auto; padding:1.75rem var(--view-pad) 2.5rem; }
.app-foot{ border-top:1px solid var(--linia); font-size:.75rem; color:var(--granat-300); }
.app-foot-in{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  width:100%; max-width:var(--view-max); margin-inline:auto;
  padding:1.2rem var(--view-pad) 1.6rem;
}
.app-foot b{ color:var(--granat-300); }
/* Wejscie prowadzacego - mikroprzycisk, wygaszony do granicy widocznosci.
   Odpowiednik .footer-admin z narzedziownika i .fadmin z 21 przemian. */
.foot-admin{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-family:var(--f-head); font-size:.62rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em;
  color:var(--granat-300); border:1px solid var(--linia); padding:3px 9px;
  opacity:.65; transition:opacity .15s ease, color .15s ease, border-color .15s ease;
}
.foot-admin:hover,.foot-admin:focus-visible{ opacity:1; color:var(--fiolet); border-color:var(--fiolet); text-decoration:none; }

/* ============ KARTY / SEKCJE ============ */
.card{ background:var(--biel); border:1px solid var(--linia); border-radius:var(--r); padding:1.35rem 1.4rem; box-shadow:var(--sh-1); margin-bottom:1.25rem; }
.card-pad-lg{ padding:1.8rem; }
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.card-head h2,.card-head h3{ margin:0; }
.card-head p{ margin:.15rem 0 0; font-size:.84rem; color:var(--granat-500); }
.card-accent-top{ border-top:4px solid var(--fiolet); }
.card-quiet{ background:var(--tlo-alt); box-shadow:none; }

.section-intro{ background:linear-gradient(120deg,var(--fiolet-050),var(--kobalt-100)); border:1px solid var(--linia); border-radius:var(--r); padding:1.2rem 1.4rem; margin-bottom:1.4rem; }
.section-intro h2{ margin-bottom:.3rem; }
.section-intro p{ margin:0; font-size:.92rem; color:var(--granat-700); max-width:74ch; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.stat{ background:var(--biel); border:1px solid var(--linia); border-radius:var(--r); padding:1.05rem 1.15rem; box-shadow:var(--sh-1); position:relative; overflow:hidden; }
.stat::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--fiolet); }
.stat.s-gold::after{ background:var(--zloto); }
.stat.s-cobalt::after{ background:var(--kobalt); }
.stat.s-ok::after{ background:var(--ok); }
.stat-label{ font-family:var(--f-head); font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--granat-500); }
.stat-value{ font-family:var(--f-head); font-weight:700; font-size:1.95rem; line-height:1.1; margin:.15rem 0 .1rem; }
.stat-sub{ font-size:.76rem; color:var(--granat-500); }

.split{ display:grid; grid-template-columns:1.35fr 1fr; gap:1.25rem; align-items:start; }
.split-even{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
@media (max-width:1080px){ .split,.split-even{ grid-template-columns:1fr; } }

/* ============ PLAKIETKI ============ */
.badge{ display:inline-flex; align-items:center; gap:.3em; font-family:var(--f-head); font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; padding:.28em .7em; border-radius:var(--r-pill); background:var(--tlo-alt); color:var(--granat-700); }
.badge-purple{ background:var(--fiolet-100); color:var(--fiolet-800); }
.badge-cobalt{ background:var(--kobalt-100); color:var(--kobalt); }
.badge-gold{ background:var(--zloto-100); color:#8A6A00; }
.badge-ok{ background:var(--ok-100); color:var(--ok); }
.badge-alarm{ background:var(--alarm-100); color:var(--alarm); }
.badge-dark{ background:var(--granat); color:var(--biel); }

/* ============ PASKI POSTEPU ============ */
.bar{ height:8px; background:var(--linia); border-radius:var(--r-pill); overflow:hidden; }
.bar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--kobalt),var(--fiolet)); border-radius:var(--r-pill); transition:width .4s ease; }
.bar.b-gold > i{ background:linear-gradient(90deg,#E5A800,var(--zloto)); }
.bar.b-ok > i{ background:var(--ok); }
.bar-lg{ height:12px; }

/* ============ LISTY / KAFELKI ============ */
.list{ list-style:none; margin:0; padding:0; }
.list > li{ padding:.85rem 0; border-bottom:1px solid var(--linia); display:flex; gap:.9rem; align-items:flex-start; }
.list > li:last-child{ border-bottom:0; }
.list-title{ font-family:var(--f-head); font-weight:600; font-size:.95rem; margin:0; }
.list-meta{ font-size:.78rem; color:var(--granat-500); margin:.1rem 0 0; }
.grow{ flex:1; min-width:0; }
.row-actions{ display:flex; gap:.35rem; align-items:center; }

.empty{ text-align:center; padding:2.4rem 1rem; color:var(--granat-500); }
.empty-ico{ font-size:2.2rem; color:var(--fiolet); opacity:.35; display:block; margin-bottom:.4rem; }
.empty h3{ margin-bottom:.25rem; }
.empty p{ font-size:.9rem; max-width:46ch; margin:0 auto 1rem; }

/* ============ TABELE ============ */
.table-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.tbl th{ font-family:var(--f-head); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--granat-500); text-align:left; padding:.6rem .7rem; border-bottom:1.5px solid var(--linia); white-space:nowrap; }
table.tbl td{ padding:.62rem .7rem; border-bottom:1px solid var(--linia); vertical-align:middle; }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl tbody tr:hover{ background:var(--fiolet-050); }

/* ============ KOLO ZYCIA ============ */
.wheel-layout{ display:grid; grid-template-columns:minmax(320px,1fr) minmax(300px,420px); gap:1.6rem; align-items:start; }
@media (max-width:980px){ .wheel-layout{ grid-template-columns:1fr; } }
.wheel-stage{ display:grid; place-items:center; }
.wheel-stage svg{ width:100%; max-width:520px; height:auto; }
.slider-row{ margin-bottom:1rem; }
.slider-top{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin-bottom:.25rem; }
.slider-name{ font-family:var(--f-head); font-weight:600; font-size:.88rem; display:flex; align-items:center; gap:.45rem; }
.slider-dot{ width:10px; height:10px; border-radius:0; flex:0 0 auto; }
.slider-val{ font-family:var(--f-head); font-weight:700; font-size:1rem; color:var(--fiolet); min-width:2ch; text-align:right; }
.wheel-legend{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.8rem; margin-top:.8rem; }
.wheel-legend span{ display:flex; align-items:center; gap:.4rem; }

/* ============ HEATMAPA / NAWYKI ============ */
.habit-grid{ overflow-x:auto; }
.habit-row{ display:flex; align-items:center; gap:.5rem; padding:.55rem 0; border-bottom:1px solid var(--linia); }
.habit-row:last-child{ border-bottom:0; }
.habit-name{ flex:1 1 190px; min-width:150px; font-family:var(--f-head); font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:.5rem; }
.habit-days{ display:flex; gap:5px; flex:0 0 auto; }
.day-box{
  width:34px; height:34px; border-radius:var(--r-sm); border:1.5px solid var(--linia);
  background:var(--biel); cursor:pointer; display:grid; place-items:center;
  font-family:var(--f-head); font-size:.68rem; font-weight:600; color:var(--granat-300);
  transition:all .12s ease; padding:0;
}
.day-box:hover{ border-color:var(--fiolet); }
.day-box.is-done{ background:var(--fiolet); border-color:var(--fiolet); color:var(--biel); }
.day-box.is-today{ box-shadow:0 0 0 2px var(--zloto); }
.day-box.is-future{ opacity:.35; pointer-events:none; }
.dow-head{ display:flex; gap:5px; }
.dow-head span{ width:34px; text-align:center; font-family:var(--f-head); font-size:.62rem; font-weight:600; text-transform:uppercase; color:var(--granat-300); letter-spacing:.04em; }

/* ============ RYTM DZIENNY CELU ============ */
.rhythm{ border-top:1px solid var(--linia); padding-top:.9rem; }
.rhythm-head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:.6rem; }
.rhythm-meta{ display:flex; gap:.35rem; flex-wrap:wrap; }
.rhythm-meta .badge small{ font-size:.85em; opacity:.75; font-weight:600; }
.rhythm-grid{ display:flex; flex-wrap:wrap; gap:4px; }
.day-box.is-dense{ width:15px; height:15px; font-size:0; border-width:1px; }
.day-box.is-dense.is-done{ background:var(--fiolet); }

/* ============ CENTRUM POWIADOMIEN ============ */
.bell{
  position:relative; background:none; border:1px solid var(--linia); cursor:pointer;
  width:38px; height:38px; display:grid; place-items:center; font-size:1.05rem;
  color:var(--granat-700); transition:all .14s ease; flex:0 0 auto;
}
.bell:hover{ border-color:var(--fiolet); color:var(--fiolet); background:var(--fiolet-050); }
.bell-count{
  position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px;
  background:var(--alarm); color:var(--biel); font-family:var(--f-head); font-weight:700;
  font-size:.62rem; display:grid; place-items:center; line-height:1;
}
.bell-count.is-quiet{ background:var(--granat-300); }
.notif{ display:flex; gap:.8rem; padding:.85rem 0; border-bottom:1px solid var(--linia); align-items:flex-start; }
.notif:last-child{ border-bottom:0; }
.notif-dot{ width:8px; height:8px; margin-top:.45rem; flex:0 0 auto; background:var(--granat-300); }
.notif.l-alarm .notif-dot{ background:var(--alarm); }
.notif.l-warn .notif-dot{ background:var(--zloto); }
.notif.l-info .notif-dot{ background:var(--kobalt); }
.notif.l-good .notif-dot{ background:var(--ok); }
.notif-body{ flex:1; min-width:0; }
.notif-body h4{ margin:0 0 .15rem; font-size:.92rem; }
.notif-body p{ margin:0; font-size:.84rem; color:var(--granat-500); }
.notif-tag{ font-family:var(--f-head); font-size:.6rem; font-weight:600; letter-spacing:.1em; color:var(--granat-300); text-transform:uppercase; }

/* ============ ODZNAKI ============ */
.badges-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.5rem; }
.ach{ border:1px solid var(--linia); padding:.7rem .5rem; text-align:center; background:var(--biel); opacity:.45; }
.ach.is-got{ opacity:1; border-color:var(--fiolet); background:var(--fiolet-050); }
.ach-ico{ display:block; font-size:1.3rem; line-height:1; margin-bottom:.3rem; color:var(--granat-300); }
.ach.is-got .ach-ico{ color:var(--fiolet); }
.ach-name{ font-family:var(--f-head); font-weight:600; font-size:.68rem; line-height:1.25; display:block; }
.ach-need{ font-size:.6rem; color:var(--granat-300); display:block; margin-top:.15rem; }

/* ============ MATRYCA EISENHOWERA ============ */
.matrix{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:760px){ .matrix{ grid-template-columns:1fr; } }
.quad{ border:1px solid var(--linia); border-radius:var(--r); background:var(--biel); padding:1.1rem; box-shadow:var(--sh-1); border-top:4px solid var(--granat-300); min-height:180px; }
.quad.q1{ border-top-color:var(--alarm); }
.quad.q2{ border-top-color:var(--ok); }
.quad.q3{ border-top-color:var(--zloto); }
.quad.q4{ border-top-color:var(--granat-300); }
.quad-head{ margin-bottom:.7rem; }
.quad-head h4{ margin:0; }
.quad-head small{ color:var(--granat-500); }
.task{ display:flex; align-items:flex-start; gap:.5rem; padding:.4rem 0; border-bottom:1px dashed var(--linia); font-size:.9rem; }
.task:last-of-type{ border-bottom:0; }
.task.is-done .task-txt{ text-decoration:line-through; color:var(--granat-300); }
.task input{ margin-top:.3rem; accent-color:var(--fiolet); }
.task-txt{ flex:1; }

/* ============ SWOT ============ */
.swot{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:760px){ .swot{ grid-template-columns:1fr; } }
.swot-box{ border:1px solid var(--linia); border-radius:var(--r); padding:1.1rem; background:var(--biel); box-shadow:var(--sh-1); }
.swot-box h4{ display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
.swot-key{ width:26px; height:26px; border-radius:var(--r-sm); display:grid; place-items:center; font-family:var(--f-head); font-weight:700; font-size:.85rem; color:var(--biel); }
.k-s{ background:var(--ok); } .k-w{ background:var(--alarm); } .k-o{ background:var(--kobalt); } .k-t{ background:var(--uwaga); }
.chip-list{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; background:var(--tlo-alt); border:1px solid var(--linia); border-radius:var(--r-pill); padding:.3em .5em .3em .8em; font-size:.84rem; }
.chip button{ border:0; background:none; cursor:pointer; color:var(--granat-300); font-size:1rem; line-height:1; padding:0 .1em; }
.chip button:hover{ color:var(--alarm); }
.chip.selectable{ cursor:pointer; padding:.35em .9em; }
.chip.selectable:hover{ border-color:var(--fiolet); color:var(--fiolet); }
.chip.is-on{ background:var(--fiolet); color:var(--biel); border-color:var(--fiolet); }
.chip.is-on:hover{ color:var(--biel); }

/* ============ WARTOSCI ============ */
.value-rank{ list-style:none; padding:0; margin:0; counter-reset:vr; }
.value-rank li{ counter-increment:vr; display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border:1px solid var(--linia); border-radius:var(--r-sm); margin-bottom:.5rem; background:var(--biel); }
.value-rank li::before{ content:counter(vr); font-family:var(--f-head); font-weight:700; color:var(--biel); background:var(--fiolet); width:26px; height:26px; border-radius:0; display:grid; place-items:center; font-size:.8rem; flex:0 0 auto; }
.value-rank li.top1::before{ background:var(--zloto); color:var(--granat); }

/* ============ DZIENNIK ============ */
.mood-pick{ display:flex; gap:.5rem; flex-wrap:wrap; }
.mood-btn{ flex:1 1 64px; border:1.5px solid var(--linia); background:var(--biel); border-radius:var(--r); padding:.6rem .3rem; cursor:pointer; text-align:center; transition:all .13s ease; font-family:var(--f-head); }
.mood-btn:hover{ border-color:var(--fiolet); }
.mood-btn.is-on{ border-color:var(--fiolet); background:var(--fiolet-050); box-shadow:0 0 0 3px var(--fiolet-100); }
.mood-emoji{ font-size:1.5rem; display:block; line-height:1.2; }
.mood-lbl{ font-size:.68rem; font-weight:600; color:var(--granat-500); text-transform:uppercase; letter-spacing:.04em; }
.entry{ border-left:3px solid var(--fiolet); padding:.2rem 0 .2rem 1rem; margin-bottom:1.2rem; }
.entry-date{ font-family:var(--f-head); font-weight:600; font-size:.82rem; color:var(--granat-500); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.entry-body{ font-size:.92rem; margin-top:.3rem; }
.entry-body p{ margin:.35rem 0; }
.entry-body em{ color:var(--granat-500); }

/* ============ PODSUMOWANIE / RAPORT ============ */
.report{ background:var(--biel); border:1px solid var(--linia); border-radius:var(--r); padding:2rem; box-shadow:var(--sh-1); }
.report h2{ border-bottom:2px solid var(--zloto); padding-bottom:.35rem; display:inline-block; }
.report h3{ margin-top:1.6rem; color:var(--fiolet); }
.report ul{ padding-left:1.2rem; }
.report li{ margin-bottom:.4rem; }
.report-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; border-bottom:1px solid var(--linia); padding-bottom:1rem; margin-bottom:1.2rem; }
.callout{ border-left:4px solid var(--kobalt); background:var(--kobalt-100); padding:.9rem 1.1rem; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:1rem 0; font-size:.92rem; }
.callout.c-gold{ border-color:var(--zloto); background:var(--zloto-100); }
.callout.c-purple{ border-color:var(--fiolet); background:var(--fiolet-050); }
.callout.c-alarm{ border-color:var(--alarm); background:var(--alarm-100); }
.callout p:last-child{ margin-bottom:0; }
.callout strong{ font-family:var(--f-head); }

/* ============ PYTANIA COACHINGOWE ============ */
.q-card{ background:linear-gradient(135deg,var(--fiolet),var(--kobalt)); color:var(--biel); border-radius:var(--r-lg); padding:2.6rem 2rem; text-align:center; box-shadow:var(--sh-2); }
.q-card .q-txt{ font-family:var(--f-head); font-weight:600; font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.4; margin:0 auto; max-width:34ch; }
.q-card .q-cat{ font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--zloto); font-family:var(--f-head); font-weight:600; margin-bottom:1rem; }

/* ============ TOAST / MODAL ============ */
.toast{ position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); background:var(--granat); color:var(--biel); font-family:var(--f-head); font-weight:600; font-size:.85rem; padding:.8em 1.4em; border-radius:var(--r-pill); box-shadow:var(--sh-3); z-index:100; animation:toastIn .25s ease; }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }
.modal{ position:fixed; inset:0; background:rgba(15,18,25,.6); display:grid; place-items:center; padding:1.5rem; z-index:90; }
.modal-box{ background:var(--biel); border-radius:var(--r-lg); width:100%; max-width:560px; max-height:88vh; overflow-y:auto; box-shadow:var(--sh-3); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.3rem 1.5rem .9rem; border-bottom:1px solid var(--linia); position:sticky; top:0; background:var(--biel); }
.modal-head h3{ margin:0; }
.modal-x{ border:0; background:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--granat-300); }
.modal-x:hover{ color:var(--granat); }
.modal-body{ padding:1.3rem 1.5rem 1.6rem; }

/* ============ RESPONSYWNOSC ============ */
/* Na bardzo szerokich monitorach kolumna tresci rosnie razem z oknem - inaczej
   po obu stronach zostawalyby jalowe pasy po 200 px i wiecej. */
@media (min-width:1800px){
  :root{ --view-max:1720px; --view-pad:2.6rem; }
}
@media (min-width:2200px){
  :root{ --view-max:2000px; }
}

@media (max-width:900px){
  .sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--sh-3); }
  .app.nav-open .sidebar{ transform:translateX(0); }
  .app.nav-open .sidebar-scrim{ display:block; }
  .sidebar-close{ display:block; }
  .burger{ display:block; }
  :root{ --view-pad:1.1rem; }
  .topbar-in{ padding:.9rem var(--view-pad); }
  .view{ padding:1.2rem var(--view-pad) 2rem; }
  .app-foot-in{ padding:var(--view-pad); }
  .topbar-title h1{ font-size:1.1rem; }
  .topbar-title p{ display:none; }
}
@media (max-width:560px){
  .streak-pill{ display:none; }
  .card{ padding:1.1rem; }
  .report{ padding:1.2rem; }
}

/* ============ INSTRUKCJE OBSLUGI ============ */
/* Przycisk "?" w pasku gornym - ten sam kaliber co dzwonek powiadomien. */
.help-btn{
  position:relative; width:38px; height:38px; flex:0 0 auto;
  background:var(--biel); border:1px solid var(--linia); border-radius:var(--r-sm);
  font-family:var(--f-head); font-weight:700; font-size:1.05rem; line-height:1;
  color:var(--granat-500); cursor:pointer; transition:all .14s ease;
}
.help-btn:hover{ border-color:var(--fiolet); color:var(--fiolet); background:var(--fiolet-050); }
.help-btn:focus-visible{ outline:3px solid var(--zloto); outline-offset:2px; }

/* Okno modalne z instrukcja jest szersze - rysunek musi byc czytelny. */
.modal.modal-wide .modal-box{ max-width:880px; }

.guide{ font-size:.94rem; }
.guide + .guide{ margin-top:2.6rem; padding-top:2.2rem; border-top:3px solid var(--granat); }

.guide-hero{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.3rem; }
.guide-ico{
  width:52px; height:52px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--fiolet); color:var(--biel); font-size:1.6rem; line-height:1;
}
.guide-hero-txt{ min-width:0; }
.guide-eyebrow{ font-family:var(--f-head); font-weight:600; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fiolet); margin:0 0 .15rem; }
.guide-hero-txt h3{ margin:0 0 .3rem; font-size:1.3rem; font-weight:700; }
.guide-lead{ margin:0; color:var(--granat-700); }
.guide-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0; }

/* Rysunek. Ma zawsze bialy spod i ramke - wtedy schemat czyta sie jak zrzut ekranu. */
.guide-figure{ margin:0 0 1.5rem; border:1px solid var(--linia); background:var(--biel); padding:1rem; }
.guide-figure .g-art{ display:block; width:100%; height:auto; }
.guide-figure figcaption{
  margin-top:.7rem; padding-top:.6rem; border-top:1px solid var(--linia);
  font-size:.8rem; color:var(--granat-500);
}

.guide-h{
  font-family:var(--f-head); font-weight:600; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--granat-500); margin:0 0 .8rem;
}

.guide-steps{ list-style:none; margin:0 0 1.5rem; padding:0; counter-reset:none; }
.guide-steps > li{ display:flex; gap:.9rem; padding:.7rem 0; border-bottom:1px solid var(--linia); }
.guide-steps > li:last-child{ border-bottom:0; }
.step-n{
  width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--granat); color:var(--zloto);
  font-family:var(--f-head); font-weight:700; font-size:.86rem; line-height:1;
}
.step-body{ min-width:0; }
.step-body h5{ margin:0 0 .2rem; font-size:.98rem; font-weight:700; }
.step-body p{ margin:0; color:var(--granat-700); font-size:.92rem; }
.step-body b{ font-family:var(--f-head); font-weight:600; }

.guide-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.2rem; }
.guide-box{ border:1px solid var(--linia); padding:1rem 1.1rem; background:var(--biel); }
.guide-box h5{
  margin:0 0 .55rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  font-family:var(--f-head); font-weight:600;
}
.guide-box.g-read{ border-top:3px solid var(--kobalt); }
.guide-box.g-read h5{ color:var(--kobalt); }
.guide-box.g-tip{ border-top:3px solid var(--ok); }
.guide-box.g-tip h5{ color:var(--ok); }
.g-list{ margin:0; padding-left:1.1rem; font-size:.9rem; }
.g-list li{ margin-bottom:.45rem; }
.g-list li:last-child{ margin-bottom:0; }
.g-when{ margin:.8rem 0 0; padding-top:.7rem; border-top:1px solid var(--linia);
  font-size:.82rem; color:var(--granat-500); }
.guide-trap{ margin-bottom:0; }
.guide-foot{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--linia); }

/* Pasek powitalny nad narzedziem - pokazuje sie raz, przy pierwszym wejsciu. */
.g-hint{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  background:var(--fiolet-050); border:1px solid var(--linia); border-left:4px solid var(--fiolet);
  padding:.85rem 1rem; margin-bottom:1.25rem;
}
.g-hint-ico{
  width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--fiolet); color:var(--biel); font-size:1rem; line-height:1;
}
.g-hint-txt{ flex:1 1 260px; margin:0; font-size:.88rem; color:var(--granat-700); }
.g-hint-txt b{ font-family:var(--f-head); font-weight:600; color:var(--granat); }
.g-hint-x{
  border:0; background:none; font-size:1.4rem; line-height:1; cursor:pointer;
  color:var(--granat-300); padding:0 .2rem;
}
.g-hint-x:hover{ color:var(--granat); }

/* Spis instrukcji (#/guides) */
.g-group{
  font-family:var(--f-head); font-weight:600; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--granat-300); margin:1.8rem 0 .7rem;
}
.g-group:first-child{ margin-top:0; }
.g-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:.8rem; }
.g-card{
  display:flex; gap:.85rem; align-items:flex-start; text-align:left; width:100%;
  background:var(--biel); border:1px solid var(--linia); border-radius:var(--r);
  padding:1rem 1.05rem; cursor:pointer; font-family:var(--f-body);
  box-shadow:var(--sh-1); transition:all .14s ease;
}
.g-card:hover{ border-color:var(--fiolet); box-shadow:var(--sh-2); transform:translateY(-1px); }
.g-card:focus-visible{ outline:3px solid var(--zloto); outline-offset:2px; }
.g-card-ico{
  width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--fiolet-050); color:var(--fiolet); font-size:1.15rem; line-height:1;
}
.g-card-body{ flex:1; min-width:0; display:block; }
.g-card-body strong{ display:block; font-family:var(--f-head); font-weight:600; font-size:.98rem; }
.g-card-body small{ display:block; font-size:.82rem; color:var(--granat-500); line-height:1.5; margin-top:.15rem; }
.g-card-body em{
  display:block; margin-top:.4rem; font-style:normal; font-size:.7rem;
  font-family:var(--f-head); font-weight:600; color:var(--granat-300); letter-spacing:.04em;
}
.g-card-go{
  flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center;
  background:var(--granat); color:var(--zloto); font-family:var(--f-head); font-weight:700; font-size:.9rem;
}
.g-card:hover .g-card-go{ background:var(--fiolet); }

@media (max-width:760px){
  .guide-cols{ grid-template-columns:1fr; }
  .guide-hero{ gap:.75rem; }
  .guide-ico{ width:42px; height:42px; font-size:1.3rem; }
  .guide-hero-txt h3{ font-size:1.1rem; }
}
@media (max-width:620px){
  /* Schemat ma stala szerokosc odniesienia (420 jednostek) i drobne napisy.
     Sciesniety do 320 px staje sie nieczytelny - dlatego na waskim ekranie
     przewija sie w poziomie, zamiast maleć. */
  .guide-figure{ overflow-x:auto; }
  .guide-figure .g-art{ min-width:470px; }
  /* Trzy przyciski w pasku gornym musza zmiescic sie razem z tytulem. */
  .topbar-actions{ gap:.45rem; }
  .help-btn,.bell{ width:34px; height:34px; }
}

/* ============ DRUK ============ */
@media print{
  .sidebar,.topbar,.app-foot,.no-print,.btn{ display:none !important; }
  body{ background:var(--biel); }
  .main,.view{ padding:0; max-width:none; margin:0; }
  .report{ border:0; box-shadow:none; padding:0; }
  .card{ box-shadow:none; break-inside:avoid; }
  /* Instrukcje: kazde narzedzie na swojej stronie, rysunki i kroki nie pekaja. */
  .modal{ display:none !important; }
  .guide{ break-before:page; }
  .guide:first-child{ break-before:auto; }
  .guide + .guide{ margin-top:0; padding-top:0; border-top:0; }
  .guide-figure,.guide-steps > li,.guide-box{ break-inside:avoid; }
  .g-card{ box-shadow:none; }
}