/* Inter z naszego serwera (zmienna grubość 100–900; app/scripts/build-vendor.js) — bez Google Fonts:
   w Discordzie (Activity) zewnętrzne adresy są zablokowane, a i prywatność lepsza. */
/* Tkz — własny odręczny krój (Calligraphr). Tylko tytuł okna „Bingo!” i napisy na kartach.
   Bez części znaków (!, x, q, v) — te bierze Inter. */
@font-face {
  font-family: "Tkz"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/tkz-regular.woff2) format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

:root {
  --bg: #F0F6FC;          /* jasny motyw: błękitne tło, białe karty (design/LOOK-HANDOFF.md, D1) */
  --bg-wash: #f5f8fc;
  --ink: #1a1a1a;
  --ink-muted: #555555;
  --title: #5579a3;
  --pink: #ff6ac4;
  --pink-soft: #fc8bc9;
  --pink-wash: #ffbfe2;
  --lime: #d2ed68;
  --lime-soft: #e3fe7b;
  --peach: #ffa96b;
  --blue: #acceff;
  --blue-wash: #d6e3f6;
  --line: #e1eaf5;
  --danger: #dc2626;
  --ok: #2f7d4a;
  --shadow: 0 4px 20px rgba(151, 188, 241, 0.18);
  --shadow-hover: 0 8px 28px rgba(151, 188, 241, 0.28);
  --radius: 1rem;
  --font: "Inter", system-ui, sans-serif;
  /* Bezpieczne krawędzie: w Discordzie (Activity) — jego zmienne, poza nim — telefonu */
  --safe-b: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-t: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --tabbar-h: calc(5.25rem + var(--safe-b));
}

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

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--glow-1), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 8%, var(--glow-2), transparent 50%),
    radial-gradient(ellipse 50% 35% at 80% 100%, var(--glow-3), transparent 50%),
    var(--bg);
}

.hidden { display: none !important; }
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Tryb Discord (Activity): czego tam nie ma (schowek, pobieranie) — nie pokazujemy. */
.in-discord .no-discord { display: none !important; }
.view { min-height: 100dvh; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: var(--surface);
}
.boot-stage {
  position: relative;
  width: 7.25rem;
  height: 7.25rem;
}
.boot-icon {
  position: absolute;
  inset: 0.9rem;
  width: calc(100% - 1.8rem);
  height: calc(100% - 1.8rem);
  object-fit: contain;
  animation: boot-pulse 1.15s ease-in-out infinite;
}
.boot-ring {
  position: absolute;
  inset: 0;
  border: 3px solid var(--pink-wash);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: boot-spin 0.75s linear infinite;
}
.boot-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@keyframes boot-spin {
  to { transform: rotate(360deg); }
}
@keyframes boot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.96); opacity: 0.82; }
}

.view-login {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: calc(24px + var(--safe-t)) 24px calc(32px + var(--safe-b));
  overflow: hidden;
}

.login-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.85;
}
.blob-pink { width: 16rem; height: 16rem; background: var(--pink-wash); top: -3rem; right: -4rem; }
.blob-lime { width: 11rem; height: 11rem; background: var(--lime-soft); top: 28%; left: -4rem; }
.blob-blue { width: 13rem; height: 13rem; background: var(--blue); bottom: 18%; right: -5rem; opacity: 0.45; }
.blob-peach { width: 8rem; height: 8rem; background: var(--peach); bottom: 8%; left: 12%; opacity: 0.55; }

.login-inner {
  position: relative;
  z-index: 1;
  max-width: 28rem;
  animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.brand {
  font-family: "Tkz", var(--font);
  font-size: clamp(2.6rem, 10vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 1rem;
  line-height: 1;
  color: var(--ink);
}

.login-headline {
  font-size: clamp(1.45rem, 5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.75rem;
  max-width: 16ch;
}

.login-sub { margin: 0 0 1.75rem; color: var(--ink-muted); font-weight: 500; }
.login-hint { margin: 1.25rem 0 0; font-size: 0.85rem; color: var(--ink-muted); }
.login-hint-guide { margin: 0.35rem 0 0; font-size: 0.85rem; font-weight: 600; }
.login-hint-guide a { color: var(--title); text-underline-offset: 2px; }
.rem-guide { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--title); text-decoration: underline; text-underline-offset: 2px; }
.rem-warn { margin: 0 0 0.75rem; padding: 0.6rem 0.75rem; border-radius: 12px; background: var(--pink-wash); color: var(--ink); font-size: 0.85rem; font-weight: 600; line-height: 1.4; }
.login-error { margin: 1rem 0 0; color: var(--danger); font-weight: 600; }
.adm-user-actions { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.adm-export { font-size: 0.75rem; color: var(--ink-muted); }
.view-consent { min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; padding: 1.25rem 1rem 2rem; }
.consent-inner { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 0.75rem; }
.consent-title { margin: 0; }
.consent-lede, .consent-hint { margin: 0; color: var(--ink-muted); font-size: 0.9rem; }
.consent-tabs { display: flex; gap: 0.5rem; }
.consent-tabs button { flex: 1; padding: 0.6rem; border-radius: 0.85rem; border: 1px solid var(--line); background: var(--bg-wash); color: var(--ink); font: inherit; font-weight: 700; }
.consent-tabs button[aria-selected="true"] { border-color: var(--pink); }
.consent-read { color: var(--pink); }
.consent-doc { height: 50vh; height: 50dvh; overflow-y: auto; font-size: 0.9rem; line-height: 1.55; }
.consent-doc h2, .consent-doc h3 { margin: 1rem 0 0.4rem; }
.consent-check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 600; }
.consent-check input { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; }
.consent-check a { color: inherit; }
.email-intro:empty { display: none; }
/* Drobne podpowiedzi pod polami (notatka, „Na czat”) — PRAWNE-WDROZENIE.md, B i D. */
.field-note { display: block; margin: 0.35rem 0 0; font-size: 0.78rem; font-weight: 500; line-height: 1.4; color: var(--ink-muted); }
.prompt-note { margin: -0.6rem 0 1rem; }
.prompt-warn { margin: -0.4rem 0 1rem; padding: 0.55rem 0.75rem; border-radius: 12px; background: var(--pink-wash); color: var(--ink); font-size: 0.82rem; font-weight: 600; line-height: 1.4; }
.login-note { display: block; margin: 0; font-size: 0.78rem; font-weight: 500; color: var(--ink-muted); text-align: center; }
.email-form .login-note { margin-top: 0.35rem; text-align: left; }
.consent-check.is-locked { opacity: 0.55; }
#btn-consent:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.consent-how { margin: 0; font-weight: 700; font-size: 0.9rem; }
/* Okno z dokumentem: „↓ Przewiń do końca” przyklejone do dołu, z cieniem, póki nie dojedziesz do końca. */
.consent-doc-wrap { position: relative; }
.consent-doc { padding: 0.25rem 1rem 1.25rem; }
.consent-more {
  position: absolute; left: 1px; right: 1px; bottom: 1px; padding: 1.6rem 0 0.6rem;
  border: 0; border-radius: 0 0 var(--radius) var(--radius); cursor: pointer;
  background: linear-gradient(to bottom, transparent, var(--surface) 55%);
  color: var(--pink); font: inherit; font-weight: 700; font-size: 0.9rem;
}
.consent-hint .consent-next { margin: 0; }
/* Listy i tabele dokumentów (style z #doc dochodzą razem z treścią; tu tylko dopasowanie do okna). */
.consent-doc .legal-list { padding-left: 1.3rem; }
.consent-doc a { color: var(--pink); word-break: break-word; }
.consent-logout { align-self: center; color: var(--ink-muted); }
.legal-links { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--ink-muted); }
.legal-links a { color: inherit; }
/* Pytanie („Na pewno?”, notatka) zawsze NAD oknem, z którego padło (okno „Bingo!”, okno Bota stoją niżej w HTML
   i bez tego przykrywały pytanie — w Discordzie nic nie dało się kliknąć). Tost (140) zostaje na wierzchu. */
#sheet-confirm, #sheet-prompt { z-index: 135; }
.confirm-text { margin: 0.5rem 0 1rem; font-weight: 600; }
.prompt-input {
  display: block; width: 100%; margin: 0.25rem 0 1rem; resize: vertical; min-height: 5.5rem;
  border: 1px solid var(--line); background: var(--bg-wash); color: var(--ink);
  border-radius: 0.85rem; padding: 0.8rem 0.9rem; font: inherit; font-weight: 500;
}
.confirm-img { display: block; max-width: 60%; max-height: 40vh; margin: 0.5rem auto 0; border-radius: 0.85rem; }
.bingo-arch-hint { margin-top: -0.25rem; font-size: 0.8rem; }
.bingo-arch-item.is-holding { transform: scale(0.97); transition: transform 0.45s ease; }
.news-list:empty { display: none; }
.news-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }
.card.news-card { position: relative; padding: 16px 44px 16px 16px; border-left: 4px solid var(--blue); }
.news-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 0.95rem; }
.news-close {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-muted); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.news-close:hover { background: var(--bg-wash); }
.renew-card { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; border: 1px solid var(--pink, #ff3e9a); }
.renew-title { margin: 0; font-weight: 800; color: var(--title); }
.renew-text { margin: 0; color: var(--ink-muted); font-size: 0.9rem; }
.set-delete-open, #btn-delete-open { margin-top: 0.75rem; color: var(--danger); font-size: 0.85rem; }
/* Okno „Na pewno usunąć konto?” (#sheet-delete, układ jak inne okna; sheet-tall — przewija się na małym ekranie). */
#sheet-delete .field input { width: 100%; }
.set-note.set-export { margin-top: 0.4rem; font-size: 0.78rem; }
/* Przełącznik z opisem pod nazwą („Nowości i oferty TKZ”). */
.set-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 0.85rem; cursor: pointer; }
.set-switch-text { display: flex; flex-direction: column; gap: 0.2rem; }
.set-switch-text b { color: var(--ink); }
.set-switch-text small { font-size: 0.8rem; line-height: 1.4; color: var(--ink-muted); }
.set-switch .switch { flex: none; margin-top: 0.1rem; }
.btn-danger { background: var(--danger); color: #fff; }
.email-form { display: flex; flex-direction: column; gap: 0.75rem; text-align: left; }
.email-intro { margin: 0 0 0.25rem; color: var(--ink-muted); font-weight: 500; }
.email-form .field input { width: 100%; }
.email-form .email-code-input { letter-spacing: 0.35em; font-size: 1.35rem; text-align: center; font-weight: 700; }
.email-form .login-error { margin: 0.25rem 0 0; }

.view-app { padding-bottom: var(--tabbar-h); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12px + var(--safe-t)) 18px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--glass);
  backdrop-filter: blur(12px);
}

.topbar-brand { display: flex; align-items: baseline; gap: 0.4rem; }
.brand-mark {
  font-family: "Tkz", var(--font);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
}
.brand-name {
  font-family: "Tkz", var(--font);
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--title);
}
.topbar-user { display: flex; align-items: center; gap: 0.65rem; }
.avatar-btn {
  appearance: none;
  border: 0;
  padding: 4px;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.avatar {
  border-radius: 50%;
  border: 2px solid var(--pink-soft);
  object-fit: cover;
  background: var(--blue-wash);
}

.main { max-width: 440px; margin: 0 auto; padding: 20px 18px 12px; }
.panel { animation: fadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--title);
  font-weight: 700;
}

.hero-status h2 {
  font-size: 1.75rem;
  margin: 0.35rem 0 0.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.lede { margin: 0; color: var(--ink-muted); }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card-ring {
  margin: 1.5rem 0 1.25rem;
  padding: 1.25rem 1rem 1rem;
  text-align: center;
}

.card-form { padding: 1.1rem; }

.progress-ring-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto;
}

.progress-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 10; }
.ring-fg {
  fill: none;
  stroke: var(--pink);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ring-label strong { font-size: 2rem; line-height: 1; font-weight: 800; color: var(--title); }
.ring-label span { color: var(--ink-muted); font-size: 0.9rem; font-weight: 600; }
.ring-caption {
  margin: 0.65rem 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--title);
}

.ask-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.4rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: scale(0.985); }

.btn-block { width: 100%; }
.btn-primary { background: var(--pink); color: var(--ink); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-quiet {
  background: var(--surface);
  color: var(--title);
  border: 1px solid var(--line);
}
.btn-discord-icon {
  width: 1.15rem;
  height: 1.15rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.74 19.74 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.373-.292a.074.074 0 0 1 .078-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .079.01c.12.098.247.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-text {
  background: none;
  border: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.back {
  background: none;
  border: none;
  color: var(--title);
  font: inherit;
  font-weight: 700;
  padding: 0;
  margin: 0 0 0.75rem;
  cursor: pointer;
}
.panel h2 {
  font-size: 1.35rem;
  margin: 0 0 1rem;
  font-weight: 800;
  color: var(--title);
}

.form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-muted); font-weight: 600; }
.field legend { padding: 0 0.25rem; font-weight: 600; }
fieldset.field {
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  margin: 0;
  padding: 0.65rem 0.75rem 0.8rem;
}
.field select,
.field input[type="text"],
.field input[type="email"],
.field input[type="number"] {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg-wash);
  color: var(--ink);
  border-radius: 0.85rem;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-weight: 500;
}

