/* Liczio — tokeny marki i globalne nadpisania Bootstrapa. Jedno zrodlo prawdy. */

:root {
  --liczio-pink: #E62E5C;
  --liczio-plum: #7E1230;
  --liczio-blush: #F9C9D7;
  --liczio-tint: #FDECF1;
  --liczio-ink: #191315;
  --liczio-ink-soft: #241C1E;
  --liczio-paper: #FAF6F4;
  --liczio-text: #3F3739;
  --liczio-muted: #7A7072;
  --liczio-faint: #9A9092;
  --liczio-line: #EAE1DF;
  --liczio-line-soft: #F0E9E7;
  --liczio-line-row: #F5EFED;
  --liczio-border-ctl: #DFD5D3;
  --liczio-success-bg: #DFF0E6;
  --liczio-success-fg: #1F4A34;
  --liczio-neutral-bg: #F0E9E7;
  --liczio-neutral-fg: #5E5456;

  /* Powierzchnie marketingowe (strona glowna / landing) */
  --liczio-bg: #EFE9E7;
  --liczio-pink-hover: #C71F49;
  --liczio-ink-line: #3A3134;
  --liczio-ink-line-hover: #6E6466;
  --liczio-on-dark: #B8AEB0;
  --liczio-on-dark-soft: #8C8082;
  --liczio-line-strong: #E3DAD8;
  --liczio-old-bg: #E7E0DE;
  --liczio-old-line: #DCD2D0;

  --liczio-r-card: 18px;
  --liczio-r-nav: 11px;
  --liczio-r-ctl: 10px;
  --liczio-r-pill: 20px;

  --liczio-font: 'Space Grotesk', system-ui, sans-serif;
  --liczio-font-mono: 'Space Mono', ui-monospace, monospace;
}

/* Mapowanie zmiennych runtime Bootstrapa na marke */
:root {
  --bs-primary: var(--liczio-pink);
  --bs-primary-rgb: 230, 46, 92;
  --bs-primary-text-emphasis: var(--liczio-plum);
  --bs-primary-bg-subtle: var(--liczio-tint);
  --bs-primary-border-subtle: var(--liczio-blush);

  --bs-body-bg: var(--liczio-paper);
  --bs-body-bg-rgb: 250, 246, 244;
  --bs-body-color: var(--liczio-ink);
  --bs-body-color-rgb: 25, 19, 21;

  --bs-emphasis-color: var(--liczio-ink);
  --bs-secondary-color: var(--liczio-muted);
  --bs-tertiary-color: var(--liczio-faint);

  --bs-light: var(--liczio-paper);
  --bs-light-rgb: 250, 246, 244;
  --bs-dark: var(--liczio-ink);
  --bs-dark-rgb: 25, 19, 21;

  --bs-link-color: var(--liczio-pink);
  --bs-link-color-rgb: 230, 46, 92;
  --bs-link-hover-color: var(--liczio-plum);
  --bs-link-hover-color-rgb: 126, 18, 48;

  --bs-border-color: var(--liczio-line);
  --bs-border-color-translucent: var(--liczio-line);

  --bs-border-radius: var(--liczio-r-ctl);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-xl: var(--liczio-r-card);

  --bs-font-sans-serif: var(--liczio-font);
  --bs-font-monospace: var(--liczio-font-mono);
  --bs-body-font-family: var(--liczio-font);

  --bs-focus-ring-color: rgba(230, 46, 92, .25);
}

body {
  margin: 0;
  background-color: var(--liczio-paper);
  color: var(--liczio-ink);
  font-family: var(--liczio-font);
}

/* Karty: obramowanie marki, promien 18px, bez cienia */
.card {
  --bs-card-border-color: var(--liczio-line);
  --bs-card-border-radius: var(--liczio-r-card);
  --bs-card-inner-border-radius: calc(var(--liczio-r-card) - 1px);
}
.card,
.list-group { box-shadow: none !important; }