.mood-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.mood-grid label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  padding: 0.65rem 0.7rem;
  color: var(--ink);
  cursor: pointer;
  background: var(--surface);
  font-weight: 500;
}
.mood-grid label:has(input:checked) {
  border-color: var(--pink);
  background: var(--pink-wash);
}
.vis-field .radio { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; color: var(--ink); font-weight: 500; }
.feedback { min-height: 1.25rem; margin: 0; font-size: 0.95rem; color: var(--title); font-weight: 600; }
.feedback.error { color: var(--danger); }

.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.month-nav h2 { margin: 0; text-align: center; flex: 1; font-size: 1.15rem; }
.icon-btn {
  width: 2.4rem; height: 2.4rem; border-radius: 0.85rem;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--title); font-size: 1.4rem; cursor: pointer;
  box-shadow: var(--shadow);
}

.cal-art-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

/* Kalendarz w trakcie rysowania: szkielet karty (pierwszy raz) albo przygaszony poprzedni miesiąc + stemple */
.cal-art { transition: opacity 0.3s ease, filter 0.3s ease; }
.cal-art:not([src]) { display: none; }
.cal-art-card.is-drawing:not(.has-img) {
  aspect-ratio: 2167 / 2201; /* proporcje szablonu kalendarza */
  background: linear-gradient(100deg, var(--bg-wash) 30%, var(--surface) 50%, var(--bg-wash) 70%);
  background-size: 300% 100%;
  animation: calShimmer 1.4s linear infinite;
}
.cal-art-card.is-drawing .cal-art { opacity: 0.35; filter: blur(2px); }
.cal-art-card.is-drawing .cal-share-btn { opacity: 0.4; pointer-events: none; }
.cal-drawing {
  display: none; position: absolute; inset: 0; z-index: 2;
  flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
}
.cal-art-card.is-drawing .cal-drawing { display: flex; }
.cal-drawing-stamps { display: flex; gap: 0.6rem; }
.cal-drawing-stamps i {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3.5px solid var(--pink); opacity: 0.35;
  animation: calStamp 1.2s ease-in-out infinite;
}
.cal-drawing-stamps i:nth-child(2) { border-color: var(--peach); animation-delay: 0.2s; }
.cal-drawing-stamps i:nth-child(3) { border-color: var(--lime); animation-delay: 0.4s; }
.cal-drawing-text {
  padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--surface);
  box-shadow: var(--shadow); font-size: 0.9rem; font-weight: 700; color: var(--title);
}
@keyframes calStamp {
  0%, 60%, 100% { transform: scale(1) rotate(0deg); opacity: 0.35; }
  20% { transform: scale(1.25) rotate(-12deg); opacity: 1; }
  35% { transform: scale(0.92) rotate(6deg); opacity: 1; }
}
@keyframes calShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .cal-drawing-stamps i, .cal-art-card.is-drawing { animation: none; }
  .cal-drawing-stamps i { opacity: 1; }
}
.cal-art {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.cal-missing {
  margin: 0 0 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: var(--bg-wash);
  color: var(--ink-muted);
  font-weight: 600;
}
.cal-share { margin-top: 0.9rem; }

.workout-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.workout-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.workout-item header { display: flex; justify-content: space-between; gap: 0.5rem; }
.workout-item .type { font-weight: 800; color: var(--title); }
.workout-item .date { font-size: 0.82rem; color: var(--ink-muted); font-weight: 600; }
.workout-item .meta { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--ink-muted); }
.workout-item .actions { display: flex; gap: 0.55rem; margin-top: 0.7rem; }
.workout-item .actions button {
  border: 1px solid var(--line);
  background: var(--bg-wash);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.workout-item .actions .danger { color: var(--danger); background: var(--surface); }

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(480px, 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  padding: 0.55rem 0.5rem calc(0.45rem + var(--safe-b));
  background: var(--glass-strong);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(151, 188, 241, 0.16);
  z-index: 30;
  backdrop-filter: blur(12px);
}
.tabbar > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.18rem;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.15rem;
  border-radius: 0.75rem;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  line-height: 1.1;
}
.tabbar > button.on {
  color: var(--ink);
  background: var(--pink-wash);
}
.tabbar .ico {
  width: 1.4rem;
  height: 1.4rem;
}
.tabbar .ico svg { display: block; width: 100%; height: 100%; }
.tabbar .tab-lbl { display: block; width: 100%; }

@media (min-width: 720px) {
  .view-login { align-items: center; padding-left: 8vw; }
  .main { max-width: 480px; padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .login-inner { animation: none; }
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(26, 26, 26, 0.35);
  cursor: pointer;
}
.sheet-card {
  position: relative;
  width: min(440px, 100%);
  background: var(--surface);
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.25rem 1.15rem calc(1.25rem + var(--safe-b));
  box-shadow: 0 -12px 40px rgba(85, 121, 163, 0.2);
}
.sheet-title {
  margin: 0 0 1rem;
  font-weight: 800;
  color: var(--title);
  font-size: 1.05rem;
}

.logs-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.logs-item {
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--surface);
  padding: 0.75rem 0.85rem;
  font-size: 0.78rem;
  line-height: 1.35;
}
.logs-item--err {
  border-color: var(--danger-line);
  background: var(--danger-wash);
}
.logs-kind {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--title);
  margin: 0 0 0.2rem;
}
.logs-item--err .logs-kind { color: var(--danger); }
.logs-meta, .logs-detail {
  margin: 0;
  color: var(--ink-muted);
  word-break: break-word;
}
.logs-empty {
  color: var(--ink-muted);
  font-weight: 600;
  padding: 0.5rem 0;
}

/* --- Bingo nawyków (js/bingo.js) --- */

.bingo h2 { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.bingo-lede { margin-bottom: 1rem; }
.bingo-sub { margin: 1.1rem 0 0.5rem; font-weight: 800; color: var(--title); }
.bingo-note { margin: -0.25rem 0 0.6rem; font-size: 0.88rem; color: var(--ink-muted); }
.bingo-counter { margin: 0.5rem 0 0.6rem; font-weight: 700; }

.bingo-opts { display: flex; flex-direction: column; gap: 0.75rem; }
.bingo-opt {
  display: flex; flex-direction: column; gap: 0.25rem;
  width: 100%; padding: 1.1rem; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
}
.bingo-opt:hover { box-shadow: var(--shadow-hover); }
.bingo-opt b { font-size: 1.3rem; font-weight: 800; }
.bingo-opt span { color: var(--ink-muted); }
.bingo-opt em { font-style: normal; font-weight: 800; color: var(--title); margin-top: 0.35rem; }
.bingo-opt small { color: var(--ink-muted); font-weight: 600; }

.bingo-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.bingo-chip {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.92rem; padding: 0.45rem 0.85rem;
  border-radius: 999px; cursor: pointer; text-align: left;
}
.bingo-chip[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); font-weight: 700; }
.bingo-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.bingo-chip.own { border-style: dashed; }
.bingo-chip.locked { background: var(--pink-wash); border-color: var(--pink-soft); cursor: default; }
.bingo-own { display: inline-flex; align-items: center; gap: 0.15rem; }
.bingo-own-del {
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted);
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}

.bingo-add { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
.bingo-add input, .bingo-add select {
  min-width: 0; font: inherit; padding: 0.65rem 0.9rem;
  border-radius: 0.8rem; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
}
/* Jednostka i ilość własnego nawyku w jednym rzędzie z „Dodaj” */
.bingo-add-row { display: flex; gap: 0.5rem; }
.bingo-add-row select { flex: 1 1 auto; padding-right: 0.5rem; }
.bingo-add-row input { flex: 0 1 6.5rem; width: 6.5rem; }
.bingo-add .bingo-note { margin: 0; }
.bingo-add .btn { padding: 0.65rem 1rem; }
.bingo .btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }

.bingo-board { position: relative; width: 100%; aspect-ratio: 1; margin: 0.4rem 0 1rem; }
.bingo-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr);
  gap: 0.35rem; width: 100%; height: 100%;
}
.bingo-cell {
  position: relative; display: grid; place-items: center; overflow: hidden;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 0.7rem; padding: 0.2rem; text-align: center;
  font: inherit; font-size: clamp(0.72rem, 3.2vw, 0.875rem); font-weight: 700; line-height: 1.12;
  overflow-wrap: normal; word-break: normal; hyphens: manual; cursor: pointer;
}
span.bingo-cell { cursor: default; }
.bingo-cell.tkz { background: var(--pink-wash); border-color: var(--pink-soft); }
.bingo-cell.joker { border-style: dashed; border-color: var(--peach); }
.bingo-cell.done { background: var(--pink); border-color: var(--pink); }
.bingo-cell.done::after {
  content: "✓"; position: absolute; inset: auto 4px 2px auto;
  font-size: 0.95em; font-weight: 900; line-height: 1; color: var(--on-accent, var(--ink));
}
.bingo-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.bingo-lines line { stroke: var(--lime); stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0.75; }
/* F8: napisy, ✓, ⏱ i 🔔 nad linią (pola nie tworzą własnego kontekstu warstw) */
.bingo-cell > span:not(.bingo-clk):not(.bingo-bell) { position: relative; z-index: 2; }
.bingo-cell.done::after, .bingo-clk, .bingo-bell { z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .bingo-cell.done { animation: bingo-stamp 0.22s ease-out; }
  @keyframes bingo-stamp { from { transform: scale(0.85); } to { transform: scale(1); } }
}

/* Pole: przytrzymanie otwiera okno (bez menu i zaznaczania tekstu), ⏱ minutnik, 🔔 przypomnienie. */
button.bingo-cell { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.bingo-clk { position: absolute; top: 3px; right: 4px; font-size: 11px; line-height: 1; opacity: 0.9; }
.bingo-bell { position: absolute; top: 3px; left: 4px; font-size: 11px; line-height: 1; }
.bingo-dur { display: block; margin-top: 1px; font-size: 0.9em; font-weight: 600; opacity: 0.85; }
/* Tekst pod ikonami ⏱ / 🔔 w rogach — inaczej długie słowo („Oddech”) wchodzi pod ikonę. */
.bingo-cell:has(.bingo-clk), .bingo-cell:has(.bingo-bell) { padding-top: 11px; }

/* Wybór nawyków: grupy i gotowe zestawy */
.bingo-group {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  margin: 1rem 0 0.5rem; font-weight: 800; color: var(--title);
}
.bingo-group small { font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); }
.bingo-chip.preset { border-color: var(--peach); font-weight: 600; }
/* Gotowe zestawy: nazwa + nawyki w środku (widać, co się wybiera) */
.bingo-presets { display: grid; gap: 0.5rem; margin-bottom: 0.9rem; }
.bingo-preset {
  display: flex; flex-direction: column; gap: 0.2rem; width: 100%; padding: 0.7rem 0.9rem;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--peach); border-radius: 0.9rem;
}
.bingo-preset b { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-weight: 800; }
.bingo-preset b small { font-size: 0.78rem; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.bingo-preset span { font-size: 0.84rem; line-height: 1.4; color: var(--ink-muted); }
.bingo-preset[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); }
.bingo-preset[aria-pressed="true"] span, .bingo-preset[aria-pressed="true"] b small { color: var(--on-accent); opacity: 0.85; }
.bingo-preset[aria-pressed="true"] b { color: var(--on-accent); }

/* Archiwum (ekran wyboru planszy) */
.bingo-arch-title { margin-top: 1.6rem; }
.bingo-arch { display: flex; flex-direction: column; gap: 0.5rem; }
.bingo-arch-item {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.75rem 0.9rem; text-align: left;
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 0.9rem; cursor: pointer;
}
.bingo-arch-item small { color: var(--ink-muted); }
.bingo-arch-item > span { font-weight: 700; }
.bingo-arch-item > span small { display: block; font-weight: 500; }
.bingo-arch-item > small { text-align: right; white-space: nowrap; }

/* Podsumowanie: karta (obrazek z js/bingo-share.js) — 9:16 Stories albo 4:5 post; do czasu narysowania pastelowe tło */
.bingo-share-card {
  position: relative;
  width: min(100%, 300px, calc(60dvh * 9 / 16)); aspect-ratio: 9 / 16;
  margin: 0.4rem auto 0.75rem; border-radius: 1.2rem; overflow: hidden;
  background: #F0F6FC;
  box-shadow: var(--shadow);
}
.bingo-share-card.post { width: min(100%, 320px, calc(55dvh * 4 / 5)); aspect-ratio: 4 / 5; }
.bingo-share-card img { display: block; width: 100%; height: 100%; }
.bingo-share-card img:not([src]) { visibility: hidden; }
/* Karta się rysuje: stemple jak przy kalendarzu, znikają, gdy obrazek ma src */
.bingo-card-loading {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  color: #24152B; font-weight: 700; font-size: 0.9rem;
}
.bingo-share-card img:not([src]) + .bingo-card-loading { display: flex; }
.bingo-card-loading .cal-drawing-stamps i { border-color: #FF8BC8; }
.bingo-card-loading .cal-drawing-stamps i:nth-child(2) { border-color: #9CC0F3; }
.bingo-card-loading .cal-drawing-stamps i:nth-child(3) { border-color: #D9F26B; }
/* Przełączniki karty (format, nazwy nawyków) — w podsumowaniu i w oknie „Bingo!” */
.bt-opts { display: grid; gap: 0.5rem; width: 100%; margin-bottom: 0.75rem; }
.bt-opts .set-seg { display: flex; }
.bt-opts .set-seg button { flex: 1; }

/* Okno pola: minutnik i przypomnienie (js/bingo-timer.js) */
.bt-body { display: flex; flex-direction: column; gap: 0.5rem; }
.bt-kind { margin: 0; color: var(--ink-muted); }
.bt-clock {
  font-size: clamp(3rem, 16vw, 4.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums; text-align: center;
}
.bt-phase { min-height: 1.4em; text-align: center; font-weight: 800; color: var(--title); }
.bt-actions { justify-content: center; }
.bt-awake { text-align: center; }
.bt-hr { width: 100%; margin: 0.5rem 0 0.2rem; border: 0; border-top: 1px solid var(--line); }
.bt-remrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bt-remrow input {
  font: inherit; padding: 0.6rem 0.8rem; border-radius: 0.8rem;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
}
.bt-remrow .btn { padding: 0.65rem 1rem; }
/* To samo okno: potwierdzenie pola i „Bingo! Pochwalisz się?” (miniatura karty 9:16) */
.bt-q { margin: 0; font-weight: 800; font-size: 1.05rem; }
.bt-cele { display: grid; justify-items: center; gap: 0.9rem; text-align: center; }
.bt-cele p { margin: 0; font-weight: 600; }
.bt-cele-img {
  width: 156px; aspect-ratio: 9 / 16; border-radius: 0.9rem; object-fit: cover;
  background: #F0F6FC; box-shadow: 0 6px 24px rgba(36, 21, 43, 0.14);
}
.bt-cele-img.post { width: 224px; aspect-ratio: 4 / 5; }
.bt-cele-title { font-family: "Tkz", var(--font, Inter), system-ui, sans-serif; font-size: 1.9rem; line-height: 1.1; font-weight: 400; }
.bt-cele .bt-opts { margin-bottom: 0; }
.tkz-confetti-glow { animation: celeGlow 1.2s ease-out 1; }
@keyframes celeGlow { from { box-shadow: 0 0 0 0 rgba(204, 255, 0, 0.9); } to { box-shadow: 0 0 0 18px rgba(204, 255, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .tkz-confetti-glow { animation: none; } }
/* Konfetti nad wszystkim (js/bingo-confetti.js) */
.tkz-confetti { position: fixed; inset: 0; width: 100vw; height: 100dvh; pointer-events: none; z-index: 9999; }
/* Niskie okno (Activity w Discordzie na komputerze): okna z kartą nie wychodzą poza ekran — przewijają się w środku,
   a podgląd karty maleje razem z wysokością okna. */
#sheet-bingo .sheet-card, #sheet-confirm .sheet-card, #sheet-prompt .sheet-card { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.bt-cele-img { width: auto; height: min(277px, 30dvh); }
.bt-cele-img.post { width: auto; height: min(280px, 30dvh); }
@media (max-height: 600px) and (min-width: 560px) {
  #sheet-bingo .sheet-card { width: min(640px, 100%); }
  #sheet-bingo .bt-cele { grid-template-columns: auto 1fr; justify-items: stretch; text-align: left; align-items: center; column-gap: 1.25rem; }
  #sheet-bingo .bt-cele-img, #sheet-bingo .bt-cele-img.post { grid-row: span 2; height: min(300px, 58dvh); }
}
.bt-cele-img:not([src]) { color: transparent; animation: celePulse 1.1s ease-in-out infinite alternate; }
@keyframes celePulse { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bt-cele-img:not([src]) { animation: none; } }

/* --- Nawigacja: wjazd zakładek z boku (swipe / sąsiednia zakładka) --- */
/* Karuzela: sąsiednia zakładka (.peek) stoi obok bieżącej i jedzie za palcem (js/swipe.js). */
.main {
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  min-height: calc(100dvh - var(--tabbar-h) - 64px);
}
.panel.peek { position: absolute; margin: 0; animation: none; }
.panel.still { animation: none; }
.panel.enter-right { animation: enterRight 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; }
.panel.enter-left { animation: enterLeft 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes enterRight { from { transform: translateX(28%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes enterLeft { from { transform: translateX(-28%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .panel.enter-right, .panel.enter-left { animation: none; }
}

/* --- Własne samopoczucie --- */
.mood-custom {
  width: 100%; margin-top: 0.6rem; font: inherit;
  padding: 0.7rem 0.9rem; border-radius: 0.8rem;
  border: 1.5px solid var(--pink-soft); background: var(--surface); color: var(--ink);
}

/* --- Data treningu: przycisk + kalendarzyk (js/datepicker.js) --- */
.date-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; padding: 0.75rem 0.9rem; border-radius: 0.8rem;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.date-btn svg { width: 1.3rem; height: 1.3rem; color: var(--title); flex: none; }
.date-btn:hover { border-color: var(--pink-soft); }

body.dp-lock { overflow: hidden; }
.dp { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 1rem; }
.dp-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
  background: rgba(26, 26, 26, 0.45); backdrop-filter: blur(2px);
  animation: dpFade 0.18s ease-out both;
}
.dp-card {
  position: relative; width: min(360px, 100%);
  background: var(--surface); border-radius: 1.2rem; padding: 1rem 1rem 0.9rem;
  box-shadow: 0 18px 48px rgba(26, 26, 26, 0.25);
  animation: dpPop 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.dp-title { font-size: 1.05rem; font-weight: 800; }
.dp-head .icon-btn:disabled { opacity: 0.3; cursor: default; }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; text-align: center; }
.dp-week span { font-size: 0.72rem; font-weight: 800; color: var(--ink-muted); text-transform: uppercase; padding: 0.2rem 0; }
.dp-day {
  aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent;
  font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
}
.dp-day:disabled { color: var(--disabled); cursor: default; }
.dp-day:not(:disabled) { background: var(--bg-wash); }
.dp-day:not(:disabled):hover { background: var(--pink-wash); }
.dp-day.today { box-shadow: inset 0 0 0 2px var(--pink-soft); }
.dp-day.on { background: var(--pink); color: var(--ink); }
.dp-hint { margin: 0.6rem 0 0.4rem; font-size: 0.85rem; color: var(--ink-muted); text-align: center; }
.dp-actions { display: flex; gap: 0.5rem; }
.dp-actions .btn { flex: 1; padding: 0.7rem 1rem; }
@keyframes dpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dpPop { from { transform: translateY(12px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Start: kompaktowy tracker + bingo pod kreską (bez przewijania na telefonie) --- */
#panel-home .hero-status h2 { font-size: 1.5rem; margin: 0.2rem 0 0.25rem; }
#panel-home .lede { font-size: 1rem; }
.home-tracker {
  display: flex; align-items: center; gap: 1rem;
  margin: 1rem 0 0; padding: 0.9rem 1rem;
}
.home-tracker .progress-ring-wrap { width: 96px; height: 96px; margin: 0; flex: none; }
.home-tracker .ring-label strong { font-size: 1.5rem; }
.home-tracker .ring-label span { font-size: 0.78rem; }
.home-tracker-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.home-tracker-side .ring-caption { margin: 0; font-size: 0.8125rem; }
.home-tracker-side .btn { padding: 0.75rem 1rem; font-size: 0.85rem; }
/* Strefa dotyku ≥ 44 px bez przesuwania układu: padding + ujemny margines. */
.home-goal-link { align-self: flex-start; padding: 0.75rem 0.4rem; margin: -0.75rem -0.4rem; color: var(--title); font-size: 0.875rem; }

.home-bingo { margin-top: 1rem; padding-top: 0.85rem; border-top: 1.5px solid var(--line); }
.home-bingo-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--bg-wash); border: 1px solid var(--line); }
.home-bingo-switch button {
  border: 0; background: transparent; font: inherit; font-size: 0.72rem; font-weight: 800;
  padding: 0.25rem 0.6rem; border-radius: 999px; color: var(--ink-muted); cursor: pointer;
}
.home-bingo-switch button[aria-pressed="true"] { background: var(--pink); color: var(--ink); }
/* Rozmiar planszy i napisów liczy js/bingo.js (fitHomeBoard) — tyle, ile zostaje nad paskiem. */
.home-bingo .bingo-board { margin: 0 auto; }
.home-bingo .bingo-cell { font-size: var(--home-cell-font, 0.7rem); }
.home-bingo-empty {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.9rem 1rem;
}
.home-bingo-empty p { margin: 0; color: var(--ink-muted); font-size: 0.9rem; }

/* --- Analiza AI w „Postępie” --- */
.ai-card { margin: 1rem 0; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ai-title { margin: 0; font-weight: 800; font-size: 1.05rem; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ai-chip {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.85rem; font-weight: 700;
  padding: 0.4rem 0.75rem; border-radius: 999px; cursor: pointer;
}
a.ai-chip { text-decoration: none; }
.ai-chip[aria-pressed="true"] { background: var(--pink-wash); border-color: var(--pink); color: var(--ink); }
.ai-chip[aria-pressed="true"]::before { content: "✓ "; font-weight: 900; }
.ai-card .btn:disabled { opacity: 0.6; cursor: wait; }
.ai-result {
  white-space: pre-wrap; line-height: 1.55; font-size: 0.95rem;
  background: var(--bg-wash); border-radius: 0.8rem; padding: 0.9rem 1rem;
}

/* --- Motyw: jasny (domyślnie) / ciemny. data-theme ustawia skrypt w <head> i app.js (Ustawienia). --- */
:root {
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, 0.88);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --danger-wash: #fff7f7;
  --danger-line: #fecaca;
  --disabled: #c3c9d2;
  --on-accent: #1a1a1a;          /* tekst na różowym i limonkowym — zawsze ciemny */
  --glow-1: rgba(255, 191, 226, 0.45);
  --glow-2: rgba(172, 206, 255, 0.4);
  --glow-3: rgba(227, 254, 123, 0.28);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #15121a;
  --bg-wash: #211c28;
  --surface: #1d1924;
  --ink: #f2edf6;
  --ink-muted: #b5abc0;
  --title: #a6c4ec;
  --line: #342c3f;
  --pink-wash: #4a2741;
  --blue-wash: #253247;
  --glass: rgba(29, 25, 36, 0.88);
  --glass-strong: rgba(29, 25, 36, 0.94);
  --danger-wash: #3a1d22;
  --danger-line: #7f2d36;
  --disabled: #4c4456;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.45);
  --glow-1: rgba(255, 106, 196, 0.14);
  --glow-2: rgba(120, 160, 230, 0.12);
  --glow-3: rgba(210, 237, 104, 0.06);
  color-scheme: dark;
}
.btn-primary, .btn-lime,
.bingo-cell.done,
.dp-day.on, .home-bingo-switch button[aria-pressed="true"], .set-seg button[aria-pressed="true"] {
  color: var(--on-accent);
}
:root[data-theme="dark"] .bingo-lines { mix-blend-mode: normal; }
:root[data-theme="dark"] .bingo-lines line { opacity: 0.55; }
:root[data-theme="dark"] .boot { background: var(--bg); }
:root[data-theme="dark"] .cal-art { filter: brightness(0.92); }

/* --- Ustawienia --- */
.set-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.9rem; }
.set-title { margin: 0; font-weight: 800; font-size: 1rem; }
.set-note { margin: 0; font-size: 0.86rem; color: var(--ink-muted); }
.set-row { display: flex; gap: 0.5rem; }
.set-row select { flex: 1; }
.set-seg { display: flex; gap: 3px; padding: 3px; border-radius: 0.9rem; background: var(--bg-wash); border: 1px solid var(--line); }
.set-seg button {
  flex: 1; border: 0; background: transparent; color: var(--ink-muted);
  font: inherit; font-size: 0.85rem; font-weight: 700;
  padding: 0.55rem 0.4rem; border-radius: 0.7rem; cursor: pointer;
}
.set-seg button[aria-pressed="true"] { background: var(--pink); }
#form-settings .field input, #form-settings .field select { width: 100%; }
.home-bingo-empty .btn { white-space: nowrap; flex: none; }

/* --- Panel admina --- */
.adm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.adm-stat { padding: 0.75rem 0.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.15rem; }
.adm-stat b { font-size: 1.5rem; color: var(--title); line-height: 1; }
.adm-stat span { font-size: 0.72rem; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.adm-feed { padding: 0.25rem 0.9rem; margin-bottom: 0.9rem; }
.adm-feed-head {
  display: flex; justify-content: space-between; width: 100%; padding: 0.65rem 0;
  border: 0; background: none; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer;
}
.adm-feed-list { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 320px; overflow-y: auto; }
.adm-feed-list li { display: flex; gap: 0.6rem; font-size: 0.88rem; line-height: 1.35; }
.adm-feed-list small { color: var(--ink-muted); }
.adm-time { flex: none; font-weight: 800; color: var(--title); font-variant-numeric: tabular-nums; }
.adm-tools { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.adm-tools input, .adm-tools select {
  font: inherit; padding: 0.65rem 0.8rem; border-radius: 0.8rem;
  border: 1px solid var(--line); background: var(--bg-wash); color: var(--ink); min-width: 0;
}
.adm-tools input { flex: 1; }
.adm-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.adm-count { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--ink-muted); font-weight: 700; }
.adm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.adm-user { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.8rem; }
.adm-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--blue-wash); }
.adm-ava--txt { display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; color: var(--title); }
.adm-user-main { flex: 1; min-width: 0; }
.adm-name { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.adm-nick { font-weight: 600; color: var(--ink-muted); font-size: 0.85rem; }
.adm-meta { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--ink-muted); }
.adm-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.adm-badge { font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--bg-wash); border: 1px solid var(--line); }
.adm-badge--pink { background: var(--pink); border-color: var(--pink); color: var(--on-accent); }
.adm-view { flex: none; padding: 0.5rem 0.75rem; font-size: 0.75rem; }
.adm-empty { padding: 0.5rem 0; }

/* --- Pasek podglądu (tylko odczyt) --- */
.viewas {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: calc(0.55rem + var(--safe-t)) 1rem 0.55rem;
  background: var(--lime); color: var(--on-accent); font-size: 0.9rem; font-weight: 700;
}
.viewas button {
  border: 0; border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer;
  background: var(--on-accent); color: var(--lime); font: inherit; font-weight: 800;
}
body.viewing .topbar { top: 0; }
.adm-tools select { flex: 0 1 auto; max-width: 46%; }

/* --- Ikony w górnym pasku (przypomnienia, minutnik) --- */
.topbar-user { display: flex; align-items: center; gap: 0.35rem; }
.top-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--title); cursor: pointer;
}
.top-icon svg { width: 20px; height: 20px; }
.top-icon:hover { background: var(--pink-wash); }

/* --- Przypomnienia --- */
.rem-card { padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.8rem; }
.rem-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rem-row .btn { flex: 1; padding: 0.7rem 1rem; }
.rem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.rem-list li { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; }
.rem-main { display: flex; flex-direction: column; min-width: 0; }
.rem-main b { overflow-wrap: anywhere; font-size: 0.93rem; }
.rem-main span { font-size: 0.8rem; color: var(--ink-muted); }
.rem-main a { color: var(--title); }
.rem-btn { flex: none; padding: 0.45rem 0.75rem; font-size: 0.72rem; }
.rem-ok { flex: none; font-size: 0.75rem; font-weight: 700; color: var(--title); white-space: nowrap; }
.rem-del { color: var(--danger); }
.rem-lock { border-style: dashed; }
.rem-card .field input { width: 100%; }
.field input[type="date"], .field input[type="time"] {
  appearance: none; border: 1px solid var(--line); background: var(--bg-wash); color: var(--ink);
  border-radius: 0.85rem; padding: 0.8rem 0.9rem; font: inherit;
}

/* --- Minutnik / stoper / pomodoro --- */
.tools-tabs { margin-bottom: 0.8rem; }
.tools-card { padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; }
.tools-big {
  margin: 0.4rem 0; text-align: center; font-size: clamp(3rem, 18vw, 4.6rem); font-weight: 800;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--title);
}
.tools-done { color: var(--pink); font-size: clamp(2.2rem, 12vw, 3.2rem); }
.tools-phase { margin: 0; text-align: center; font-weight: 800; color: var(--ink-muted); }
.tools-presets { justify-content: center; }
.tools-laps { margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; }
.tools-laps li { display: flex; justify-content: space-between; padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tools-pomo-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tools-pomo-col { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; min-width: 0; }
.tools-pomo-col > span { text-align: center; font-size: 0.75rem; color: var(--ink-muted); font-weight: 700; }
.tools-wheel { margin: 0.2rem 0; }
.tools-wheel .wheel-item { font-size: 1.35rem; }
.tools-wheel .wheel-item.is-center { font-size: 2.2rem; }

/* --- Kółko liczb: przewijanie w górę / w dół, magnes na wielokrotnościach 5 (js/wheel.js) --- */
.wheel { position: relative; height: calc(var(--rows) * 40px); -webkit-user-select: none; user-select: none; }
.wheel-lens {
  position: absolute; left: 0; right: 0; top: 50%; height: 40px; transform: translateY(-50%);
  border-radius: 0.8rem; background: var(--blue-wash); pointer-events: none;
}
.wheel-unit {
  position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
  font-size: 0.8rem; font-weight: 700; color: var(--ink-muted);
}
.wheel-scroll {
  position: relative; z-index: 1; height: 100%; overflow-y: scroll; overscroll-behavior: contain;
  scrollbar-width: none; touch-action: pan-y; border-radius: 0.8rem;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.wheel-scroll::-webkit-scrollbar { display: none; }
.wheel-scroll:focus-visible { outline: 2px solid var(--title); outline-offset: 2px; }
.wheel-item {
  height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 1.1rem; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.wheel-item.five { font-weight: 800; color: var(--ink); }
.wheel-item.is-center { font-size: 1.5rem; font-weight: 800; color: var(--title); }
.wheel.is-disabled { opacity: 0.5; }
.wheel.is-disabled .wheel-scroll { overflow: hidden; pointer-events: none; }

/* --- Liczba przyciskami: cel miesiąca (−5 −3 −1 [12] +1 +3 +5) --- */
.stepper {
  display: grid; align-items: center; gap: 0.3rem; margin-top: 0.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(3rem, 1.3fr) repeat(3, minmax(0, 1fr));
}
.stepper button {
  padding: 0.65rem 0; border-radius: 0.8rem; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.stepper button[data-step^="-"] { color: var(--ink-muted); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper button:active:not(:disabled) { transform: scale(0.94); }
.stepper output {
  text-align: center; line-height: 1; font-size: 2rem; font-weight: 800;
  color: var(--title); font-variant-numeric: tabular-nums;
}
.legend-hint { font-weight: 500; color: var(--ink-muted); }

/* --- Zaproszenia (panel admina) --- */
.adm-inv-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.adm-inv-form input {
  font: inherit; padding: 0.65rem 0.8rem; border-radius: 0.8rem;
  border: 1px solid var(--line); background: var(--bg-wash); color: var(--ink);
}
.adm-inv-form .adm-tools select { flex: 1; max-width: none; }
.adm-link { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.adm-link code {
  display: block; padding: 0.6rem 0.75rem; border-radius: 0.7rem; background: var(--bg-wash);
  border: 1px dashed var(--pink-soft); font-size: 0.82rem; overflow-wrap: anywhere;
}
.adm-sub { margin: 0.4rem 0 0.3rem; font-size: 0.9rem; }
.adm-feed-list .btn-text { padding: 0; font-size: 0.72rem; color: var(--title); }

/* --- Postęp | Historia + „Zamelduj” w nagłówku --- */
.sub-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.sub-seg { flex: 1; min-width: 0; }
.sub-seg button[aria-pressed="true"] { color: var(--ink); }
.sub-log { flex: none; padding: 0.6rem 0.85rem; font-size: 0.82rem; white-space: nowrap; }

/* --- Okno z dołu: Zamelduj --- */
.sheet:not(.hidden) .sheet-card { animation: sheetUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sheet:not(.hidden) .sheet-backdrop { animation: dpFade 0.2s ease-out both; }
@keyframes sheetUp { from { transform: translateY(40%); opacity: 0.4; } to { transform: none; opacity: 1; } }
.sheet-tall .sheet-card { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding-top: 0.6rem; }
.sheet-handle { display: block; width: 2.6rem; height: 0.3rem; border-radius: 1rem; background: var(--line); margin: 0 auto 0.6rem; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.sheet-head .sheet-title { margin: 0; }
.sheet-x {
  appearance: none; border: 0; background: var(--bg-wash); color: var(--ink-muted);
  width: 2rem; height: 2rem; border-radius: 50%; font: inherit; font-weight: 800; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .sheet:not(.hidden) .sheet-card, .sheet:not(.hidden) .sheet-backdrop { animation: none; }
}

/* --- Krótki komunikat nad paskiem --- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 0.8rem); transform: translateX(-50%);
  z-index: 140; margin: 0; max-width: min(92vw, 420px);
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--ink); color: var(--surface); font-weight: 700; font-size: 0.9rem; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  animation: fadeInUp 0.25s ease-out both;
}

/* Zamelduj w oknie: zwięźle — samopoczucie i widoczność jako „tabletki”, „Zapisz” zawsze widoczne */
#sheet-log .form { gap: 0.8rem; }
#sheet-log fieldset.field { border: 0; padding: 0; }
#sheet-log .field legend { padding: 0; margin-bottom: 0.45rem; }
#sheet-log .mood-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
#sheet-log .mood-grid label,
#sheet-log .vis-field .radio {
  position: relative; display: inline-flex; align-items: center; margin: 0;
  padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
#sheet-log .mood-grid input,
#sheet-log .vis-field input { position: absolute; opacity: 0; pointer-events: none; }
#sheet-log .mood-grid label:has(input:checked),
#sheet-log .vis-field .radio:has(input:checked) { border-color: var(--pink); background: var(--pink-wash); }
#sheet-log label:has(input:focus-visible) { outline: 2px solid var(--title); outline-offset: 2px; }
#sheet-log .vis-field { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
#sheet-log .form > button[type="submit"] {
  position: sticky; bottom: 0; z-index: 1;
  box-shadow: 0 -14px 16px -4px var(--surface);
}

/* --- Analiza AI: ostatni wynik + okno --- */
.ai-last {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.75rem 0.9rem; border: 1px dashed var(--line); border-radius: 0.8rem;
  background: var(--bg-wash); color: var(--ink); font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer;
}
.ai-last b { color: var(--title); white-space: nowrap; }
.ai-meta { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 700; color: var(--ink-muted); }

/* --- Robot TKZ (js/aibot.js): wyskakuje nad paskiem zakładek. Wizjer = ekran LED z twarzą (klatki mimiki w aibot.js → FACES) --- */
.aibot {
  position: fixed; right: 10px; bottom: calc(var(--tabbar-h) + 10px); z-index: 60;
  display: flex; align-items: flex-end; gap: 0.35rem; pointer-events: none;
}
.aibot > * { pointer-events: auto; }
.aibot-body {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  width: 86px; height: 89px; filter: drop-shadow(0 10px 14px rgba(94, 169, 230, 0.4));
  transform-origin: 50% 100%;
}
.bot-svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; transition: transform 0.4s ease; }
.bot-head { fill: url(#botHelmet); stroke: #4f97d6; stroke-width: 1.2; }
.bot-shine { fill: #fff; opacity: 0.55; }
.bot-ear { fill: url(#botEar); stroke: #4f97d6; stroke-width: 1.2; }
.bot-ear-in { fill: #1b2433; }
.bot-arm rect { fill: #8cc8f5; stroke: #4f97d6; stroke-width: 1; }
.bot-arm { transform-box: fill-box; }
.bot-arm-l { transform-origin: right center; }
.bot-arm-r { transform-origin: left center; }
.bot-ant-stem { stroke: #8cc8f5; stroke-width: 3.5; stroke-linecap: round; }
.bot-ant { fill: #c9f1ff; }
.bot-cheek { fill: #ff9fd6; opacity: 0.7; }
/* Ekran-twarz: cały wizjer to piksele LED, klatki mimiki w .bot-face (widoczna jedna naraz) */
.bot-visor { fill: url(#botVisor); stroke: #2c4a6b; stroke-width: 1.5; }
.bot-visor-glare { fill: #fff; opacity: 0.08; }
.bot-face { visibility: hidden; filter: drop-shadow(0 0 1.5px currentColor); }
.bot-screen .px-a { fill: currentColor; }

.aibot-bubble {
  position: relative; max-width: min(62vw, 240px); margin-bottom: 52px;
  padding: 0.65rem 0.85rem; border-radius: 1rem 1rem 0.3rem 1rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); font-size: 0.86rem; font-weight: 600; line-height: 1.35; cursor: pointer;
  animation: bubbleIn 0.35s 0.35s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
.aibot-bubble small { display: block; margin-top: 0.25rem; font-size: 0.74rem; font-weight: 500; color: var(--ink-muted); }
.aibot-bubble:empty { display: none; }
.aibot[data-phase="done"] .aibot-bubble { background: var(--pink); border-color: var(--pink); color: #1a1a1a; }
.aibot-x {
  position: absolute; top: -10px; right: -2px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted);
  font-size: 0.7rem; font-weight: 800; cursor: pointer; line-height: 1;
}
.dots { display: inline-flex; gap: 3px; margin-left: 2px; vertical-align: middle; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--title); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }

/* 📊 ana (domyślnie): powściągliwy — lekko się kołysze, raz kiwa głową, krótko macha */
.aibot[data-phase="thinking"] .bot-svg { animation: calmBob 2.6s ease-in-out infinite; }
.aibot[data-phase="thinking"] .bot-ant { animation: antGlow 0.9s ease-in-out infinite alternate; }
.aibot[data-phase="done"] .bot-svg { animation: nodHop 1.3s ease-in-out 2; }
.aibot[data-phase="done"] .bot-arm-r { animation: wave 0.5s ease-in-out 4 alternate; }
.aibot[data-phase="error"] .bot-svg { transform: translateY(2px) rotate(-3deg); }

/* --- Skórki robota = styl analizy (data-skin): ana — analityk w krawacie, prz — pluszowy kotek, kop — różowy diabełek --- */
.bot-cat, .bot-demon { display: none; }
.aibot[data-skin="prz"] .bot-cat, .aibot[data-skin="kop"] .bot-demon { display: inline; }
.aibot[data-skin="prz"] :is(.bot-ant, .bot-ant-stem, .bot-cheek),
.aibot[data-skin="kop"] :is(.bot-ant, .bot-ant-stem, .bot-cheek) { display: none; }

/* 🤗 prz — pluszowy kotek: kakaowy ekran, miękkie uszka, serduszko; łagodnie się kołysze i „przytula” */
.aibot[data-skin="prz"] .aibot-body { filter: drop-shadow(0 10px 14px rgba(255, 150, 130, 0.38)); }
.aibot[data-skin="prz"] .bot-head { fill: url(#botHelmetCatSoft); stroke: #eaa07c; stroke-width: 1.4; }
.aibot[data-skin="prz"] .bot-ear { fill: #ffdcc4; stroke: #eaa07c; }
.aibot[data-skin="prz"] .bot-ear-in { fill: #ffb0cc; }
.aibot[data-skin="prz"] .bot-arm rect { fill: #ffd2b3; stroke: #eaa07c; }
.aibot[data-skin="prz"] .bot-visor { fill: url(#botVisorCocoa); stroke: #d08a6b; }
.bot-cat-ear { fill: #ffd9bf; stroke: #eaa07c; stroke-width: 1.3; stroke-linejoin: round; }
.bot-cat-ear-in { fill: #ffb3cf; }
.bot-whisker { stroke: #d08a6b; stroke-width: 1.5; stroke-linecap: round; opacity: 0.8; }
.bot-heart { fill: #ff6ac4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bot-ear-l { transform-box: view-box; transform-origin: 40px 40px; transition: transform 0.3s; }
.bot-ear-r { transform-box: view-box; transform-origin: 80px 40px; transition: transform 0.3s; }
.aibot[data-skin="prz"][data-phase="thinking"] .bot-svg { animation: rock 2.8s ease-in-out infinite alternate; }
.aibot[data-skin="prz"][data-phase="thinking"] .bot-heart { animation: heartBeat 1.2s ease-in-out infinite; opacity: 0.85; }
.aibot[data-skin="prz"][data-phase="thinking"] .bot-ear-r { animation: earTwitch 3s ease-in-out infinite; }
.aibot[data-skin="prz"][data-phase="done"] .bot-svg { animation: squishHop 1.2s ease-in-out 3; }
.aibot[data-skin="prz"][data-phase="done"] .bot-heart { animation: heartUp 1.6s ease-out infinite; }
.aibot[data-skin="prz"][data-phase="done"] .bot-arm-l { animation: hugL 0.6s ease-in-out 6 alternate; }
.aibot[data-skin="prz"][data-phase="done"] .bot-arm-r { animation: hugR 0.6s ease-in-out 6 alternate; }
.aibot[data-skin="prz"][data-phase="error"] .bot-svg { transform: rotate(-4deg); }
.aibot[data-skin="prz"][data-phase="error"] .bot-ear-l { transform: rotate(-16deg); }
.aibot[data-skin="prz"][data-phase="error"] .bot-ear-r { transform: rotate(16deg); }

/* 🔥 kop — różowy diabełek: różki, skrzydełka, ogonek; chytrze podryguje */
.aibot[data-skin="kop"] .aibot-body { filter: drop-shadow(0 10px 14px rgba(255, 106, 196, 0.42)); }
.aibot[data-skin="kop"] .bot-head { fill: url(#botHelmetImp); stroke: #8a1f5c; stroke-width: 1.4; }
.aibot[data-skin="kop"] .bot-ear { fill: #ff9ad6; stroke: #8a1f5c; }
.aibot[data-skin="kop"] .bot-ear-in { fill: #5c1647; }
.aibot[data-skin="kop"] .bot-arm rect { fill: #ff8acb; stroke: #8a1f5c; }
.aibot[data-skin="kop"] .bot-visor { stroke: #d2ed68; }
.bot-horn { fill: #5c1647; }
.bot-wing { fill: #7a2466; stroke: #5c1647; stroke-width: 1; stroke-linejoin: round; transition: transform 0.4s; }
.bot-wing-l { transform-box: view-box; transform-origin: 26px 60px; }
.bot-wing-r { transform-box: view-box; transform-origin: 94px 60px; }
.bot-tail { fill: none; stroke: #5c1647; stroke-width: 3.5; stroke-linecap: round; }
.bot-tail-tip { fill: #5c1647; }
.bot-tail-g { transform-box: view-box; transform-origin: 88px 103px; }
.aibot[data-skin="kop"][data-phase="thinking"] .bot-svg { animation: impWiggle 1.3s ease-in-out infinite; }
.aibot[data-skin="kop"][data-phase="thinking"] .bot-wing-l { animation: flutterL 0.32s ease-in-out infinite alternate; }
.aibot[data-skin="kop"][data-phase="thinking"] .bot-wing-r { animation: flutterR 0.32s ease-in-out infinite alternate; }
.aibot[data-skin="kop"][data-phase="thinking"] .bot-tail-g { animation: sway 0.65s ease-in-out infinite alternate; }
.aibot[data-skin="kop"][data-phase="done"] .bot-svg { animation: impHop 1s ease-in-out 3; }
.aibot[data-skin="kop"][data-phase="done"] .bot-wing-l { animation: flutterL 0.2s ease-in-out 14 alternate; }
.aibot[data-skin="kop"][data-phase="done"] .bot-wing-r { animation: flutterR 0.2s ease-in-out 14 alternate; }
.aibot[data-skin="kop"][data-phase="error"] .bot-svg { transform: translateY(2px); }
.aibot[data-skin="kop"][data-phase="error"] .bot-wing-l { transform: rotate(-24deg); }
.aibot[data-skin="kop"][data-phase="error"] .bot-wing-r { transform: rotate(24deg); }

/* 📊 Strój analityka: kołnierzyk + krawat (tylko ana) */
.bot-suit { display: none; }
.aibot[data-skin="ana"] .bot-suit { display: inline; }
.bot-collar { fill: #fff; stroke: #9cc3e6; stroke-width: 1; stroke-linejoin: round; }
.bot-tie { fill: #ff6ac4; stroke: #c43d8f; stroke-width: 0.9; stroke-linejoin: round; }
.bot-tie-stripe { fill: none; stroke: #ffc2e6; stroke-width: 1.1; stroke-linecap: round; }
.bot-tie-g { transform-box: view-box; transform-origin: 60px 109px; }
.aibot[data-skin="ana"][data-phase="thinking"] .bot-tie-g { animation: tieSway 2.6s ease-in-out infinite alternate; }
.aibot[data-skin="ana"][data-phase="done"] .bot-tie-g { animation: tieSwing 0.5s ease-in-out 4 alternate; }
@keyframes tieSway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes tieSwing { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

/* Pojawianie i znikanie: animuje się .aibot-body, efekty w .aibot-fx nad nim.
   📊 ana — wynurza się z pluskiem i nurkuje; 🤗 prz — wyskakuje w chmurce serduszek i znika w serduszkach;
   🔥 kop — wyskakuje z ognia, znika w płomieniu z dymkiem. JS: hideTimer 650 ms, żeby efekt zdążył się odegrać. */
.aibot-body { animation: anaIn 0.6s cubic-bezier(0.34, 1.45, 0.5, 1) both; }
.aibot.leaving .aibot-body { animation: anaOut 0.45s ease-in both; }
.aibot[data-skin="prz"] .aibot-body { animation: przIn 0.65s ease-out both; }
.aibot[data-skin="prz"].leaving .aibot-body { animation: przOut 0.45s ease-in both; }
.aibot[data-skin="kop"] .aibot-body { animation: kopIn 0.55s 0.18s cubic-bezier(0.34, 1.45, 0.5, 1) both; }
.aibot[data-skin="kop"].leaving .aibot-body { animation: kopOut 0.4s 0.1s ease-in both; }
.aibot.leaving .aibot-bubble { animation: bubbleOut 0.2s ease-in both; }
.aibot.leaving .aibot-x { display: none; }
.aibot-fx { position: absolute; right: 0; bottom: 0; width: 86px; height: 89px; pointer-events: none; z-index: 1; }
.aibot.compact .aibot-fx { width: 58px; height: 60px; }
.aibot-fx svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx { display: none; }
.aibot[data-skin="ana"]:not(.leaving) .fx-ana-in, .aibot[data-skin="ana"].leaving .fx-ana-out,
.aibot[data-skin="prz"]:not(.leaving) .fx-prz-in, .aibot[data-skin="prz"].leaving .fx-prz-out,
.aibot[data-skin="kop"]:not(.leaving) .fx-kop-in, .aibot[data-skin="kop"].leaving .fx-kop-out { display: inline; }
.fx * { opacity: 0; transform-box: fill-box; transform-origin: center; } /* bez animacji (reduced-motion) efektów nie widać */
.fx-drop { animation: fxDrop 0.75s ease-out both; }
.fx-ring { animation: fxRing 0.7s ease-out both; }
.fx-heart { animation: fxBurst 0.9s ease-out both; }
.fx-flame { transform-origin: 50% 100%; animation: fxFlame 0.75s ease-out both; }
.fx-spark { animation: fxSpark 0.8s ease-out both; }
.fx-smoke { animation: fxSmoke 0.75s ease-out both; }
@keyframes anaIn { from { transform: translateY(70%) scale(0.6); opacity: 0; } 40% { opacity: 1; } to { transform: none; } }
@keyframes anaOut { 30% { transform: translateY(-8%) scale(1.04); opacity: 1; } to { transform: translateY(70%) scale(0.55); opacity: 0; } }
@keyframes przIn { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.14); opacity: 1; } 72% { transform: scale(0.94); } 88% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes przOut { 30% { transform: scale(1.08) rotate(-4deg); } to { transform: scale(0); opacity: 0; } }
@keyframes kopIn { 0% { transform: translateY(35%) scale(0.3); opacity: 0; } 55% { transform: translateY(-7%) scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes kopOut { 25% { transform: scale(1.06) rotate(6deg); } to { transform: translateY(25%) scale(0.15) rotate(-20deg); opacity: 0; } }
@keyframes bubbleOut { to { transform: scale(0.7) translateY(8px); opacity: 0; } }
@keyframes fxDrop { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; } 100% { transform: translate(calc(var(--dx) * 1.35), calc(var(--dy) + 26px)) scale(0.5); opacity: 0; } }
@keyframes fxRing { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.6, 1.3); opacity: 0; } }
@keyframes fxBurst { 0% { transform: translate(0, 0) scale(0.2); opacity: 0; } 20%, 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--r, 0deg)); opacity: 0; } }
@keyframes fxFlame { 0% { transform: scale(0.6, 0); opacity: 0; } 25% { transform: scale(1, 1.15); opacity: 1; } 60% { transform: scale(1, 0.9) skewX(-4deg); opacity: 1; } 100% { transform: scale(0.8, 0.1); opacity: 0; } }
@keyframes fxSpark { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
@keyframes fxSmoke { 0% { transform: scale(0.3); opacity: 0; } 30% { opacity: 0.7; } 100% { transform: translate(var(--dx, 0px), var(--dy, -20px)) scale(1.6); opacity: 0; } }
@keyframes bubbleIn { from { transform: scale(0.6) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes calmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes nodHop { 0%, 100% { transform: none; } 25% { transform: translateY(-6px); } 50% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } }
@keyframes rock { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes squishHop { 0%, 100% { transform: none; } 18% { transform: scale(1.06, 0.93); } 45% { transform: translateY(-12px) scale(0.97, 1.04); } 70% { transform: scale(1.04, 0.96); } 85% { transform: none; } }
@keyframes impWiggle { 0%, 50%, 100% { transform: none; } 25% { transform: translateX(-1.5px) rotate(-5deg); } 75% { transform: translateX(1.5px) rotate(5deg); } }
@keyframes impHop { 0%, 100% { transform: none; } 30% { transform: translateY(-14px) rotate(-8deg); } 55% { transform: none; } 70% { transform: translateY(-5px) rotate(4deg); } }
@keyframes antGlow { from { fill: #c9f1ff; filter: none; } to { fill: #ffffff; filter: drop-shadow(0 0 6px #7fe6ff); } }
@keyframes wave { from { transform: rotate(0deg); } to { transform: rotate(-40deg); } }
@keyframes hugL { from { transform: rotate(0deg); } to { transform: rotate(30deg); } }
@keyframes hugR { from { transform: rotate(0deg); } to { transform: rotate(-30deg); } }
@keyframes heartBeat { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.05); } }
@keyframes heartUp { from { transform: translateY(4px) scale(0.7); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-14px) scale(1.05); opacity: 0; } }
@keyframes earTwitch { 0%, 70%, 100% { transform: none; } 74% { transform: rotate(12deg); } 78% { transform: none; } 82% { transform: rotate(8deg); } 86% { transform: none; } }
@keyframes flutterL { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
@keyframes flutterR { from { transform: rotate(9deg); } to { transform: rotate(-7deg); } }
@keyframes sway { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .aibot, .aibot *, .aibot-bubble { animation: none !important; }
}

/* Kolory pikseli ekranu (# = currentColor, o różowy, w biały, f ogień, y żółty, b łza) */
.aibot[data-skin="ana"] .bot-screen { color: #ff7ad1; }
.aibot[data-skin="ana"] .px-o { fill: #ffb3e3; }
.aibot[data-skin="ana"] .px-w { fill: #ffffff; }
.aibot[data-skin="ana"] .px-f { fill: #ff8a3d; }
.aibot[data-skin="ana"] .px-y { fill: #ffe66d; }
.aibot[data-skin="ana"] .px-b { fill: #8fd3ff; }
.aibot[data-skin="prz"] .bot-screen { color: #ffa8d2; }
.aibot[data-skin="prz"] .px-o { fill: #ff6f9e; }
.aibot[data-skin="prz"] .px-w { fill: #ffffff; }
.aibot[data-skin="prz"] .px-f { fill: #ff8a3d; }
.aibot[data-skin="prz"] .px-y { fill: #ffe66d; }
.aibot[data-skin="prz"] .px-b { fill: #8fd3ff; }
.aibot[data-skin="kop"] .bot-screen { color: #d2ed68; }
.aibot[data-skin="kop"] .px-o { fill: #ff3e9a; }
.aibot[data-skin="kop"] .px-w { fill: #ffffff; }
.aibot[data-skin="kop"] .px-f { fill: #ff7a3d; }
.aibot[data-skin="kop"] .px-y { fill: #ffe66d; }
.aibot[data-skin="kop"] .px-b { fill: #8fd3ff; }
/* Klatki mimiki: każda widoczna w swoim odcinku cyklu fazy (wygenerowane z FACES w design/robot-faces.html).
   Bez animacji (reduced-motion) widać pierwszą klatkę fazy. */
@keyframes bf-ana-think-0 { 0% { visibility: visible; } 23.41%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="thinking"] .bf-ana-think-0 { animation: bf-ana-think-0 5.98s steps(1, end) infinite; }
@keyframes bf-ana-think-1 { 0% { visibility: hidden; } 23.41% { visibility: visible; } 38.46%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="thinking"] .bf-ana-think-1 { animation: bf-ana-think-1 5.98s steps(1, end) infinite; }
@keyframes bf-ana-think-2 { 0% { visibility: hidden; } 38.46% { visibility: visible; } 53.51%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="thinking"] .bf-ana-think-2 { animation: bf-ana-think-2 5.98s steps(1, end) infinite; }
@keyframes bf-ana-think-3 { 0% { visibility: hidden; } 53.51% { visibility: visible; } 61.87%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="thinking"] .bf-ana-think-3 { animation: bf-ana-think-3 5.98s steps(1, end) infinite; }
@keyframes bf-ana-think-4 { 0% { visibility: hidden; } 61.87% { visibility: visible; } 64.21%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="thinking"] .bf-ana-think-4 { animation: bf-ana-think-4 5.98s steps(1, end) infinite; }
@keyframes bf-ana-think-5 { 0% { visibility: hidden; } 64.21% { visibility: visible; } 87.63%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="thinking"] .bf-ana-think-5 { animation: bf-ana-think-5 5.98s steps(1, end) infinite; }
@keyframes bf-ana-think-6 { 0% { visibility: hidden; } 87.63% { visibility: visible; } 97.66%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="thinking"] .bf-ana-think-6 { animation: bf-ana-think-6 5.98s steps(1, end) infinite; }
@keyframes bf-ana-think-7 { 0% { visibility: hidden; } 97.66% { visibility: visible; } 100% { visibility: visible; } }
.aibot[data-skin="ana"][data-phase="thinking"] .bf-ana-think-7 { animation: bf-ana-think-7 5.98s steps(1, end) infinite; }
.aibot[data-skin="ana"][data-phase="thinking"] .bf-ana-think-0 { visibility: visible; }
@keyframes bf-ana-done-0 { 0% { visibility: visible; } 54.42%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="done"] .bf-ana-done-0 { animation: bf-ana-done-0 2.94s steps(1, end) infinite; }
@keyframes bf-ana-done-1 { 0% { visibility: hidden; } 54.42% { visibility: visible; } 95.24%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="done"] .bf-ana-done-1 { animation: bf-ana-done-1 2.94s steps(1, end) infinite; }
@keyframes bf-ana-done-2 { 0% { visibility: hidden; } 95.24% { visibility: visible; } 100% { visibility: visible; } }
.aibot[data-skin="ana"][data-phase="done"] .bf-ana-done-2 { animation: bf-ana-done-2 2.94s steps(1, end) infinite; }
.aibot[data-skin="ana"][data-phase="done"] .bf-ana-done-0 { visibility: visible; }
@keyframes bf-ana-error-0 { 0% { visibility: visible; } 94.49%, 100% { visibility: hidden; } }
.aibot[data-skin="ana"][data-phase="error"] .bf-ana-error-0 { animation: bf-ana-error-0 2.54s steps(1, end) infinite; }
@keyframes bf-ana-error-1 { 0% { visibility: hidden; } 94.49% { visibility: visible; } 100% { visibility: visible; } }
.aibot[data-skin="ana"][data-phase="error"] .bf-ana-error-1 { animation: bf-ana-error-1 2.54s steps(1, end) infinite; }
.aibot[data-skin="ana"][data-phase="error"] .bf-ana-error-0 { visibility: visible; }
@keyframes bf-prz-think-0 { 0% { visibility: visible; } 24.79%, 100% { visibility: hidden; } }
.aibot[data-skin="prz"][data-phase="thinking"] .bf-prz-think-0 { animation: bf-prz-think-0 6.05s steps(1, end) infinite; }
@keyframes bf-prz-think-1 { 0% { visibility: hidden; } 24.79% { visibility: visible; } 42.98%, 100% { visibility: hidden; } }
.aibot[data-skin="prz"][data-phase="thinking"] .bf-prz-think-1 { animation: bf-prz-think-1 6.05s steps(1, end) infinite; }
@keyframes bf-prz-think-2 { 0% { visibility: hidden; } 42.98% { visibility: visible; } 62.81%, 100% { visibility: hidden; } }
.aibot[data-skin="prz"][data-phase="thinking"] .bf-prz-think-2 { animation: bf-prz-think-2 6.05s steps(1, end) infinite; }
@keyframes bf-prz-think-3 { 0% { visibility: hidden; } 62.81% { visibility: visible; } 70.25%, 100% { visibility: hidden; } }
.aibot[data-skin="prz"][data-phase="thinking"] .bf-prz-think-3 { animation: bf-prz-think-3 6.05s steps(1, end) infinite; }
@keyframes bf-prz-think-4 { 0% { visibility: hidden; } 70.25% { visibility: visible; } 86.78%, 100% { visibility: hidden; } }
.aibot[data-skin="prz"][data-phase="thinking"] .bf-prz-think-4 { animation: bf-prz-think-4 6.05s steps(1, end) infinite; }
@keyframes bf-prz-think-5 { 0% { visibility: hidden; } 86.78% { visibility: visible; } 100% { visibility: visible; } }
.aibot[data-skin="prz"][data-phase="thinking"] .bf-prz-think-5 { animation: bf-prz-think-5 6.05s steps(1, end) infinite; }
.aibot[data-skin="prz"][data-phase="thinking"] .bf-prz-think-0 { visibility: visible; }
@keyframes bf-prz-done-0 { 0% { visibility: visible; } 32.26%, 100% { visibility: hidden; } }
.aibot[data-skin="prz"][data-phase="done"] .bf-prz-done-0 { animation: bf-prz-done-0 3.10s steps(1, end) infinite; }
@keyframes bf-prz-done-1 { 0% { visibility: hidden; } 32.26% { visibility: visible; } 70.97%, 100% { visibility: hidden; } }
.aibot[data-skin="prz"][data-phase="done"] .bf-prz-done-1 { animation: bf-prz-done-1 3.10s steps(1, end) infinite; }
@keyframes bf-prz-done-2 { 0% { visibility: hidden; } 70.97% { visibility: visible; } 100% { visibility: visible; } }
.aibot[data-skin="prz"][data-phase="done"] .bf-prz-done-2 { animation: bf-prz-done-2 3.10s steps(1, end) infinite; }
.aibot[data-skin="prz"][data-phase="done"] .bf-prz-done-0 { visibility: visible; }
@keyframes bf-prz-error-0 { 0% { visibility: visible; } 88.00%, 100% { visibility: hidden; } }
.aibot[data-skin="prz"][data-phase="error"] .bf-prz-error-0 { animation: bf-prz-error-0 2.50s steps(1, end) infinite; }
@keyframes bf-prz-error-1 { 0% { visibility: hidden; } 88.00% { visibility: visible; } 100% { visibility: visible; } }
.aibot[data-skin="prz"][data-phase="error"] .bf-prz-error-1 { animation: bf-prz-error-1 2.50s steps(1, end) infinite; }
.aibot[data-skin="prz"][data-phase="error"] .bf-prz-error-0 { visibility: visible; }
@keyframes bf-kop-think-0 { 0% { visibility: visible; } 22.64%, 100% { visibility: hidden; } }
.aibot[data-skin="kop"][data-phase="thinking"] .bf-kop-think-0 { animation: bf-kop-think-0 5.30s steps(1, end) infinite; }
@keyframes bf-kop-think-1 { 0% { visibility: hidden; } 22.64% { visibility: visible; } 41.51%, 100% { visibility: hidden; } }
.aibot[data-skin="kop"][data-phase="thinking"] .bf-kop-think-1 { animation: bf-kop-think-1 5.30s steps(1, end) infinite; }
@keyframes bf-kop-think-2 { 0% { visibility: hidden; } 41.51% { visibility: visible; } 58.49%, 100% { visibility: hidden; } }
.aibot[data-skin="kop"][data-phase="thinking"] .bf-kop-think-2 { animation: bf-kop-think-2 5.30s steps(1, end) infinite; }
@keyframes bf-kop-think-3 { 0% { visibility: hidden; } 58.49% { visibility: visible; } 73.58%, 100% { visibility: hidden; } }
.aibot[data-skin="kop"][data-phase="thinking"] .bf-kop-think-3 { animation: bf-kop-think-3 5.30s steps(1, end) infinite; }
@keyframes bf-kop-think-4 { 0% { visibility: hidden; } 73.58% { visibility: visible; } 84.91%, 100% { visibility: hidden; } }
.aibot[data-skin="kop"][data-phase="thinking"] .bf-kop-think-4 { animation: bf-kop-think-4 5.30s steps(1, end) infinite; }
@keyframes bf-kop-think-5 { 0% { visibility: hidden; } 84.91% { visibility: visible; } 100% { visibility: visible; } }
.aibot[data-skin="kop"][data-phase="thinking"] .bf-kop-think-5 { animation: bf-kop-think-5 5.30s steps(1, end) infinite; }
.aibot[data-skin="kop"][data-phase="thinking"] .bf-kop-think-0 { visibility: visible; }
@keyframes bf-kop-done-0 { 0% { visibility: visible; } 38.46%, 100% { visibility: hidden; } }
.aibot[data-skin="kop"][data-phase="done"] .bf-kop-done-0 { animation: bf-kop-done-0 2.60s steps(1, end) infinite; }
@keyframes bf-kop-done-1 { 0% { visibility: hidden; } 38.46% { visibility: visible; } 69.23%, 100% { visibility: hidden; } }
.aibot[data-skin="kop"][data-phase="done"] .bf-kop-done-1 { animation: bf-kop-done-1 2.60s steps(1, end) infinite; }
@keyframes bf-kop-done-2 { 0% { visibility: hidden; } 69.23% { visibility: visible; } 100% { visibility: visible; } }
.aibot[data-skin="kop"][data-phase="done"] .bf-kop-done-2 { animation: bf-kop-done-2 2.60s steps(1, end) infinite; }
.aibot[data-skin="kop"][data-phase="done"] .bf-kop-done-0 { visibility: visible; }
@keyframes bf-kop-error-0 { 0% { visibility: visible; } 61.54%, 100% { visibility: hidden; } }
.aibot[data-skin="kop"][data-phase="error"] .bf-kop-error-0 { animation: bf-kop-error-0 2.60s steps(1, end) infinite; }
@keyframes bf-kop-error-1 { 0% { visibility: hidden; } 61.54% { visibility: visible; } 100% { visibility: visible; } }
.aibot[data-skin="kop"][data-phase="error"] .bf-kop-error-1 { animation: bf-kop-error-1 2.60s steps(1, end) infinite; }
.aibot[data-skin="kop"][data-phase="error"] .bf-kop-error-0 { visibility: visible; }

/* Ustawienia: wybór języka pod motywem */
.set-lang { margin-top: 0.8rem; }

/* --- Robot TKZ: czat pomocy (js/helpbot.js) --- */
.top-icon--bot svg { width: 24px; height: 24px; }
#sheet-help .sheet-card, #sheet-bingo-ai .sheet-card { display: flex; flex-direction: column; height: 86dvh; overflow: hidden; }
.help-head-actions { display: flex; align-items: center; gap: 0.6rem; }
.help-head-actions .btn-text { font-size: 0.78rem; }
.help-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.5rem 0 0.7rem; }
.help-row { display: flex; align-items: flex-end; gap: 0.45rem; max-width: 92%; }
.help-ava { width: 28px; height: 28px; flex: none; }
.help-msg { padding: 0.6rem 0.85rem; border-radius: 1rem; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.help-msg.user { align-self: flex-end; max-width: 85%; background: var(--pink); color: #1a1a1a; border-bottom-right-radius: 0.3rem; }
.help-msg.bot { background: var(--bg-wash); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 0.3rem; }
.help-msg.err { color: var(--danger); }
.help-contact {
  display: block; margin-top: 0.55rem; padding: 0.5rem 0.75rem; border-radius: 0.7rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--title); font-weight: 700; text-decoration: none; white-space: normal;
}
.help-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.sheet-guide .sheet-card { height: 92dvh; overflow: hidden; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.sheet-guide .sheet-head { padding: 0 16px; }
.guide-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--bg, #fff); }
.plus-link { display: inline-block; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--title); text-decoration: underline; text-underline-offset: 2px; }
#ai-plus-link { display: block; text-align: center; }
#ai-plus-link.hidden { display: none; }
.help-guide { display: inline-block; margin: 0.6rem 0 0 0.2rem; font-size: 0.85rem; font-weight: 600; color: var(--title); text-decoration: underline; text-underline-offset: 2px; }
.help-form { display: flex; gap: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.help-form input {
  flex: 1; min-width: 0; appearance: none; border: 1px solid var(--line); background: var(--bg-wash); color: var(--ink);
  border-radius: 0.85rem; padding: 0.75rem 0.9rem; font: inherit; font-size: 1rem;
}
.help-send { flex: none; padding: 0.6rem 1rem; }
.help-note { margin: 0.45rem 0 0; font-size: 0.72rem; color: var(--ink-muted); }

/* --- Kalendarz: strzałka „udostępnij” w rogu + mini menu --- */
.cal-art-card { position: relative; }
.cal-share-btn {
  position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--pink); color: #1a1a1a; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.cal-share-btn svg { width: 22px; height: 22px; }
.cal-share-menu {
  position: absolute; right: 10px; bottom: 62px; z-index: 5; min-width: 200px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 1rem;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  animation: fadeInUp 0.18s ease-out both;
}
.cal-share-menu button {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.7rem 0.8rem;
  border: 0; border-radius: 0.7rem; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.cal-share-menu button:hover, .cal-share-menu button:focus-visible { background: var(--bg-wash); }

/* --- Zamelduj „na czat”: gotowy tekst do wklejenia --- */
.log-share { display: flex; flex-direction: column; gap: 0.7rem; }
.log-share-ok { margin: 0; font-weight: 800; color: var(--title); }
.log-share-text {
  white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.8rem 0.9rem; border-radius: 0.85rem;
  background: var(--bg-wash); border: 1px solid var(--line); font-size: 0.92rem; user-select: text;
}

/* --- Analiza AI: 3 style w jednym rzędzie, okres z listy --- */
.ai-styles button { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.5rem 0.2rem; font-size: 0.74rem; line-height: 1.15; }
.ai-styles button[aria-pressed="true"] { color: #1a1a1a; }
.ai-period { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--ink-muted); }
.ai-period select {
  flex: 1; min-width: 0; appearance: none; border: 1px solid var(--line); background: var(--bg-wash); color: var(--ink);
  border-radius: 0.85rem; padding: 0.65rem 0.9rem; font: inherit; font-weight: 600;
}

/* Robot po kilku sekundach „Gotowe!”: mały, bez dymka, z różową kropką — nie zasłania ekranu */
.aibot.compact .aibot-bubble { display: none; }
.aibot.compact .aibot-body { position: relative; width: 58px; height: 60px; transition: width 0.25s ease, height 0.25s ease; }
.aibot.compact .aibot-body::after {
  content: ''; position: absolute; top: 4px; right: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--pink); border: 2px solid var(--surface); animation: dot 1.6s ease-in-out infinite;
}
.aibot.compact .aibot-x { top: -8px; right: -6px; }

.adm-count-badge { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: var(--pink-wash); color: var(--ink); font-size: 0.75rem; }

/* --- W Discordzie (Activity, js/activity.js): logowanie samo przez SDK, bez instalacji aplikacji --- */
.in-discord .login-discord, .in-discord #btn-install { display: none !important; }

/* Bingo z Robotem (premium): przycisk na ekranie wyboru nawyków i okno rozmowy (js/bingo-ai.js) */
.bingo-ai-card {
  display: flex; flex-direction: column; gap: 0.2rem; width: 100%; margin: 0.4rem 0 0.2rem; padding: 0.8rem 0.95rem;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--pink-wash); border: 1.5px solid var(--pink); border-radius: 0.9rem;
}
.bingo-ai-card b { font-weight: 800; }
.bingo-ai-card span { font-size: 0.84rem; line-height: 1.4; color: var(--ink-muted); }
.bingo-ai-card.locked { background: var(--surface); border-color: var(--line); }
.bai-opts { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.2rem 0 0.5rem; border-bottom: 1px solid var(--line); }
.bai-opt { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; color: var(--ink); cursor: pointer; }
.bai-opt input { width: 1.1rem; height: 1.1rem; accent-color: var(--pink); flex: none; }
.bai-prop { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px dashed var(--line); white-space: normal; }
.bai-prop p { margin: 0 0 0.3rem; font-weight: 700; }
.bai-prop ul { margin: 0 0 0.65rem; padding-left: 1.1rem; }
.bai-prop li { margin: 0.12rem 0; }
.bai-own { font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 1rem; background: var(--pink-wash); color: var(--ink); }
.oneoff-field { margin-top: -0.4rem; }
.oneoff-field .mood-custom { margin-top: 0; }
.oneoff-note { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--ink-muted); }
.bai-presets { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.7rem; white-space: normal; }
.bai-preset {
  display: flex; flex-direction: column; gap: 0.15rem; width: 100%; padding: 0.55rem 0.75rem;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--peach); border-radius: 0.8rem;
}
.bai-preset b { font-weight: 800; font-size: 0.92rem; }
.bai-preset span { font-size: 0.8rem; line-height: 1.35; color: var(--ink-muted); }
.bai-preset:disabled { opacity: 0.6; cursor: default; }
.bai-final { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.7rem; white-space: normal; }

/* --- Bingo: ekran wyboru nawyków (design/BINGO-PICK-HANDOFF.md, C3) --- */
:root { --lilac: #c3b1f5; }
/* Grupa na ekranie wyboru: delikatne tło, cienka ramka, kafelek z ikoną, ikony w tle */
.bingo-gcard { --c: var(--line); position: relative; overflow: hidden; border-radius: 18px; padding: 12px 12px 14px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--c) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 55%, var(--surface)); }
:root[data-theme="dark"] .bingo-gcard { background: color-mix(in srgb, var(--c) 9%, var(--surface)); border-color: color-mix(in srgb, var(--c) 45%, var(--surface)); }
.bingo-gcard[data-color="lime"] { --c: var(--lime); }
.bingo-gcard[data-color="peach"] { --c: var(--peach); }
.bingo-gcard[data-color="blue"] { --c: var(--blue); }
.bingo-gcard[data-color="lilac"] { --c: var(--lilac); }
.bingo-ghead { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bingo-gtile { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 70%, var(--surface)); }
.bingo-gtile i, .bingo-gshape { -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.bingo-gtile i { width: 22px; height: 22px; background: var(--ink); opacity: 0.8; }
:root[data-theme="dark"] .bingo-gtile i { background: var(--bg); }
.bingo-gname { font-weight: 800; font-size: 1rem; color: var(--ink); }
.bingo-gcount { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); }
.bingo-gshape { position: absolute; pointer-events: none; background: var(--c); opacity: 0.2; }
:root[data-theme="dark"] .bingo-gshape { opacity: 0.16; }
.bingo-gcard .bingo-chips { position: relative; z-index: 1; margin-bottom: 0; }
/* Wybrany nawyk: jasny róż + ramka + ✓ (pełny róż zostaje dla głównych przycisków) */
.bingo-chip { background: var(--surface); border: 1px solid var(--line); min-height: 44px; }
.bingo-chip[aria-pressed="true"] { background: var(--pink-wash); border: 1.5px solid var(--pink); color: var(--ink); font-weight: 750; }
.bingo-chip[aria-pressed="true"]::before { content: "✓ "; font-weight: 900; }
.bingo-chip.own { border-style: dashed; }
.bingo-chip.is-dim { opacity: 0.45; }
/* Pola TKZ: nie mylą się z wybranym */
.bingo-chip.locked { background: var(--surface); border: 1.5px dashed var(--pink-soft); }
.bingo-chip.locked::after { content: "TKZ"; margin-left: 0.4rem; font-size: 0.7rem; font-weight: 800; padding: 0 0.35rem; border-radius: 6px; background: var(--pink-wash); }

.bingo-own-link { color: var(--title); font-weight: 700; white-space: nowrap; }
/* „Ułóż z Botem”: mała twarz Bota zamiast ✨, bez opisu */
.bingo-ai-card { flex-direction: row; align-items: center; gap: 0.7rem; min-height: 56px; }
.bingo-ai-bot { width: 36px; height: 36px; flex: none; }

/* Własny nawyk: 4 przyciski rodzaju liczby, potem jednostka i ile */
.bingo-own-kinds button { font-size: 0.8rem; padding: 0.55rem 0.2rem; min-height: 44px; }
.bingo-own-units { flex: 0 0 auto; }
.bingo-own-units button { min-width: 3.2rem; min-height: 40px; }
.bingo-add-row input { flex: 1 1 6rem; width: auto; min-width: 0; }

/* Okno nawyku: grupa, pełna nazwa, licznik − 15 min + */
.bh-group { margin: 0 0 0.2rem; font-size: 0.8rem; font-weight: 700; color: var(--ink-muted); }
.bh-name { margin: 0 0 0.4rem; }
.bh-counter { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; }
.bh-step {
  width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 1.4rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.bh-step:disabled { opacity: 0.35; cursor: default; }
.bh-val { min-width: 0; text-align: center; font-size: 1.15rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.bh-full { margin: 0; }

/* „Powtórz planszę” (C5): archiwum i podsumowanie zakończonej planszy */
.bingo-arch-row { display: flex; gap: 0.5rem; align-items: stretch; }
.bingo-arch-row .bingo-arch-item { flex: 1; min-width: 0; }
.bingo-arch-repeat {
  flex: none; width: 48px; border-radius: 0.9rem; border: 1.5px solid var(--line); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
}
.bingo-repeat-ic {
  display: inline-block; width: 22px; height: 22px; background: var(--ink); vertical-align: -5px;
  -webkit-mask: url(/assets/bingo/powtorz.svg) center / contain no-repeat; mask: url(/assets/bingo/powtorz.svg) center / contain no-repeat;
}
.bingo-repeat-btn .bingo-repeat-ic { width: 20px; height: 20px; margin-right: 0.45rem; }

/* --- Cieplejszy wygląd (design/LOOK-HANDOFF.md, D1): pastelowa karta główna, kafelki z ikonami, puste miejsca --- */
.card-hero { --c: var(--pink); position: relative; overflow: hidden; border-radius: 20px; padding: 14px;
  background: color-mix(in srgb, var(--c) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 55%, var(--surface)); }
.card-hero.blue { --c: #9CC0F3; } .card-hero.lilac { --c: var(--lilac); } .card-hero.pink { --c: #FF8BC8; }
:root[data-theme="dark"] .card-hero { background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-color: color-mix(in srgb, var(--c) 40%, var(--surface)); }
.card-hero > :not(.hero-deco) { position: relative; }
.hero-deco { position: absolute; pointer-events: none; background: #fff; opacity: 0.55;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
:root[data-theme="dark"] .hero-deco { background: var(--c); opacity: 0.16; }
.ic-tile { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.75); }
:root[data-theme="dark"] .ic-tile { background: color-mix(in srgb, var(--c) 30%, var(--surface)); }
.ic-tile i { width: 26px; height: 26px; background: #FF3E9A; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.card-hero.blue .ic-tile i { background: #3D74C9; } .card-hero.lilac .ic-tile i { background: #6b4fc9; }
.ic-tile img { width: 32px; height: 32px; }
.empty-card { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; border: 1.5px dashed var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.empty-card i { width: 36px; height: 36px; flex: none; background: var(--title); opacity: 0.55; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.empty-card span { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.4; }
.tkz-word { font-family: "Tkz", var(--font); font-weight: 400; }
.hero-head { display: flex; align-items: center; gap: 10px; }
.hero-head b { display: block; font-size: 1.0625rem; font-weight: 800; color: var(--ink); }
.hero-head small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--ink-muted); }

/* D4. Start: różowa karta meldunku, liczba w pierścieniu krojem Tkz */
.home-tracker.card-hero { padding: 14px; box-shadow: none; }
.home-tracker .ring-fg { stroke: #FF3E9A; }
.home-tracker .ring-bg { stroke: rgba(255, 255, 255, 0.8); }
:root[data-theme="dark"] .home-tracker .ring-bg { stroke: color-mix(in srgb, var(--c) 25%, var(--surface)); }
.home-tracker .ring-label strong { font-family: "Tkz", var(--font); font-weight: 400; font-size: 30px; color: var(--ink); }
.home-tracker .ring-label span { margin-top: 2px; }
.home-tracker-side .ring-caption { font-weight: 700; color: var(--title); }
/* Bingo na Starcie: biała karta, kafelek rodzaju planszy w nagłówku */
.home-bingo.has-board { border-top: 0; padding: 10px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.home-bingo-tile { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: #FFE3F1; }
.home-bingo-tile.blue { background: #DCE8FA; }
:root[data-theme="dark"] .home-bingo-tile { background: var(--pink-wash); }
:root[data-theme="dark"] .home-bingo-tile.blue { background: var(--blue-wash); }
.home-bingo-tile i { width: 20px; height: 20px; background: #FF3E9A; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.home-bingo-tile.blue i { background: #3D74C9; }
.home-bingo-name { font-weight: 800; font-size: 1rem; color: var(--ink); }

/* D5. Analiza AI: liliowa karta z Botem, przycisk z miesiącem z kalendarza */
.ai-card.card-hero { padding: 14px; box-shadow: none; }
.ai-card .ic-tile { background: #fff; }
.ai-all { align-self: center; padding: 0.7rem 0.5rem; margin: -0.5rem 0 -0.3rem; color: var(--title); font-size: 0.875rem; font-weight: 700; }
.ai-all:disabled { opacity: 0.5; cursor: default; }

/* D2. Zakładka Bingo: tytuł krojem Tkz, karty rodzajów z miniaturą planszy */
#bingo-view .bingo-tab-title { font-size: 36px; line-height: 1; margin: 0.2rem 0 0.4rem; color: var(--ink); }
.bingo-tab-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bingo-tab-head .qa-btn { flex: none; }
.bingo-types { display: grid; gap: 12px; margin: 0.6rem 0 0.4rem; }
.bingo-type-body { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.bingo-type-info { flex: 1; min-width: 0; display: grid; gap: 8px; }
.bingo-type-info .bingo-note { margin: 0; font-size: 0.85rem; }
.bingo-type-desc { margin: 10px 0 0; font-size: 0.875rem; color: var(--ink-muted); line-height: 1.4; }
.bingo-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.bingo-pill { font-size: 0.78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.8); color: #1a1a1a; }
.bingo-pill.lime { background: #CCFF00; }
:root[data-theme="dark"] .bingo-pill:not(.lime) { background: color-mix(in srgb, var(--c) 25%, var(--surface)); color: var(--ink); }
.bingo-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 92px; flex: none; }
.bingo-mini i { aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,0.65); display: block; }
.bingo-mini i.on { background: #fff; box-shadow: inset 0 0 0 1.5px #FF3E9A; }
.bingo-mini i.ln { background: #CCFF00; }
:root[data-theme="dark"] .bingo-mini i { background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.bingo-type-card .btn { margin-top: 12px; }

/* D3. „Moje” zawsze jest: biała karta i przycisk „+ Dopisz własny nawyk” (okno nawyku) */
.bingo-gcard.mine { background: var(--surface); border-color: var(--line); }
.bingo-own-add {
  display: block; width: 100%; margin-top: 10px; min-height: 44px; padding: 10px; border-radius: 999px; cursor: pointer;
  border: 1.5px dashed #c8b8f0; background: var(--surface); color: #6b4fc9; font: inherit; font-weight: 800; font-size: 0.875rem;
}
:root[data-theme="dark"] .bingo-own-add { color: #c3b1f5; border-color: #6b5a92; }
.bingo-mine-empty { margin: 0; font-size: 0.85rem; color: var(--ink-muted); }
.bingo-lede .bingo-own-link { border: 0; background: none; padding: 0.4rem 0; font: inherit; cursor: pointer; text-decoration: underline; }
.bh-own-in { width: 100%; box-sizing: border-box; font: inherit; padding: 0.7rem 0.85rem; border-radius: 0.8rem; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
/* E4. Przełącznik: 4 równe zakładki 44 px; strefa pod nim zawsze 96 px — licznik / godzina i podgląd pola */
.bh-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 44px; box-sizing: border-box; }
.bh-kinds button { white-space: nowrap; font-size: 12px; padding: 0 2px; min-height: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bh-zone { height: 96px; display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 12px; align-items: center; }
.bh-zone.solo { grid-template-columns: 1fr; justify-items: center; }
.bh-ctl { display: grid; gap: var(--sheet-gap-in, 8px); min-width: 0; }
.bh-units { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.bh-units button { min-height: 32px; padding: 0 0.4rem; font-size: 12.5px; }
.bh-time { display: block; width: 8.5rem; height: 48px; box-sizing: border-box; font: inherit; font-size: 1.25rem; font-weight: 800; padding: 0 0.8rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.bh-prev { display: grid; gap: 4px; justify-items: center; }
.bh-prev small { font-size: 11px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.bh-cell { width: 64px; height: 64px; box-sizing: border-box; font-size: 10.5px; }
.bh-cell .bingo-dur { font-size: 10px; }

/* ===== Część E (v52): prostsza plansza, „?”, równe okna, Bot TKZ ===== */

/* E1. Główka planszy — ta sama na Starcie i na ekranie planszy */
.board-head { display: flex; align-items: center; gap: 10px; }
.board-head[data-act] { cursor: pointer; }
.board-head-txt { min-width: 0; }
.board-head-txt b { display: block; font-size: 1rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.board-head-txt small { display: block; font-size: 0.75rem; font-weight: 500; color: var(--ink-muted); }
.board-head-txt .home-bingo-switch { margin-bottom: 2px; }
.board-head-go {
  margin-left: auto; width: 44px; height: 44px; margin-block: -6px; margin-right: -8px; flex: none;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--title);
}
.board-pills { margin: 10px 0; }
.board-pills .bingo-pill:not(.lime) { background: #f2f5fa; }
:root[data-theme="dark"] .board-pills .bingo-pill:not(.lime) { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); color: var(--ink); }
.board-pills .bingo-pill.lime { color: #1a1a1a; }
.home-bingo.has-board { padding: 12px 10px 10px; }

/* E2. Ekran planszy: „← Wróć” i „?”, plansza w białej karcie, „Twoje nawyki”, dwie akcje */
.bingo-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bingo-nav .back { margin: 0; }
.qa-btn {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; font: inherit; font-size: 1.05rem; font-weight: 800; color: var(--title); cursor: pointer;
  position: relative;
}
.qa-btn::after { content: ""; position: absolute; inset: -4px; } /* dotyk 44 px */
.bingo-board-card { padding: 14px; margin-bottom: 12px; }
.bingo-board-card .bingo-board { margin: 0; }
.bingo-habits { padding: 14px; margin-bottom: 12px; display: grid; }
.bingo-habits-title { margin: 0 0 4px; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.bingo-hrow {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; min-height: 44px; box-sizing: border-box;
  border-top: 1px solid var(--line); color: var(--ink); font-size: 0.875rem; font-weight: 600;
}
.bingo-habits-title + .bingo-hrow { border-top: 0; }
.bingo-hname { flex: 1; min-width: 0; }
.bingo-dots { display: flex; gap: 4px; flex: none; }
.bingo-dots i { width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #f2a6cf; display: block; }
.bingo-dots i.on { background: var(--pink); border-color: var(--pink); }
.bingo-hrow.full .bingo-dots i { background: #CCFF00; border-color: #a9d400; }
.bingo-dots-n { flex: none; font-weight: 800; white-space: nowrap; }
.bingo-hrow.full .bingo-dots-n { color: var(--ok); }
.bingo-card-actions { gap: 8px; }
.bingo-finish-txt { align-self: center; padding: 0.7rem 1rem; color: var(--title); font-size: 0.875rem; }

/* E3. Okno „Jak grać w bingo” */
.qa-list { display: grid; gap: 14px; }
.qa-row { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.qa-row i {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 17px;
  background: color-mix(in srgb, #FF8BC8 22%, var(--surface));
}
.qa-row b { display: block; font-size: 0.9rem; line-height: 1.3; color: var(--ink); }
.qa-row span { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-muted); }
.qa-ask { align-self: center; padding: 0.6rem 0.5rem; color: var(--title); }
.qa-guide { display: block; align-self: center; text-align: center; padding: 0.1rem 0.5rem 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }

/* E5. Jedna siatka odstępów we wszystkich oknach: brzegi 20, między blokami 16, w bloku 8, do przycisków 24 */
:root { --sheet-pad: 20px; --sheet-gap: 16px; --sheet-gap-in: 8px; }
.sheet-card { padding: var(--sheet-pad) var(--sheet-pad) calc(var(--sheet-pad) + var(--safe-b)); }
.sheet-tall .sheet-card, .sheet-card:has(> .sheet-handle) { padding-top: 12px; }
.sheet:not(.sheet-chat) .sheet-card { display: flex; flex-direction: column; gap: var(--sheet-gap); }
.sheet:not(.sheet-chat) .sheet-card > *, .sheet-body > * { margin: 0; }
.sheet:not(.sheet-chat) .sheet-card > .sheet-handle { margin: 0 auto -4px; flex: none; } /* 12 do tytułu */
.sheet-chat .sheet-handle { margin: 0 auto 12px; }
.sheet-title, .sheet-head, .sheet-head .sheet-title { margin: 0; }
.sheet-chat .sheet-head { margin-bottom: var(--sheet-gap-in); }
.sheet-body { display: flex; flex-direction: column; gap: var(--sheet-gap); }
.sheet-group { display: grid; gap: var(--sheet-gap-in); }
.sheet-card > .ask-stack, .sheet-body > .ask-stack, .sheet-actions { display: grid; gap: var(--sheet-gap-in); margin-top: var(--sheet-gap-in); }
.sheet .feedback:empty { display: none; }
.sheet .form { gap: var(--sheet-gap); }
.sheet .field { gap: var(--sheet-gap-in); }
.sheet .form > .btn-primary { margin-top: var(--sheet-gap-in); }
.sheet .confirm-img { margin: 0 auto; }
.bh-group + .bh-name { margin-top: calc(var(--sheet-gap-in) - var(--sheet-gap)); }
.sheet-body .btn, .sheet-card > .ask-stack .btn-block { min-height: 48px; }
.bh-own-in { height: 48px; padding: 0 14px; border-radius: 12px; }
/* Okno pola (minutnik, przypomnienie): bloki co 16, w bloku 8, przyciski +24 */
.bt-body { gap: var(--sheet-gap-in); }
.bt-body > * { margin: 0; }
.bt-body .bt-hr { margin: var(--sheet-gap-in) 0; }
.bt-body > .bt-actions:last-child { margin-top: var(--sheet-gap); }

/* E6. Analiza AI: buzia Bota według stylu */
.ai-card .ic-tile.ai-av { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, 0.8); }
:root[data-theme="dark"] .ai-card .ic-tile.ai-av { background: color-mix(in srgb, var(--c) 30%, var(--surface)); }
.ai-card .ic-tile .ai-avatar { width: 54px; height: auto; transition: opacity 0.15s ease; }
.ai-avatar.is-swapping { opacity: 0; }
.ai-styles button .ai-style-av { width: 32px; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .ai-card .ic-tile .ai-avatar { transition: none; } }

/* ===== Część F (v55): jedne zasady w całej aplikacji ===== */

/* F6. Tytuły zakładek krojem Tkz; nagłówek ekranu z „?” po prawej */
.main .panel h2.tab-title, .tab-title { margin: 0.2rem 0 0.6rem; font-family: "Tkz", var(--font); font-weight: 400; font-size: 36px; line-height: 1; color: var(--ink); }
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0.5rem; }
.panel .screen-head h2, .bingo .screen-head h2 { margin: 0; }
.screen-head .qa-btn { flex: none; }

/* F7. „?” — jeden wygląd; w rogu karty — w rogu */
.qa-btn { flex: none; }
.qa-corner, .card-hero > .qa-corner { position: absolute; top: 10px; right: 10px; z-index: 3; }
.home-tracker .home-tracker-side { padding-right: 34px; }
.cal-art-card .qa-cal { top: 8px; right: 8px; }
.ai-card .hero-head .qa-btn { margin-left: auto; }
.sheet-head-actions { display: flex; align-items: center; gap: 8px; }
.tools-card-pomo { position: relative; }
.tools-card-pomo .tools-phase { padding: 0 40px; }

/* F5. „Tak / nie” — dwa przyciski obok siebie; formularz — „Anuluj” tekstem pod główną */
.sheet-yesno { display: grid !important; grid-template-columns: 1fr 1fr; }
.sheet-yesno .btn { min-height: 48px; padding-inline: 0.6rem; }
.sheet-cancel { align-self: center; justify-self: center; padding: 0.6rem 1rem; color: var(--title); }

/* F2. Przełącznik „Widoczność” w meldunku — jak w ustawieniach (doróżka, wybrane całe różowe) */
#sheet-log .vis-field { display: block; }
#sheet-log .vis-seg { display: flex; width: 100%; box-sizing: border-box; }
#sheet-log .vis-seg .radio {
  flex: 1; justify-content: center; text-align: center; margin: 0; padding: 0.55rem 0.4rem;
  border: 0; border-radius: 0.7rem; background: transparent; color: var(--ink-muted); font-size: 0.85rem; font-weight: 700;
}
#sheet-log .vis-seg .radio:has(input:checked) { background: var(--pink); color: var(--on-accent, var(--ink)); }
/* Chipy (wybór z listy, kilka): jasnoróżowe z ✓ */
#sheet-log .mood-grid label:has(input:checked) { border-width: 1.5px; }
#sheet-log .mood-grid label:has(input:checked)::before { content: "✓ "; font-weight: 900; margin-right: 0.15em; }

/* F3. Cel miesiąca — okno z −/+ i przełącznikiem */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0;
  border-radius: 999px; background: var(--line); cursor: pointer; transition: background 0.15s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.15s ease;
}
.switch:checked { background: var(--pink); }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--title); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

/* F4. Przypomnienia: „+ Nowe przypomnienie” i formularz w oknie */
.rem-add { margin-top: 12px; }
.rem-lock-note { margin-top: 10px; }
.field-label { font-size: 0.85rem; color: var(--ink-muted); font-weight: 600; }
#rem-form .field { gap: var(--sheet-gap-in); }
#rem-form input[type="text"], #rem-form input[type="date"], #rem-form input[type="time"] { min-height: 48px; box-sizing: border-box; }

/* F9. Poprawki po v55 */
/* 3. Pole w skupieniu — różowa ramka (zamiast domyślnej obwódki przeglądarki) */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus, select:focus {
  outline: none; border-color: var(--pink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 22%, transparent);
}
/* 5. Liczba w liczniku −/+ — 22 px, pogrubiona (okno nawyku i „Cel miesiąca”) */
.bh-val { font-size: 22px; font-weight: 800; }
/* 1. Okno nawyku: tytuł z grupą nad nim i ✕ po prawej */
.bh-titles { min-width: 0; }
.bh-titles .bh-group { margin: 0 0 2px; }
.bh-titles .bh-name { margin: 0; }
#bh-body .sheet-head { align-items: flex-start; }
/* 7. Wiersz archiwum: pigułki jak na kartach rodzaju */
.bingo-arch-item .bingo-pills { flex: none; justify-content: flex-end; }
.bingo-arch-item .bingo-pill:not(.lime) { background: #f2f5fa; }
:root[data-theme="dark"] .bingo-arch-item .bingo-pill:not(.lime) { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); color: var(--ink); }