/* Przyciski */
.btn-primary {
  --bs-btn-bg: var(--liczio-pink);
  --bs-btn-border-color: var(--liczio-pink);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--liczio-plum);
  --bs-btn-hover-border-color: var(--liczio-plum);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--liczio-plum);
  --bs-btn-active-border-color: var(--liczio-plum);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--liczio-pink);
  --bs-btn-disabled-border-color: var(--liczio-pink);
  --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--liczio-pink);
  --bs-btn-border-color: var(--liczio-pink);
  --bs-btn-hover-bg: var(--liczio-pink);
  --bs-btn-hover-border-color: var(--liczio-pink);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--liczio-pink);
  --bs-btn-active-border-color: var(--liczio-pink);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--liczio-pink);
  --bs-btn-disabled-border-color: var(--liczio-pink);
}
.btn-dark {
  --bs-btn-bg: var(--liczio-ink);
  --bs-btn-border-color: var(--liczio-ink);
  --bs-btn-hover-bg: var(--liczio-ink-soft);
  --bs-btn-hover-border-color: var(--liczio-ink-soft);
  --bs-btn-active-bg: var(--liczio-ink-soft);
  --bs-btn-active-border-color: var(--liczio-ink-soft);
}
.btn-link {
  --bs-btn-color: var(--liczio-pink);
  --bs-btn-hover-color: var(--liczio-plum);
  --bs-btn-active-color: var(--liczio-plum);
}

/* Nawigacja, listy, dropdown */
.list-group {
  --bs-list-group-active-bg: var(--liczio-pink);
  --bs-list-group-active-border-color: var(--liczio-pink);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--liczio-pink); }
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--liczio-pink);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-border-color: var(--liczio-line);
  --bs-dropdown-border-radius: var(--liczio-r-ctl);
}

/* Pasek postepu */
.progress,
.progress-stacked {
  --bs-progress-bg: var(--liczio-line-soft);
  --bs-progress-bar-bg: var(--liczio-pink);
  height: 8px;
  border-radius: 4px;
}

/* Kontrolki formularzy */
.form-control,
.form-select {
  background-color: var(--liczio-paper);
  border-color: var(--liczio-border-ctl);
}
.form-control::placeholder { color: var(--liczio-faint); }
.form-control:focus,
.form-select:focus {
  background-color: #fff;
  border-color: var(--liczio-pink);
  box-shadow: 0 0 0 3px var(--liczio-tint);
}
.form-check-input:checked {
  background-color: var(--liczio-pink);
  border-color: var(--liczio-pink);
}
.form-check-input:focus {
  border-color: var(--liczio-pink);
  box-shadow: 0 0 0 3px var(--liczio-tint);
}

/* Focus-visible: kontur marki (pola formularzy maja pierscien tint zamiast konturu) */
:focus-visible {
  outline: 2px solid var(--liczio-blush);
  outline-offset: 2px;
}
.btn:focus-visible { box-shadow: none; }
.form-control:focus-visible,
.form-select:focus-visible { outline: none; }

/* Przejscia bez animacji transform */
.btn,
.list-group-item,
.nav-link,
.form-control,
.form-select {
  transition: background-color .15s ease-out, border-color .15s ease-out;
}

/* ---- App shell: pasek gorny + nawigacja boczna ---- */
.liczio-topbar {
  height: 64px;
  background: var(--liczio-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}
.liczio-topbar-left { display: flex; align-items: center; gap: 20px; }
.liczio-topbar-right { display: flex; align-items: center; gap: 14px; }
.liczio-topbar-label { font-weight: 500; font-size: 14px; color: #8C8082; }

.liczio-brand {
  display: inline-flex;
  align-items: flex-end;
  font-family: var(--liczio-font);
  font-weight: 700;
  letter-spacing: -.04em;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  transition: opacity .15s ease-out;
}
.liczio-brand:hover { opacity: .85; }
.liczio-brand .slowo { color: var(--liczio-paper); }
.liczio-brand .znak { width: .62em; height: .62em; margin-left: .05em; margin-bottom: .05em; display: block; }

.liczio-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 10px;
  background: var(--liczio-ink-soft);
  color: var(--liczio-paper);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.liczio-chip:hover { color: var(--liczio-paper); }
.liczio-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--liczio-pink);
  flex: none;
}
.liczio-chip-caret { font-family: var(--liczio-font-mono); font-size: 11px; color: #8C8082; }

.liczio-admin-badge {
  font-family: var(--liczio-font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--liczio-ink);
  background: var(--liczio-blush);
  padding: 6px 11px;
  border-radius: 7px;
  white-space: nowrap;
}
.liczio-btn-topbar {
  font-weight: 500;
  font-size: 13px;
  color: var(--liczio-paper);
  background: transparent;
  border: 1px solid #3A3134;
  border-radius: 9px;
  padding: 9px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease-out;
}
.liczio-btn-topbar:hover { color: var(--liczio-paper); background: var(--liczio-ink-soft); }

.liczio-shell {
  display: flex;
  gap: 28px;
  padding: 34px 28px 44px;
  align-items: flex-start;
}
.liczio-sidebar { width: 236px; flex: none; }
.liczio-nav { display: flex; flex-direction: column; gap: 4px; }
.liczio-nav-item {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--liczio-text);
  padding: 13px 16px;
  border-radius: var(--liczio-r-nav);
  text-decoration: none;
}
.liczio-nav-item:hover { background: var(--liczio-line-row); color: var(--liczio-text); }
.liczio-nav-item.active { background: var(--liczio-pink); color: #fff; }
.liczio-content { flex: 1; min-width: 0; }

@media (max-width: 767.98px) {
  .liczio-topbar { padding: 0 16px; }
  .liczio-topbar-label,
  .liczio-admin-badge { display: none; }
  .liczio-shell { flex-direction: column; gap: 16px; padding: 20px 16px 32px; }
  .liczio-sidebar { width: 100%; }
  .liczio-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .liczio-nav-item { white-space: nowrap; flex: none; }
}

/* ---- Komponenty tresci (wielokrotnego uzytku) ---- */
.liczio-h1 { margin: 0 0 24px; font-weight: 700; font-size: 36px; letter-spacing: -.03em; color: var(--liczio-ink); }
.liczio-eyebrow {
  font-family: var(--liczio-font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--liczio-faint);
}
.liczio-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--liczio-muted); }

.liczio-card {
  background: #fff;
  border: 1px solid var(--liczio-line);
  border-radius: var(--liczio-r-card);
  padding: 24px;
}
.liczio-panel {
  background: #fff;
  border: 1px solid var(--liczio-line);
  border-radius: var(--liczio-r-card);
  overflow: hidden;
}
.liczio-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--liczio-line-soft);
}
.liczio-card-title { margin: 0; font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--liczio-ink); }

.liczio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--liczio-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--liczio-r-ctl);
  padding: 11px 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out;
}
.liczio-btn-pink { background: var(--liczio-pink); color: #fff; }
.liczio-btn-pink:hover { background: var(--liczio-plum); color: #fff; }
.liczio-btn-ink { background: var(--liczio-ink); color: #fff; }
.liczio-btn-ink:hover { background: var(--liczio-ink-soft); color: #fff; }
.liczio-btn-outline { background: transparent; border-color: var(--liczio-border-ctl); color: var(--liczio-text); }
.liczio-btn-outline:hover { background: var(--liczio-line-row); color: var(--liczio-text); }
.liczio-btn-link { background: transparent; color: var(--liczio-pink); padding-left: 4px; padding-right: 4px; }
.liczio-btn-link:hover { color: var(--liczio-plum); }
.liczio-btn-sm { padding: 9px 14px; font-size: 13px; }

.liczio-empty {
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.liczio-empty-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--liczio-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.liczio-empty-mark span {
  box-sizing: border-box;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 5px solid var(--liczio-pink);
}
.liczio-empty-title { font-weight: 500; font-size: 16px; color: var(--liczio-ink); }
.liczio-empty-sub { font-weight: 400; font-size: 14px; color: #8C8082; }

/* KPI i pigulki statusu */
.liczio-kpi { font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--liczio-ink); }
.liczio-kpi-dark { background: var(--liczio-ink); color: var(--liczio-paper); }
.liczio-kpi-dark .liczio-eyebrow { color: #8C8082; }
.liczio-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--liczio-r-pill); font-weight: 500; font-size: 13px; }
.liczio-pill-success { background: var(--liczio-success-bg); color: var(--liczio-success-fg); }
.liczio-pill-neutral { background: var(--liczio-neutral-bg); color: var(--liczio-neutral-fg); }

/* ---- Teoria: strony materialow (wzor strony lekcji, 1:1) ---- */
.teoria { padding: 20px; background: var(--liczio-paper); }
.teoria .shadow-sm { box-shadow: none !important; }

.teoria-lead { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.teoria-breadcrumb { font-family: var(--liczio-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--liczio-faint); }
.teoria-lead p { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--liczio-neutral-fg); }
.teoria-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.teoria-meta .teoria-poziom { margin-left: 0; }

.teoria-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.teoria-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.teoria-rail { position: sticky; top: 24px; max-height: calc(100vh - 44px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 991.98px) {
  .teoria-layout { grid-template-columns: 1fr; }
  .teoria-rail { position: static; max-height: none; overflow: visible; }
}

.teoria-sekcja { background: #fff; border: 1px solid var(--liczio-line); border-radius: 18px; padding: 28px 30px; }
.teoria-sekcja > *:last-child { margin-bottom: 0 !important; }
.teoria-sekcja-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.teoria-nr { flex: none; font-family: var(--liczio-font-mono); font-weight: 700; font-size: 15px; color: var(--liczio-pink); }
.teoria-sekcja-head h5 { margin: 0; min-width: 0; font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--liczio-ink); }
.teoria-poziom { flex: none; margin-left: auto; font-family: var(--liczio-font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: 7px; white-space: nowrap; }
.teoria-poziom-podstawa { background: var(--liczio-line-soft); color: var(--liczio-neutral-fg); }
.teoria-poziom-rozsz { background: var(--liczio-blush); color: var(--liczio-ink); }
.teoria-poziom-inter { background: var(--liczio-pink); color: #fff; }

.teoria-sekcja p { font-size: 16px; line-height: 1.6; color: var(--liczio-neutral-fg); }
.teoria-sekcja li { color: var(--liczio-neutral-fg); }
.teoria-sekcja strong { color: var(--liczio-ink); }

.teoria-wzor { padding: 22px 24px; border-radius: 14px; text-align: center; background: var(--liczio-tint); color: var(--liczio-ink); font-size: 19px; }
.teoria-wzor--rozsz { background: var(--liczio-blush); }
.teoria-info { padding: 16px 18px; border: 1px solid var(--liczio-line); border-radius: 14px; background: var(--liczio-paper); color: var(--liczio-text); }

.teoria-callout { background: var(--liczio-ink); border-radius: 14px; padding: 20px 22px; }
.teoria-callout .lbl { font-family: var(--liczio-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--liczio-pink); }
.teoria-callout p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--liczio-bg); }

.teoria .text-primary,
.teoria .text-success,
.teoria .text-warning { color: var(--liczio-plum) !important; }
.teoria .text-danger { color: var(--liczio-pink) !important; }
.teoria .border-primary,
.teoria .border-success,
.teoria .border-warning,
.teoria .border-danger { border-color: var(--liczio-pink) !important; }

.teoria .table { --bs-table-bg: #fff; margin-bottom: 0; }
.teoria thead th { background: var(--liczio-paper) !important; color: var(--liczio-muted) !important; font-weight: 500; }
.teoria .table > :not(caption) > * > * { border-color: var(--liczio-line); }

.teoria .card { --bs-card-border-radius: 14px; background: var(--liczio-paper); border-color: var(--liczio-line); }
.teoria .card-body { padding: 18px 20px; }
.teoria .card-header { background: var(--liczio-paper); border-bottom-color: var(--liczio-line); font-weight: 500; }
.teoria .collapse [class*="border-start"] { border-left: 0 !important; border-top: 1px solid var(--liczio-line) !important; padding-left: 0 !important; padding-top: 14px !important; }

.teoria .btn-outline-primary,
.teoria .btn-outline-success,
.teoria .btn-outline-warning {
  --bs-btn-color: var(--liczio-pink); --bs-btn-border-color: var(--liczio-pink);
  --bs-btn-hover-bg: var(--liczio-pink); --bs-btn-hover-border-color: var(--liczio-pink); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--liczio-pink); --bs-btn-active-border-color: var(--liczio-pink); --bs-btn-active-color: #fff;
}
.teoria .btn-sm { border-radius: 9px; }

.teoria .row.bg-white { background: var(--liczio-paper) !important; border-color: var(--liczio-line) !important; border-radius: 14px !important; }
.teoria input[type="range"],
.teoria .form-range { accent-color: var(--liczio-pink); }
.teoria .list-group-item { border-color: var(--liczio-line); }

.teoria-rail-card { background: #fff; border: 1px solid var(--liczio-line); border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.teoria-rail-label { font-family: var(--liczio-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--liczio-faint); }
.teoria-toc { display: flex; flex-direction: column; gap: 2px; }
.teoria-toc a { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--liczio-neutral-fg); padding: 9px 12px; border-radius: 9px; text-decoration: none; }
.teoria-toc a:hover { background: var(--liczio-line-row); color: var(--liczio-neutral-fg); }
.teoria-toc a .nr { flex: none; font-family: var(--liczio-font-mono); font-size: 12px; color: var(--liczio-faint); }
.teoria-zapamietaj { display: flex; flex-direction: column; gap: 10px; }
.teoria-zapamietaj span { font-size: 15px; color: var(--liczio-ink); }
.teoria-cta { background: var(--liczio-ink); border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.teoria-cta-title { font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; color: var(--liczio-paper); }
.teoria-cta-text { font-size: 14px; line-height: 1.5; color: var(--liczio-on-dark); }
.teoria-cta .liczio-btn { align-self: flex-start; }
.teoria-cta-form { display: flex; flex-direction: column; gap: 10px; }
.teoria-cta-form textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: 400 14px var(--liczio-font);
  color: var(--liczio-ink);
  background: var(--liczio-paper);
  border: 1px solid var(--liczio-ink-line);
  border-radius: 10px;
  padding: 10px 12px;
}
.teoria-cta-form textarea::placeholder { color: var(--liczio-faint); }
.teoria-cta-form textarea:focus {
  outline: none;
  border-color: var(--liczio-pink);
  box-shadow: 0 0 0 3px rgba(230, 46, 92, .3);
}
.teoria-cta-note { font-size: 13px; color: var(--liczio-on-dark); }
.teoria-pytania { display: flex; flex-direction: column; gap: 10px; }
.teoria-pytanie { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--liczio-line-soft); }
.teoria-pytanie:last-child { padding-bottom: 0; border-bottom: 0; }
.teoria-pytanie .tresc { font-size: 14px; line-height: 1.45; color: var(--liczio-text); }
.teoria-pytanie .status { font-family: var(--liczio-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--liczio-pink); }
.teoria-pytanie.is-omowione .tresc { color: var(--liczio-faint); }
.teoria-pytanie.is-omowione .status { color: var(--liczio-success-fg); }

@media (max-width: 575.98px) {
  .teoria { padding: 12px; }
  .teoria-sekcja { padding: 20px 18px; }
  .teoria-sekcja-head h5 { font-size: 21px; }
}