div.form-group,
div.widget-content-wrapper div.widget-content-left,
div.widget-content-wrapper form,
#checkout-form > button.stripe-button-el,
.checkout-form-taxxo button.btn-primary,
#checkout-subscription-form button.stripe-button,
.iti {
  width: 100%;
}

body {
  background-color: var(--background-color);
}

@media(max-width: 750px) {
  margin-top: 150px;
}
.layout-color {
  color: #ffae00;
}

.app-sidebar .scrollbar-sidebar {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
}

form {
  background-color: var(--ld-surface);
  color: var(--ld-text);
  padding: 1rem;
  border-radius: 0.25rem;
  box-shadow: 0 0.46875rem 2.1875rem rgb(4 9 20 / 3%),
    0 0.9375rem 1.40625rem rgb(4 9 20 / 3%),
    0 0.25rem 0.53125rem rgb(4 9 20 / 5%), 0 0.125rem 0.1875rem rgb(4 9 20 / 3%);
}

.link {
  color: #ebad49;
}

.link:hover {
  color: #ff9100;
  text-decoration: none;
}

.white-link {
  color: var(--color-white);
  font-weight: bold;
}

.white-link:hover {
  color: var(--color-white);
  font-weight: bold;
  text-decoration: none;
}

h5.buy-subscription,
.add-user,
.sales-post-icon {
  font-size: 1.5rem;
}

.upgrade-packet-wrapper p {
  font-size: 1rem;
}

.sales-post-icon {
  background-color: var(--color-black);
  color: #cd853f;
  font-size: 1.5rem;
}

/* Zielone ikony akcji niosą literał `green` (#008000). Zmierzony na wszystkich
   powierzchniach, na których faktycznie leżą, wypada poprawnie wszędzie poza
   LeadYa Dark (3,60:1 na #162431, 3,75:1 na prawie czarnej karcie Ruby, 4,52:1 na
   jasnym poletku Classic i Sky, ale 2,00-2,82:1 na fioletach LeadYa Dark).
   Żaden pojedynczy zielony nie trzyma 3:1 jednocześnie na jasnym poletku i na
   fiolecie #542992, więc poprawka siedzi w leadya-dark.css, a nie tutaj. */
.add-user {
  color: green;
  font-size: 1.5rem;
}

.offer-header{
  color: var(--main-color);
  text-align: center;
  font-weight: bold;
}

.left-aligned {
  width: 100%;
  text-align: left;
}

#current-task-table.table td {
  max-width: 350px;
}

.level-list{
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#level-table{
    width: 50%;
}

.partner-exp-rules{
    margin-bottom: 30px;
}

.partner-exp-rules span{
    font-size: 1.2rem;
}

#progress-stage{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

.progress-exp-bar{
    width: 20rem;
    height: 1.8rem;
    border: 2px solid var(--background-color);
    border-radius: 20px;
    overflow: hidden;
}

.progress-exp-bar::-webkit-progress-bar {
   background-color: white !important;
   border-radius: 20px;
}

.progress-exp-bar::-webkit-progress-value {
   background-color: var(--main-color) !important;
   border-radius: 20px;
}

.table thead th {
  border-bottom: 1px solid var(--color-white);
}

.table-licence,
.campaign-btn-stage {
  display: flex;
}

.app-main__outer {
  background: #f5f5f5;
}

.table .table {
  color: var(--color-black);
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: var(--ld-text, #1a1d2e);
}

/* Bootstrapowe .btn-danger było tu przemalowane na czarny przycisk z jasnym
   cyjanem — kolor marki jednego z botów narzucony wszystkim motywom. Znaczenie
   semantyczne ma wygrywać z brandingiem, więc zostawiamy .btn-danger Bootstrapowi
   i motywom: nova/aura dają mu `--ld-danger`, reszta czerwień Bootstrapa.
   Czarne tło gubiło znaczenie akcji: „Usuń" wyglądało jak przycisk neutralny.
   Sam kontrast nie był tu problemem (cyjan na czerni to 18,96:1) i po zmianie
   też nie jest — biel na czerwieni Bootstrapa daje 4,85:1, czyli powyżej progu. */

.bg-danger {
  background-color: var(--main-color) !important;
}

.form-control-full-height {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-clip: padding-box;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
}

#cat_image {
  width: 36%;
  border-radius: 50%;
}

.app-header__logo .logo-src {
  background: url("assets/images/logo-inverse.png") no-repeat;
  height: 50px;
  width: 250px;
  margin-right: 28px;
}

tr.tasks-small span,
tr.tasks-small a,
.select2-container,
.language-a,
#licences_tbody a,
#invoices_tbody a,
.visible-post {
  display: block;
}

.mb-0 table table-striped table-bordere all_offers_table tbody {
  color: var(--background-color);
}

.select2-container .select2-selection--single {
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 0.25rem;
  color: #495057;
  border: 1px solid #ced4da;
}

#dropdown_list.form-group {
  margin-top: 1rem;
  width: 100%;
}

#dropdown_list.form-group .form-control {
  margin-bottom: 0.5rem;
}

.form-control {
  height: calc(2rem + 2px);
  font-size: 0.88rem;
}

.widget-content .widget-content-left .widget-heading {
  opacity: 1;
  font-size: 1rem;
}

.calc-elements-summary {
  font-weight: bold;
}

.calc-base,
.partner-inactive-licence .licence-name,
.tutorial-text-decoration-line-through {
  text-decoration: line-through;
}

.hr {
  background-color: var(--color-white);
}

.command {
  margin-top: 2rem;
  height: 55px;
  font-size: 16px;
  width: 80%;
}

#contactLastCommunicationModalCenter .modal-content {
  max-height: 600px;
}

#contactLastCommunicationModalCenter .modal-content > div {
  overflow: auto;
}

/* ===== CONTACTS TABLE ===== */
.contacts-table-card {
  border: 2px solid var(--background-color);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border-radius: 10px;
  overflow: hidden;
}

.contacts-table-header {
  background: var(--background-color);
  /* #fff hardkodowany - --color-white = #000 w jamesbot, tekst byłby niewidoczny */
  color: #fff;
  padding: 0.85rem 1.25rem;
  border-bottom: none;
}

.contacts-table-title {
  /* #fff hardkodowany - patrz wyżej */
  color: #fff;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

/* Destrukcyjne akcje — w card-body, po prawej od filtrów via ml-auto */
.contacts-danger-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.contacts-action-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Przyciski na jasnym tle card-body — kolory hardkodowane, kontrastowe w każdym motywie */
.contacts-action-btn--danger {
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.45);
  color: #c82333;
}
.contacts-action-btn--danger:hover {
  background: rgba(220, 53, 69, 0.2);
  border-color: #c82333;
  color: #a71d2a;
}

.contacts-action-btn--warning {
  background: rgba(133, 100, 4, 0.08);
  border-color: rgba(133, 100, 4, 0.35);
  color: #856404;
}
.contacts-action-btn--warning:hover {
  background: rgba(133, 100, 4, 0.16);
  border-color: #856404;
  color: #533f03;
}

.contacts-action-btn--secondary {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  color: #495057;
}
.contacts-action-btn--secondary:hover {
  background: rgba(0,0,0,0.09);
  border-color: rgba(0,0,0,0.3);
  color: #212529;
}

/* Na małych ekranach chowamy tekst, zostaje tylko ikona */
@media (max-width: 767.98px) {
  .contacts-action-label {
    display: none;
  }
  .contacts-action-btn i {
    margin-right: 0 !important;
  }
  .contacts-action-btn {
    padding: 0.35rem 0.55rem;
  }
}

/* Na bardzo małych — akcje schodzą pod filtry */
@media (max-width: 575.98px) {
  .contacts-danger-actions {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 0.25rem;
    justify-content: flex-start;
  }
}

.contacts-table-thead th {
  /* additional.css ładowany PRZED motywem - potrzebujemy !important.
     PROBLEM: --color-white = #000 w jamesbot, #fff w pozostałych.
     ROZWIĄZANIE: hardkodowany #fff - zawsze widoczny na ciemnym --background-color.
     Turbot (#eeeeee tło) ma override w leadya-ruby.css. */
  background: var(--background-color) !important;
  border-top: none;
  border-bottom: 3px solid var(--main-color) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff !important;
  font-weight: 700;
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.contacts-table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.15s;
}

.contacts-table tbody tr:hover {
  filter: brightness(0.95);
}

.contacts-table tbody tr.contact-row-manual {
  background: rgba(0,0,0,0.03);
}

.contacts-table tbody tr.contact-row-manual:hover {
  filter: brightness(0.93);
}

.contacts-table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-top: none;
}

.contacts-table td.col-num {
  width: 2.5rem;
  font-size: 0.8rem;
  /* !important potrzebne bo leadya.css: .table { color: var(--background-color) !important }
     nadpisuje kolor. Używamy background-color który jest ciemny i widoczny na jasnym tle body. */
  color: var(--background-color) !important;
  font-weight: 600;
  opacity: 0.55;
}

.contact-name-link {
  /* background-color jest zawsze ciemny - widoczny na jasnym tle body aplikacji (#f5f5f5).
     !important konieczne bo leadya.css nadpisuje .table color. */
  color: var(--background-color) !important;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.contact-name-link:hover {
  color: var(--main-color) !important;
  text-decoration: underline;
}

.contact-status-badge {
  font-size: 0.7rem;
  padding: 3px 7px;
  border-radius: 20px;
  font-weight: 600;
}

/* Powód odfiltrowania w nagłówku panelu to pełne zdanie — badge musi się zawijać,
   zamiast wystawać poza nagłówek na wąskich ekranach. */
.contacts-panel-header .contact-status-badge {
  white-space: normal;
  text-align: left;
  line-height: 1.3;
  max-width: 100%;
}

/* Data w nagłówku panelu leży na ciemnym tle nagłówka, nie na białej liście —
   szarość listy (#6b7280) daje tu za mały kontrast dla drobnego tekstu. */
.contacts-panel-header .contacts-conversation-date {
  color: rgba(255, 255, 255, 0.82);
}

.contact-lead-badge {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 20px;
}

.badge-lead-hot { background: var(--main-color); color: var(--color-white); }
.badge-lead-warm { background: var(--brighter-main-color); color: var(--background-color); }
.badge-lead-cold { background: var(--background-color); color: var(--color-white); border: 1px solid var(--main-color); }
.badge-lead-won  { background: #27ae60; color: #fff; }
.badge-lead-lost { background: #95a5a6; color: #fff; }
.badge-lead-fully_qualified { background: #2d9d58; color: #fff; }
.badge-lead-partially_qualified { background: #d9822b; color: #fff; }
.badge-lead-not_qualified { background: #5c7080; color: #fff; }
.badge-lead-rejected { background: #c23030; color: #fff; }
.badge-lead-other { background: #2f80ed; color: #fff; }
.badge-lead-no_status { background: #6c757d; color: #fff; }
/* Nieznany status - hardkodowane neutralne szarości, niezależne od motywu */
.badge-lead-unknown,
.badge-lead-not_set { background: #6c757d; color: #fff; }

/* ===== FILTER BAR ===== */
.contacts-filter-bar {
  gap: 0.5rem;
  align-items: center;
}

/* Każdy filtr rośnie równomiernie, min 160px */
.contacts-filter-item {
  flex: 1 1 160px;
  min-width: 140px;
}

.contacts-filter-item .form-control {
  width: 100%;
}

/* Przycisk Filtr — szerokość auto, naturalna wysokość */
.contacts-filter-btn {
  flex: 0 0 auto;
}

.contacts-filter-btn .btn {
  white-space: nowrap;
}

.contacts-view-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem 0;
  border-bottom: 1px solid var(--ld-border, #e6e8f0);
  background: var(--ld-surface, #ffffff);
}

.contacts-view-tab {
  padding: 0.6rem 0.85rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ld-text-muted, #667085);
  font-weight: 600;
}

.contacts-view-tab:hover,
.contacts-view-tab.is-active {
  color: var(--ld-brand, #6c4cf1);
  border-bottom-color: var(--ld-brand, #6c4cf1);
}

/* Odfiltrowany kontakt na liście wygląda i klika się jak zwykła rozmowa
   (.contacts-conversation-item); tu zostaje tylko wiersz z powodem odfiltrowania. */
.contacts-filtered-reason {
  margin: 0 0 0.3rem;
  color: var(--ld-text-muted, #667085);
  font-size: 0.78rem;
  line-height: 1.35;
}

.contacts-filtered-reason--error {
  color: var(--ld-danger, #b42318);
}

/* Mobile: każdy element na pełną szerokość */
@media (max-width: 575.98px) {
  .contacts-filter-item {
    flex: 1 1 100%;
  }
  .contacts-filter-btn {
    flex: 1 1 100%;
  }
  .contacts-filter-btn .btn {
    width: 100%;
  }
}

/* ===== CONTACTS MESSENGER LAYOUT ===== */
.contacts-messenger-layout {
  display: flex;
  height: clamp(480px, calc(100vh - 250px), 760px);
  min-height: 480px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Brak kontaktów: karta kurczy się do komunikatu, bez pustego pola na pół ekranu */
.contacts-messenger-card-empty .contacts-messenger-layout {
  height: auto;
  min-height: 0;
}

.contacts-messenger-card-empty .contacts-panel-wrapper {
  min-height: 0;
}

.contacts-messenger-sidebar {
  width: 34%;
  min-width: 320px;
  max-width: 430px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(248, 249, 250, 0.9);
  display: flex;
  flex-direction: column;
  /* Wyspa jasnej powierzchni: tlo jest zahardkodowane na jasne w kazdym motywie,
     wiec tokeny tekstu tez musza byc jasnopowierzchniowe. Bez tego LeadYa Dark
     wpuszcza tu swoj jasny --ld-text (1,84:1), jasny --ld-danger-ink (2,00:1)
     i jasny --main-color (2,23:1). Ten sam kontrakt co blok .modal-content. */
  --ld-surface: #ffffff;
  --ld-text: #1a1d2e;
  --ld-text-muted: #566077;
  --ld-danger-ink: #a32d2d;
  --ld-success-ink: #0e7a4f;
  --ld-warning-ink: #935e06;
  --ld-info-ink: #1560ac;
  --main-color: #6c4cf1;
  color: var(--ld-text);
}

.contacts-messenger-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0.5rem;
}

.contacts-conversation-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 0.5rem;
  padding: 0.65rem;
  display: flex;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
}

.contacts-conversation-item:hover {
  border-color: var(--main-color);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.contacts-conversation-item.is-active {
  border-color: var(--main-color);
  box-shadow: inset 3px 0 0 var(--main-color);
  background: rgba(255, 255, 255, 0.98);
}

.contacts-conversation-item.contact-row-manual {
  background: #f9f7ef;
}

.contacts-conversation-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 0.65rem;
}

.contacts-conversation-avatar-lg {
  width: 56px;
  height: 56px;
  min-width: 56px;
}

/* Zdjecie profilowe kontaktu wypelnia kolko awatara; inicjal pod spodem zostaje w DOM i wraca,
   gdy obraz z wygaslego linku CDN usunie sie po bledzie ladowania (onerror w fragmencie). */
.contacts-conversation-avatar-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.contacts-conversation-avatar-img + .contacts-conversation-avatar-initial {
  display: none;
}

.contacts-avatar-friend-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2d9d58;
  border: 2px solid #fff;
  z-index: 1;
}

.contacts-conversation-content {
  min-width: 0;
  width: 100%;
}

.contacts-conversation-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.contacts-conversation-name {
  color: #1f2937;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-conversation-date {
  color: #6b7280;
  font-size: 0.75rem;
  white-space: nowrap;
}

.contacts-conversation-statuses {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
}

.contacts-conversation-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.73rem;
  color: #6b7280;
}

.contacts-manual-chip {
  color: #9a6700;
  font-weight: 600;
}

.contacts-messenger-empty-list,
.contacts-panel-empty {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6b7280;
  padding: 1.75rem 1rem;
  min-height: 220px;
}

/* Tylko ikona-ilustracja stanu pustego, czyli bezpośrednie dziecko. Reguła bez
   `>` trafiała też w ikony przycisków CTA w tym samym bloku, a te leżą na
   .btn-primary pomalowanym tym samym --main-color — ikona miała 1,0:1 (znikała
   całkowicie) we wszystkich sześciu motywach. */
.contacts-messenger-empty-list > i,
.contacts-panel-empty > i {
  font-size: 1.7rem;
  color: var(--main-color);
  margin-bottom: 0.6rem;
}

.contacts-empty-title {
  color: #374151;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.contacts-empty-hint {
  font-size: 0.85rem;
  max-width: 300px;
}

.contacts-messenger-sidebar-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  padding: 0.6rem 0.75rem;
  text-align: center;
}

.contacts-messenger-list-loader {
  font-size: 0.85rem;
  color: #6b7280;
}

.contacts-messenger-list-end {
  font-size: 0.78rem;
  color: #6b7280;
}

.contacts-load-more-btn {
  width: 100%;
}

.contacts-messenger-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: #fff;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.contacts-messenger-panel > .contacts-panel-wrapper,
.contacts-messenger-panel > .contacts-panel-empty {
  flex: 1 1 auto;
  min-height: 0;
}

.contacts-messenger-panel.is-loading {
  opacity: 0.6;
}

.contacts-panel-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px;
}

.contacts-panel-header {
  background: var(--background-color);
  color: #fff;
  padding: 0.9rem 1rem;
  border-bottom: 2px solid var(--main-color);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.contacts-panel-header-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.contacts-panel-header-main h5 {
  color: #fff;
  margin: 0;
}

.contacts-panel-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.contacts-panel-header-actions .btn {
  white-space: nowrap;
}

/* Naglowek panelu rozmowy jest ciemny w wiekszosci motywow (Aura nadpisuje go na
   jasny), a body .btn-outline-primary maluje tekst kolorem linku dobranym pod jasna
   powierzchnie — w Classic dawalo to 1,57:1. Kolor naglowka jest juz poprawny. */
.contacts-panel-header-actions .btn-outline-primary,
.contacts-panel-header-actions .btn-outline-secondary {
  color: inherit;
  border-color: currentColor;
}

.contacts-panel-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.contacts-panel-chat {
  flex: 0 0 58%;
  max-width: 58%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.contacts-panel-chat-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.contacts-panel-chat-header h6 {
  color: #1f2937;
  font-weight: 700;
}

.contacts-panel-chat-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 1rem;
  background: #f8fafc;
}

.contacts-chat-empty {
  color: #6b7280;
  text-align: center;
  padding: 1rem;
}

.contacts-message-row {
  display: flex;
  margin-bottom: 0.5rem;
  max-width: 88%;
}

.contacts-message-row-outgoing {
  margin-left: auto;
  justify-content: flex-end;
}

.contacts-message-row-info {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  justify-content: center;
}

.contacts-message-bubble {
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  line-height: 1.4;
  word-break: break-word;
}

.contacts-message-bubble-incoming {
  background: #ffffff;
  border: 1px solid #d6dee8;
  color: #1f2937;
  border-bottom-left-radius: 3px;
}

.contacts-message-bubble-outgoing {
  background: var(--main-color);
  color: #fff;
  border-bottom-right-radius: 3px;
}

/* Sent time and read state under a bubble; inherits the bubble colour, so it stays readable on both backgrounds. */
.contacts-message-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.15rem 0.6rem;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.2;
  opacity: 0.82;
  white-space: nowrap;
}

.contacts-message-bubble-incoming .contacts-message-meta {
  justify-content: flex-start;
  color: #6b7280;
}

.contacts-message-read-yes {
  font-weight: 600;
}

.contacts-message-info {
  color: #6b7280;
  font-size: 0.78rem;
  text-align: center;
  width: 100%;
}

.contacts-panel-details {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0.9rem;
  background: #ffffff;
  /* Wyspa jasnej powierzchni: tlo jest zahardkodowane na jasne w kazdym motywie,
     wiec tokeny tekstu tez musza byc jasnopowierzchniowe. Bez tego LeadYa Dark
     wpuszcza tu swoj jasny --ld-text (1,84:1), jasny --ld-danger-ink (2,00:1)
     i jasny --main-color (2,23:1). Ten sam kontrakt co blok .modal-content. */
  --ld-surface: #ffffff;
  --ld-text: #1a1d2e;
  --ld-text-muted: #566077;
  --ld-danger-ink: #a32d2d;
  --ld-success-ink: #0e7a4f;
  --ld-warning-ink: #935e06;
  --ld-info-ink: #1560ac;
  --main-color: #6c4cf1;
  color: var(--ld-text);
}

.contacts-details-card {
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  padding: 0.8rem;
  margin-bottom: 0.75rem;
  background: #fff;
}

.contacts-details-card h6 {
  color: #1f2937;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.contacts-details-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.83rem;
  margin-bottom: 0.42rem;
  color: #374151;
}

.contacts-details-row span:first-child {
  color: #6b7280;
}

.contacts-details-row a {
  color: var(--main-color);
  text-decoration: none;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-details-row a:hover {
  text-decoration: underline;
}

@media (max-width: 1199.98px) {
  .contacts-panel-body {
    flex-direction: column;
  }

  .contacts-panel-chat {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    min-height: 300px;
  }
}

@media (max-width: 991.98px) {
  .contacts-messenger-layout {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .contacts-messenger-panel {
    overflow: visible;
  }

  .contacts-messenger-sidebar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .contacts-messenger-list {
    max-height: 360px;
  }

  /* Bez kontaktów panel rozmowy powtarzałby komunikat z listy — na wąskim ekranie zostaje jeden */
  .contacts-messenger-card-empty .contacts-messenger-panel {
    display: none;
  }

  .contacts-messenger-card-empty .contacts-messenger-sidebar {
    border-bottom: none;
  }

  .contacts-panel-wrapper {
    height: auto;
    min-height: 0;
  }

  .contacts-panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .contacts-panel-header-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
}

/* Mobile ≤767px: messenger jak w mockupach aplikacji — kompaktowy nagłówek,
   większe zaokrąglenia i odstępy bąbelków, przyciski akcji na pełną szerokość,
   rozmowa przewija się wewnątrz zamiast spychać szczegóły poza ekran.
   Wyłącznie geometria (kolory zostają w motywach); desktop bez zmian. */
@media (max-width: 767.98px) {
  .contacts-panel-header {
    padding: 0.75rem;
    gap: 0.6rem;
  }

  .contacts-conversation-avatar-lg {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .contacts-panel-header-main h5 {
    font-size: 1rem;
  }

  .contacts-panel-header-actions {
    width: 100%;
  }

  .contacts-panel-header-actions .btn {
    flex: 1 1 auto;
    margin-bottom: 0 !important;
  }

  .contacts-panel-chat-body {
    padding: 0.75rem;
    max-height: 60vh;
  }

  .contacts-message-row {
    max-width: 85%;
    margin-bottom: 0.65rem;
  }

  .contacts-message-bubble {
    border-radius: 18px;
    padding: 0.6rem 0.8rem;
  }

  .contacts-message-bubble-incoming {
    border-bottom-left-radius: 6px;
  }

  .contacts-message-bubble-outgoing {
    border-bottom-right-radius: 6px;
  }

  .contacts-panel-details {
    padding: 0.75rem;
  }
}
/* ===== MODAL: Czyszczenie kontaktów ===== */
#contactsCleanupModal .modal-body .border {
  transition: background 0.15s;
}

#contactsCleanupModal .modal-body .border:hover {
  background: rgba(0,0,0,0.025);
}

/* ===== CONTACT DETAILS MODAL ===== */
#contactDetailsInfoModal .modal-dialog {
  max-width: 760px;
}

#contactDetailsInfoModal .contact-details-modal-header {
  border-radius: 0;
  background: var(--background-color) !important;
  border-bottom: 2px solid var(--main-color);
  border: none;
}

#contactDetailsInfoModal .contact-details-modal-header h5,
#contactDetailsInfoModal .contact-details-modal-header small,
#contactDetailsInfoModal .contact-details-modal-header i,
#contactDetailsInfoModal .contact-details-modal-header .close {
  color: var(--color-white) !important;
}

#contactDetailsInfoModal .modal-body {
  max-height: 80vh;
  overflow-y: auto;
  /* Tło i tekst bazują na parze background-color/color-white
     która w każdym motywie zapewnia kontrast */
  background: var(--color-black);
  color: var(--background-color);
}

#contactDetailsInfoModal .modal-body h6 {
  color: var(--main-color);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

#contactDetailsInfoModal .modal-body .text-muted {
  color: var(--background-color) !important;
  opacity: var(--modal-text-opacity, 0.65);
}

#contactDetailsInfoModal .modal-body .border-bottom {
  border-color: var(--background-color) !important;
  opacity: var(--modal-border-opacity, 0.3);
}

#contactDetailsInfoModal .modal-body .border-left {
  border-color: var(--background-color) !important;
  opacity: var(--modal-border-opacity, 0.3);
}

#contactDetailsInfoModal .modal-footer {
  background: var(--color-black);
  border-top: 1px solid var(--background-color);
}

#contactDetailsInfoModal .contact-details-conversation-body {
  scrollbar-width: thin;
  background: var(--conversation-bg, var(--background-color)) !important;
}

#contactDetailsInfoModal .contact-details-conversation-body::-webkit-scrollbar {
  width: 6px;
}

#contactDetailsInfoModal .contact-details-conversation-body::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 3px;
}

/* Dymki wiadomości — prawa kolumna w popupie */
#contactDetailsInfoModal .contact-details-right-col {
  background: var(--color-black) !important;
}

#contactDetailsInfoModal .contact-details-right-col .p-3.border-bottom {
  border-color: var(--main-color) !important;
  opacity: 1;
}

/* Desktop: 2-kolumnowy layout, modal szeroki */
.playground-heading {
  color: var(--ld-text, #14122B);
  font-weight: 700;
  line-height: 1.45;
}

@media (min-width: 992px) {
  #contactDetailsInfoModal .modal-dialog.modal-dialog-contact-details {
    max-width: 92vw;
    width: 92vw;
    margin: 1.75rem auto;
  }

  #contactDetailsInfoModal .modal-body {
    max-height: 78vh;
    overflow: hidden;
  }

  #contactDetailsInfoModal .modal-body > .d-flex {
    height: 78vh;
  }

  #contactDetailsInfoModal .contact-details-left-col {
    width: 44%;
    min-width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 78vh;
  }

  #contactDetailsInfoModal .contact-details-right-col {
    flex: 1 1 0;
    min-width: 0;
    max-height: 78vh;
  }
}

/* Mobile: lewa kolumna na całą szerokość, prawa schowana */
@media (max-width: 991.98px) {
  #contactDetailsInfoModal .modal-dialog.modal-dialog-contact-details {
    max-width: 98vw;
    width: 98vw;
    margin: 0.5rem auto;
  }

  #contactDetailsInfoModal .modal-body {
    max-height: 85vh;
    overflow-y: auto;
  }

  #contactDetailsInfoModal .contact-details-left-col {
    width: 100%;
  }
}


.app-header .app-header__content.header-mobile-open .no-mobile,
.partner-inactive-licence,
.partner-all-transfers,
.hide,
.hidden-post,
.custom-radio-btn input {
  display: none;
}

.app-header .app-header__content.header-mobile-open {
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #1a1d2e);
  border-bottom: 1px solid var(--ld-border, #e6e8f0);
}

/* Nazwa pakietu jako bursztynowy chip (akcent portfela z makiety) */
.app-header .app-header__content a.buy-bot-package {
  display: inline-flex;
  align-items: center;
  background: var(--ld-accent, #ffc24b);
  border-radius: 999px;
  color: var(--ld-accent-ink, #5c3d00);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.34rem 0.85rem;
  white-space: nowrap;
}

.app-header .app-header__content a.buy-bot-package:hover {
  filter: brightness(0.96);
  text-decoration: none;
}

.text-group-selected {
  color: var(--color-white);
}

.text-group-not-selected {
  color: var(--main-color);
}

.btn-low {
  background-color: #7e6bc9;
  border-color: #107269;
  color: var(--color-white);
}

.btn-low:hover {
  border-color: #808080;
  color: var(--color-black);
  background-color: #a895e1;
}

/* "Opcje zaawansowane" toggle: highlighted when any option inside differs from its default,
   so the collapsed section still signals customized settings even while collapsed.
   Fixed amber pair instead of --ld-accent/--ld-accent-ink: this is a state signal, not
   branding, and some themes pair accent with white (2.6:1 — unreadable as button text).
   The dot marker carries the state independently of color. */
.btn-low.advanced-options-modified {
  background-color: #ffc24b;
  border-color: #4a2f00;
  color: #4a2f00;
  font-weight: 600;
}

.btn-low.advanced-options-modified:hover {
  background-color: #f7b32f;
  border-color: #4a2f00;
  color: #4a2f00;
}

.btn-low.advanced-options-modified::after {
  content: "\25CF";
  font-size: 0.65em;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* A login task was just triggered: the button stays disabled for ~2 min while the VPS client
   picks the task up, so the user cannot fire duplicate logins and make the flow flicker. */
.loginBtn.is-login-cooldown,
.loginBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-medium {
  background-color: #cd853f;
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-medium:hover {
  border-color: #cd853f;
  color: var(--color-black);
  background-color: #eeeeee;
}

.upgrade-packet-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.upgrade-packet-select{
    text-align: center;
    width: 40%;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.upgrade-packet-header{
  margin-bottom: 0;
  margin-left: 1rem;
  color: #00E5FF;
}

.upgrade-packet-header:hover{
  cursor: pointer;
  text-decoration: underline;
}

.licence-table{
    border-top: 1px solid var(--main-color) !important;
}

/* Ten sam kontrakt co .btn-trash: przycisk nie ustawial koloru, wiec ikona brala
   #495057 z bootstrapowego .btn — na tle --color-black dawalo to 1,00:1 w Ruby
   (czarny na czarnym) i 2,03:1 w LeadYa Dark. */
.sales-post-button {
  background-color: var(--color-black);
  border: var(--color-black);
  color: var(--ld-text);
}

.element-selected {
  background-color: var(--main-color);
}

.eurobot-mark {
  background-color: transparent;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tutorial-text {
  width: 100%;
  color: black;
  background: white;
}

.loader {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  border: 5px solid #f3f3f3;
  border-top: 5px solid red;
  border-bottom: 5px solid red;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div.carousel-caption h4 span,
div.carousel-caption h5 span {
  padding: 3px 10px 6px 10px;
  border-radius: 7px;
  background: var(--color-black);
  color: var(--color-white);
}

div.page-title-heading {
  min-width: 220px;
}

.form-control-full-height.current-campaign-button {
  background-color: var(--brighter-main-color) !important;
}

.other-campaign-button {
  background-color: var(--color-black);
  color: var(--color-white);
}

.current-campaign-button .firstCampaignDiv,
.other-campaign-button .firstCampaignDiv {
  cursor: pointer;
}

.btn-simple {
  border: 1px solid;
  color: var(--color-white);
}

.highlighted {
  background-color: yellow;
}

.btn-xl {
  text-align: left;
  padding: 10px 20px;
  min-width: 250px;
}

.vertical-nav-menu li a.two_line_button {
  white-space: normal;
  height: 3.2rem;
  padding-right: 0.1rem;
  line-height: 1.5rem;
}

.custom-modal-size {
  max-width: 600px;
  margin: 1.75rem auto;
}

.iti__flag-box,
.iti__country-name {
  margin-right: 6px;
  color: black;
}
.iti--separate-dial-code .iti__selected-dial-code {
  margin-left: 6px;
  color: black;
}

.widget-content .widget-content-left .widget-subheading {
  opacity: 1 !important;
  font-size: 1rem;
}

i#openTechnicalAssistanceModal {
  float: left;
  cursor: pointer;
  color: inherit;
  opacity: 0.72;
}

i#openTechnicalAssistanceModal:hover {
  opacity: 1;
}

.btn.btn-lg.btn-xl,
.card-header,
.card-title,
h5 {
  font-size: 1rem;
}

.card-header,
.card-title {
  color: inherit;
  font-size: 1rem;
  text-align: center;
}

.selected-element-table {
  background-color: var(--main-color);
}

.campaign-name {
  margin: 0;
  color: var(--color-white);
  font-weight: bold;
}

.campaign-name:hover {
  text-decoration: underline;
  border-color: var(--main-color);
  cursor: pointer;
}

/* .text-center jest narzędziem wyrównania z Bootstrapa (main.css: text-align).
   Trzymany tu wcześniej biały tekst 1.2rem bold sprawiał, że każda wyśrodkowana
   komórka, etykieta i treść alertu na jasnej powierzchni była niewidoczna —
   pomiar na wszystkich motywach dawał 65/117 wystąpień poniżej 3:1 w ruby,
   academybot, panorama i unimetabot, 68/117 w LeadYa Dark i 117/117 przy braku
   pliku motywu. Motywy, w których tego nie widać (nova, aura, classic, sky),
   musiały ten kolor kasować własnym `!important` — to była łatka, nie design.
   Ciemne powierzchnie nie potrzebują tej reguły: `.card`, `.bg-dark` i toolbary
   ustawiają `color` u siebie, więc wyśrodkowany tekst dziedziczy biel z podłoża.
   Emfazę, która była zamierzona, przenosimy na konkretny element (#displayStep). */

/* Licznik kroku w kreatorze kampanii ("2 / 7") brał wielkość i grubość z
   globalnego .text-center. To jedyne miejsce, w którym ta emfaza była celowa —
   pozostałe widoki dostawały ją przypadkiem razem z wyrównaniem. */
#displayStep {
  font-weight: bold;
  font-size: 1.2rem;
}

.form#enableAutoTask .card {
  background-color: var(--color-black);
}

h5.buy-subscription span {
  text-decoration: line-through;
  color: black;
}

#accountsTable tr.toggleAccount:hover,
#accountsTable tr.toggleAccount:hover td a.white-link {
  background-color: var(--main-color);
  color: var(--color-black);
}

form,
div.card {
  border-radius: 0.6rem !important;
  padding: 1rem;
}

.card {
  background-color: var(--ld-surface);
  color: var(--ld-text);
}

div.form-group.saveParametersGroup {
  margin-bottom: 10px;
}

div.form-group.saveParametersGroup button,
#settings-btn {
  float: right;
}

.sales-post-icon-active {
  font-size: 1.8rem;
  color: #9c5006;
}

div.form-group.alertGroup {
  margin-bottom: 0;
}

.task-auto-form {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.modal-dialog {
  box-shadow: none;
}

.modal-content {
  box-shadow: 0 0.76875rem 2.4875rem rgba(52, 58, 64, 0.3),
    0 1.3375rem 1.70625rem rgba(52, 58, 64, 0.3),
    0 0.55rem 0.53125rem rgba(0, 0, 0, 0.05),
    0 0.225rem 0.4375rem rgba(52, 58, 64, 0.3);
}
/* ============================================================
   Kontrakt powierzchni modala — wspolny dla wszystkich popupow.

   main.css maluje .modal-content na sztywno na #fff, a .modal-header
   i .modal-footer na #f8f9fa, w KAZDYM motywie. Wnetrze popupu jest wiec
   zawsze jasna powierzchnia, niezaleznie od tego, jak ciemny jest motyw
   dookola. Bez tego bloku kazdy popup musial powtarzac ten sam zestaw
   tokenow (.ci-modal, .support-modal), a kazdy nowy popup zaczynal od zera
   i po cichu lapal jeden z dwoch bledow:
   - LeadYa Dark: jasny --ld-text ladowal na bialym tle (zmierzone 1,31:1);
   - Ruby: gola regula `form` malowala cialo popupu tokenem --color-black
     (#000000 w tym motywie) pod tekstem z --ld-text (zmierzone 1,21:1).
   Tokeny jasnej powierzchni deklarujemy wiec raz, tutaj, dla wszystkich
   modali. Popup z wlasna ciemna powierzchnia nadpisuje je bardziej
   szczegolowym selektorem.
   ============================================================ */
.modal-content {
  --ld-surface: #ffffff;
  --ld-bg: #f6f7fb;
  --ld-border: #e6e8f0;
  --ld-border-soft: #f0f1f5;
  --ld-text: #1a1d2e;
  --ld-text-muted: #566077;
  /* Tinty semantyczne bierzemy parami tlo+ink. Kontrakt tokenow mowi, ze
     w motywach jasnych sa identyczne — jedynym motywem, ktory liczy je dla
     ciemnego tla, jest LeadYa Dark, i to wlasnie jego modal ten blok prostuje.
     Tint marki zostaje motywu (branding), wiec go tu nie ustawiamy. */
  --ld-success-bg: #e7f8f0;
  --ld-success-ink: #0e7a4f;
  --ld-warning-bg: #fdf3e2;
  --ld-warning-ink: #935e06;
  --ld-danger-bg: #fcebeb;
  --ld-danger-ink: #a32d2d;
  --ld-info-bg: #e8f2fe;
  --ld-info-ink: #1560ac;
  color: var(--ld-text);
}

/* Formularz nie jest powierzchnia sam z siebie. Regula `form` nizej nadaje
   kazdemu formularzowi w panelu wyglad karty tokenami ROLI --color-black
   i --color-white, ktore w kazdym motywie znacza co innego (#ffffff
   w Classic/Nova/Aura/Sky, #5a189a w Dark, #000000 w Ruby). W modalu
   powierzchnia jest juz namalowana, wiec formularz ma ja tylko dziedziczyc —
   ten sam wzorzec co `.bg-dark form` w leadya-nova.css. */
.modal-content form {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
}


.name-theme {
  text-align: center;
  padding-top: 0.5rem;
}

.name-theme h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.theme {
  padding-bottom: 0.75rem;
  width: 100%;
  border-bottom: 1px solid var(--color-white);
}

.switch_theme,
.radio-inputs {
  text-align: center;
}

/* ============================================================
   Topbar wg design/user-dashboard.html: jasna powierzchnia
   + hairline zamiast cienia; kolory wyłącznie z tokenów --ld-*,
   więc każdy motyw renderuje go we własnych barwach i pozostaje
   czytelny (TURBO_BOT dostaje ciemny surface, reszta jasny).
   ============================================================ */
.app-header.header-shadow {
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #1a1d2e);
  border-bottom: 1px solid var(--ld-border, #e6e8f0);
  box-shadow: none;
}

.app-header.header-shadow .color-darkred {
  color: var(--ld-text, #1a1d2e);
}

/* Panel logo w tej samej powierzchni co topbar — jednolita, jasna rama
   od lewej do prawej (logo w wariancie na jasne tło per motyw);
   motywy z ciemnym nagłówkiem nadpisują tło u siebie */
.app-theme-white.fixed-header .app-header__logo {
  background: var(--ld-surface, #ffffff);
}

/* Przełączniki konta/kampanii jako chipy (pigułki jak w makiecie) */
.app-header .app-header-right > .btn-group {
  align-items: center;
}

.app-header .app-header-right .btn-group > .btn.btn-light {
  background: var(--ld-surface, #ffffff);
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 999px 0 0 999px;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.85rem;
}

.app-header .app-header-right .btn-group > .btn.dropdown-toggle-split {
  max-width: 50px;
  background: var(--ld-surface, #ffffff);
  border: 1px solid var(--ld-border, #e6e8f0);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  color: var(--ld-text-muted, #667085);
  /* Prawa połówka chipa (strzałka w dół) brała pionowy padding domyślnego
     .btn, a lewa .btn-xl — przy align-items: center na grupie kapsel był
     o 8 px niższy: na styku widać uskok, a strzałka siedziała nad środkiem
     pigułki. Rozciągnięcie do wysokości chipa + centrowanie flexem
     (vertical-align Bootstrapa nie działa na elemencie flex). */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-header .app-header-right .btn-group > .btn.btn-light:hover,
.app-header .app-header-right .btn-group > .btn.dropdown-toggle-split:hover {
  background: var(--ld-bg, #f6f7fb);
  color: var(--ld-ink, #14122b);
}

/* Ikony wewnątrz chipów dziedziczą kolor tekstu chipa
   (motywy kolorują .navbar-icon pod swoje dawne, ciemne nagłówki) */
.app-header .app-header-right .btn-group .navbar-icon {
  color: inherit;
}

/* Akcje nagłówka (zębatki, język, profil) — kolor z nagłówka,
   wyciszenie przez opacity, więc działa też na ciemnych motywach */
.app-header .btn-icon,
.app-header .language-a,
.app-header .app-header-right a.p-0.btn {
  color: inherit;
}

.app-header .btn-icon .metismenu-icon {
  color: inherit;
  opacity: 0.72;
}

.app-header .btn-icon:hover .metismenu-icon {
  opacity: 1;
}

/* Avatar jak w makiecie: mniejsze kółko z hairline */
.app-header .app-header-right img.rounded-circle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ld-border, #e6e8f0);
  object-fit: cover;
}

/* Fallback avatara bez zdjęcia profilowego: inicjały na tincie brandu */
.app-header .header-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 50%;
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Topbar desktop: chipy konta/kampanii mogą się kurczyć
   (ellipsis na nazwie), a język i opcje konta są przypięte i nigdy
   nie wypadają poza prawą krawędź przy węższych oknach ---------- */
@media (min-width: 992px) {
  .app-header .app-header__content,
  .app-header .app-header__content .app-header-right {
    min-width: 0;
  }

  .app-header .app-header-right > .btn-group {
    flex: 0 1 auto;
    min-width: 0;
  }

  .app-header .app-header-right .btn-group > .btn.btn-light {
    flex: 0 1 auto;
    min-width: 3.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-header .app-header-right .btn-group > .btn.btn-light .row {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .app-header .app-header-right .btn-group > .btn.dropdown-toggle-split,
  .app-header .app-header-right .btn-group .btn-icon,
  .app-header .app-header-right > .header- {
    flex: 0 0 auto;
  }
}

/* W ciasnym paśmie desktopowym odstępy mr-5 (3rem) między chipami
   marnują miejsce; !important wymagane, bo utility mr-5 też go używa */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .app-header .app-header-right > .btn-group {
    margin-right: 1rem !important;
  }
}

/* ---------- Topbar mobile: panel spod przycisku „⋮" jako pionowa karta.
   Nadpisuje pigułkę z main.css (border-radius 50px + overflow hidden,
   jeden rząd flex) oraz globalne mobilne pozycjonowanie .dropdown-menu
   (left/top/width z !important) — dropdowny w panelu są statyczne
   i rozwijają się w miejscu, na pełną szerokość. ---------- */
@media (max-width: 991.98px) {
  .app-header .app-header__content {
    height: auto;
    padding: 0;
    border-radius: 14px;
  }

  .app-header .app-header__content.header-mobile-open {
    top: 64px;
    background: var(--ld-surface, #ffffff);
    color: var(--ld-text, #1a1d2e);
    border: 1px solid var(--ld-border, #e6e8f0);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(20, 18, 43, 0.16);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }

  .app-header .app-header__content.header-mobile-open .app-header-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 12px;
    gap: 10px;
  }

  /* Pakiet i pomoc wracają do panelu (desktopowa klasa .no-mobile
     chowa je tylko w ciasnym pasku) */
  .app-header .app-header__content.header-mobile-open .no-mobile {
    display: block;
  }

  .app-header .app-header__content.header-mobile-open .header- {
    padding: 0;
  }

  /* Wrappery widgetów (pakiet, język, profil) na pełną szerokość,
     żeby statyczne dropdowny nie zwijały się do szerokości rodzica */
  .app-header .app-header__content.header-mobile-open .widget-content,
  .app-header .app-header__content.header-mobile-open .widget-content-wrapper,
  .app-header .app-header__content.header-mobile-open .widget-content-left,
  .app-header .app-header__content.header-mobile-open .widget-subheading {
    width: 100%;
  }

  /* Grupy przełączników na pełną szerokość; wrap pozwala statycznemu
     dropdownowi zająć własny wiersz pod przyciskami */
  .app-header .app-header__content.header-mobile-open .btn-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 !important;
  }

  .app-header .app-header__content.header-mobile-open .btn-group > .btn.btn-light {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    text-align: left;
  }

  .app-header .app-header__content.header-mobile-open .dropdown-menu {
    position: static !important;
    float: none;
    flex: 1 1 100%;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 4px 0 0;
    border-radius: 10px;
    max-height: 45vh;
    overflow-y: auto;
  }
}

#checkout-form,
#checkout-subscription-form {
  background-color: #eeeeee;
}

.color-darkred {
  color: #0e0117;
}

.app-sidebar__heading {
  color: var(--color-white);
}

.selected-element {
  background: var(--brighter-main-color) !important;
  color: #5a0004;
}

.vertical-nav-menu li a.mm-active {
  color: var(--color-white);
  background: var(--color-grey);
}

.bg-dark,
.btn-dark,
.btn-dark:hover {
  background-color: var(--color-black) !important;
}

.bg-dark,
.btn-dark {
    color: var(--main-color);
    border-color: var(--main-color);
 }

 .btn-dark:hover {
      color: var(--background-color);
      border-color: var(--background-color);
 }

.btn-warning {
  background: var(--main-color);
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-warning:hover {
  background: var(--main-color);
  color: var(--color-white);
}

.btn-space {
  margin-left: 10px;
}

.bg-dark input {
  background-color: var(--color-white);
}

.switch_theme:hover,
.switch_theme label {
  cursor: pointer;
}

.switch {
  position: relative;
  display: inline-block;
  width: 2.109375rem;
  height: 1.1875rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

form.mainIntroductionForm label {
  float: left;
}

form.mainIntroductionForm {
  background-color: var(--background-color);
  color: #ebad49;
  box-shadow: 0 0 0 #eee;
}

.log-warning,
.customer-add,
.customer-remove,
.wallet-label {
  font-size: 2rem;
}

/* Ten sam kontrakt co .add-user: literały `green`/`red` nie mają zapasu na
   fioletowej powierzchni LeadYa Dark (2,82:1 i 2,64:1). */
.customer-add {
  color: var(--ld-success-ink, #0e7a4f);
}

.customer-remove {
  color: var(--ld-danger, #f04438);
}

/* Popup "Potrzebuje pomocy": duzy modal z graficznymi kafelkami form pomocy.
   main.css maluje .modal-content na sztywno na bialo w kazdym motywie, wiec caly
   popup dostaje tokeny jasnej powierzchni (wzorzec .ci-modal); akcent hover/focus
   zostaje w kolorze marki biezacego motywu. */
.support-modal {
  --ld-surface: #ffffff;
  --ld-bg: #f6f7fb;
  --ld-border: #e6e8f0;
  --ld-text: #1a1d2e;
  --ld-text-muted: #667085;
}

@media (min-width: 768px) {
  .support-modal {
    max-width: min(56rem, calc(100vw - 3rem));
  }
}

/* Naglowek modala ma w main.css na sztywno jasne tlo - tytul bierze jawny ciemny
   kolor zamiast --ld-text (jasny w turbobocie), jak .terms-update__title. */
.support-modal__title {
  color: #14122b;
  font-weight: 700;
}

/* Siatka 6-kolumnowa: gorny rzad to 3 kafelki po 2 kolumny (bezposrednie akcje
   wsparcia), dolny rzad to 2 kafelki po 3 kolumny (materialy i spolecznosc). */
.support-tiles {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.support-tile {
  background: var(--ld-bg);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius, 12px);
  color: var(--ld-text);
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.support-tile:hover,
.support-tile:focus-visible {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 10px 28px rgba(20, 18, 43, 0.14);
  color: var(--ld-text);
  outline: none;
  text-decoration: none;
  transform: translateY(-2px);
}

.support-tile:focus-visible {
  box-shadow: var(--ld-focus-ring, 0 0 0 0.2rem rgba(108, 76, 241, 0.2)),
    0 10px 28px rgba(20, 18, 43, 0.14);
}

.support-tile__media {
  display: block;
  width: 100%;
}

.support-tile__media img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.support-tile__body {
  display: block;
  padding: 0.7rem 0.9rem 0.85rem;
}

.support-tile__title {
  color: var(--ld-text);
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.support-tile__description {
  color: var(--ld-text-muted);
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  margin-top: 0.25rem;
}

/* Dolny rzad (Akademia, Spolecznosc): szersze kafelki z grafika z boku,
   jak .campaign-choice--secondary w kreatorze kampanii. */
.support-tile--wide {
  display: grid;
  grid-column: span 3;
  grid-template-columns: minmax(7.5rem, 40%) minmax(0, 1fr);
}

.support-tile--wide .support-tile__media {
  height: 100%;
}

.support-tile--wide .support-tile__media img {
  aspect-ratio: auto;
  height: 100%;
}

.support-tile--wide .support-tile__body {
  align-self: center;
}

/* Na mobile popup pomocy jest pelnoekranowy, kafelki w jednej kolumnie. */
@media (max-width: 767.98px) {
  .support-modal {
    margin: 0;
    max-width: none;
    min-height: 100%;
    width: 100%;
  }

  .support-modal .modal-content {
    border: 0;
    border-radius: 0;
    min-height: 100vh;
  }

  .support-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-tile,
  .support-tile--wide {
    grid-column: auto;
  }

  .support-tile--wide {
    display: flex;
  }

  .support-tile--wide .support-tile__media {
    height: auto;
  }

  .support-tile--wide .support-tile__media img {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .support-tile--wide .support-tile__body {
    align-self: auto;
  }
}

.log-warning {
  color: var(--main-color);
  font-weight: bold;
}

.card-body-header {
  background-color: var(--color-black);
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
  background-color: #ccc;
}

.slider:before {
  background-color: var(--color-white);
  position: absolute;
  content: "";
  height: 0.8125rem;
  width: 0.8125rem;
  left: 0.1875rem;
  bottom: 0.1875rem;
  transition: 0.4s;
  right: 0;
}

.slider.round {
  border-radius: 1.1875rem;
}

.slider.round:before {
  border-radius: 50%;
}

.button-theme {
  text-align: center;
  padding: 0.5rem 0 1.25rem;
}

input:checked + .slider {
  background-color: green;
}

input:focus + .slider {
  box-shadow: 0 0 0.0625rem green;
}

input:checked + .slider:before {
  transform: translateX(0.9rem);
}

.custom-radio-btn {
  width: 28px;
  height: 28px;
  margin: 0.5rem auto 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3.3px solid var(--main-color);
}

.custom-radio-btn input:checked + .circle {
  display: inline-block;
}

.custom-radio-btn .circle {
  background-color: var(--main-color);
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  display: none;
}

.reg-radio-input:checked + .packet-top {
  background-color: var(--packet-top-checked-color, var(--main-color, #6c4cf1));
  color: var(--packet-top-checked-text-color, #ffffff);
}

label:has(.reg-radio-input:checked) h3 {
  font-weight: bold;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  align-items: center;
  justify-content: center;
}

.wallet {
  text-align: right;
  font-size: 1.2rem;
}

.wallet-text {
  color: var(--main-color);
  font-weight: bold;
}

.link-back-to-accounts {
  cursor: pointer;
  text-decoration: underline;
  font-size: 3rem;
}

.action {
  color: var(--color-white);
}

.action:hover {
  color: var(--color-black);
  text-decoration: none;
}

.break {
  color: #d61818;
}

.break:hover {
  color: #b40202;
  text-decoration: none;
}

.page-title-subheading .wallet-text {
  font-size: 1.2rem;
}

.dropdown-menu {
  border-radius: 30px;
}

.buttons-stage {
  width: 50%;
}

.buttons-wrapper {
  display: flex;
  justify-content: space-between;
}

.header-packet-items {
  display: flex;
  align-items: center;
}

.custom-control-input-bot:checked ~ .custom-control-label::before {
  border-color: var(--main-color) !important;
  background-color: var(--main-color) !important;
}

.custom-control-input-bot:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #bb3838 !important;
}

.custom-control-input-bot:not(:disabled):active
  ~ .custom-control-label::before {
  background-color: #bb7070 !important;
  border-color: #bb7070 !important;
}

.background-form {
  background-color: inherit;
  box-shadow: none;
}

.theme-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 1.25rem;
  padding: 1.25rem;
}

.campaigns-btn-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.2rem;
}

.mm-active .selected-element > i {
  color: var(--color-black);
}

.custom-control-input-bot:focus ~ .custom-control-label::before {
  border-color: var(--main-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(187, 0, 0) !important;
}

.pagination {
  color: var(--main-color);
}

/* Przycisk nie ustawiał własnego koloru, więc brał #495057 z bootstrapowego .btn —
   na tle --color-black (biel w NEW_LEADYA/Aura/Classic/Sky, #5a189a w LeadYa Dark,
   czerń w Ruby) dawało to 1,20:1 w LeadYa Dark. Atrament powierzchni trzyma
   kontrast w pięciu motywach; Ruby maluje ten przycisk na czarno i nadpisuje
   kolor u siebie. */
.btn-trash {
  background: var(--color-black);
  color: var(--ld-text);
}

.btn-trash:hover {
  background: var(--background-color);
  border-color: var(--color-black);
}

.bg-mean-fruit {
  background-image: linear-gradient(
    120deg,
    var(--main-color) 0%,
    var(--main-color) 100%
  ) !important;
}

.btn-turn-campaign {
  background-color: var(--cash-btn-color);
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-turn-campaign:hover {
  color: var(--color-black);
  background-color: #dcdcdc;
}

.economical-buttons {
  padding: 1rem;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

/* Tu stał globalny .btn-success przerobiony na wielkie CTA portfela: 1.2rem,
   padding 0.8rem i tło z --cash-btn-color. Ta zmienna nie istnieje w academybot,
   panorama i unimetabot ani przy braku pliku motywu, więc `background-color`
   był nieprawidłowy i przycisk stawał się przezroczysty — biały tekst na jasnej
   karcie. Każdy zwykły .btn-success (także .btn-sm i .btn-block) dostawał przy
   okazji rozmiar CTA. Wygląd CTA portfela niesie #openExtendWalletModal poniżej,
   więc styl kasujemy tutaj, a nie w miejscu, gdzie jest naprawdę potrzebny.

   Zostaje sam kolor, bo bez niego przycisk spada na zieleń ArchitectUI (#3ac47d),
   która z białym tekstem daje 2,24:1. Ciemna zieleń --ld-success-btn daje 5,36:1,
   a jednocześnie jest najbliższa temu, co te motywy miały pod legacy CTA — tam też
   tło było ciemne. Motywy z własnym .btn-success (nova, aura, academybot, panorama)
   nadpisują to poniżej w kaskadzie. */
.btn-success {
  background-color: var(--ld-success-btn, #0e7a4f);
  border-color: var(--ld-success-btn, #0e7a4f);
  color: #fff;
}

.btn-navigate-left, .btn-navigate-right {
    background-color: var(--color-white);
    border-color: var(--cash-btn-color);
}
.btn-navigate-left a, .btn-navigate-left .metismenu-icon, .btn-navigate-right a, .btn-navigate-right .metismenu-icon {
    color: var(--cash-btn-color);
}

/* Reguła miała dwa warianty bez .btn-navigate-*, które celowały w każdy
   .btn-success z klasą .active. Żaden szablon nie łączy tych dwóch klas, więc
   ten wariant był martwy — zostawiamy tylko selektory nawigacyjne, dla których
   deklaracja powstała. */
.btn-success.btn-navigate-left:not(:disabled):not(.disabled):active:focus,
.btn-success.btn-navigate-right:not(:disabled):not(.disabled):active:focus
{
    background-color: var(--color-white);
}

/* Legacy .btn-success:hover ustawiał color: var(--color-black) na tle
   var(--color-white) — czyli kolory, których nazwy nic nie mówią o jasności:
   w nova i classic obie zmienne są białe. Nie widać tego tylko dlatego, że
   każdy motyw z jasną powierzchnią nadpisuje ten hover u siebie (nova #0ea25c,
   classic własnym kolorem tekstu). Globalny hover, który wszyscy muszą kasować,
   nie ma czego pilnować — zostawiamy hover Bootstrapowi i motywom. */

#openExtendWalletModal {
  font-size: 1rem;
  padding: 0.6rem;
  width: 12rem;
  background-color: var(--ld-success-btn);
  border-color: var(--ld-success-btn);
  color: #fff;
}

#openExtendWalletModal:hover {
  color: #fff;
  background-color: #09643f;
  border-color: #09643f;
}

.input[type="file"] {
  border-radius: 0.25rem;
  background-color: var(--main-color);
  color: var(--color-white);
}

input#complaintFiles[type="file"] {
  background-color: #d5fbf6;
}

.mt-0 fsize-2 text-warning {
  color: var(--color-white);
}

i.metismenu-icon {
  font-size: 1.9rem;
  color: var(--brighter-main-color);
  font-weight: bold;
  opacity: 0.9;
}

/* Ikona wewnątrz kontrolki bierze kolor kontrolki, nie globalny akcent motywu.
   --brighter-main-color to jasny akcent dobrany pod dawne ciemne nagłówki
   (NEW_LEADYA i Aura #ffc24b, Classic #ffe9b1, Sky #e0f3ff), więc na jasnym
   przycisku ikona znikała: zębatka kampanii na .btn-medium (tło --ld-warning-bg
   #fdf3e2) miała 1,41:1 w NEW_LEADYA i 1,20:1 w Classic, lupa w .btn-trash na
   białym 1,53:1. Kolor samej kontrolki jest już dobrany do jej tła
   (.btn-medium: --ld-warning-ink na --ld-warning-bg, 5,6:1), więc dziedziczenie
   naprawia wszystkie motywy naraz. .btn-navigate-* zostaje przy własnym
   kontrakcie --cash-btn-color. */
.btn:not(.btn-navigate-left):not(.btn-navigate-right) i.metismenu-icon,
button:not(.btn-navigate-left):not(.btn-navigate-right) i.metismenu-icon,
.app-header i.metismenu-icon {
  color: inherit;
}

.btn-light {
  background-color: var(--brighter-main-color);
  color: var(--background-color);
}

.btn-light:hover a {
  border-color: var(--brighter-main-color);
  color: var(--color-black);
}

.btn-light:hover {
  font-weight: bold;
  border-color: var(--brighter-main-color);
}

.nav-item .nav-link {
  color: var(--color-black);
}

.vertical-nav-menu i.metismenu-state-icon,
.vertical-nav-menu i.metismenu-icon {
  font-size: 1.5rem;
  font-weight: bold;
  opacity: 0.9;
  color: var(--brighter-main-color);
}

.text-danger {
  color: var(--main-color) !important;
  font-size: 0.88rem;
}

.widget-content-left .ml-3 .header-user-info,
.text-danger {
  font-size: 0.88rem;
}

.instruction,
.instruction-system {
  padding: 1rem;
  border-radius: 0.25rem;
}

.system {
  color: var(--main-color);
  font-weight: bold;
}

.link-download {
  color: var(--main-color);
}

.link-download:hover {
  color: #ffae00;
  text-decoration: none;
}

.instruction {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 1rem;
  border-radius: 0.25rem;
}

.instruction-system {
  background-color: var(--background-color);
  color: var(#a68ddf);
  border-radius: 0.25rem;
  padding: 1rem;
}

.textarea-post {
  width: 37rem;
  height: 12rem;
}

.app-page-title .page-title-subheading {
  font-size: 1.4rem;
}

.radio-reg-wrapper {
  width: 40%;
  border-radius: 25px;
  border: 1px solid #e1e1e1;
}

.start-plan-intro {
  max-width: 680px;
  margin: 0.5rem auto 0;
  line-height: 1.5;
}

.start-standard-plan {
  border: 2px solid var(--ld-accent, #6c4cf1);
  box-shadow: 0 8px 28px rgba(50, 28, 92, 0.18);
}

.start-recommended-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--ld-accent, #6c4cf1);
  color: var(--ld-accent-ink, #ffffff);
  font-size: 0.8rem;
  font-weight: 700;
}

.start-free-plan .packet-info {
  padding: 0.25rem 1rem 1rem;
}

.start-free-plan .packet-info ul {
  padding-left: 1.25rem;
}

.start-upgrade-current,
.start-upgrade-options {
  background: #fff;
  border: 1px solid #e6e1f5;
  border-radius: 18px;
  padding: 24px;
  min-width: min(100%, 300px);
  flex: 1;
  max-width: 560px;
  box-shadow: 0 10px 32px rgba(36, 24, 73, .07);
  text-align: left;
}
.start-upgrade-current { background: #f8f6fc; }
.start-upgrade-arrow { align-self: center; font-size: 2rem; color: #7847cc; }
.start-upgrade-options { border-color: #9d6fee; }
.start-upgrade-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #eee9f6;
}
.start-upgrade-option:first-of-type { margin-top: 12px; }
.start-upgrade-option h3 { font-size: 1.2rem; margin-bottom: 6px; }
.start-upgrade-option p { margin-bottom: 4px; }
@media (max-width: 760px) {
  .start-upgrade-arrow { transform: rotate(90deg); width: 100%; text-align: center; }
  .start-upgrade-option { align-items: flex-start; flex-direction: column; }
}

.radio-reg-wrapper:hover {
  -webkit-box-shadow: 0px 0px 40px 1px rgba(134, 74, 249, 1);
  -moz-box-shadow: 0px 0px 40px 1px rgba(134, 74, 249, 1);
  box-shadow: 0px 0px 40px 1px rgba(134, 74, 249, 1);
}

.reg-error {
  color: red;
}

.radio-reg-wrapper label {
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.packet-top {
  background-color: var(--packet-top-color, #e6e8f0);
  color: var(--packet-top-text-color, inherit);
  text-align: center;
  border-radius: 25px 25px 0 0;
  padding-bottom: 10px;
  padding-top: 10px;
}

.packet-info ul li {
  padding: 5px;
}

/* Kolor tekstu kroku rejestracji dobrany per motyw — karta /start leży na
   .bg-dark, którego tło bywa jasne (leadya, jamesbot) lub ciemne (pozostałe) */
.card-reg {
  color: var(--reg-text-color, inherit);
}

/* Wyróżnione pozycje pakietu (inline background: var(--brighter-main-color)) —
   kolor tekstu musi kontrastować z akcentem motywu, nie z tłem karty */
.packet-info li[style*="background-color: var(--brighter-main-color)"] {
  color: var(--packet-highlight-text-color, var(--ld-accent-ink, inherit)) !important;
  border-radius: 3px;
}

.buttons-reg-stage {
  width: 100%;
  text-align: center;
}

.reg-btn {
  font-size: 1.4rem;
  width: 10em;
}

.input-wrapper {
  margin-bottom: 1.6rem;
}

.promotion-btn {
  text-align: center;
}

.promotion-btn:hover {
  color: #0000e3;
  text-decoration: underline;
  cursor: pointer;
}

.type-of-person {
  display: flex;
  justify-content: center;
}

.person-info {
  width: 100%;
}

.type-of-person-radio {
  display: none;
}

.reg-radio-stage {
  margin-bottom: 1.6rem;
  display: flex;
  justify-content: space-around;
}

.btn-current-campaign{
  font-size: 1.2rem;
  padding: 0.8rem
}

.campaign-description {
  display: flex;
  align-items: center;
  margin: 0;
}

.text-wrapper:hover .campaign-name,
.text-wrapper:hover .campaign-description {
  text-decoration: underline;
  cursor: pointer;
}

.profile-wrapper{
  display: flex;
  margin-top: 1rem;
}

.search-wrapper{
  display: flex;
  width: 50%;
  align-items: center;
}

.profile-btn-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 50%;
}

.profile-btn-wrapper a:hover{
  text-decoration: underline;
}

#search-button{
  height: 80%;
  display: flex;
  align-items: center;
}

#searchInput{
  width: 100%;
}

.modal-btn-wrapper{
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.upgrade-packet-table{
    text-align: center;
    border-top: none !important;
    padding-bottom: 2rem !important;
}

.contact-btn-wrapper{
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.facebook-option{
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: bold;
  gap: 1rem;
  padding: 5px;
}

.facebook-option-btn{
  background-color: var(--main-color);
  border: 1px solid  var(--main-color);
  border-radius: 5px;
  margin-bottom: 0.5rem;
  padding: 0;
}
.facebook-option-btn.facebook-option-btn-most-important{
    background-color: var(--cash-btn-color)
}

.facebook-option-btn:hover{
  background-color: var(--color-black);
}

.btn-close{
    background-color: var(--cash-btn-color);
    color: var(--color-white);
}

.btn-close:hover{
    background-color: var(--main-color);
    color: var(--color-white);
}

.facebook-option:hover,
.facebook-option:hover  i{
  color: var(--background-color);
  text-decoration: none;
}

.facebook-main-page-actions {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 0.75rem;
}

.facebook-main-page-actions--image-only {
  max-width: 1320px;
}

.facebook-main-page-actions__hero,
.facebook-main-page-actions__grid {
  display: grid;
  gap: 0.95rem;
}

.facebook-main-page-actions__hero {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 0.95rem;
}

.facebook-main-page-actions__grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.facebook-option-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 0.95rem;
  min-height: 116px;
  padding: 1rem 1rem 1rem 1.05rem;
  border: 1px solid rgba(59, 52, 134, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 255, 0.96)),
    linear-gradient(135deg, rgba(134, 74, 249, 0.08), rgba(59, 52, 134, 0.02));
  box-shadow: 0 16px 30px rgba(51, 41, 65, 0.08);
  text-decoration: none !important;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  isolation: isolate;
}

.facebook-option-card::before {
  content: "";
  position: absolute;
  inset: auto -22px -26px auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 74, 249, 0.12) 0%, rgba(134, 74, 249, 0) 74%);
  pointer-events: none;
}

.facebook-option-card:hover,
.facebook-option-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 22px 36px rgba(51, 41, 65, 0.12);
  border-color: rgba(134, 74, 249, 0.36);
  text-decoration: none;
}

.facebook-option-card--hero {
  grid-template-columns: 56px minmax(0, 1fr) 92px 16px;
  min-height: 128px;
  padding: 1.15rem 1.2rem 1.15rem 1.15rem;
  color: var(--color-white) !important;
  background: linear-gradient(135deg, var(--main-color), var(--ld-ink));
  border-color: rgba(59, 52, 134, 0.18);
  box-shadow: 0 22px 42px rgba(59, 52, 134, 0.18);
}

.facebook-option-card--hero::before {
  background: radial-gradient(circle, rgba(255, 233, 177, 0.34) 0%, rgba(255, 233, 177, 0) 72%);
}

.facebook-option-card--messages {
  background: linear-gradient(135deg, var(--ld-ink), var(--cash-btn-color));
}

.facebook-option-card--groups {
  background: linear-gradient(135deg, var(--cash-btn-color), #4b3d62);
}

.facebook-option-card__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(134, 74, 249, 0.16), rgba(59, 52, 134, 0.08));
  color: var(--ld-ink);
  box-shadow: inset 0 0 0 1px rgba(59, 52, 134, 0.05);
}

.facebook-option-card--hero .facebook-option-card__icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.facebook-option-card__icon i {
  margin: 0;
  font-size: 1.3rem;
}

/* Tytuł i ikona kafelka leżą na jasnym tle karty, więc potrzebują ciemnego
   atramentu. Nie używaj tu --background-color: ta legacy zmienna opisuje rolę
   w motywie, a nie kolor — w LeadYa Ruby ma wartość #eeeeee i tekst znikał.
   --ld-ink jest ciemny w każdym motywie. */
.facebook-option-card__title {
  position: relative;
  z-index: 1;
  color: var(--ld-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
}

.facebook-option-card--hero .facebook-option-card__title {
  color: var(--color-white);
  font-size: 0.99rem;
}

.facebook-option-card__art {
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: center;
  width: 72px;
  height: 72px;
  max-width: 100%;
  padding: 0.55rem;
  box-sizing: border-box;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 239, 255, 0.92));
  border: 1px solid rgba(134, 74, 249, 0.12);
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(59, 52, 134, 0.1));
  overflow: hidden;
}

.facebook-option-card--hero .facebook-option-card__art {
  width: 92px;
  height: 92px;
  padding: 0.7rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 239, 255, 0.88));
  border-color: rgba(255, 255, 255, 0.18);
  filter: drop-shadow(0 12px 20px rgba(23, 18, 30, 0.16));
}

.facebook-option-card__arrow {
  position: relative;
  z-index: 1;
  color: rgba(59, 52, 134, 0.45);
  font-size: 1rem;
  transition: transform 0.18s ease, color 0.18s ease;
}

.facebook-option-card--hero .facebook-option-card__arrow {
  color: rgba(255, 255, 255, 0.82);
}

.facebook-option-card:hover .facebook-option-card__arrow,
.facebook-option-card:focus .facebook-option-card__arrow {
  transform: translateX(3px);
  color: var(--main-color);
}

.facebook-option-card--hero:hover .facebook-option-card__arrow,
.facebook-option-card--hero:focus .facebook-option-card__arrow {
  color: var(--brighter-main-color);
}

.facebook-option-card.is-active {
  border-color: rgba(59, 52, 134, 0.42);
  box-shadow: 0 22px 38px rgba(59, 52, 134, 0.14);
}

.facebook-option-card.is-active:not(.facebook-option-card--hero) {
  background:
    linear-gradient(135deg, rgba(255, 233, 177, 0.9), rgba(255, 255, 255, 0.98)),
    linear-gradient(135deg, rgba(134, 74, 249, 0.08), rgba(59, 52, 134, 0.02));
}

.facebook-option-card.is-active .facebook-option-card__icon {
  background: linear-gradient(135deg, rgba(59, 52, 134, 0.18), rgba(134, 74, 249, 0.12));
}

.facebook-option-card.is-active .facebook-option-card__art {
  border-color: rgba(134, 74, 249, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 219, 0.92));
}

.facebook-option-card.is-active .facebook-option-card__title {
  color: var(--cash-btn-color);
}

.facebook-option-card.is-active.facebook-option-card--hero {
  border-color: rgba(255, 233, 177, 0.72);
  box-shadow: 0 24px 42px rgba(51, 41, 65, 0.24);
}

.facebook-main-page-actions--image-only .facebook-main-page-actions__hero {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.facebook-main-page-actions--image-only .facebook-main-page-actions__grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.facebook-main-page-actions--image-only .facebook-option-card {
  grid-template-columns: minmax(0, 1fr) 72px;
}

.facebook-main-page-actions--image-only .facebook-option-card--hero {
  grid-template-columns: minmax(0, 1fr) 88px 16px;
}

.facebook-main-page-actions--image-only .facebook-option-card__icon {
  display: none;
}

.facebook-main-page-actions--image-only .facebook-option-card__title {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.28;
  max-height: 2.56em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.facebook-main-page-actions--image-only .facebook-option-card__art {
  width: 68px;
  height: 68px;
}

.facebook-main-page-actions--image-only .facebook-option-card--hero .facebook-option-card__art {
  width: 88px;
  height: 88px;
}

@media screen and (max-width: 991px) {
  .facebook-main-page-actions__hero,
  .facebook-main-page-actions__grid {
    grid-template-columns: 1fr;
  }

  .facebook-option-card {
    grid-template-columns: 48px minmax(0, 1fr) 64px;
    min-height: 104px;
  }

  .facebook-option-card--hero {
    grid-template-columns: 48px minmax(0, 1fr) 72px 16px;
    min-height: 114px;
  }

  .facebook-option-card__art {
    width: 64px;
    height: 64px;
    padding: 0.45rem;
  }

  .facebook-option-card--hero .facebook-option-card__art {
    width: 72px;
    height: 72px;
    padding: 0.55rem;
  }

  .facebook-main-page-actions--image-only .facebook-option-card {
    grid-template-columns: minmax(0, 1fr) 62px;
  }

  .facebook-main-page-actions--image-only .facebook-option-card--hero {
    grid-template-columns: minmax(0, 1fr) 74px 16px;
  }

  .facebook-main-page-actions--image-only .facebook-option-card__art {
    width: 62px;
    height: 62px;
  }

  .facebook-main-page-actions--image-only .facebook-option-card--hero .facebook-option-card__art {
    width: 74px;
    height: 74px;
  }
}

.selected-offer{
  background-color: var(--brighter-main-color) !important;
}

.without-client-wrapper{
    display:flex;
    flex-direction: column;
    align-items: center;
}

.without-client-link{
    width: 100%;
    padding: 0.8rem;
    height: 100%;
    color: var(--color-white);
}

.reg-wrapper-inner{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.person-info ul{
  padding-inline-start: 25px;
}
.person-info ul>li:first-child{
  padding-bottom: 1rem;
}

.partner-info-headline{
  width: 100%;
  text-align: center;
  padding: 2rem;

}

@media screen and (max-width: 1318px) {
  .headline-reg {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 1035px) {
  .reg-btn {
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .headline-reg {
    font-size: 1rem;
  }

  .btn-current-campaign{
    width: 100%;
    margin-top: 2px;
    margin-bottom: 10px;
  }

  .economical-buttons{
    flex-direction: column;
  }

  .app-page-title {
    padding: 15px;
    margin: -15px -15px 15px;
  }

  .closed-sidebar.fixed-sidebar .app-main__outer {
    height: 90vh;
  }

  .app-main-settings {
    height: unset;
  }

  .buttons-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
  }

  .buttons-stage {
    width: 100%;
    margin-right: 0 !important;
  }

  .page-title-wrapper {
    height: 40%;
  }

  /* Mobilna wersja tego samego CTA: rozciągała na całą szerokość i powiększała
     do 1.4rem każdy .btn-success, także małe przyciski w tabelach i modalach.
     Zostaje wyłącznie na #openExtendWalletModal, dla którego była pisana. */

  #openExtendWalletModal {
    width: 100%;
    padding: 1rem;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    margin-right: 0 !important;
  }

  .btn-link {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    margin-right: 0 !important;
  }

  #setting-btn {
    float: none;
  }

  .wallet-label {
    font-size: 2rem;
  }

  .wallet {
    text-align: center;
  }

  .page-title-subheading .wallet-text {
    font-size: 1.2rem;
  }

  .app-page-title .page-title-subheading {
    font-size: 2rem;
  }

  #complaintFiles {
    padding: 0.1rem;
  }

  .btn-turn-campaign,
  #openSettingsForCampaign,
  .btn-space {
    padding: 0.7rem;
  }

  .popover,
  .dropdown-menu {
    left: 60% !important;
    width: 33% !important;
    min-width: 136px !important;
    top: 253px !important;
  }
  .header-user-info .dropdown-menu.dropdown-menu-right.language-menu {
    top: 286px !important;
  }

  .header {
    color: var(--color-white);
  }

  .layout-background {
    background: #e9ecef;
  }

  .btn-turn-campaign {
    margin-right: 0 !important;
  }

  .form-control-full-height {
    width: 100%;
    flex-direction: column;
  }

  .campaign-btn-stage {
    margin-top: 1rem;
    flex-direction: column;
    width: 80%;
    align-items: stretch;
  }

  .campaign-btn-stage__group {
    width: 100%;
    justify-content: center;
  }

  .campaign-name {
    text-align: center;
  }

  .btn-space,
  .btn-trash {
    margin-left: 0;
    margin-top: 6px;
  }
}

@media screen and (max-width: 815px) {
  #addOfferModal {
    margin-top: 1rem;
  }

  .reg-btn {
    width: 100%;
  }

}

@media screen and (max-width: 530px) {
  .reg-wrapper-inner{
    padding: 0 !important;
  }

  .headline-reg{
    font-size: 0.9rem;
  }
}

@media (max-width: 450px){
  #offerCreatingForm{
    max-width: 100%;
    flex: 0 0 100%;
  }

  .offer-container{
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 380px) {
  .reg-radio-stage{
    flex-direction: column;
  }

  .radio-reg-wrapper{
    width: 100%;
  }

  #standard, #business, #physical-person{
    margin-bottom: 2rem;
  }

  .headline-reg{
    font-size: 1.4rem;
  }

  .person-info{
    font-size: 1.2rem;
  }
}

@media (min-width: 1200px) {
  .col-xl-4 input,
  .col-xl-4 textarea {
    max-width: 80%;
  }

  .popover,
  .dropdown-menu {
    top: 7px !important;
  }
}

@media (min-width: 1500px) {
  .col-xl-4 input,
  .col-xl-4 textarea {
    max-width: 90%;
  }
}

@media (min-width: 1600px) {
  .col-xl-4 input,
  .col-xl-4 textarea {
    max-width: 100%;
  }

  .person-info{
    font-size: 1.2rem;
  }
}
.disabled-feature {
  cursor: not-allowed;
}

.btn-navigate-right, .btn-navigate-left {
  min-width: 100%;
}

.btn-navigate-left .fa-backward {
  margin-right: 5px;
}

.btn-navigate-right .fa-forward {
  margin-left: 5px;
}

.btn-navigate-right{
  float:right;
}

.app-main .app-main__inner {
  position: relative;
}

.navigation-fixed{
  position: sticky;
  right: 0;
  top: 65px;
  width: 100%;
  margin-top: 0;
  z-index: 100;
}

.app-main .navigation-fixed {
  /* Usunięto hardkodowane białe tło - teraz obsługiwane przez .task-nav-bar */
  background-color: transparent;
}

#button-ai-text {
  margin: 0
}

.carousel-inner img.d-block{
  margin-left: auto;
  margin-right: auto;
  max-height: 400px;
}

.advanced-options-link {
  /* Dyskretny link z lepszym kontrastem; motywy z ciemnym .bg-dark
     nadpisują kolor przez --subtle-link-color */
  color: var(--subtle-link-color, #6b7280);
  font-size: 0.8rem;
  text-decoration: none;
  opacity: 0.85;
  font-weight: 400;
  transition: all 0.3s ease;

  /* Subtle positioning */
  display: inline-block;
  padding: 2px 4px;
  border-radius: 3px;
}

.advanced-options-link:hover {
  /* Subtelny hover z czytelniejszym kontrastem */
  color: var(--subtle-link-hover-color, #374151);
  opacity: 1;
  background-color: rgba(107, 114, 128, 0.08);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.advanced-options-link:focus {
  /* Accessibility focus state */
  outline: 1px dotted #6b7280;
  outline-offset: 1px;
  background-color: rgba(107, 114, 128, 0.1);
}

/* /start: wybór na start — zniżka 25% na pierwszy miesiąc albo darmowy okres
   testowy. Karty mają własne jasne tło (kontrast nie zależy od koloru karty
   .bg-dark w danym motywie). Karta zniżki jest celowo dominująca: większa,
   z obwódką brandową i badge; okres testowy to opcja drugorzędna. */
.start-offer-choice {
  max-width: 780px;
  margin: 18px auto 6px;
  text-align: left;
}

.start-offer-choice__title {
  margin-bottom: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

.start-offer-choice__options {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
}

.start-offer-choice__option {
  display: flex;
  flex: 1 1 240px;
}

.start-offer-choice__option--discount {
  flex: 1.5 1 300px;
}

/* Ukryty input radio dostępny dla klawiatury (bez display:none) */
.start-offer-choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.start-offer-choice__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  margin-bottom: 0;
  padding: 16px 18px;
  border-radius: 12px;
  background-color: var(--ld-surface, #ffffff);
  border: 1px solid var(--ld-border, #e6e8f0);
  cursor: pointer;
}

.start-offer-choice__card--discount {
  border: 2px solid var(--ld-brand, #6c4cf1);
}

.start-offer-choice__option--discount input:checked + .start-offer-choice__card {
  box-shadow: 0 0 0 3px rgba(108, 76, 241, 0.25);
}

.start-offer-choice__option--trial input:checked + .start-offer-choice__card {
  border-color: var(--ld-brand, #6c4cf1);
}

.start-offer-choice__card:hover {
  border-color: var(--ld-brand, #6c4cf1);
}

.start-offer-choice__input:focus-visible + .start-offer-choice__card {
  outline: 2px solid var(--ld-brand, #6c4cf1);
  outline-offset: 2px;
}

.start-offer-choice__input:disabled + .start-offer-choice__card {
  opacity: 0.55;
  cursor: not-allowed;
}

.start-offer-choice__badge {
  position: absolute;
  top: -10px;
  right: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--ld-accent, #ffc24b);
  color: var(--ld-ink, #14122b);
  font-size: 0.72rem;
  font-weight: 700;
}

.start-offer-choice__value {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ld-brand, #6c4cf1);
}

.start-offer-choice__value--trial {
  font-size: 1.3rem;
  font-weight: 700;
  color: #4b5563;
}

.start-offer-choice__value-old {
  margin-right: 6px;
  font-weight: 600;
  text-decoration: line-through;
  opacity: 0.7;
}

.start-offer-choice__heading {
  font-weight: 700;
  color: var(--ld-ink, #14122b);
}

.start-offer-choice__card--trial .start-offer-choice__heading {
  font-weight: 600;
  color: #374151;
}

.start-offer-choice__points {
  margin: 2px 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
  color: #4b5563;
}

.start-offer-choice__points li {
  margin-bottom: 2px;
}

.start-offer-choice__note {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.75rem;
  color: #6b7280;
}

.btn-start-advanced {
  /* Dyskretny styl dla secondary action */
  background-color: transparent;
  border: 1px solid #cbd5e0;
  color: #4a5568;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 8px 16px;
  min-width: auto;
  width: auto;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin: 0 8px;

  /* Subtle visual hierarchy */
  opacity: 0.8;
  text-decoration: none;
  cursor: pointer;
}

.btn-start-advanced:hover {
  /* Gentle hover effect */
  background-color: #f7fafc;
  border-color: #a0aec0;
  color: #2d3748;
  opacity: 1;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 2px;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-start-advanced:focus {
  /* Accessibility - focus state */
  outline: 2px solid #4299e1;
  outline-offset: 2px;
  border-color: #4299e1;
}

.btn-start-advanced:active {
  /* Active state feedback */
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-100-percent{
    width:100%;
    min-width:100%;
}

@keyframes super-gentle-vibration {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes gentle-vibration {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.facebook-initial-animation {
    animation: gentle-vibration 2s 2;
}
.facebook-messages-initial-animation {
    animation: super-gentle-vibration 2s 1;
}


.instagram-initial-animation {
    animation: gentle-vibration 2s 1;
    animation-delay: 3s;
}

.social-btn:hover {
    animation: gentle-vibration 2s 1;
}

@media (min-width: 1200px) {
    div.col-xl-6.messages-column {
        min-height: 0;
    }
}

 .vertical-nav-menu .mm-active.selected-element i.metismenu-state-icon, .vertical-nav-menu .mm-active.selected-element i.metismenu-icon {
    color:var(--color-grey);
}

.vertical-nav-menu.metismenu li a.mm-active {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
    height: auto !important;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding-right: 20px;
}

.vertical-nav-menu.metismenu li a.mm-active.sidebar-main-account-link {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

.vertical-nav-menu.metismenu li a.mm-active.sidebar-main-account-link .sidebar-main-account-email {
    font-size: 0.8rem;
    opacity: 0.8;
    word-break: break-word;
}
.fixed-sidebar.fixed-header .hamburger.close-sidebar-btn {
    margin-left: -50px;
}
.fixed-sidebar.fixed-header.closed-sidebar .hamburger.close-sidebar-btn {
    margin-left: 10px;
}

#campaignSettingsModal form{
    padding-top: 0;
}

.campaign-type-button {
    width: 100%;
    height: 100%;
    margin: 10px;
    position: relative;
    padding: 0;
    cursor: pointer;
}

.campaign-type-button.campaign-type-grayed {
    opacity: 0.55;
    filter: grayscale(40%);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.campaign-type-button.campaign-type-grayed:hover {
    opacity: 0.85;
    filter: grayscale(10%);
}

.campaign-type-label {
    display: block;
    font-size: 1.05rem;
    margin-top: 6px;
}

.campaign-type-label-recommended {
    font-weight: bold;
}

.campaign-type-label-advanced {
    color: #9e9e9e;
}

.campaign-type-badge-recommended {
    display: inline-block;
    background-color: #4caf50;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.campaign-type-badge-advanced {
    display: inline-block;
    background-color: #757575;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.campaign-type-info {
    font-size: 0.82rem;
    color: #b0b0b0;
    margin-top: 8px;
    line-height: 1.4;
}

.vertical-nav-menu a .long {
     display: none;
 }

/* css */
.vertical-nav-menu a .long {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 240ms ease, transform 240ms ease;
    pointer-events: none;
    visibility: hidden;
}

.vertical-nav-menu a:hover .long {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.vertical-nav-menu a .short {
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 240ms ease, transform 240ms ease;
}

.vertical-nav-menu a:hover .short {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    visibility: hidden;
}
.app-sidebar__heading{
    font-size: 1.2rem;
}

/* ── Wspólny pasek: nawigacja + postęp zadania ────────────────── */
/* Oba elementy żyją teraz w jednym .task-progressbar.
   .task-nav-bar__btn  — bazowy przycisk (szczegóły zadania, mniejszy)
   .task-nav-bar__btn--nav — modyfikator dla przycisków nawigacyjnych (większe, bardziej widoczne) */

.task-nav-bar__btn {
  /* #fff hardkodowany — --color-white = #000 w jamesbot */
  background-color: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  border-radius: 0.4rem;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  cursor: pointer;
  line-height: 1.5;
}

.task-nav-bar__btn:hover {
  background-color: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.task-nav-bar__btn:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 1px;
  color: #fff;
}

/* Modyfikator: przyciski nawigacyjne ← → — większe, bardziej widoczne */
.task-nav-bar__btn--nav {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
  padding: 5px 14px;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

.task-nav-bar__btn--nav:hover {
  background-color: rgba(255, 255, 255, 0.32);
  border-color: #fff;
}

/* Modyfikator: przycisk zmiany hasła przy błędzie logowania — czerwony, wyrazisty */
.task-nav-bar__btn--login-error {
  background-color: rgba(220, 53, 69, 0.85);
  border-color: rgba(220, 53, 69, 1);
  color: #fff;
  animation: login-error-pulse 2s ease-in-out infinite;
}

.task-nav-bar__btn--login-error:hover {
  background-color: rgba(200, 35, 51, 1);
  border-color: #fff;
}

@keyframes login-error-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Kontener na dynamiczne przyciski login-error — flex z zawijaniem */
.login-error-buttons-container {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

/* ── Task progressbar ─────────────────────────────────────────── */
.task-progressbar {
  /* --background-color jest ciemny w leadya (#3b3486), jamesbot (#000), turbobot (#240046).
     turbot ma #eeeeee (jasny) — override w leadya-ruby.css.
     --color-black NIE nadaje się tu bo leadya/jamesbot mają --color-black = biały. */
  background-color: var(--background-color);
  border-radius: 0.6rem;
  padding: 5px 12px 4px 12px;
  margin-bottom: 8px;
  color: #fff;
}

.task-progressbar__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  /* Stała wysokość wiersza — pasek nie skacze gdy progress jest ukryty */
  min-height: 2rem;
}

/* Rozciąga się między zawartością a prawym przyciskiem nawigacji,
   zapewnia że Następna → jest zawsze przy prawej krawędzi */
.task-progressbar__spacer {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 767px) {
  .task-progressbar__row {
    flex-wrap: wrap;
  }
}

/* Campaign landing pages: the wizard switch with live preview, the statistics strip on the
   campaign main page, the account list and the full-screen WYSIWYG editor. */
.campaign-landing-choice { margin: 12px 0 4px; padding: 14px 16px; border: 1px solid var(--ld-border, #dfe3eb); border-radius: 14px; color: var(--ld-text, #24324a); background: var(--ld-surface, #fff); text-align: left; }
.campaign-landing-choice .custom-control-label { color: var(--ld-text, #24324a); font-weight: 700; }
.campaign-landing-choice__hint { margin: 6px 0 0; color: var(--ld-text-muted, #6b7280); font-size: .84rem; }
.campaign-landing-choice__reason { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; color: var(--ld-info-ink, #1e3a8a); background: var(--ld-info-bg, #eef3ff); font-size: .84rem; }
.campaign-landing-choice__status { margin: 12px 0 8px; padding: 8px 10px; border-radius: 10px; font-size: .84rem; font-weight: 600; }
.campaign-landing-choice__status.is-loading, .campaign-landing-choice__status.is-stale { color: var(--ld-info-ink, #1e3a8a); background: var(--ld-info-bg, #eef3ff); }
.campaign-landing-choice__status.is-ready { color: var(--ld-success-ink, #14532d); background: var(--ld-success-bg, #e7f8ee); }
.campaign-landing-choice__status.is-error { color: var(--ld-danger-ink, #7f1d1d); background: var(--ld-danger-bg, #fdecec); }
.campaign-landing-address { margin: 10px 0 12px; padding: 12px; border: 1px solid var(--ld-border, #dfe3eb); border-radius: 12px; background: var(--ld-surface-subtle, #f8fafc); }
.campaign-landing-address > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.campaign-landing-address > div:first-child p { margin: 0; color: var(--ld-text-muted, #6b7280); font-size: .78rem; }
.campaign-landing-address__fields { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(160px, 1fr) auto; align-items: center; gap: 7px; margin-top: 9px; }
.campaign-landing-address__fields > span { color: var(--ld-text-muted, #6b7280); font-weight: 700; }
.campaign-landing-address__url { margin: 7px 0 0; color: var(--ld-text-muted, #6b7280); font-size: .75rem; overflow-wrap: anywhere; }
.campaign-landing-address__status { margin: 7px 0 0; font-size: .78rem; }
.campaign-landing-address__status.is-saving { color: var(--ld-info-ink, #1e3a8a); }
.campaign-landing-address__status.is-saved { color: var(--ld-success-ink, #14532d); }
.campaign-landing-address__status.is-error { color: var(--ld-danger-ink, #7f1d1d); }
/* Wizard preview of the landing page. It is drawn in the panel from the page fields instead of
   an <iframe> of the preview address: the application answers X-Frame-Options: DENY, so the
   embedded page never renders. The content arrives sanitized from LandingPageHtmlSanitizer.
   Colours are the fixed palette of landing-page.css, not the panel tokens - the paper shows what
   a visitor sees and stays readable in every theme, including LeadYa Dark, whose orange
   --ld-brand would give only 2.9:1 on white. */
.landing-preview { max-height: clamp(150px, 34vh, 360px); overflow: auto; border: 1px solid var(--ld-border, #dfe3eb); border-radius: 12px; background: #fff; }
.landing-preview:focus-visible { outline: 2px solid var(--ld-brand, #6c4cf1); outline-offset: 2px; }
.landing-preview__page { padding: 14px 16px 16px; }
.landing-preview__visual { margin: 0 0 10px; overflow: hidden; border-radius: 8px; background: #e9e7f7; }
.landing-preview__visual img { display: block; width: 100%; height: 92px; object-fit: cover; }
.landing-preview__kicker { display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px; color: #5236d6; background: rgba(108, 76, 241, .1); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.landing-preview__headline { margin: 0; color: #14122b; font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.landing-preview__lead { margin: 6px 0 0; color: #5b5f78; font-size: .8rem; line-height: 1.45; }
.landing-preview__cta { display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #6c4cf1, #5236d6); font-size: .76rem; font-weight: 800; }
.landing-preview__body { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e4e6f0; color: #5b5f78; font-size: .78rem; line-height: 1.5; }
.landing-preview__body h2, .landing-preview__body h3, .landing-preview__body h4 { margin: 12px 0 4px; color: #14122b; font-size: .84rem; font-weight: 700; line-height: 1.3; }
.landing-preview__body h2:first-child, .landing-preview__body h3:first-child { margin-top: 0; }
.landing-preview__body p, .landing-preview__body ul, .landing-preview__body ol { margin: 0 0 7px; }
.landing-preview__body ul, .landing-preview__body ol { padding-left: 18px; }
.landing-preview__body li { margin-bottom: 3px; }
.landing-preview__body strong { color: #232238; }
.landing-preview__body a { color: #5236d6; font-weight: 700; }
.landing-preview__body blockquote { margin: 0 0 7px; padding-left: 10px; border-left: 3px solid #e4e6f0; }
.campaign-landing-choice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.campaign-landing-choice__source, .campaign-landing-choice__notes { color: var(--ld-text-muted, #6b7280); font-size: .78rem; }
.campaign-landing-choice__source { margin: 8px 0 0; }
.campaign-landing-choice__notes { margin: 6px 0 0; white-space: pre-line; }

.campaign-landing-stats { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--ld-border); border-radius: 12px; background: var(--ld-surface); }
.campaign-landing-stats__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.campaign-landing-stats__title { color: var(--ld-text); font-weight: 700; }
.campaign-landing-stats__hint, .campaign-landing-stats__empty p, .campaign-landing-stats__status { margin: 0; color: var(--ld-text-muted); font-size: .8rem; }
.campaign-landing-stats__link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
.campaign-landing-stats__link a { max-width: min(100%, 560px); overflow: hidden; color: var(--ld-primary, #6757e7); font-size: .82rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.campaign-landing-stats__link .btn.is-copied { color: var(--ld-success-ink, #14532d); }
.campaign-landing-stats .analytics-campaign-tile-stats { margin: 8px 0 0; }
.campaign-landing-stats__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.campaign-landing-stats__generate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.campaign-landing-stats__generate .custom-select { width: auto; min-width: 220px; }

.landing-account { padding: 14px 16px; color: var(--ld-text, #24324a); }
.card.landing-account { background: var(--ld-surface); }
.landing-account__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.landing-account__title { font-weight: 700; }
.landing-account__hint, .landing-account__empty { margin: 0; color: var(--ld-text-muted, #6b7280); font-size: .8rem; }
.landing-account__empty { margin-top: 8px; }
.landing-account__item { padding: 10px 0; border-top: 1px solid var(--ld-border, #dfe3eb); }
.landing-account__campaign { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.landing-account__campaign a { max-width: 100%; overflow: hidden; color: var(--ld-primary, #6757e7); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.landing-account .analytics-campaign-tile-stats { margin: 6px 0 0; }
.landing-account__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.landing-account__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Zakladka "Landing page" kampanii: naglowek widoku nad paskiem statystyk i lista pozostalych stron. */
.landing-manager__head { margin: 0 0 10px; }
.landing-manager__title { margin: 0; color: var(--ld-text, #24324a); font-size: 1.05rem; font-weight: 700; }
.landing-manager__intro { max-width: 760px; margin: 4px 0 0; color: var(--ld-text-muted, #6b7280); font-size: .82rem; }

.landing-editor .modal-body { display: flex; min-height: 0; flex-direction: column; }
.landing-editor__public-url { display: block; max-width: min(70vw, 720px); overflow: hidden; margin-top: 3px; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.landing-editor__settings { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 0 12px; align-items: end; }
.landing-editor__settings .form-group { margin-bottom: 10px; }
.landing-editor__headline, .landing-editor__subheadline { grid-column: 1 / -1; }
.landing-editor__published { margin: 0 0 19px 8px; grid-column: 1 / -1; }
.landing-editor__toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border: 1px solid var(--ld-border, #dfe3eb); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--ld-surface-subtle, #f7f8fb); }
.landing-editor__toolbar button { width: 36px; height: 34px; border: 1px solid transparent; border-radius: 7px; color: var(--ld-text, #24324a); background: transparent; }
.landing-editor__toolbar button:hover, .landing-editor__toolbar button:focus-visible { border-color: var(--ld-border, #dfe3eb); background: var(--ld-surface, #fff); }
.landing-editor__canvas { min-height: 38vh; max-height: 52vh; overflow-y: auto; padding: clamp(20px, 4vw, 50px); border: 1px solid var(--ld-border, #dfe3eb); border-radius: 0 0 10px 10px; outline: 0; color: #10233f; background: #fff; line-height: 1.65; box-shadow: inset 0 1px 2px rgba(16, 35, 63, .04); }
.landing-editor__canvas:focus { border-color: var(--ld-primary, #6757e7); box-shadow: 0 0 0 3px rgba(103, 87, 231, .12); }
.landing-editor__canvas section { max-width: 820px; margin: 0 auto; padding: 18px 0; border-bottom: 1px solid #e5eaf2; }
.landing-editor__canvas h2 { font-size: 1.4rem; color: #10233f; }
.landing-editor__canvas h3 { font-size: 1.05rem; color: #10233f; }
.landing-editor__canvas .landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.landing-editor__canvas .landing-card { padding: 14px; border: 1px solid #e5eaf2; border-radius: 12px; background: #f7f8fb; }
.landing-editor__canvas .landing-steps__list { padding-left: 22px; }
.landing-editor__notes { margin: 8px 0 0; font-size: .8rem; white-space: pre-line; }
.landing-editor__regenerate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.landing-editor__stats { margin-right: 16px; color: var(--ld-text-muted, #6b7280); font-weight: 600; }

@media (max-width: 900px) {
  .campaign-landing-address__fields { grid-template-columns: minmax(100px, 1fr) auto minmax(130px, 1fr); }
  .campaign-landing-address__fields .btn { grid-column: 1 / -1; }
  .landing-editor__settings { grid-template-columns: 1fr; gap: 0; }
  .landing-editor__published { margin: 4px 0 18px 38px; }
  .landing-preview { max-height: 46vh; }
  .campaign-landing-stats__generate .custom-select { width: 100%; }
}

/* Follow-up plan is shared by the campaign wizard and the message workspace. */
.follow-up-plan {
  margin-bottom: 1rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #fff);
}

.follow-up-plan__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.follow-up-plan__header h3 {
  margin: 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 1.15rem;
}

.follow-up-plan__header p {
  margin: 0.35rem 0 0;
  color: var(--ld-text-muted, #656b7b);
}

.follow-up-plan__rows {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0;
}

.follow-up-step {
  display: grid;
  grid-template-columns: 2rem minmax(7rem, 0.25fr) minmax(14rem, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-surface-subtle, #f8f9fc);
  text-align: left;
}

.follow-up-step__number {
  align-self: center;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ld-primary, #5138ee);
  color: #fff;
  font-weight: 800;
}

.follow-up-step label {
  margin: 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.8rem;
  font-weight: 700;
}

.follow-up-step textarea,
.follow-up-step input {
  margin-top: 0.3rem;
}

.follow-up-plan__message {
  min-height: 1.5rem;
  color: var(--ld-text-muted, #656b7b);
}

.follow-up-playground {
  margin-top: 0.75rem;
}

.follow-up-playground__controls {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .follow-up-plan__header,
  .follow-up-playground__controls {
    flex-direction: column;
  }

  .follow-up-step {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .follow-up-step__instruction,
  .follow-up-step__remove {
    grid-column: 1 / -1;
  }
}

.task-progressbar__label {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

.task-progressbar__progress {
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: 0.5rem;
  min-width: 80px;
  /* Domyślnie niewidoczny — JS przełącza visibility gdy jest aktywne zadanie */
  visibility: hidden;
}

.task-progressbar__progress .progress {
  height: 6px;
  flex-grow: 1;
  min-width: 40px;
  margin-bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
}

.task-progressbar__progress .progress-bar {
  background-color: var(--main-color) !important;
}

.task-progressbar__description {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
  padding-left: 2px;
  /* Stała wysokość — zajmuje miejsce zawsze, tylko visibility się zmienia */
  min-height: 1em;
  line-height: 1em;
  word-break: break-word;
  /* Domyślnie niewidoczna — JS przełącza visibility */
  visibility: hidden;
}

.task-auto-host {
  width: 100%;
  margin-bottom: 6px;
  --task-auto-control-height: 34px;
  --task-auto-btn-width: 240px;
  --task-auto-action-width: 220px;
  --task-auto-time-width: 92px;
}

.task-auto__task-panel-wrap {
  margin-top: 0.85rem;
}

.card.mb-3.widget-content.bg-dark .widget-content-wrapper {
  padding: 0.62rem 0.88rem;
}

.card.mb-3.widget-content.bg-dark .widget-heading {
  margin-bottom: 0.32rem;
  line-height: 1.15;
}

/* Krótka informacja kontekstowa w karcie zadania — jedna linia zamiast pełnego alertu */
.task-compact-note {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  width: 100%;
  margin-bottom: 0.45rem;
  padding: 0.3rem 0.55rem;
  border-left: 3px solid var(--main-color);
  border-radius: 0.25rem;
  /* Karta .bg-dark NIE jest ciemna w każdym motywie (biała w Classic i Sky,
     przykryta białym formularzem w Ruby), więc biel dawała 1,0:1 — notka i jej
     ikona znikały. Neutralny szary tint czyta się na obu powierzchniach, a kolor
     tekstu bierzemy z powierzchni. */
  background: rgba(128, 128, 128, 0.14);
  color: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
}

.task-compact-note i {
  flex: 0 0 auto;
  font-size: 0.78rem;
}

/* Podpowiedź pod polem w karcie zadania. Bootstrapowe .text-muted w motywach
   LeadYa bywa pomarańczowe i czyta się jak ostrzeżenie — tu jawny, stonowany
   kolor o wysokim kontraście na ciemnym tle karty. */
.task-field-hint {
  display: block;
  margin-top: 0.22rem;
  color: #c3c7db;
  font-size: 0.74rem;
  line-height: 1.35;
}

/* Wiersz statycznego komentarza: treść rośnie, akcje trzymają swoją szerokość */
.comment-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.comment-row > .comment-textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  height: 38px;
}

.comment-row__ai {
  flex: 0 0 auto;
  white-space: nowrap;
}

.comment-row__del {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
}

/* Wąski ekran: treść komentarza nad akcjami, żeby przycisk AI nie wypychał pola poza kartę */
@media (max-width: 575px) {
  .comment-row {
    flex-wrap: wrap;
  }

  .comment-row > .comment-textarea {
    flex: 1 1 100%;
  }
}

/* Jeden zwarty wiersz pól zadania: pola obok siebie + akcja przy prawej krawędzi.
   Układ samych pól zostaje w gestii reguł kompresji kart zadań (label + wąski input). */
.task-compact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.3rem 1.1rem;
  width: 100%;
}

.task-compact-row > .form-group {
  width: auto !important;
  margin-bottom: 0 !important;
}

.task-compact-row label {
  margin-bottom: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.2;
}

.task-compact-field {
  flex: 0 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.task-compact-field select.form-control {
  min-width: 240px;
}

.task-compact-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Wąski ekran: pola i akcja jedno pod drugim, żeby nic nie uciekło poza kartę */
@media (max-width: 991px) {
  .task-compact-row {
    display: block;
  }

  .task-compact-row > .form-group {
    width: 100% !important;
    margin-bottom: 0.45rem !important;
  }

  .task-compact-actions {
    margin-left: 0;
  }
}

.card.mb-3.widget-content.bg-dark .position-relative.form-group,
.card.mb-3.widget-content.bg-dark .form-group {
  margin-bottom: 0.45rem;
}

.card.mb-3.widget-content.bg-dark .widget-subheading {
  margin-bottom: 0.22rem;
}

.card.mb-3.widget-content.bg-dark .form-control {
  min-height: 34px;
  padding: 0.3rem 0.55rem;
  font-size: 0.86rem;
}

.card.mb-3.widget-content.bg-dark textarea.form-control {
  min-height: 72px;
}

.card.mb-3.widget-content.bg-dark .message-textarea {
  width: 100%;
  min-height: calc(2 * 1.35em + 0.6rem + 2px) !important;
  margin-bottom: 0;
  line-height: 1.35;
  resize: vertical;
}

.card.mb-3.widget-content.bg-dark .message-action-file-input {
  width: 100%;
  max-width: 360px;
  min-height: 34px;
}

#editCampaignStrategyMessage {
  min-height: 320px !important;
  line-height: 1.35;
}

#editDescribeYourSelfMessage {
  min-height: 180px !important;
  line-height: 1.35;
}

@media (max-width: 991px) {
  #editCampaignStrategyMessage {
    min-height: 260px !important;
  }

  #editDescribeYourSelfMessage {
    min-height: 140px !important;
  }
}

/* Password/PIN and mailbox credentials modal. Keep the dialog inside the viewport;
   only its body scrolls on short screens. */
.leadya-credentials-modal {
  width: 100%;
  padding: 0 !important;
}

.leadya-credentials-modal .modal-dialog {
  width: calc(100% - 32px);
  max-width: 960px;
  min-height: calc(100% - 32px);
  margin: 16px auto;
}

.leadya-credentials-modal .modal-content {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(20, 18, 43, 0.24);
}

.leadya-credentials-modal .modal-header {
  min-height: 54px;
  padding: 10px 20px;
  align-items: center;
  background: #fff;
}

.leadya-credentials-modal .modal-title {
  margin-top: 0 !important;
  line-height: 1.35;
}

.leadya-credentials-modal .modal-title:empty {
  display: none;
}

.leadya-credentials-modal .close {
  margin: -10px -10px -10px auto;
  padding: 16px;
}

.leadya-credentials-modal .modal-body {
  min-height: 0;
  padding: 18px 20px;
  overflow: visible;
}

.leadya-credentials-modal .modal-footer {
  padding: 10px 20px;
  background: #fff;
}

.leadya-credentials-modal .form-group {
  margin-bottom: 12px;
}

.leadya-credentials-modal label {
  margin-bottom: 5px;
  color: #25283a;
  font-weight: 600;
}

.leadya-credentials-modal .form-control {
  min-height: 38px;
  border-color: #dfe2ea;
  border-radius: 8px;
}

.leadya-credentials-modal textarea.form-control {
  min-height: 58px;
  resize: vertical;
}

.leadya-credentials-grid,
.leadya-pop3-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.leadya-credentials-grid-wide,
.leadya-pop3-grid-wide {
  grid-column: 1 / -1;
}

.leadya-pop3-toggle {
  margin: 2px 0 14px !important;
  padding: 12px 14px;
  border: 1px solid #e7e3fb;
  border-radius: 10px;
  background: #f8f7fe;
}

.leadya-pop3-toggle .form-text {
  margin: 5px 0 0 24px;
  line-height: 1.35;
}

.leadya-pop3-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.leadya-pop3-actions .form-text {
  flex-basis: 100%;
  margin-top: 0;
}

.leadya-mail-tabs {
  margin-top: 2px;
  border-bottom-color: #ded9f5;
}

.leadya-mail-tabs .nav-link {
  min-width: 92px;
  padding: 8px 18px;
  text-align: center;
  font-weight: 700;
}

.leadya-mail-tabs .nav-link.active {
  color: var(--ld-primary, #5f3dc4);
  border-color: #ded9f5 #ded9f5 #fff;
}

.leadya-mail-tab-content {
  padding: 14px 14px 2px;
  border: 1px solid #ded9f5;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fff;
}

.leadya-mail-tab-content label,
.leadya-mail-tab-content .custom-control-label {
  color: #25283a;
}

.leadya-mail-protocol-grid {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(90px, 0.55fr) minmax(190px, 1fr) minmax(210px, 1.15fr);
  column-gap: 14px;
  align-items: end;
}

.leadya-mail-protocol-grid .leadya-pop3-ssl {
  padding: 0 0 9px;
}

.leadya-mail-protocol-grid .leadya-pop3-actions {
  min-height: 38px;
  align-content: center;
}

.leadya-mail-protocol-grid .leadya-pop3-actions .form-text {
  line-height: 1.2;
}

.leadya-pop3-ssl {
  padding-top: 30px;
}

/* Popup "Hasło/Pin": kazde poswiadczenie jest osobnym blokiem z wlasnym zapisem i wlasnym statusem,
   zeby nigdy nie bylo watpliwosci, ktore pole wlasnie zostalo zapisane. */
/* Popup dostepu do skrzynki pokazuje, ktorego konta dotyczy - sam formularz nie ma innego
   oznaczenia, a pola POP3/IMAP wygladaja tak samo dla kazdego konta. */
.leadya-mail-account {
  display: block;
  margin-bottom: 12px;
  color: #25283a;
  font-weight: 600;
}

.leadya-credential-blocks {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.leadya-credential-block {
  padding: 10px 12px;
  border: 1px solid #e7e3fb;
  border-radius: 10px;
  background: #fbfaff;
}

.leadya-credential-block label {
  display: block;
  margin-bottom: 5px;
  color: #25283a;
  font-weight: 600;
}

.leadya-credential-block__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.leadya-credential-block__row--stacked {
  flex-direction: column;
  align-items: stretch;
}

.leadya-credential-block__row .form-control {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  border-color: #dfe2ea;
  border-radius: 8px;
}

.leadya-credential-block__row textarea.form-control {
  min-height: 58px;
  resize: vertical;
}

.leadya-credential-block__save {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 38px;
}

.leadya-credential-block__row--stacked .leadya-credential-block__save {
  align-self: flex-start;
}

.leadya-credential-block .form-text {
  margin-top: 5px;
  line-height: 1.35;
}

.leadya-credential-block__status {
  display: block;
  margin-top: 5px;
  font-weight: 600;
}

.leadya-credential-block__status.is-saved {
  color: #1c7c54;
}

.leadya-credential-block__status.is-error {
  color: #c0392b;
}

/* Awaryjne "Zaloguj od zera" jest jedna z malych akcji karty, ale ostrzega kolorem: kasuje caly
   profil przegladarki, wiec nie moze wygladac jak zwykle odswiezenie obok niego. */
.facebook-account-card__icon-action--reset-login:hover:not(:disabled),
.facebook-account-card__icon-action--reset-login:focus:not(:disabled) {
  border-color: var(--ld-warning);
  color: var(--ld-warning);
}

@media (max-width: 767.98px) {
  .leadya-credential-block__row {
    flex-direction: column;
    align-items: stretch;
  }

  .leadya-credential-block__save {
    width: 100%;
  }
}

.leadya-credentials-submit {
  min-width: 120px;
  margin-top: 2px;
}

@media (max-width: 767.98px) {
  .leadya-credentials-modal .modal-dialog {
    width: calc(100% - 16px);
    min-height: calc(100% - 16px);
    margin: 8px auto;
  }

  .leadya-credentials-modal .modal-content {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    border-radius: 12px;
  }

  .leadya-credentials-modal .modal-header,
  .leadya-credentials-modal .modal-footer {
    padding-right: 14px;
    padding-left: 14px;
  }

  .leadya-credentials-modal .modal-body {
    padding: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .leadya-credentials-grid,
  .leadya-pop3-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .leadya-credentials-grid-wide,
  .leadya-pop3-grid-wide {
    grid-column: auto;
  }

  .leadya-pop3-toggle {
    padding: 10px 12px;
  }

  .leadya-pop3-ssl {
    padding-top: 0;
  }

  .leadya-mail-protocol-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .leadya-mail-protocol-grid .leadya-pop3-ssl {
    padding-bottom: 0;
  }

  .leadya-credentials-submit,
  .leadya-credentials-modal .modal-footer .btn {
    width: 100%;
  }
}

@media (max-height: 700px) {
  .leadya-credentials-modal .modal-header {
    min-height: 46px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .leadya-credentials-modal .modal-body {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .leadya-credentials-modal .form-group {
    margin-bottom: 9px;
  }
}

.card.mb-3.widget-content.bg-dark .btn,
.card.mb-3.widget-content.bg-dark .task-nav-bar__btn {
  min-height: 34px;
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
}

.card.mb-3.widget-content.bg-dark .widget-numbers .btn,
.card.mb-3.widget-content.bg-dark .widget-content-right .btn {
  min-width: 180px;
}

/* Pasek zadania (fragment `task_auto :: taskAutoTaskControl`) leży wprost na
   karcie `.bg-dark`, a ta jest ciemna tylko w części motywów: `--color-black`
   daje biel w Classic i Sky, więc półprzezroczysta biel i `#fff` znikały tam na
   białym tle — nazwa zadania, godziny pracy, separator i pill „Codziennie"
   miały 1,00:1. Kolory paska idą więc przez tokeny `--tbar-*`: tutaj stoją
   wartości dla ciemnej karty, a motywy z jasnym `.bg-dark` nadpisują je u siebie
   atramentem. Reguły wspólne z `.campaign-console__*` powtarzają ciemną wartość
   w fallbacku `var(--tbar-*, …)`, bo konsola kampanii nie leży w tym panelu
   i zostaje ciemna w każdym motywie. */
.task-auto__task-panel {
  --tbar-ink: #ffffff;
  --tbar-ink-soft: rgba(255, 255, 255, 0.85);
  --tbar-ink-muted: rgba(255, 255, 255, 0.9);
  --tbar-line: rgba(255, 255, 255, 0.22);
  --tbar-line-chip: rgba(255, 255, 255, 0.24);
  --tbar-line-strong: rgba(255, 255, 255, 0.3);
  --tbar-fill: rgba(255, 255, 255, 0.08);
  --tbar-fill-focus: rgba(255, 255, 255, 0.12);
  --tbar-fill-badge: rgba(255, 255, 255, 0.15);
  --tbar-track: rgba(255, 255, 255, 0.28);
  --tbar-knob: #ffffff;
  --tbar-dot-off: rgba(255, 255, 255, 0.35);
  --tbar-on-ink: #6be3ac;
  --tbar-state-on-ink: #9bf0b1;
  --tbar-running-ink: var(--ld-success, #12b76a);
  --tbar-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
  --tbar-time-icon-filter: invert(1);
  border: 1px solid var(--tbar-line);
  border-radius: 0.62rem;
  background: var(--tbar-panel-bg);
  padding: 0.46rem 0.54rem;
}

.task-auto__task-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.task-auto__task-panel-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.task-auto__task-panel-task-name {
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tbar-ink);
}

.task-auto-form--embedded {
  margin: 0;
}

.task-auto__group--embedded {
  width: 100%;
  display: flex;
  gap: 0.32rem;
  padding: 0.16rem 0.26rem;
}

.task-auto__group--embedded .task-auto__schedule-section--single,
.task-auto__group--embedded .task-auto__schedule-section--daily {
  flex: 1 1 0;
}

.task-auto__task-panel-alerts {
  margin-top: 0.32rem;
  display: flex;
  align-items: center;
  gap: 0.32rem;
  flex-wrap: wrap;
}

.task-auto__task-panel .task-auto__schedule input.task-auto-start-datetime,
.task-auto__task-panel .task-auto__schedule-section .task-nav-bar__btn {
  width: var(--task-auto-action-width);
  min-width: var(--task-auto-action-width);
  max-width: var(--task-auto-action-width);
}

.task-auto__task-panel .task-auto__working-hours-input {
  height: var(--task-auto-control-height);
}

.task-component-inline-controls {
  --task-inline-save-space: 2.9rem;
  display: block;
  position: relative;
  align-items: start;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
  padding-right: var(--task-inline-save-space);
  min-height: 2.4rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
  container-type: inline-size;
}

.task-component-inline-controls .saveParametersGroup {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: auto;
  pointer-events: none;
  z-index: 5;
}

.task-component-inline-controls .saveParametersGroup button {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0.15rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(37, 166, 90, 0.55) !important;
  background: rgba(37, 166, 90, 0.12) !important;
  pointer-events: auto;
}

.task-component-inline-controls .saveParametersGroup i {
  font-size: 1.65rem !important;
}

.task-component-inline-controls .saveParametersGroup button:hover {
  background: rgba(37, 166, 90, 0.2) !important;
  border-color: rgba(37, 166, 90, 0.85) !important;
}

.task-component-inline-controls__auto {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - var(--task-inline-save-space));
  display: block;
  width: calc(100% - var(--task-inline-save-space));
  text-align: left;
}

.task-component-inline-controls .task-auto__task-panel-wrap {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.task-component-inline-controls .task-auto__task-panel {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.task-component-inline-controls .task-auto__task-panel-header,
.task-component-inline-controls .task-auto__task-panel-alerts,
.task-component-inline-controls .task-auto__task-panel .task-auto__workmode-alert {
  display: none;
}

.task-component-inline-controls .task-auto-form--embedded {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.task-component-inline-controls .task-auto__group--embedded {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  gap: 0.22rem;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left;
}

.task-component-inline-controls .task-auto__schedule-section {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 0.22rem;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start !important;
}

.task-component-inline-controls .task-auto__schedule-section--single,
.task-component-inline-controls .task-auto__schedule-section--daily {
  flex: 0 0 auto;
}

.task-component-inline-controls .task-auto__schedule {
  flex: 0 0 auto;
  min-width: 0;
}

.task-component-inline-controls .task-auto__schedule label,
.task-component-inline-controls .task-auto__working-hours-field label {
  display: none;
}

.task-component-inline-controls .task-auto-start-datetime {
  width: 166px !important;
  min-width: 166px !important;
  max-width: 166px !important;
  font-size: 0.82rem;
}

.task-component-inline-controls .task-auto__working-hours {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: auto;
}

.task-component-inline-controls .task-auto__working-hours-field {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  flex: 0 0 auto;
}

.task-component-inline-controls .task-auto__working-hours-input {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  font-size: 0.82rem;
}

.task-component-inline-controls .task-auto-start-datetime,
.task-component-inline-controls .task-auto__working-hours-input {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.task-component-inline-controls .task-auto__actions {
  gap: 0.2rem;
  flex-wrap: nowrap;
}

.task-component-inline-controls .task-auto__schedule-section .task-nav-bar__btn {
  min-width: 122px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  line-height: 1.1;
}

.task-component-inline-controls .task-auto__schedule-section .task-auto__actions {
  margin-left: 0 !important;
}

.task-component-inline-controls .task-auto__schedule-btn--single,
.task-component-inline-controls .task-auto__schedule-btn--single-active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.task-component-inline-controls .task-auto__schedule-btn--single:hover,
.task-component-inline-controls .task-auto__schedule-btn--single-active:hover {
  background-color: var(--color-grey) !important;
  border-color: var(--color-grey) !important;
  color: #fff !important;
}

@container (max-width: 860px) {
  .task-component-inline-controls .task-auto-start-datetime {
    width: 158px !important;
    min-width: 158px !important;
    max-width: 158px !important;
  }

  .task-component-inline-controls .task-auto__working-hours-input {
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
  }

  /* Wąski kontener: split-button "Uruchom teraz" chowa etykietę (zostaje ikona play) */
  .task-component-inline-controls .task-bar__run-main {
    font-size: 0 !important;
    padding: 0.3rem 0.55rem !important;
  }

  .task-component-inline-controls .task-bar__run-main i {
    font-size: 0.78rem;
    line-height: 1;
  }
}

@container (max-width: 700px) {
  .task-component-inline-controls {
    --task-inline-save-space: 2.7rem;
  }

  .task-component-inline-controls .task-auto__group--embedded {
    display: flex;
    flex-wrap: wrap;
    gap: 0.24rem;
  }

  .task-component-inline-controls .task-auto__schedule-section {
    width: auto;
    flex-wrap: wrap;
  }

  .task-component-inline-controls .task-auto__schedule {
    width: auto;
  }
}

@container (max-width: 540px) {
  .task-component-inline-controls .task-auto__group--embedded {
    grid-template-columns: 1fr;
  }

  .task-component-inline-controls .task-auto-start-datetime {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .task-component-inline-controls .task-auto__working-hours-input {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
  }
}

@media (min-width: 992px) {
  .facebook-messages-main-row {
    align-items: stretch;
  }

  .facebook-messages-main-row > .facebook-messages-main-col {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .facebook-messages-main-row > .facebook-messages-main-col > * {
    width: 100%;
  }

  .facebook-messages-main-row .facebook-messages-playground-col #playgroundColumn {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0 !important;
    max-width: none !important;
  }

  .facebook-messages-main-row .facebook-messages-playground-col #playgroundChatContainer {
    flex: 1 1 auto;
    min-height: 420px;
  }

  .facebook-messages-main-row .facebook-messages-form-col > .card.mb-3.widget-content.bg-dark {
    flex: 1 1 auto;
  }

  form.task-layout-grid .widget-content-left {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
    align-items: start;
  }

  form.task-layout-grid .widget-content-left > * {
    grid-column: span 6;
    min-width: 0;
    margin-bottom: 0;
  }

  form.task-layout-grid .widget-content-left > input[type="hidden"] {
    display: none;
  }

  form.task-layout-grid .widget-content-left > .message-how-many-messages {
    grid-column: 1 / span 6;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  form.task-layout-grid .widget-content-left > .message-user-offer-primary {
    grid-column: 7 / -1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  form.task-layout-grid .widget-content-left > .message-how-many-messages > label,
  form.task-layout-grid .widget-content-left > .message-user-offer-primary > label {
    min-height: 2.7rem;
    margin-bottom: 0.28rem;
    display: flex;
    align-items: flex-end;
  }

  form.task-layout-grid .widget-content-left > .message-campaign-reason {
    grid-column: 1 / span 6;
    grid-row: 2;
    display: flex;
    flex-direction: column;
  }

  form.task-layout-grid .widget-content-left > .message-self-description {
    grid-column: 1 / span 6;
    grid-row: 3;
    display: flex;
    flex-direction: column;
  }

  form.task-layout-grid .widget-content-left > .message-campaign-strategy {
    grid-column: 7 / -1;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  form.task-layout-grid .widget-content-left > .message-campaign-strategy > textarea#editCampaignStrategyMessage.form-control {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: 100%;
  }

  form.task-layout-grid .widget-content-left > .widget-heading,
  form.task-layout-grid .widget-content-left > .task-compact-row,
  form.task-layout-grid .widget-content-left > .task-compact-note,
  form.task-layout-grid .widget-content-left > .comments-post-interest,
  form.task-layout-grid .widget-content-left > .comments-mode-switch,
  form.task-layout-grid .widget-content-left > #chatGptComment,
  form.task-layout-grid .widget-content-left > .widget-subheading,
  form.task-layout-grid .widget-content-left > .widget-numbers,
  form.task-layout-grid .widget-content-left > .task-auto__task-panel-wrap,
  form.task-layout-grid .widget-content-left > .alert,
  form.task-layout-grid .widget-content-left > #generalComment,
  form.task-layout-grid .widget-content-left > #notConversationMessage,
  form.task-layout-grid .widget-content-left > #conversationWithChat,
  form.task-layout-grid .widget-content-left > #addAdditionalMessageBtn,
  form.task-layout-grid .widget-content-left > .row,
  form.task-layout-grid .widget-content-left > .form-group[style*="color: black"],
  form.task-layout-grid .widget-content-left > .form-group.mt-2,
  form.task-layout-grid .widget-content-left > .form-group.mt-3,
  form.task-layout-grid .widget-content-left > .form-group.mt-4,
  form.task-layout-grid .widget-content-left > .form-group.mb-2 {
    grid-column: 1 / -1;
  }

  form.task-layout-grid .widget-content-left > .row > [class*="col-"] {
    margin-bottom: 0;
  }

  form.task-layout-grid .widget-content-left .card.card-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
    align-items: start;
    padding: 0.6rem 0.7rem;
  }

  form.task-layout-grid .widget-content-left .card.card-body > * {
    min-width: 0;
    margin-bottom: 0;
  }

  form.task-layout-grid .widget-content-left .card.card-body > hr {
    grid-column: 1 / -1;
  }

  form.task-layout-grid .widget-content-left .widget-numbers,
  form.task-layout-grid .widget-content-right .widget-numbers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  form.task-layout-grid .widget-content-left .widget-numbers > span,
  form.task-layout-grid .widget-content-right .widget-numbers > span {
    display: inline-flex;
  }

  form.task-layout-grid .widget-content-left .btn,
  form.task-layout-grid .widget-content-right .btn {
    min-width: 100px;
  }

  /* akcja ikonowa w wierszu komentarza ma być kwadratem, nie przyciskiem 100px */
  form.task-layout-grid .widget-content-left .comment-row__del {
    min-width: 0;
  }
}

@media (max-width: 991px) {
  form.task-layout-grid .widget-content-left > * {
    margin-bottom: 0.45rem;
  }

  form.task-layout-grid .widget-content-left .card.card-body {
    display: block;
  }
}

.task-progressbar--auto {
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 0;
}

.task-auto__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.task-auto__group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.32rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background-color: rgba(255, 255, 255, 0.08);
}

.task-auto__group--schedule {
  flex: 1 1 440px;
  order: 2;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.45rem;
}

.task-auto__schedule-section {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: wrap;
}

.task-auto__schedule-section--single {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding-right: 0.45rem;
}

.task-auto__schedule-section--daily {
  padding-left: 0.45rem;
}

.task-auto__group--campaign {
  flex: 1 1 100%;
  order: 3;
  justify-content: flex-start;
  gap: 0.55rem;
}

.task-auto__group--quick {
  flex: 1 1 100%;
  order: 2;
}

.task-auto__state {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
}

.task-auto__state--on {
  background-color: var(--tbar-state-on-bg, rgba(40, 167, 69, 0.24));
  border: 1px solid rgba(40, 167, 69, 0.6);
  color: var(--tbar-state-on-ink, #9bf0b1);
}

.task-auto__state--off {
  background-color: var(--tbar-fill-badge, rgba(255, 255, 255, 0.15));
  border: 1px solid var(--tbar-line-strong, rgba(255, 255, 255, 0.3));
  color: var(--tbar-ink, #fff);
}

.task-auto__schedule {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 220px;
  flex-wrap: wrap;
}

.task-auto__schedule label {
  margin: 0;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}

.task-auto__schedule input.task-auto-start-datetime {
  width: var(--task-auto-action-width);
  min-width: 180px;
  max-width: 240px;
  height: var(--task-auto-control-height);
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
}

.task-auto__working-hours {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.task-auto__working-hours-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 92px;
}

.task-auto__working-hours label {
  margin: 0;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  line-height: 1.1;
}

.task-auto__working-hours-input {
  width: var(--task-auto-time-width);
  min-width: var(--task-auto-time-width);
  max-width: var(--task-auto-time-width);
  height: var(--task-auto-control-height);
  padding: 0.2rem 0.35rem;
  font-size: 0.74rem;
}

.task-auto-start-error {
  color: #ff9a9a;
  font-size: 0.68rem;
  font-weight: 700;
}

.task-auto__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.task-auto__schedule-section .task-auto__actions {
  width: auto;
}

.task-auto__schedule-section .task-nav-bar__btn {
  width: auto;
  min-width: var(--task-auto-action-width);
}

.task-auto__actions--schedule {
  gap: 0.35rem;
}

.task-auto__actions--active-single {
  gap: 0;
}

.task-auto__actions--active-stop {
  margin-left: auto;
}

.task-auto__schedule-section .task-auto__actions--active-stop {
  margin-left: 0;
}

.task-auto__group--schedule .task-auto-start-datetime {
  border-radius: 0.25rem;
}

.task-auto__schedule-section--daily .task-auto__working-hours-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.task-auto__group--schedule .task-auto-start-error {
  margin-left: 0.35rem;
}

.task-auto__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.68rem;
  line-height: 1.2;
}

.task-auto__meta > span {
  display: inline-flex;
  align-items: center;
}

.task-auto__alerts {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 2px;
}

.task-auto__inline-login-alert {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: 100%;
  padding: 0.42rem 0.55rem;
  border-radius: 0.42rem;
  border: 1px solid rgba(255, 193, 7, 0.58);
  background-color: rgba(255, 193, 7, 0.22);
  color: #fff7dc;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}

.task-auto__cannot-start {
  color: var(--tbar-ink-muted, rgba(255, 255, 255, 0.9));
  font-size: 0.7rem;
}

.task-auto__inline-login-alert .fa-triangle-exclamation {
  color: #ffd166;
  font-size: 0.92rem;
}

.task-auto__inline-login-link {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(35, 45, 64, 0.28);
  background-color: #fff4cf;
  color: #2d1f00 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Konsola kampanii — jedna linia ───────────────────────────────
   .campaign-console łączy w jednym wierszu: nawigację poprzedni/następny,
   stan kampanii (pill-przełącznik), godziny pracy, chipy modali
   (Zadania/Grupy/Kolejka), licznik + postęp zadań, menu „…”.
   Projekt: design/Campaign-Console.md */

/* jedna linia: wszystkie akcje są ikonami, więc wiersz nie ma prawa się zawijać
   (drabinka zwężania niżej: etykiety chipów → licznik zadań → chip terminu) */
.campaign-console .task-auto__row {
  gap: 0.4rem;
  min-height: 2.2rem;
  flex-wrap: nowrap;
}

/* grupa kampanii przestaje być ramką i pełnym wierszem */
.campaign-console .task-auto__group--campaign {
  border: none;
  background: transparent;
  padding: 0;
  flex: 0 1 auto;
  order: 0;
  gap: 0.4rem;
  flex-wrap: nowrap;
  min-width: 0;
}

/* reset odziedziczonych rozmiarów przycisków (legacy: width 240px, min-height 42-48px) */
.campaign-console .task-auto__group .task-nav-bar__btn,
.campaign-console .task-auto__campaign-toggle {
  width: auto;
  min-width: 0;
  min-height: 0;
  box-shadow: none;
  white-space: nowrap;
  font-size: 0.76rem;
  padding: 0.24rem 0.6rem;
}

.campaign-console__state,
.campaign-console__state.task-auto__campaign-toggle {
  min-height: 0;
  box-shadow: none;
  background-color: transparent;
}

/* tytuł auto-zadania (tylko simple mode) — „i” w kółku, pełna nazwa w dymku;
   pełny napis zjadał ~260 px wiersza i wypychał nawigację do drugiej linii */
.campaign-console .campaign-console__title-info {
  border-radius: 999px;
  cursor: help;
  order: 0;
}

/* pill stanu kampanii z suwakiem */
.campaign-console .campaign-console__state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.18rem 0.7rem 0.18rem 0.3rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  transition: filter 0.15s;
}

.campaign-console .campaign-console__state:hover {
  filter: brightness(1.12);
}

.campaign-console .campaign-console__state--on {
  background-color: rgba(18, 183, 106, 0.2);
  border: 1px solid rgba(18, 183, 106, 0.55);
  color: #6be3ac;
}

.campaign-console .campaign-console__state--off {
  background-color: rgba(240, 68, 56, 0.16);
  border: 1px solid rgba(240, 68, 56, 0.45);
  color: #ff9c94;
}

.campaign-console__state-track {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
}

.campaign-console__state--on .campaign-console__state-track {
  background: var(--ld-success, #12b76a);
}

.campaign-console__state--off .campaign-console__state-track {
  background: rgba(255, 255, 255, 0.28);
}

.campaign-console__state-track::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

.campaign-console__state--on .campaign-console__state-track::after {
  right: 2px;
}

.campaign-console__state--off .campaign-console__state-track::after {
  left: 2px;
}

/* godziny pracy: chip z dwoma mini-inputami time */
.campaign-console__hours,
.task-bar__hours {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  border: 1px solid var(--tbar-line-chip, rgba(255, 255, 255, 0.24));
  background: var(--tbar-fill, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  color: var(--tbar-ink-soft, rgba(255, 255, 255, 0.85));
  font-size: 0.74rem;
  white-space: nowrap;
}

.campaign-console__hours i,
.task-bar__hours i {
  font-size: 0.72rem;
  opacity: 0.8;
}

.campaign-console__hours .task-auto__working-hours-input,
.task-bar__hours .task-auto__working-hours-input {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 0.25rem;
  font-size: 0.74rem;
  border: none;
  background: transparent;
  color: var(--tbar-ink, #fff);
  box-shadow: none;
}

.campaign-console__hours .task-auto__working-hours-input:focus,
.task-bar__hours .task-auto__working-hours-input:focus {
  background: var(--tbar-fill-focus, rgba(255, 255, 255, 0.12));
  color: var(--tbar-ink, #fff);
}

.campaign-console__hours.is-readonly .task-auto__working-hours-input,
.task-bar__hours.is-readonly .task-auto__working-hours-input {
  opacity: 0.75;
  cursor: not-allowed;
}

.campaign-console__hours-sep,
.task-bar__hours-sep {
  opacity: 0.6;
}

/* harmonogram postów: pill Codziennie z wbudowanym selectem częstotliwości (tylko zadanie POSTS) */
.task-bar .task-bar__daily--select {
  cursor: default;
  padding-right: 0.45rem;
}

.task-bar__daily-toggle {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  min-height: 0;
  box-shadow: none;
}

.task-bar__post-interval-select {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  height: auto;
  width: auto;
  max-width: none;
  padding: 0 0.15rem;
  cursor: pointer;
}

.task-bar__post-interval-select:focus {
  outline: none;
  background: var(--tbar-fill-focus);
}

.task-bar__post-interval-select option {
  color: var(--ld-text, #101828);
  background: var(--ld-surface, #fff);
  font-weight: 400;
}

/* wskaźnik koloru pól time: rozjaśniany tylko na ciemnym tle chipa */
.campaign-console__hours input[type='time']::-webkit-calendar-picker-indicator,
.task-bar__hours input[type='time']::-webkit-calendar-picker-indicator {
  filter: var(--tbar-time-icon-filter, invert(1));
  opacity: 0.7;
}

/* Kompaktowe akcje ikonowe: start kampanii i bieżący pulpit Guacamole. */
/* Tlo przycisku bierze --ld-success-btn, nie --ld-success: bialy trojkat "start"
   mial na jasnej zieleni sygnalowej 2,62:1 w kazdym motywie. */
.campaign-console .campaign-console__run {
  background-color: var(--ld-success-btn, #0e7a4f) !important;
  border-color: var(--ld-success-btn, #0e7a4f) !important;
  font-weight: 700;
  min-height: 0;
  box-shadow: none;
}

.campaign-console__run:hover {
  filter: brightness(1.08);
}

/* Scope .task-progressbar, nie .campaign-console — kwadratowe ikony wyglądają tak samo
   w obu wariantach paska (fragments/progressbar.html i konsola z fragments/task_auto.html). */
.task-progressbar .campaign-console__icon-action {
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.5rem;
  flex: 0 0 2rem;
  font-size: 0.82rem;
}

/* Pulpit zdalny (Guacamole) nie dotyczy postępu — stoi przy menu „…” i ma własny kolor.
   Pasek jest ciemny w każdym motywie (turbot wymusza czerń w leadya-ruby.css), a --ld-info
   nie jest nadpisywany per motyw, więc niebieskie wypełnienie + biały pierścień są czytelne
   wszędzie i nie mylą się z zielonym startem kampanii. */
.task-progressbar .task-nav-bar__btn--remote {
  background-color: var(--ld-info, #2e90fa);
  border-color: var(--ld-info, #2e90fa);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  color: #fff;
  text-decoration: none;
}

.task-progressbar .task-nav-bar__btn--remote:hover,
.task-progressbar .task-nav-bar__btn--remote:focus {
  background-color: var(--ld-info, #2e90fa);
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  color: #fff;
  filter: brightness(1.1);
}

/* „Pokaż szczegóły” straciło napis (został dymek), więc rekompensatą jest mocniejsza
   ramka i jaśniejsze tło niż w pozostałych przyciskach-duchach tego paska.
   Bez koloru ikony: leadya-ruby.css wymusza `.task-nav-bar__btn { color: #fff !important }`. */
.task-progressbar .task-nav-bar__btn--details {
  background-color: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
}

.task-progressbar .task-nav-bar__btn--details:hover,
.task-progressbar .task-nav-bar__btn--details:focus {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: #fff;
  color: #fff;
}

/* chipy modali: ikona + etykieta + licznik */
.campaign-console .campaign-console__chip {
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  gap: 0.3rem;
}

.campaign-console__chip .task-auto__tasks-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.68rem;
  font-weight: 700;
}

.campaign-console .campaign-console__chip--meta {
  cursor: help;
}

/* menu „…” */
.campaign-console .campaign-console__more-btn {
  border-radius: 0.4rem;
  padding: 0.24rem 0.55rem;
}

.campaign-console__more-btn::after {
  display: none; /* bez caret — sama ikona */
}

.campaign-console__menu {
  min-width: 240px;
}

.campaign-console__menu .dropdown-item {
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Menu rozwijane jest jasna powierzchnia w kazdym motywie (bootstrapowe
   .dropdown-menu), a --main-color to jasny pomarancz w LeadYa Dark - ikony mialy
   tam 2,87:1. Kolor pozycji menu jest juz dobrany do tej powierzchni. */
.campaign-console__menu .dropdown-item i {
  width: 1.05rem;
  text-align: center;
  color: inherit;
}

/* typ aktualnego zadania obok paska postępu (JS: /taskStatus -> workMode) */
.task-progressbar__workmode {
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* w konsoli opis stanu zadania jest w dymku (title) segmentu postępu,
   linia opisu pod paskiem nie zajmuje miejsca */
.campaign-console .task-progressbar__description {
  display: none;
}

/* Drabinka zwężania konsoli — kolejno znika to, co najmniej potrzebne, żeby wiersz
   został jedną linią. Kolejność: etykiety chipów → napis „Liczba zadań” → chip terminu. */
@media (max-width: 1350px) {
  .campaign-console__chip-label {
    display: none;
  }
}

@media (max-width: 1200px) {
  /* zostaje sam licznik; pełny opis jest w dymku .task-progressbar__label */
  .campaign-console .task-progressbar__label-text {
    display: none;
  }
}

@media (max-width: 991px) {
  /* najbliższy start auto-zadania — informacja powtórzona w modalu kolejki */
  .campaign-console .campaign-console__chip--meta {
    display: none;
  }

  /* Pionowy panel task-auto łamie .task-auto__group na kolumnę (blok @media wyżej w tym pliku).
     W konsoli dałoby to cztery kontrolki jedna pod drugą zamiast jednej linii. */
  .campaign-console .task-auto__group--campaign {
    flex-direction: row;
    align-items: center;
    flex-basis: auto;
  }
}

/* Poniżej 768 px komplet kontrolek nie mieści się nawet jako same ikony —
   zawijanie jest tu bezpieczniejsze niż przycinanie paska. */
@media (max-width: 767px) {
  .campaign-console .task-auto__row,
  .campaign-console .task-auto__group--campaign {
    flex-wrap: wrap;
  }
}

/* ── Slot paska zadań — pierwszy element widoku ────────────────────
   Pasek (konsola kampanii albo sam pasek postępu) stoi nad Akademią, jako
   pierwsze dziecko .app-main__inner. Na desktopie przykleja się pod nagłówkiem,
   żeby stan kampanii, licznik zadań i postęp były widoczne przy każdym
   przewinięciu. Poniżej 992 px sticky jest wyłączony celowo — na telefonie
   zjadłby zbyt dużą część ekranu, a pasek zawija się tam do kilku linii. */
.campaign-console-slot {
  margin-bottom: 8px;
}

/* Pudełko sticky ma się kończyć dokładnie na krawędzi nieprzezroczystego paska:
   marginesy dzieci przenosimy na slot, żeby przy przewijaniu nie powstał
   przezroczysty pas, przez który przechodzi treść widoku. */
.campaign-console-slot .task-auto-host,
.campaign-console-slot .task-progressbar {
  margin-bottom: 0;
}

/* Przyklejony pasek musi być nieprzezroczysty, inaczej treść przewija się przez niego.
   --background-color definiują wszystkie pliki motywów, ale gdy widok wypadnie bez motywu
   (puste css_file), var() bez fallbacku daje background: transparent — dlatego fallback
   jest tu realną wartością, a nie ozdobą. */
.campaign-console-slot .task-progressbar {
  background-color: var(--background-color, var(--ld-ink, #14122b));
}

/* Opis stanu zadania jest w dymku segmentu postępu (JS ustawia title na
   #current_task_progress), dokładnie tak jak w konsoli kampanii — linia opisu pod
   paskiem tylko rezerwowała wysokość i rozjeżdżała paski między widokami. */
.campaign-console-slot .task-progressbar__description {
  display: none;
}

/* ta sama wysokość wiersza co konsola kampanii — paski mają wyglądać identycznie */
.campaign-console-slot .task-progressbar__row {
  min-height: 2.2rem;
}

@media (min-width: 992px) {
  .campaign-console-slot {
    position: sticky;
    /* .app-header: position fixed, wysokość 60 px (main.css) */
    top: 60px;
    /* .app-main__outer ma własny kontekst układania (z-index 9), więc pasek
       zostaje pod nagłówkiem, a jednocześnie nad treścią widoku */
    z-index: 100;
  }

  /* przyklejony pasek musi odcinać się od przewijanej treści */
  .campaign-console-slot .task-progressbar {
    box-shadow: 0 8px 18px rgba(4, 9, 20, 0.22);
  }

  /* Jedna linia jest tu twardym wymogiem: przyklejony pasek nie może rosnąć
     w pionie przy przewijaniu. Elastyczny zostaje wyłącznie segment postępu —
     reszta wiersza to ikony i chipy o szerokości wynikającej z treści. */
  .campaign-console-slot .task-auto__row,
  .campaign-console-slot .task-progressbar__row,
  .campaign-console-slot .task-auto__group--campaign {
    flex-wrap: nowrap;
  }

  .campaign-console-slot .task-progressbar__progress {
    min-width: 0;
  }

  /* Druga linia paska pojawia się tylko wtedy, gdy program kliencki nie działa.
     To CTA, bez którego nic się nie uruchomi, więc zostaje — ale mieści się
     w jednym wierszu, a pełne zdanie jest w dymku (title) i dla czytnika ekranu. */
  .campaign-console-slot .task-auto__alerts {
    flex-wrap: nowrap;
  }

  .campaign-console-slot .task-auto__inline-login-alert {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .campaign-console-slot .task-auto__inline-login-alert > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .campaign-console-slot .task-auto__inline-login-link {
    flex-shrink: 0;
  }
}

/* ── Pasek zadania — jedna linia ──────────────────────────────────
   .task-bar: [● nazwa] [Codziennie] [godziny] … [Uruchom teraz ▾] */

.task-bar__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-height: 2.1rem;
}

.task-bar__state-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.task-bar__state-dot.is-on {
  background: var(--ld-success, #12b76a);
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.25);
}

.task-bar__state-dot.is-off {
  background: var(--tbar-dot-off);
}

.task-bar__name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tbar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 320px;
}

.task-bar__state {
  flex-shrink: 0;
}

.task-bar__sep {
  width: 1px;
  height: 20px;
  background: var(--tbar-line);
  flex-shrink: 0;
}

/* pill Codziennie (wł. = zielony, wył. = szary); submit włącza, klik wyłącza */
.task-bar .task-bar__daily {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.18rem 0.7rem 0.18rem 0.3rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  transition: filter 0.15s;
}

.task-bar .task-bar__daily:hover {
  filter: brightness(1.12);
}

/* neutralizacja legacy .task-auto__schedule-btn--daily (zielone tło, inset ring) */
.task-bar__daily,
.task-bar__daily.task-auto__schedule-btn--daily {
  box-shadow: none;
  min-height: 0;
}

.task-bar .task-bar__daily--on,
.task-bar .task-bar__daily--select.is-on {
  background-color: var(--tbar-on-bg, rgba(18, 183, 106, 0.2));
  border: 1px solid rgba(18, 183, 106, 0.55);
  color: var(--tbar-on-ink);
}

.task-bar .task-bar__daily--off,
.task-bar .task-bar__daily--select.is-off {
  background-color: var(--tbar-fill);
  border: 1px solid var(--tbar-line-strong);
  color: var(--tbar-ink-soft);
}

.task-bar__daily-track {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
}

.task-bar__daily--on .task-bar__daily-track,
.task-bar__daily--select.is-on .task-bar__daily-track {
  background: var(--ld-success, #12b76a);
}

.task-bar__daily--off .task-bar__daily-track,
.task-bar__daily--select.is-off .task-bar__daily-track {
  background: var(--tbar-track);
}

.task-bar__daily-track::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tbar-knob);
}

.task-bar__daily--on .task-bar__daily-track::after,
.task-bar__daily--select.is-on .task-bar__daily-track::after {
  right: 2px;
}

.task-bar__daily--off .task-bar__daily-track::after,
.task-bar__daily--select.is-off .task-bar__daily-track::after {
  left: 2px;
}

.task-bar__spacer {
  flex: 1 1 0;
  min-width: 0;
}

/* split-button Uruchom teraz / Zaplanuj na datę */
.task-bar__run {
  flex-shrink: 0;
}

/* Tlo bierze --main-color, wiec atrament musi isc za marka motywu: w LeadYa Dark
   biel na pomaranczu dawala 2,87:1. */
.task-bar__run .task-bar__run-main,
.task-bar__run .task-bar__run-more {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: var(--ld-brand-ink, #ffffff) !important;
  font-weight: 700;
}

.task-bar__run .task-bar__run-main:hover,
.task-bar__run .task-bar__run-more:hover {
  filter: brightness(1.1);
}

/* Stan po kliknięciu "Uruchom teraz" — przycisk zablokowany do przeładowania strony */
.task-bar__run .task-bar__run-main.is-pending,
.task-bar__run-menu .task-bar__run-schedule-btn.is-pending {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

/* Chip "Działa w tle" — potwierdzenie, że zadanie czeka w kolejce (ciemne tło paska) */
.task-bar__running {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--tbar-running-bg, rgba(18, 183, 106, 0.18));
  border: 1px solid var(--ld-success, #12b76a);
  color: var(--tbar-running-ink);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.task-bar__run-menu {
  padding: 0.65rem 0.75rem;
  min-width: 250px;
}

.task-bar__run-menu-label {
  display: block;
  font-size: 0.72rem;
  color: #667085;
  margin-bottom: 0.25rem;
}

/* Menu "Zaplanuj na datę" ma jasne tło, choć wychodzi z ciemnego paska — reguła
   `.bg-dark label` (leadya-nova.css) i biały atrament paska w karcie zadania
   (`.task-card--surface .task-component-inline-controls label, span`, specyficzność
   0,6,1) robiły z etykiety i komunikatu błędu biel na bieli (1,00:1). */
.card.mb-3.widget-content.bg-dark.task-card--surface .task-component-inline-controls .task-bar__run-menu-label,
.bg-dark .task-bar__run-menu .task-bar__run-menu-label,
.task-bar__run-menu .task-bar__run-menu-label {
  color: #667085 !important;
}

.card.mb-3.widget-content.bg-dark.task-card--surface .task-component-inline-controls .task-auto-start-error {
  color: #c81e1e !important;
}

.task-bar__run-menu .task-auto-start-datetime {
  /* !important: nadpisuje szerokości z legacy container-queries inline-controls */
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
}

.task-bar__run-menu .task-auto-start-error {
  display: block;
  color: #c81e1e;
  font-size: 0.72rem;
  margin-bottom: 0.35rem;
}

/* Tlo z --main-color, wiec atrament idzie za marka motywu jak w "Uruchom teraz":
   dziedziczona biel z .task-nav-bar__btn dawala w LeadYa Dark 2,87:1. */
.task-bar__run-menu .task-bar__run-schedule-btn {
  width: 100%;
  justify-content: center;
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: var(--ld-brand-ink, #ffffff);
}

/* alerty panelu zadania (nie można uruchomić) — widoczne również w trybie inline */
.task-auto__task-panel-alerts:empty {
  display: none;
}

/* ── Kompresja kart zadań ─────────────────────────────────────────
   Pola liczbowe nie potrzebują pełnej szerokości — etykieta i kompaktowy
   input w jednym wierszu; przełączniki obok siebie zamiast jeden pod drugim. */

.card.mb-3.widget-content.bg-dark form.task-layout-grid .form-group:has(> input[type='number'].form-control),
.card.mb-3.widget-content.bg-dark form.task-layout-grid .form-group:has(> label + input[type='number']) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .form-group:has(> input[type='number'].form-control) > label {
  margin: 0;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid input[type='number'].form-control {
  width: 110px;
  min-width: 90px;
  max-width: 130px;
  flex: 0 0 auto;
  text-align: center;
}

/* przełączniki (switch + etykieta) płyną obok siebie */
.card.mb-3.widget-content.bg-dark form.task-layout-grid .form-group:has(> .custom-checkbox-bot) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.8rem;
  margin-bottom: 0.4rem;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .custom-checkbox-bot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  /* globalny div.form-group ma width: 100% — bez width:auto przełączniki układają się w pion */
  width: auto;
  flex: 0 0 auto;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .custom-checkbox-bot label {
  margin: 0;
}

/* nagłówek karty zadania — ciaśniej (nazwa i tak jest w pasku zadania) */
.card.mb-3.widget-content.bg-dark form.task-layout-grid .widget-heading {
  font-size: 0.84rem;
  margin-bottom: 0.3rem;
}

/* gdy karta ma pasek zadania, nagłówek formularza dubluje jego nazwę — chowamy go */
.card.mb-3.widget-content.bg-dark .widget-content-wrapper:has(.task-bar) form.task-layout-grid .widget-heading {
  display: none;
}

/* panel Opcji zaawansowanych: ciemna wkładka z białym tekstem (wcześniej biały
   tekst .text-white lądował na białej karcie bootstrapa — nieczytelne).
   Układ: responsywny grid — opcje płyną w kolumnach zamiast jednej wysokiej listy. */
.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.35rem 1.5rem;
  align-items: start;
  justify-items: start;
  text-align: left;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body > * {
  margin: 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body .form-group {
  margin: 0 0 0.2rem;
  text-align: left;
}

/* wiersz przełącznika: switch + etykieta (+ ewentualne pole liczbowe) w jednej linii */
.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body .form-group:has(> .switch) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body .form-group:has(> .switch) > label {
  margin: 0;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body .form-group:has(> .switch) input[type='number'].form-control {
  margin-bottom: 0 !important;
}

/* listy przełączników zawinięte w label (np. "Pobierz kontakt na podstawie:") */
.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body label:has(> .switch) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.1rem 0;
  width: auto;
}

/* elementy pełnej szerokości: separator, pole fraz kluczowych, suwak tempa */
.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body > hr,
.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body > .form-group:has(input[type='text']),
.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body > div:has(input[type='range']),
.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body > .form-group:has(input[type='range']) {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .card.card-body hr {
  margin: 0.3rem 0;
  opacity: 0.4;
}

/* selecty parametrów w linii z etykietą, szerokość od treści */
.card.mb-3.widget-content.bg-dark form.task-layout-grid .form-group:has(> select.form-control) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .form-group:has(> select.form-control) > label {
  margin: 0;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .form-group:has(> select.form-control) > select.form-control {
  width: auto;
  max-width: min(100%, 480px);
  flex: 0 0 auto;
}

.card.mb-3.widget-content.bg-dark form.task-layout-grid .widget-subheading:empty {
  display: none;
}

.client-runtime-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.95rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 193, 7, 0.55);
  background: linear-gradient(180deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.12) 100%);
  color: #fff8de;
  box-shadow: 0 8px 22px rgba(23, 23, 23, 0.22);
}

.client-runtime-warning__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 209, 102, 0.28);
  color: #ffd166;
}

.client-runtime-warning__body {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}

.client-runtime-warning__text {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.client-runtime-warning__link {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(35, 45, 64, 0.28);
  background-color: #fff4cf;
  color: #2d1f00 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.task-auto__inline-login-link:hover,
.client-runtime-warning__link:hover {
  background-color: #ffe8ad;
  color: #1f1600 !important;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .client-runtime-warning__body {
    flex-wrap: wrap;
  }

  .client-runtime-warning__link {
    margin-left: 0;
  }
}

.client-install-info-modal .modal-content {
  border: 1px solid rgba(22, 32, 56, 0.16);
  border-radius: 14px;
  background: linear-gradient(165deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 20px 45px rgba(17, 24, 39, 0.28);
}

.client-install-info-modal .modal-header {
  border-bottom: none;
  padding: 0.95rem 1.2rem 0.45rem;
}

.client-install-info-modal__title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: #22314d;
  font-size: 1.02rem;
  font-weight: 800;
}

.client-install-info-modal__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 166, 90, 0.16);
  color: #1f8f4d;
}

.client-install-info-modal .modal-body {
  padding: 0.15rem 1.2rem 0.45rem;
}

.client-install-info-modal__message {
  margin: 0;
  color: #344560;
  font-size: 0.95rem;
  line-height: 1.45;
}

.client-install-info-modal .modal-footer {
  border-top: none;
  padding: 0.35rem 1.2rem 1.05rem;
  gap: 0.45rem;
}

.client-install-info-modal__cta {
  font-weight: 800;
}

.client-install-info-modal__close {
  min-width: 72px;
}


.task-auto__campaign-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-left: 0;
  justify-content: flex-start;
}

.task-auto__campaign-working-hours {
  align-items: center;
  padding: 0.2rem 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background-color: rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.task-auto__campaign-working-hours--readonly {
  opacity: 0.88;
}

.task-auto__campaign-working-hours--readonly .task-auto__working-hours-input:disabled {
  opacity: 0.92;
}

.task-auto__campaign-start-group {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.task-auto__group .task-nav-bar__btn {
  width: var(--task-auto-btn-width);
  min-height: 36px;
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}

.task-auto__group--schedule .task-auto__schedule-btn {
  width: auto;
  min-width: var(--task-auto-action-width);
}

.task-auto__campaign-actions .task-auto__campaign-toggle {
  width: auto;
  min-width: var(--task-auto-action-width);
}

.task-auto__schedule-btn--daily {
  background-color: #25a65a;
  border-color: #25a65a;
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.task-auto__schedule-btn--daily:hover {
  background-color: #1f8f4d;
  border-color: #1f8f4d;
  color: #fff;
}

.task-auto__group--schedule .task-auto__schedule-btn--daily {
  border-left-width: 1px;
  border-radius: 0.32rem;
}

.task-auto__group--schedule .task-auto__schedule-btn--single {
  border-radius: 0.32rem;
}

.task-auto__group--schedule .task-auto__schedule-btn--single-active {
  border-radius: 0.32rem;
}

.task-auto__campaign-toggle {
  min-height: 48px;
  padding: 0.45rem 1rem;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  border-color: rgba(25, 135, 84, 1);
  background-color: rgba(25, 135, 84, 0.95);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.24);
}

.task-auto__campaign-toggle:hover {
  background-color: rgba(22, 120, 75, 1);
  border-color: rgba(255, 255, 255, 0.95);
}

.task-auto__campaign-toggle:disabled {
  opacity: 0.7;
  box-shadow: none;
}

.task-auto__campaign-tasks {
  min-height: 42px;
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.18);
}

.task-auto__campaign-groups {
  min-height: 42px;
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.18);
}

.task-auto__tasks-count {
  margin-left: 0.25rem;
  font-weight: 800;
}

.task-auto__campaign-queue {
  min-height: 42px;
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.18);
}

.task-auto__campaign-icons,
.campaign-task-shortcuts__icons {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Ikony renderowane na jasnych powierzchniach (biały wiersz kampanii, modal zadań) —
   kolory brandowe z tokenów, nie białe półprzezroczyste (nieczytelne na białym tle). */
.task-auto__campaign-icon,
.campaign-task-shortcuts__icon {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ld-brand-soft, #f1edfe);
  border: 1px solid var(--ld-brand, #6c4cf1);
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.72rem;
}


.task-auto__campaign-toggle--stop {
  background-color: rgba(220, 53, 69, 0.95);
  border-color: rgba(220, 53, 69, 1);
  color: #fff;
  box-shadow: 0 4px 10px rgba(99, 0, 11, 0.38);
}

.task-auto__campaign-toggle--stop:hover {
  background-color: rgba(200, 35, 51, 1);
  border-color: rgba(255, 255, 255, 0.95);
}

.task-auto__workmode-alert {
  margin-top: 4px;
  margin-bottom: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
}

.task-auto__campaign-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.task-auto__groups-modal-body .card {
  margin-bottom: 0 !important;
}

.task-auto__groups-modal-body .widget-content-wrapper {
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 0.45rem;
}

.task-auto__queue-modal-body {
  max-height: 68vh;
  overflow-y: auto;
}

.task-auto__queue-funnel-row + .task-auto__queue-funnel-row {
  margin-top: 1rem;
}

.task-auto__queue-funnel-title {
  font-size: 0.84rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.task-auto__campaign-task-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.45rem;
  background-color: rgba(255, 255, 255, 0.06);
}

.task-auto__campaign-task-name {
  flex: 1 1 180px;
  font-size: 0.78rem;
}

.task-auto__campaign-task-state {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  min-width: 110px;
  text-align: center;
  border-radius: 999px;
  padding: 0.14rem 0.4rem;
}

.task-auto__campaign-task-controls {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.4rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.task-auto__campaign-task-state--on {
  background-color: rgba(40, 167, 69, 0.18);
  color: #2ac055;
  border: 1px solid rgba(40, 167, 69, 0.35);
}

.task-auto__campaign-task-state--off {
  background-color: rgba(108, 117, 125, 0.22);
  color: #d1d5db;
  border: 1px solid rgba(108, 117, 125, 0.35);
}

.task-auto__campaign-task-schedule {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.35rem;
  margin-left: 0;
  padding: 0.18rem 0.28rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(255, 255, 255, 0.05);
}

.task-auto__campaign-task-schedule--readonly,
.task-auto__campaign-task-schedule.campaign-task-schedule--readonly {
  opacity: 0.8;
}

.task-auto__campaign-task-schedule-field {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.task-auto__campaign-task-schedule-field label {
  margin: 0;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.1;
}

.task-auto__campaign-task-schedule-input {
  width: var(--task-auto-time-width);
  min-width: var(--task-auto-time-width);
  max-width: var(--task-auto-time-width);
  height: var(--task-auto-control-height);
  padding: 0.16rem 0.3rem;
  font-size: 0.72rem;
}

.task-auto__campaign-task-schedule-input[readonly],
.task-auto__campaign-task-schedule-input:disabled {
  opacity: 0.9;
}

.task-auto__campaign-task-action {
  min-width: var(--task-auto-action-width);
  min-height: var(--task-auto-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-auto__campaign-empty {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
}

.campaign-task-shortcuts {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.2rem;
}

.campaign-task-shortcuts__button {
  min-width: 2rem;
}

.campaign-btn-stage {
  align-items: center;
  gap: 0.35rem;
}

.campaign-btn-stage__group {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.2rem 0.3rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: rgba(0, 0, 0, 0.03);
}

.campaign-btn-stage__group--tasks .campaign-task-shortcuts {
  margin-right: 0;
}

@media (max-width: 991px) {
  .task-auto-host {
    --task-auto-btn-width: 220px;
    --task-auto-action-width: 190px;
    --task-auto-time-width: 88px;
  }

  .task-auto__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 0.35rem;
  }

  .task-auto__group--campaign {
    justify-content: flex-start;
  }

  .task-auto__group--schedule {
    flex-direction: row;
    align-items: stretch;
    gap: 0.35rem;
  }

  .task-auto__schedule-section {
    width: auto;
    padding: 0;
    flex: 1 1 280px;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .task-auto__schedule-section--single {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    padding-right: 0.45rem;
    padding-bottom: 0;
  }

  .task-auto__schedule-section--daily {
    padding-left: 0.45rem;
  }

  .task-auto__schedule {
    display: flex;
    align-items: flex-end;
    flex: 1 1 260px;
    gap: 0.25rem;
    min-width: 220px;
  }

  .task-auto__schedule label {
    width: 100%;
  }

  .task-auto__schedule input.task-auto-start-datetime {
    width: auto;
    min-width: 170px;
    max-width: 240px;
    flex: 1 1 190px;
  }

  .task-auto__campaign-actions {
    margin-left: 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .task-auto__campaign-working-hours {
    width: auto;
    justify-content: flex-start;
    padding: 0.25rem 0.3rem;
  }

  .task-auto__campaign-start-group {
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 100%;
  }

  .task-auto__working-hours-field {
    min-width: 84px;
    flex: 0 1 92px;
  }

  .task-auto__working-hours-input {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
  }

  .task-auto__actions,
  .task-auto__group--quick {
    width: auto;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .task-auto__schedule-section .task-auto__actions {
    margin-left: auto;
  }

  .task-auto__group .task-nav-bar__btn {
    width: auto;
    max-width: 100%;
  }

  .task-auto__actions--schedule {
    gap: 0;
    width: auto;
  }

  .task-auto__actions--active-single,
  .task-auto__actions--active-stop {
    width: auto;
  }

  .task-auto__actions--active-stop {
    margin-left: auto;
  }

  .task-auto__group--schedule .task-auto-start-datetime {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
  }

  .task-auto__group--schedule .task-auto__schedule-btn {
    border-radius: 0.32rem;
    border-left-width: 1px;
    min-width: var(--task-auto-action-width);
  }

  .task-auto__campaign-task-controls {
    margin-left: auto;
  }

  .task-auto__campaign-task-schedule {
    margin-left: 0;
  }

  .task-auto__task-panel {
    padding: 0.52rem 0.55rem;
  }
}

@media (max-width: 767px) {
  .task-auto-host {
    --task-auto-btn-width: 100%;
    --task-auto-action-width: 100%;
    --task-auto-time-width: 100%;
  }

  .card.mb-3.widget-content.bg-dark .widget-numbers .btn,
  .card.mb-3.widget-content.bg-dark .widget-content-right .btn {
    min-width: 0;
    width: 100%;
  }

  .task-auto__group--schedule {
    flex-direction: column;
  }

  .task-auto__schedule-section {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex: 1 1 100%;
  }

  .task-auto__schedule-section--single {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-right: 0;
    padding-bottom: 0.4rem;
  }

  .task-auto__schedule-section--daily {
    padding-left: 0;
  }

  .task-auto__schedule {
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    min-width: 0;
  }

  .task-auto__schedule label {
    width: auto;
  }

  .task-auto__schedule input.task-auto-start-datetime {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  .task-auto__campaign-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .task-auto__campaign-start-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .task-auto__campaign-working-hours {
    width: 100%;
  }

  .task-auto__working-hours {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.35rem;
  }

  .task-auto__working-hours-field {
    min-width: 0;
    flex: 1 1 auto;
  }

  .task-auto__working-hours-input {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .task-auto__actions,
  .task-auto__group--quick {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .task-auto__schedule-section .task-auto__actions {
    margin-left: 0;
  }

  .task-auto__group .task-nav-bar__btn {
    width: 100%;
    min-width: 0;
  }

  .task-auto__actions--schedule {
    width: 100%;
  }

  .task-auto__actions--active-single,
  .task-auto__actions--active-stop {
    width: 100%;
    margin-left: 0;
  }

  .task-auto__campaign-task-row {
    align-items: stretch;
  }

  .task-auto__campaign-task-name {
    flex: 1 1 100%;
  }

  .task-auto__campaign-task-schedule {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    justify-content: flex-start;
    margin-left: 0;
  }

  .task-auto__campaign-task-schedule-field {
    min-width: 0;
  }

  .task-auto__campaign-task-controls {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .task-auto__campaign-task-schedule-input {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .task-auto__campaign-task-action {
    width: 100%;
    min-width: 0;
  }

  .task-auto__task-panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .task-auto__task-panel .task-auto__schedule input.task-auto-start-datetime,
  .task-auto__task-panel .task-auto__schedule-section .task-nav-bar__btn {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .task-auto__working-hours,
  .task-auto__campaign-task-schedule {
    grid-template-columns: 1fr;
  }
}


.language-dropdown-arrow {
  font-size: 0.68rem;
}

.account-dropdown-options-icon {
  font-size: 0.72rem;
}

.account-dropdown-arrow {
  font-size: 0.82rem;
}

.dropdown-account-summary {
  padding: 0.5rem 0.9rem 0.45rem;
  max-width: 320px;
}

.dropdown-account-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #343a40;
  line-height: 1.25;
}

.dropdown-account-row + .dropdown-account-row {
  margin-top: 0.25rem;
}

.dropdown-account-icon {
  width: 0.9rem;
  text-align: center;
  color: #6c757d;
  flex-shrink: 0;
}

.dropdown-account-value {
  font-size: 0.82rem;
  word-break: break-word;
}

/* ============================================================
   LD Design tokens — wspólny kontrakt dla wszystkich motywów.
   Wartości poniżej to DOMYŚLNE (paleta NEW_LEADYA); każdy plik
   motywu nadpisuje je własnymi kolorami marki w :root.
   Kolory semantyczne (success/warning/danger/info) powinny być
   identyczne we wszystkich jasnych motywach.
   Opis designu: design/Leadya-New-Design.md
   ============================================================ */
:root {
  --ld-brand: #6c4cf1;
  --ld-brand-hover: #5a3bd8;
  --ld-brand-soft: #f1edfe;
  /* Kolor tekstu NA tle --ld-brand. Biel wystarcza w motywach z ciemną marką
     (4,8:1 i wyżej); motyw z jasną marką musi nadpisać ten token ciemną wartością. */
  --ld-brand-ink: #ffffff;
  --ld-link: var(--ld-brand-hover);
  --ld-ink: #14122b;
  --ld-accent: #ffc24b;
  --ld-accent-ink: #5c3d00;
  --ld-bg: #f6f7fb;
  --ld-surface: #ffffff;
  --ld-border: #e6e8f0;
  --ld-border-soft: #f0f1f5;
  --ld-text: #1a1d2e;
  --ld-text-muted: #667085;
  --ld-success: #12b76a;
  --ld-success-bg: #e7f8f0;
  --ld-success-ink: #0e7a4f;
  /* Tło przycisku .btn-success (nie tekst). Osobny token, bo --ld-success-ink
     opisuje kolor TEKSTU na powierzchni motywu — w LeadYa Dark jest jasnozielony
     (#6fe0ae) i jako tło przycisku z białym napisem dawałby 1,62:1. Ta wartość
     ma trzymać biały tekst powyżej 4,5:1 (tu 5,36:1). */
  --ld-success-btn: #0e7a4f;
  --ld-warning: #f79009;
  --ld-warning-bg: #fdf3e2;
  --ld-warning-ink: #935e06;
  --ld-danger: #f04438;
  --ld-danger-bg: #fcebeb;
  --ld-danger-ink: #a32d2d;
  --ld-info: #2e90fa;
  --ld-info-bg: #e8f2fe;
  --ld-info-ink: #1560ac;
  --ld-radius: 12px;
  --ld-radius-sm: 8px;
  --ld-focus-ring: 0 0 0 0.2rem rgba(108, 76, 241, 0.2);
}

/* --- LD komponenty wspólne (opt-in, nie nadpisują istniejących klas) --- */

/* Badge statusu: tint + tekst z tej samej rodziny koloru */
.ld-badge {
  display: inline-block;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.28rem 0.65rem;
  white-space: nowrap;
}
.ld-badge--brand   { background: var(--ld-brand-soft); color: var(--ld-link); }
.ld-badge--success { background: var(--ld-success-bg); color: var(--ld-success-ink); }
.ld-badge--warning { background: var(--ld-warning-bg); color: var(--ld-warning-ink); }
.ld-badge--danger  { background: var(--ld-danger-bg);  color: var(--ld-danger-ink); }
.ld-badge--info    { background: var(--ld-info-bg);    color: var(--ld-info-ink); }
.ld-badge--neutral { background: var(--ld-border-soft); color: var(--ld-text); }

/* Chip filtra (pigułka) */
.ld-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--ld-border);
  background: var(--ld-surface);
  color: var(--ld-text);
  font-size: 0.78rem;
  padding: 0.32rem 0.75rem;
  cursor: pointer;
  user-select: none;
}
.ld-chip:hover { border-color: var(--ld-brand); color: var(--ld-brand); text-decoration: none; }
.ld-chip--active,
.ld-chip--active:hover {
  background: var(--ld-ink);
  border-color: var(--ld-ink);
  color: #fff;
}

/* Kropka statusu (online/offline/warn) */
.ld-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ld-text-muted);
  margin-right: 0.35rem;
  vertical-align: middle;
}
.ld-dot--success { background: var(--ld-success); }
.ld-dot--warning { background: var(--ld-warning); }
.ld-dot--danger  { background: var(--ld-danger); }
.ld-dot--info    { background: var(--ld-brand); }

/* Nowoczesna karta: hairline zamiast ramki 2px i cienia */
.ld-card {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: none;
  color: var(--ld-text);
}

/* Graficzne akcje na stronie kont Facebook */
.account-page-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
}

.account-page-action {
  box-sizing: border-box;
  width: 100%;
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 0.8rem;
  min-height: 76px;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #1a1d2e);
  box-shadow: none;
  font: inherit;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}

.account-page-action:hover {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-ink, #14122b);
  text-decoration: none;
  transform: translateY(-1px);
}

.account-page-action:focus {
  outline: 0;
  box-shadow: var(--ld-focus-ring, 0 0 0 0.2rem rgba(108, 76, 241, 0.2));
}

.account-page-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-brand, #6c4cf1);
  font-size: 1.15rem;
}

.account-page-action__label {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.account-page-action__arrow {
  color: var(--ld-text-muted, #667085);
  font-size: 0.75rem;
  transition: transform 0.18s ease;
}

.account-page-action:hover .account-page-action__arrow {
  color: currentColor;
  transform: translateX(2px);
}

.account-page-action--primary,
.account-page-action--primary:hover {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink);
}

.account-page-action--primary:hover {
  background: var(--ld-brand-hover, #5a3bd8);
}

.account-page-action--primary .account-page-action__icon {
  /* Kafelek i strzalka leza na tle marki, wiec biora jej atrament: w LeadYa Dark
     marka jest jasnym pomaranczem i biel dawala 2,48:1 oraz 2,21:1. */
  background: rgba(127, 127, 127, 0.18);
  color: var(--ld-brand-ink, #ffffff);
}

.account-page-action--primary .account-page-action__arrow {
  color: var(--ld-brand-ink, #ffffff);
  opacity: 0.85;
}

.account-page-action--buy .account-page-action__icon {
  background: var(--ld-accent, #ffc24b);
  color: var(--ld-accent-ink, #5c3d00);
}

.account-page-action--admin .account-page-action__icon {
  background: var(--ld-info-bg, #e8f2fe);
  color: var(--ld-info-ink, #1560ac);
}

/* Kompaktowy wybór źródła konta na widokach pierwszego konta (FB/IG).
   Kafelki reużywają .account-page-action; jednolinijkowy hint zamiast dużych
   kart opisowych, żeby formularz dodania konta był widoczny bez przewijania. */
.account-source-choice {
  width: 100%;
  margin-bottom: 1rem;
}

.account-source-choice__title {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ld-text, #1a1d2e);
}

.account-source-choice__actions {
  margin-top: 0;
}

.account-source-choice__hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 450;
  line-height: 1.35;
  color: var(--ld-text-muted, #667085);
}

.account-page-action--primary .account-source-choice__hint {
  color: var(--ld-brand-ink);
}

/* Classic i Sky mają jasną kartę .bg-dark; dziedziczymy kolor powierzchni. */
.account-form__title {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: inherit;
}

/* Facebook workspace: account -> login -> campaign -> actions */
.facebook-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-bottom: 0.75rem;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  background: var(--ld-surface);
  overflow: hidden;
}

.facebook-journey__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  min-height: 58px;
  padding: 0.65rem 0.75rem;
  color: var(--ld-text-muted);
  text-decoration: none !important;
}

.facebook-journey__step:not(:last-child) {
  border-right: 1px solid var(--ld-border-soft);
}

.facebook-journey__step:hover,
.facebook-journey__step:focus {
  background: var(--ld-brand-soft);
  color: var(--ld-text);
}

.facebook-journey__step:focus {
  outline: 0;
  box-shadow: inset var(--ld-focus-ring);
}

.facebook-journey__step.is-active {
  background: var(--ld-brand-soft);
  color: var(--ld-text);
}

.facebook-journey__step.is-active::after {
  position: absolute;
  right: 0.65rem;
  bottom: 0;
  left: 0.65rem;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--ld-brand);
  content: "";
}

.facebook-journey__number {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ld-border);
  border-radius: 50%;
  background: var(--ld-surface);
  color: var(--ld-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.facebook-journey__step.is-complete .facebook-journey__number,
.facebook-journey__step.is-active .facebook-journey__number {
  border-color: var(--ld-brand);
  background: var(--ld-brand);
  color: var(--ld-brand-ink);
}

.facebook-journey__step small,
.facebook-journey__step strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facebook-journey__step small {
  margin-bottom: 0.08rem;
  color: var(--ld-text-muted);
  font-size: 0.67rem;
  font-weight: 500;
}

.facebook-journey__step strong {
  color: var(--ld-text);
  font-size: 0.82rem;
}

.facebook-workspace__eyebrow {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ld-brand);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facebook-workspace-switcher {
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.9rem;
}

.facebook-workspace-switcher__intro {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(260px, 1fr);
  align-items: end;
  column-gap: 1rem;
  margin-bottom: 0.75rem;
}

.facebook-workspace-switcher__intro .facebook-workspace__eyebrow {
  grid-column: 1 / -1;
}

.facebook-workspace-switcher__intro h1,
.facebook-account-manager__heading h1,
.facebook-main-page-actions__heading h2 {
  margin: 0;
  color: var(--ld-text);
  font-size: 1.15rem;
  font-weight: 700;
}

.facebook-workspace-switcher__intro p,
.facebook-account-manager__heading p,
.facebook-main-page-actions__heading p {
  margin: 0;
  color: var(--ld-text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.facebook-workspace-switcher__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: stretch;
  gap: 0.5rem;
}

.facebook-workspace-switcher__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ld-text-muted);
  font-size: 0.72rem;
}

.facebook-workspace-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  align-items: center;
  gap: 0.55rem 0.75rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--ld-border-soft);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-bg);
}

.facebook-workspace-control__label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.facebook-workspace-control__label small,
.facebook-workspace-control__label strong {
  display: block;
}

.facebook-workspace-control__label small {
  color: var(--ld-text-muted);
  font-size: 0.67rem;
}

.facebook-workspace-control__label strong {
  overflow: hidden;
  color: var(--ld-text);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facebook-workspace-control__icon {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ld-radius-sm);
  background: var(--ld-brand-soft);
  color: var(--ld-brand);
}

.facebook-workspace-control__select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 2rem 0 0.65rem;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-surface);
  color: var(--ld-text);
  font-size: 0.78rem;
  font-weight: 600;
}

.facebook-workspace-control__select:focus {
  border-color: var(--ld-brand);
  outline: 0;
  box-shadow: var(--ld-focus-ring);
}

.facebook-workspace-control__select:disabled {
  opacity: 1;
  cursor: default;
}

.facebook-workspace-control__manage,
.facebook-workspace-control__links {
  grid-column: 1 / -1;
  font-size: 0.72rem;
}

.facebook-workspace-control__manage {
  color: var(--ld-text-muted);
}

.facebook-workspace-control__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
}

.facebook-workspace-control__create {
  font-weight: 700;
}

.facebook-workspace-control__fixed,
.facebook-workspace-control__empty {
  color: var(--ld-text-muted);
  font-size: 0.77rem;
}

.facebook-workspace-control__fixed {
  color: var(--ld-brand);
  font-weight: 700;
}

.facebook-workspace-login-warning {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.7rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ld-warning);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-warning-bg);
  color: var(--ld-warning-ink);
}

.facebook-workspace-login-warning > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ld-surface);
}

.facebook-workspace-login-warning strong,
.facebook-workspace-login-warning p {
  display: block;
  margin: 0;
  color: inherit;
}

.facebook-workspace-login-warning p {
  margin-top: 0.1rem;
  font-size: 0.75rem;
}

.facebook-account-manager {
  width: 100%;
  margin-top: 0.75rem;
}

.facebook-account-manager__heading,
.facebook-main-page-actions__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.facebook-account-manager__heading p,
.facebook-main-page-actions__heading p {
  max-width: 760px;
  margin-top: 0.18rem;
}

.facebook-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0.7rem;
}

.facebook-account-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.8rem;
}

.facebook-account-card.is-selected {
  border-color: var(--ld-brand);
  box-shadow: inset 4px 0 0 var(--ld-brand);
}

.facebook-account-card__topline {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
}

.facebook-account-card__avatar,
.facebook-account-manager__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
}

.facebook-account-card__identity {
  min-width: 0;
}

.facebook-account-card__identity strong,
.facebook-account-card__identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facebook-account-card__identity strong {
  color: var(--ld-text);
  font-size: 0.9rem;
}

.facebook-account-card__identity span {
  margin-top: 0.08rem;
  color: var(--ld-text-muted);
  font-size: 0.72rem;
}

.facebook-account-card__status {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.52rem 0.6rem;
  border-radius: var(--ld-radius-sm);
  background: var(--ld-warning-bg);
  color: var(--ld-warning-ink);
}

.facebook-account-card__status.is-ready {
  background: var(--ld-success-bg);
  color: var(--ld-success-ink);
}

/* Partner programme reporting, application states and service empty states. */
.partner-network-hero__period { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.85rem 1rem; border-radius:16px; background:rgba(255,255,255,.14); color:#fff; }
.partner-network-hero__period label { width:100%; margin:0; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; opacity:.78; }
.partner-network-hero__period input { min-height:38px; padding:.35rem .55rem; border:1px solid rgba(255,255,255,.45); border-radius:9px; background:#fff; color:#222; }
.partner-level-roadmap article[role="button"] { cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.partner-level-roadmap article[role="button"]:hover,
.partner-level-roadmap article[role="button"]:focus-visible,
.partner-level-roadmap article.is-selected { transform:translateY(-2px); border-color:var(--ld-primary, #6d38e8); box-shadow:0 12px 28px rgba(70,44,140,.16); outline:none; }
.partner-level-target { margin-top:1rem; padding:1rem 1.15rem; border:1px solid rgba(109,56,232,.2); border-radius:16px; background:linear-gradient(135deg,#f6f2ff,#fff); }
.partner-level-target h3 { margin:.2rem 0 .25rem; font-size:1.05rem; }
.partner-level-target p { margin:0; color:#667085; }
.partner-level-target__packages { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.8rem; }
.partner-level-target__packages span { padding:.35rem .6rem; border-radius:999px; background:#fff; border:1px solid #e3dcfa; font-size:.78rem; }
.partner-level-rules article[data-tooltip] { position:relative; cursor:help; }
.partner-level-rules article[data-tooltip]::after { content:attr(data-tooltip); position:absolute; z-index:5; left:12px; right:12px; bottom:calc(100% + 8px); padding:.65rem; border-radius:10px; background:#172033; color:#fff; font-size:.75rem; line-height:1.35; opacity:0; transform:translateY(4px); pointer-events:none; transition:.15s ease; }
.partner-level-rules article[data-tooltip]:hover::after,
.partner-level-rules article[data-tooltip]:focus-visible::after { opacity:1; transform:none; }
.partner-internal-ladder { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
.partner-internal-ladder article { padding:1rem; border:1px solid #e7e2f5; border-radius:16px; background:#fff; }
.partner-internal-ladder article.is-current { border-color:#6d38e8; background:#f6f2ff; box-shadow:0 10px 24px rgba(70,44,140,.12); }
.partner-internal-ladder strong { color:#6d38e8; font-size:1.45rem; }
.partner-internal-ladder h3 { margin:.35rem 0; font-size:.95rem; }
.partner-internal-ladder p { margin:0; color:#667085; font-size:.8rem; }
.partner-admin-self-review { display:grid; gap:.75rem; margin-top:1rem; padding:1rem; border-radius:14px; background:#f6f2ff; text-align:left; }
.support-market-empty { display:flex; align-items:center; gap:1.25rem; min-height:210px; padding:2rem; border:1px dashed #cfc4ef; background:linear-gradient(135deg,#fbfaff,#f3efff); }
.support-market-empty__icon { display:grid; place-items:center; flex:0 0 70px; height:70px; border-radius:22px; background:#6d38e8; color:#fff; font-size:1.7rem; }
.support-market-empty h2 { margin:.25rem 0 .45rem; }
.support-market-empty p { max-width:650px; color:#667085; }
.support-market-empty__actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.account-unlock-hero,.partner-clients-hero { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-bottom:1rem; padding:1.5rem 1.65rem; border-radius:22px; background:linear-gradient(135deg,#172033,#6d38e8); color:#fff; box-shadow:0 18px 40px rgba(36,29,70,.18); }
.account-unlock-hero h1,.partner-clients-hero h1 { margin:.2rem 0 .35rem; color:#fff; }
.account-unlock-hero p,.partner-clients-hero p { max-width:720px; margin:0; color:rgba(255,255,255,.78); }
.account-unlock-hero > i { font-size:3rem; color:#ffd54a; }
.account-unlock-empty-state { display:flex; align-items:center; gap:1rem; margin:1rem 0; padding:1.25rem; border:1px dashed #cfc4ef; border-radius:18px; background:#f8f6ff; }
.account-unlock-empty-state > i { display:grid; place-items:center; flex:0 0 54px; height:54px; border-radius:16px; background:#ede7ff; color:#6d38e8; font-size:1.35rem; }
.account-unlock-empty-state h2 { margin:0 0 .25rem; font-size:1.1rem; }
.account-unlock-empty-state p { margin:0 0 .65rem; color:#667085; }
.partner-clients-hero__wallet { min-width:150px; padding:1rem; border-radius:16px; background:rgba(255,255,255,.13); text-align:center; }
.partner-clients-hero__wallet small,.partner-clients-hero__wallet span { display:block; color:rgba(255,255,255,.74); }
.partner-clients-hero__wallet strong { display:block; margin:.15rem 0; font-size:1.65rem; }
.partner-clients-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:1rem; }
.partner-clients-summary article { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.25rem .7rem; padding:1rem; border:1px solid #ece9f5; border-radius:16px; background:#fff; box-shadow:0 8px 22px rgba(36,29,70,.06); }
.partner-clients-summary i { grid-row:1 / 3; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#f1edff; color:#6d38e8; }
.partner-clients-summary span { color:#667085; font-size:.75rem; }
.partner-clients-summary strong { font-size:1.1rem; }
.partner-clients-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.partner-clients-toolbar h5 { margin:0; }
.partner-clients-toolbar label { position:relative; margin:0; min-width:min(340px,100%); }
.partner-clients-toolbar i { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:#8b849d; }
.partner-clients-toolbar input { padding-left:2.25rem; }
.partner-clients-table thead th { white-space:nowrap; border-top:0; color:var(--ld-text-muted, #5f5872); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.partner-clients-table tbody tr { transition:background .15s ease; }
.partner-clients-table tbody tr:hover { background:#faf8ff; }
@media (max-width:991.98px) {
  .partner-internal-ladder,.partner-clients-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575.98px) {
  .account-unlock-hero,.partner-clients-hero,.support-market-empty { align-items:flex-start; flex-direction:column; }
  .partner-clients-hero__wallet { width:100%; }
  .partner-internal-ladder,.partner-clients-summary { grid-template-columns:1fr; }
  .partner-clients-toolbar { align-items:stretch; flex-direction:column; }
}

.facebook-account-card__status.is-creating {
  background: var(--ld-brand-soft, rgba(24, 119, 242, 0.1));
  color: var(--ld-brand);
}

.facebook-account-creation .modal-header {
  align-items: flex-start;
}

.facebook-account-creation .modal-title {
  margin-top: 0.15rem;
}

.facebook-account-creation__hitl {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(24, 119, 242, 0.22);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-brand-soft, rgba(24, 119, 242, 0.08));
  color: var(--ld-text);
}

.facebook-account-creation__hitl > i {
  margin-top: 0.15rem;
  color: var(--ld-brand);
}

.facebook-account-creation__hitl strong,
.facebook-account-creation__hitl p {
  display: block;
  margin: 0;
}

.facebook-account-creation__hitl strong {
  font-size: 0.8rem;
}

.facebook-account-creation__hitl p {
  margin-top: 0.2rem;
  color: var(--ld-text-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.facebook-account-creation__terms {
  margin-top: 0.8rem;
}

.facebook-account-creation__terms .form-check-label {
  color: var(--ld-text);
  font-size: 0.78rem;
}

.facebook-account-creation__submit-loading::before {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.35rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  vertical-align: -0.1rem;
  animation: facebook-account-creation-spin 0.7s linear infinite;
}

@keyframes facebook-account-creation-spin {
  to { transform: rotate(360deg); }
}

.facebook-account-card__status strong,
.facebook-account-card__status small {
  display: block;
  color: inherit;
}

.facebook-account-card__status strong {
  font-size: 0.77rem;
}

.facebook-account-card__status small {
  margin-top: 0.05rem;
  font-size: 0.68rem;
}

.facebook-account-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0;
}

.facebook-account-card__meta div {
  min-width: 0;
}

.facebook-account-card__meta dt,
.facebook-account-card__meta dd {
  margin: 0;
}

.facebook-account-card__meta dt {
  color: var(--ld-text-muted);
  font-size: 0.63rem;
  font-weight: 500;
}

.facebook-account-card__meta dd {
  overflow: hidden;
  max-width: 180px;
  color: var(--ld-text);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facebook-account-card__primary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 0.45rem;
  margin-top: auto;
}

.facebook-account-card__primary-actions .btn {
  min-height: 36px;
  padding: 0.42rem 0.65rem;
  font-size: 0.75rem;
}

.facebook-account-card__secondary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ld-border-soft);
}

.facebook-account-card__icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-surface);
  color: var(--ld-text-muted);
  cursor: pointer;
}

.facebook-account-card__icon-action:hover,
.facebook-account-card__icon-action:focus {
  border-color: var(--ld-brand);
  color: var(--ld-brand);
  outline: 0;
  box-shadow: var(--ld-focus-ring);
}

.facebook-account-card__icon-action--danger:hover,
.facebook-account-card__icon-action--danger:focus {
  border-color: var(--ld-danger);
  color: var(--ld-danger);
}

.facebook-account-manager__empty {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem;
}

.facebook-account-manager__empty strong,
.facebook-account-manager__empty p {
  display: block;
  margin: 0;
  color: var(--ld-text);
}

.facebook-account-manager__empty p {
  margin-top: 0.12rem;
  color: var(--ld-text-muted);
  font-size: 0.78rem;
}

.facebook-main-page-actions__heading {
  max-width: 1320px;
  margin: 0.2rem auto 0.65rem;
}

.facebook-main-page-actions--compact .facebook-main-page-actions__hero,
.facebook-main-page-actions--compact .facebook-main-page-actions__grid {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.facebook-main-page-actions--compact .facebook-option-card,
.facebook-main-page-actions--compact .facebook-option-card--hero {
  grid-template-columns: minmax(0, 1fr) 54px 14px;
  min-height: 82px;
  padding: 0.72rem 0.8rem;
  border-color: var(--ld-border);
  border-radius: var(--ld-radius);
  background: var(--ld-surface);
  box-shadow: none;
}

.facebook-main-page-actions--compact .facebook-option-card__title,
.facebook-main-page-actions--compact .facebook-option-card--hero .facebook-option-card__title {
  color: var(--ld-text);
  font-size: 0.82rem;
}

.facebook-main-page-actions--compact .facebook-option-card__art,
.facebook-main-page-actions--compact .facebook-option-card--hero .facebook-option-card__art {
  width: 54px;
  height: 54px;
  padding: 0.38rem;
  border-radius: var(--ld-radius-sm);
}

.facebook-main-page-actions--compact .facebook-option-card__arrow,
.facebook-main-page-actions--compact .facebook-option-card--hero .facebook-option-card__arrow {
  color: var(--ld-text-muted);
}

/* Existing campaign controls, presented as light cards inside the Facebook workspace. */
.facebook-campaign-management-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -0.35rem 0 0.75rem;
}

.facebook-campaign-management .widget-content > .container-fluid:first-child .btn-turn-campaign {
  display: none;
}

.facebook-campaign-management .widget-content.bg-dark {
  gap: 0.6rem;
  padding: 0.8rem;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  background: var(--ld-surface) !important;
  color: var(--ld-text) !important;
}

.facebook-campaign-management .widget-content > .container-fluid:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0;
}

.facebook-campaign-management #createNewCampaignFromTemplateBtn {
  min-width: 0;
  margin: 0 !important;
  padding: 0.48rem 0.75rem;
  font-size: 0.78rem;
}

.facebook-campaign-management .widget-content > .container-fluid.mb-1 {
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-surface);
  overflow: hidden;
}

.facebook-campaign-management .form-control-full-height {
  min-height: 66px;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ld-text);
}

.facebook-campaign-management .form-control-full-height.current-campaign-button {
  background: var(--ld-brand-soft) !important;
  box-shadow: inset 4px 0 0 var(--ld-brand);
}

.facebook-campaign-management .firstCampaignDiv {
  flex: 1 1 auto;
  min-width: 180px;
}

.facebook-campaign-management .campaign-name,
.facebook-campaign-management .campaign-description {
  color: var(--ld-text);
}

.facebook-campaign-management .campaign-name {
  font-size: 0.86rem;
}

.facebook-campaign-management .campaign-description {
  margin-top: 0.12rem;
  color: var(--ld-text-muted);
  font-size: 0.7rem;
}

.facebook-campaign-management .campaign-btn-stage__group {
  border-color: var(--ld-border);
  background: var(--ld-bg);
}

.facebook-campaign-management .btn {
  min-height: 32px;
  padding: 0.32rem 0.55rem;
  font-size: 0.72rem;
}

@media (max-width: 575.98px) {
  .facebook-journey {
    grid-template-columns: repeat(4, minmax(58px, 1fr));
    overflow-x: auto;
  }

  .facebook-journey__step {
    flex-direction: column;
    gap: 0.25rem;
    min-height: 64px;
    padding: 0.45rem 0.3rem;
    text-align: center;
  }

  .facebook-journey__step small {
    display: none;
  }

  .facebook-journey__step strong {
    max-width: 100%;
    font-size: 0.62rem;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }

  .facebook-workspace-switcher__intro,
  .facebook-workspace-switcher__controls,
  .facebook-workspace-control {
    grid-template-columns: 1fr;
  }

  .facebook-workspace-switcher__intro {
    align-items: start;
    gap: 0.2rem;
  }

  .facebook-workspace-switcher__arrow {
    transform: rotate(90deg);
  }

  .facebook-workspace-login-warning {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .facebook-workspace-login-warning .btn {
    grid-column: 1 / -1;
  }

  .facebook-account-manager__heading,
  .facebook-main-page-actions__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .facebook-account-grid {
    grid-template-columns: 1fr;
  }

  .facebook-account-card__topline {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .facebook-account-card__topline .ld-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .facebook-campaign-management .form-control-full-height {
    align-items: stretch !important;
  }

  .facebook-campaign-management .campaign-btn-stage {
    width: 100%;
  }

  .account-page-actions {
    grid-template-columns: 1fr;
  }

  .account-page-action {
    min-height: 68px;
  }
}

/* Główne CTA kreatora kampanii na stronie kont (konto bez żadnej realnej kampanii) */
.campaign-cta {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ld-border);
  border-left: 4px solid var(--ld-brand);
  border-radius: var(--ld-radius);
  background: var(--ld-surface);
  color: var(--ld-text);
}

.campaign-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--ld-radius-sm);
  background: var(--ld-brand);
  color: var(--ld-brand-ink);
  font-size: 1.4rem;
}

.campaign-cta__body {
  min-width: 0;
}

.campaign-cta__title {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ld-text);
}

/* Ograniczenie dlugosci wiersza: na szerokim ekranie opis inaczej ciagnie sie przez cala strone */
.campaign-cta__copy {
  margin: 0;
  max-width: 90ch;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ld-text-muted);
}

.campaign-cta__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--ld-brand);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-brand);
  color: var(--ld-brand-ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.campaign-cta__action:hover,
.campaign-cta__action:focus {
  background: var(--ld-brand-hover);
  border-color: var(--ld-brand-hover);
  color: var(--ld-brand-ink);
  text-decoration: none;
}

/* Domyślny --ld-focus-ring ma 0.2 alfy i ginie na przycisku w kolorze marki,
   więc focus jest tu rysowany przerwą w kolorze powierzchni i pierścieniem marki
   (marka do powierzchni ma 4,8:1 lub więcej w każdym motywie, WCAG 1.4.11 wymaga 3:1) */
.campaign-cta__action:focus {
  outline: 0;
  box-shadow: 0 0 0 2px var(--ld-surface), 0 0 0 4px var(--ld-brand);
}

@media (max-width: 767.98px) {
  .campaign-cta {
    grid-template-columns: 44px minmax(0, 1fr);
    /* Tekst jest tu wielowierszowy, wiec ikona wyrownuje sie do naglowka, a nie do srodka akapitu */
    align-items: start;
    row-gap: 0.85rem;
  }

  .campaign-cta__icon {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }

  .campaign-cta__action {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* Spójny focus dla pól formularzy we wszystkich motywach */
.form-control:focus,
.custom-select:focus {
  border-color: var(--ld-brand);
  box-shadow: var(--ld-focus-ring);
}

/* Onboarding pierwszej konfiguracji */
.leadya-onboarding {
  position: relative;
  margin: 0 0 1rem;
  padding: 1.1rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #1a1d2e);
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.06);
  z-index: 3;
}

.leadya-onboarding--dismissed {
  display: none;
}

.leadya-onboarding__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 1rem;
  align-items: start;
}

.leadya-onboarding__layout--single {
  grid-template-columns: 1fr;
}

.leadya-onboarding__main {
  min-width: 0;
}

.leadya-onboarding__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.leadya-onboarding__eyebrow {
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leadya-onboarding__title {
  margin: 0.2rem 0 0.35rem;
  color: var(--ld-text, #14122b);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

.leadya-onboarding__copy {
  max-width: 850px;
  margin: 0;
  color: var(--ld-text-muted, #667085);
  line-height: 1.5;
}

.leadya-onboarding__dismiss {
  border: 0;
  background: transparent;
  color: var(--ld-text-muted, #667085);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.leadya-onboarding__dismiss:hover,
.leadya-onboarding__dismiss:focus {
  color: var(--ld-ink, #14122b);
  text-decoration: underline;
  outline: none;
}

.leadya-onboarding__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.leadya-onboarding__step {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-bg, #f6f7fb);
  color: var(--ld-text-muted, #667085);
  font-size: 0.82rem;
  font-weight: 700;
}

.leadya-onboarding__step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ld-border, #e6e8f0);
  flex: 0 0 auto;
}

.leadya-onboarding__step-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modyfikatory .is-done/.is-active zamiast BEM --done/--active: nazwy z "__"
   nie mogą występować w wyrażeniach th:* (preprocessing Thymeleafa). */
.leadya-onboarding__step.is-done {
  border-color: var(--ld-success-bg, #e7f8f0);
  background: var(--ld-success-bg, #e7f8f0);
  color: var(--ld-success-ink, #0e7a4f);
}

.leadya-onboarding__step.is-done .leadya-onboarding__step-dot {
  background: var(--ld-success, #12b76a);
}

.leadya-onboarding__step.is-active {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-brand, #6c4cf1);
}

.leadya-onboarding__step.is-active .leadya-onboarding__step-dot {
  background: var(--ld-brand, #6c4cf1);
}

.leadya-onboarding__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.leadya-onboarding__cta,
.leadya-onboarding__secondary {
  min-height: 40px;
  border-radius: var(--ld-radius-sm, 8px);
  font-weight: 800;
}

.leadya-onboarding-anchor-active {
  position: relative;
  outline: 3px solid rgba(108, 76, 241, 0.18);
  outline-offset: 6px;
  border-radius: var(--ld-radius, 12px);
}

.leadya-onboarding-bubble {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  width: min(340px, calc(100vw - 24px));
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--ld-brand, #6c4cf1);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #1a1d2e);
  box-shadow: 0 18px 45px rgba(20, 18, 43, 0.14);
  z-index: 1100;
  text-align: left;
}

.leadya-onboarding-bubble::before {
  position: absolute;
  width: 14px;
  height: 14px;
  border: solid var(--ld-brand, #6c4cf1);
  background: var(--ld-surface, #fff);
  content: '';
  transform: rotate(45deg);
}

.leadya-onboarding-bubble.is-right::before {
  left: -8px;
  top: calc(50% - 7px);
  border-width: 0 0 1px 1px;
}

.leadya-onboarding-bubble.is-left::before {
  right: -8px;
  top: calc(50% - 7px);
  border-width: 1px 1px 0 0;
}

.leadya-onboarding-bubble.is-bottom::before {
  left: calc(50% - 7px);
  top: -8px;
  border-width: 1px 0 0 1px;
}

.leadya-onboarding-bubble.is-top::before {
  left: calc(50% - 7px);
  bottom: -8px;
  border-width: 0 1px 1px 0;
}

.leadya-onboarding-bubble__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.leadya-onboarding-bubble__header strong {
  color: var(--ld-text, #14122b);
  font-size: 0.9rem;
}

.leadya-onboarding-bubble__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ld-brand, #6c4cf1);
  border-radius: 50%;
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-brand, #6c4cf1);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.leadya-onboarding-bubble__close:hover,
.leadya-onboarding-bubble__close:focus {
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  box-shadow: var(--ld-focus-ring, 0 0 0 3px rgba(108, 76, 241, 0.2));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.leadya-onboarding-bubble__body {
  margin: 0;
  color: var(--ld-text-muted, #667085);
  font-size: 0.84rem;
  line-height: 1.45;
}

.leadya-onboarding-bubble__dismiss {
  width: fit-content;
  min-height: 36px;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--ld-brand, #6c4cf1);
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
}

.leadya-onboarding-bubble__dismiss:hover,
.leadya-onboarding-bubble__dismiss:focus {
  background: var(--ld-brand-strong, #5939df);
  color: var(--ld-brand-ink, #ffffff);
  box-shadow: var(--ld-focus-ring, 0 0 0 3px rgba(108, 76, 241, 0.2));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.leadya-onboarding__academy {
  min-width: 0;
  border: 1px solid rgba(108, 76, 241, 0.16);
  border-radius: var(--ld-radius-sm, 8px);
  background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
  overflow: hidden;
}

.leadya-onboarding__academy-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--ld-border, #e6e8f0);
}

.leadya-onboarding__academy-label {
  color: var(--ld-ink, #14122b);
  font-size: 0.82rem;
  font-weight: 800;
}

.leadya-onboarding__academy-note {
  color: var(--ld-text-muted, #667085);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.leadya-onboarding__video-list {
  display: grid;
  gap: 0.9rem;
  padding: 0.85rem;
  max-height: 420px;
  overflow: auto;
}

.leadya-onboarding__video-item {
  display: grid;
  gap: 0.65rem;
}

.leadya-onboarding__video-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.leadya-onboarding__video-title {
  min-width: 0;
  color: var(--ld-ink, #14122b);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
}

.leadya-onboarding__video-done {
  flex: 0 0 auto;
  border-radius: var(--ld-radius-sm, 8px);
  font-size: 0.75rem;
  font-weight: 800;
}

.leadya-onboarding__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ld-radius-sm, 8px);
  background: #101828;
}

.leadya-onboarding__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.leadya-onboarding__video-copy {
  max-height: 5.5rem;
  margin: 0;
  overflow: auto;
  color: var(--ld-text-muted, #667085);
  font-size: 0.82rem;
  line-height: 1.45;
}

.academy-routing-board {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.academy-routing-section {
  padding: 1rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #fff);
}

.academy-routing-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.academy-routing-section__title {
  margin: 0 0 0.25rem;
  color: var(--ld-ink, #14122b);
  font-weight: 800;
}

.academy-routing-section__copy {
  margin: 0;
  color: var(--ld-text-muted, #667085);
}

.academy-routing-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}

.academy-routing-item {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-bg, #f6f7fb);
}

.academy-routing-item__button {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.academy-routing-item__button:focus {
  outline: 3px solid rgba(108, 76, 241, 0.18);
  outline-offset: 3px;
}

.academy-routing-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.academy-routing-item__name {
  color: var(--ld-ink, #14122b);
  font-weight: 800;
  line-height: 1.25;
}

.academy-routing-item__chevron {
  flex: 0 0 auto;
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.78rem;
  font-weight: 800;
}

.academy-routing-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.academy-training-versions {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ld-border, #e6e8f0);
}

.academy-routing-pages {
  margin-bottom: 0.75rem;
}

.academy-language-table {
  display: grid;
  gap: 0.45rem;
}

.academy-language-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.55rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 8px;
  background: #fff;
}

.academy-language-row__lang {
  padding-top: 0.15rem;
}

.academy-language-row__content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

.academy-language-version {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.academy-language-version strong {
  min-width: 180px;
  max-width: 100%;
  color: var(--ld-ink, #14122b);
}

.academy-routing-page-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.academy-routing-page-list code {
  display: inline-flex;
  padding: 0.2rem 0.42rem;
  border-radius: 6px;
  background: #fff;
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.78rem;
}

@media (max-width: 991px) {
  .leadya-onboarding__layout {
    grid-template-columns: 1fr;
  }

  .leadya-onboarding__header {
    flex-direction: column;
  }

  .leadya-onboarding__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 575px) {
  .leadya-onboarding__steps {
    grid-template-columns: 1fr;
  }

  .leadya-onboarding__dismiss {
    white-space: normal;
  }

  .leadya-onboarding__video-title-row,
  .academy-routing-section__head,
  .academy-routing-item__top {
    flex-direction: column;
    align-items: stretch;
  }

  .academy-language-row {
    grid-template-columns: 1fr;
  }
}

/* Compact LeadYa sidebar shell */
.leadya-sidebar.app-sidebar {
  width: 280px;
  min-width: 280px;
  flex: 0 0 280px;
  /* ArchitectUI trzyma .app-sidebar pod fixed headerem przez margin-top: -60px
     + padding-top: 60px liczone od pozycji statycznej. Nasze top: 0 kasuje ten
     punkt odniesienia, więc ujemny margines podnosił cały sidebar o 60 px:
     logo i górna krawędź pierwszej pozycji railu chowały się pod nagłówkiem,
     a na dole zostawał pusty pasek. */
  margin-top: 0;
  top: 0 !important;
  height: 100vh;
  background: var(--ld-surface, #fff);
  border-right: 1px solid var(--ld-border, #e6e8f0);
  box-shadow: none;
  z-index: 1000;
}

.leadya-main-sidebar.app-sidebar {
  width: 280px;
  min-width: 280px;
  flex-basis: 280px;
}

.leadya-sidebar .app-header__logo,
.leadya-sidebar .app-header__mobile-menu,
.leadya-sidebar .app-header__menu {
  display: none;
}

.leadya-sidebar .scrollbar-sidebar {
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  background: transparent;
  border-right: 0;
}

.leadya-sidebar .app-sidebar__inner {
  height: 100%;
  padding: 0;
}

.leadya-sidebar-layout {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--ld-surface, #fff);
}

.leadya-sidebar-rail {
  display: flex;
  width: 56px;
  flex: 0 0 56px;
  height: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-height: 100vh;
  overflow-y: auto;
  padding: 10px 0 12px;
  border-right: 0;
  background: var(--ld-ink, #14122b);
}

.leadya-sidebar-rail-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ld-radius-sm, 8px);
  color: #ffffff;
  text-decoration: none;
}

.leadya-sidebar-rail-item {
  color: rgba(255, 255, 255, 0.78);
}

.leadya-sidebar-rail-item:hover,
.leadya-sidebar-rail-item:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  text-decoration: none;
}

/* Ikony portali w kolorach brandowych (jaśniejsze odcienie — czytelne na ciemnym railu) */
.leadya-sidebar-rail-item--facebook i {
  color: #1877f2;
}

.leadya-sidebar-rail-item--instagram i {
  color: #e1306c;
}

.leadya-sidebar-rail-item.is-active {
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  text-decoration: none;
}

.leadya-sidebar-rail-item.is-active i {
  color: var(--ld-brand-ink, #ffffff);
}

/* Aktywny portal dostaje kafelek w kolorze swojej marki — biała ikona na brandowym tle */
.leadya-sidebar-rail-item--facebook.is-active {
  background: #1877f2;
}

.leadya-sidebar-rail-item--instagram.is-active {
  /* gradient IG bez żółtego stopu — biała ikona/tekst muszą mieć kontrast na całym kafelku */
  background: linear-gradient(135deg, #405de6 0%, #833ab4 35%, #c13584 60%, #e1306c 82%, #fd1d1d 100%);
}

.leadya-sidebar-rail-spacer {
  flex: 1 1 auto;
}

/* Rozszerzony rail (menu jednopoziomowe, np. /user): ikony + etykiety + opisy */
.leadya-sidebar-rail.is-expanded {
  width: 100%;
  flex: 1 1 auto;
  align-items: stretch;
  max-height: 100vh;
  overflow-y: auto;
  padding: 10px 10px 12px;
}

.leadya-sidebar-rail.is-expanded .leadya-sidebar-rail-item {
  width: auto;
  height: auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
}

.leadya-sidebar-rail.is-expanded .leadya-sidebar-rail-item i {
  flex: 0 0 20px;
  text-align: center;
}

.leadya-sidebar-rail-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.leadya-sidebar-rail-text strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.leadya-sidebar-rail-text small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}

.leadya-sidebar-panel {
  width: 224px;
  flex: 0 0 224px;
  min-width: 0;
  overflow-y: auto;
  padding: 0.6rem 0 0.8rem;
  background: var(--ld-surface, #fff);
  border-right: 1px solid var(--ld-border, #e6e8f0);
}

.leadya-sidebar-panel-header {
  padding: 0 0.85rem 0.55rem;
  color: var(--ld-text, #1a1d2e);
}

.leadya-sidebar-panel-eyebrow,
.leadya-sidebar-group {
  display: block;
  color: var(--ld-text-muted, #667085);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.leadya-sidebar-group {
  padding: 0.45rem 0.85rem 0.2rem;
}

.leadya-main-sidebar .vertical-nav-menu {
  padding-left: 0;
}

.leadya-sidebar .vertical-nav-menu {
  margin: 0;
  padding: 0.15rem 0.5rem 0;
}

.leadya-sidebar .vertical-nav-menu li {
  list-style: none;
}

.leadya-portal-sidebar .vertical-nav-menu li a,
.leadya-portal-sidebar .vertical-nav-menu li a.mm-active {
  display: flex;
  align-items: center;
  min-height: 28px;
  height: auto;
  margin: 1px 0;
  padding: 5px 8px;
  border: 1px solid transparent !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ld-text, #1a1d2e) !important;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
}

.leadya-portal-sidebar .vertical-nav-menu i.metismenu-icon {
  display: none;
}

.leadya-portal-sidebar .vertical-nav-menu li a:hover,
.leadya-portal-sidebar .vertical-nav-menu li a.mm-active:hover {
  background: var(--ld-bg, #f6f7fb) !important;
  border-color: var(--ld-border, #e6e8f0) !important;
  color: var(--ld-ink, #14122b) !important;
  text-decoration: none;
}

.leadya-portal-sidebar .vertical-nav-menu li a.selected-element,
.leadya-portal-sidebar .vertical-nav-menu li a.selected-element:hover {
  background: var(--ld-brand-soft, #f1edfe) !important;
  border-color: var(--ld-brand, #6c4cf1) !important;
  color: var(--ld-sidebar-selected-text, var(--ld-ink, #14122b)) !important;
  font-weight: 800;
}

.leadya-sidebar .vertical-nav-menu li a .short {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  visibility: visible !important;
}

.leadya-sidebar .vertical-nav-menu li a .long {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.leadya-main-sidebar + .app-main__outer {
  padding-left: 280px;
}

.leadya-portal-sidebar + .app-main__outer {
  padding-left: 280px;
}

@media (max-width: 991px) {
  .leadya-sidebar-rail {
    display: flex;
  }

  .app-sidebar.leadya-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    flex-basis: 280px !important;
  }

  .app-sidebar.leadya-main-sidebar {
    width: 56px !important;
    min-width: 56px !important;
    flex-basis: 56px !important;
  }

  .app-sidebar.leadya-main-sidebar .leadya-sidebar-rail-text {
    display: none;
  }

  .app-sidebar.leadya-main-sidebar .leadya-sidebar-rail.is-expanded {
    width: 56px;
    flex: 0 0 56px;
    align-items: center;
    padding: 10px 0 12px;
  }

  .app-sidebar.leadya-main-sidebar .leadya-sidebar-rail.is-expanded .leadya-sidebar-rail-item {
    width: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
  }
}



/* ============================================================
   Etap instalacji na widokach pierwszego konta (onboarding krok 3)
   Fragment: fragments/installation_stage.html
   ============================================================ */

.install-stage {
  margin: 0 0 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #1a1d2e);
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.06);
}

.install-stage__eyebrow {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ld-brand, #6c4cf1);
}

.install-stage__title {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ld-text, #1a1d2e);
}

.install-stage__copy {
  margin: 0 0 1.1rem;
  max-width: 46rem;
  color: var(--ld-text-muted, #667085);
}

.install-stage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
}

.install-stage__grid.is-local-first .install-stage__option--local {
  order: -1;
}

.install-stage__option {
  display: flex;
  flex-direction: column;
  padding: 1.1rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-bg, #f6f7fb);
}

.install-stage__option--primary,
.install-stage__option.is-primary {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand-soft, #f1edff);
}

.install-stage__tag {
  align-self: flex-start;
  margin-bottom: 0.55rem;
}

.install-stage__option-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ld-text, #1a1d2e);
}

.install-stage__option-copy {
  flex-grow: 1;
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  color: var(--ld-text-muted, #667085);
}

.install-stage__cta {
  align-self: flex-start;
  font-weight: 800;
  border-radius: var(--ld-radius-sm, 8px);
}

.install-stage__single {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.install-stage__alt-link {
  font-size: 0.85rem;
  color: var(--ld-text-muted, #667085);
  text-decoration: underline;
}

.install-stage__alt-link:hover {
  color: var(--ld-text, #1a1d2e);
}

.install-stage__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: var(--ld-text-muted, #667085);
}

.install-stage__accounts-row {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--ld-border-soft, #eef0f6);
  text-align: right;
}

.install-stage__accounts-toggle {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.82rem;
  color: var(--ld-text-muted, #667085);
  text-decoration: underline;
  cursor: pointer;
}

.install-stage__accounts-toggle:hover,
.install-stage__accounts-toggle:focus {
  color: var(--ld-text, #1a1d2e);
}

/* ============================================================
   Wszystkie opcje zakupu (/invoiceDataForm)
   Konfiguracja w kartach po lewej, przyklejone podsumowanie po prawej
   ============================================================ */

/* Legacy: globalne `.row { justify-content: center; align-items: center }`
   w tym pliku centruje nieparzystą ostatnią kolumnę i blokuje sticky
   podsumowania (kolumna nie rozciąga się do wysokości wiersza). */
.buy-options .row {
  justify-content: flex-start;
  align-items: stretch;
}

.buy-options__head {
  margin: 0 0 1.1rem;
}

.buy-options__back {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ld-text-muted, #667085);
}

.buy-options__back:hover,
.buy-options__back:focus {
  color: var(--ld-brand, #6c4cf1);
  text-decoration: underline;
}

.buy-options__title {
  margin: 0 0 0.25rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ld-text, #1a1d2e);
}

.buy-options__subtitle {
  margin: 0;
  max-width: 46rem;
  color: var(--ld-text-muted, #667085);
}

.buy-options__card {
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem 0.6rem;
}

.buy-options__card-title {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ld-text, #1a1d2e);
}

.buy-options__subheading {
  margin: 0.25rem 0 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--ld-border-soft, #f0f1f5);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ld-text-muted, #667085);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.buy-options__more-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--ld-brand, #6c4cf1);
}

.buy-options__package-info textarea {
  min-height: 96px;
  border-color: var(--ld-border-soft, #f0f1f5);
  background: var(--ld-bg, #f6f7fb);
  color: var(--ld-text-muted, #667085);
  font-size: 0.85rem;
  resize: none;
}

.buy-options__summary {
  padding-bottom: 1.15rem;
}

@media (min-width: 992px) {
  .buy-options__summary {
    position: sticky;
    top: 96px;
  }
}

.buy-options__perks {
  margin-bottom: 0.9rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-success-bg, #e7f8f0);
  color: var(--ld-success-ink, #0e7a4f);
  font-size: 0.88rem;
}

.buy-options__old {
  text-decoration: line-through;
  color: var(--ld-text-muted, #667085);
  font-weight: 400;
}

.buy-options__price {
  margin-bottom: 0.9rem;
  padding: 0.75rem 0.8rem;
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-bg, #f6f7fb);
}

.buy-options__price-label {
  font-size: 0.78rem;
  color: var(--ld-text-muted, #667085);
}

.buy-options__price-line strong {
  margin-left: 0.4rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ld-text, #1a1d2e);
}

.buy-options__cta {
  display: block;
  width: 100%;
  margin-bottom: 0.9rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--ld-brand, #6c4cf1);
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  text-align: center;
  cursor: pointer;
}

.buy-options__cta:hover,
.buy-options__cta:focus {
  background: var(--ld-brand-hover, #5a3bd8);
  border-color: var(--ld-brand-hover, #5a3bd8);
  color: var(--ld-brand-ink, #ffffff);
  box-shadow: var(--ld-focus-ring, 0 0 0 0.2rem rgba(108, 76, 241, 0.2));
  outline: 2px solid transparent;
}

.buy-options__cta-label {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.buy-options__cta-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: #e6defc;
}

.buy-options__cta-note .calc-elements-summary {
  font-weight: 600;
}

.buy-options__breakdown {
  padding: 0.75rem 0.8rem;
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-bg, #f6f7fb);
  font-size: 0.85rem;
  color: var(--ld-text, #1a1d2e);
}

.buy-options__breakdown-note {
  color: var(--ld-text-muted, #667085);
}

/* ============================================================
   Offer picker — graficzny wybór produktu w kreatorze kampanii
   (createCampaignView). Kafelki skalują się w dół wraz z liczbą
   produktów (offer-picker--few/some/many/crowd). Placeholder
   dziedziczy kolorystykę motywu z tokenów --ld-*; pliki motywów
   mogą nadpisać jego tło własnym wzorem.
   ============================================================ */

.offer-picker__native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.offer-picker {
  --offer-tile-size: 160px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--offer-tile-size), 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
  justify-items: stretch;
}

.offer-picker--some {
  --offer-tile-size: 120px;
  gap: 0.6rem;
}

.offer-picker--many {
  --offer-tile-size: 96px;
  gap: 0.5rem;
}

.offer-picker--crowd {
  --offer-tile-size: 72px;
  gap: 0.4rem;
}

/* Wybor produktu w kreatorze: liczba kolumn jest liczona w offerImages.js tak,
   zeby kazdy rzad kafelkow byl wypelniony w calosci (nigdy 6 + 2). Szerokosc siatki
   rosnie z liczba kolumn, wiec pojedynczy rzad nie rozciaga kafelkow na cala strone. */
.offer-picker--even {
  grid-template-columns: repeat(var(--offer-cols, 4), minmax(0, 1fr));
  max-width: calc(var(--offer-cols, 4) * 180px);
  margin-left: auto;
  margin-right: auto;
}

.offer-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.4rem;
  background: var(--ld-surface, #ffffff);
  border: 2px solid var(--ld-border, #e3e6ef);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  color: var(--ld-text, #14122b);
  text-align: center;
}

.offer-tile:hover,
.offer-tile:focus-visible {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 4px 14px rgba(20, 18, 43, 0.14);
  transform: translateY(-2px);
  outline: none;
}

.offer-tile.is-selected {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 0 0 3px var(--ld-brand-soft, rgba(108, 76, 241, 0.25));
}

.offer-tile__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ld-bg, #f6f7fb);
}

.offer-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.offer-tile__img[hidden] {
  display: none;
}

/* Placeholder "Twój produkt lub usługa" — kolory z tokenów bieżącego motywu. */
.offer-tile__art--placeholder {
  background:
    radial-gradient(circle at 30% 25%, var(--ld-accent, #ffc24b) 0, transparent 42%),
    linear-gradient(135deg, var(--ld-brand, #6c4cf1) 0%, var(--ld-ink, #14122b) 100%);
}

.offer-tile__placeholder-text {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 0.4rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  word-break: break-word;
}

.offer-picker--crowd .offer-tile__placeholder-text {
  font-size: 0.6rem;
  padding: 0.2rem;
}

.offer-tile__art.is-generating::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: offer-tile-shimmer 1.6s linear infinite;
}

@keyframes offer-tile-shimmer {
  from { background-position: 180% 0; }
  to { background-position: -20% 0; }
}

.offer-tile__name {
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.offer-picker--crowd .offer-tile__name {
  font-size: 0.66rem;
  -webkit-line-clamp: 1;
}

/* Kafelki schowane za przyciskiem "Pokaż więcej". */
.offer-tile.is-hidden {
  display: none;
}

/* Rozwiniecie listy produktow jest jednokierunkowe — po kliknieciu przycisk znika. */
.offer-picker__more {
  margin: -0.25rem auto 0.9rem;
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ld-brand, #6c4cf1);
  background: transparent;
  border: 1px solid var(--ld-border, #e3e6ef);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
}

.offer-picker__more:hover,
.offer-picker__more:focus-visible {
  background: var(--ld-brand-soft, rgba(108, 76, 241, 0.12));
  border-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand, #6c4cf1);
}

/* Dwie rownorzedne akcje produktu pod siatka — ta sama wysokosc, szerokosc i ikona. */
.offer-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.25rem;
}

.offer-action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 240px;
  justify-content: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--ld-border, #e3e6ef);
  border-radius: 12px;
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #14122b);
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.offer-action:hover:not(:disabled),
.offer-action:focus-visible:not(:disabled) {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 4px 14px rgba(20, 18, 43, 0.12);
  color: var(--ld-text, #14122b);
  transform: translateY(-1px);
}

.offer-action:disabled,
.offer-action.disabled {
  opacity: 1;
  color: var(--ld-text-muted, #667085);
  cursor: not-allowed;
}

.offer-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.9rem;
}

.offer-action--create {
  border-color: var(--ld-success, #12b76a);
  color: var(--ld-success-ink, #0e7a4f);
}

.offer-action--create .offer-action__icon {
  background: var(--ld-success-bg, #e7f8f0);
  color: var(--ld-success-ink, #0e7a4f);
}

.offer-action--create:hover,
.offer-action--create:focus-visible {
  border-color: var(--ld-success, #12b76a);
  color: var(--ld-success-ink, #0e7a4f);
}

@media (max-width: 575.98px) {
  .offer-picker {
    --offer-tile-size: 104px;
  }

  .offer-picker--many,
  .offer-picker--crowd {
    --offer-tile-size: 72px;
  }

  /* Na waskim ekranie zawsze dwa kafelki w rzedzie — 8 produktow to 4 pelne rzedy.
     Nadpisujemy grid-template, bo liczba kolumn jest ustawiana inline przez JS. */
  .offer-picker--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .offer-action {
    min-width: 0;
    width: 100%;
  }
}

/* ============================================================
   Offer image editor — sekcja grafiki w modalu edycji produktu
   (regeneracja AI raz na godzinę + wgranie własnego pliku).
   ============================================================ */

.offer-image-editor__preview {
  display: flex;
  width: 100%;
  max-width: 260px;
  margin-bottom: 0.75rem;
}

.offer-image-editor__controls {
  min-width: 0;
}

.offer-image-editor__status {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--ld-text, #14122b);
}

.offer-image-editor__status.is-error {
  color: var(--ld-danger, #d64550);
}

/* Duze popupy zachowuja margines i widoczne tlo strony.
   Modal z .offer-modal-full musi przykryc staly header i sidebar ArchitectUI. */
#offerEditModal,
#offerCreateModal {
  z-index: 2000;
}

.modal-dialog.offer-modal-full {
  --ld-modal-gap: clamp(10px, 3vw, 32px);
  max-width: 1440px;
  width: calc(100% - 2 * var(--ld-modal-gap));
  height: calc(100dvh - 2 * var(--ld-modal-gap));
  margin: var(--ld-modal-gap) auto;
}

.offer-modal-full .modal-content {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius, 16px);
  box-shadow: 0 24px 80px #14122b55;
}

.offer-modal-full .modal-body {
  min-height: 0;
  overflow-y: auto;
}

.offer-modal-full .modal-header,
.offer-modal-full .modal-footer { flex-shrink: 0; }

/* Popup "Uruchomione zadania": lista przewija sie wewnatrz modala (nie cala strona),
   naglowek tabeli zostaje widoczny podczas przewijania. main.css (Bootstrap < 4.3)
   nie zawiera stylow .modal-dialog-scrollable, wiec definiujemy je tutaj. */
.task-details-modal-dialog {
  max-width: 90%;
}

.task-details-modal-dialog .modal-content {
  max-height: calc(100vh - 3.5rem);
  overflow: hidden;
}

.task-details-modal-dialog .modal-body {
  overflow-y: auto;
}

.task-details-modal-dialog .modal-body thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ld-surface, #fff);
}

/* Edycja: grafika w waskiej kolumnie, pola tekstowe zajmuja reszte ekranu. */
.offer-edit-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1.5rem;
  height: 100%;
}

.offer-edit-layout__form {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.offer-edit-layout__grow {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.offer-edit-layout__grow textarea {
  flex: 1;
  min-height: 220px;
  resize: vertical;
}

@media (max-width: 767.98px) {
  .offer-edit-layout {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    height: auto;
  }

  .offer-image-editor__preview {
    max-width: 160px;
  }
}

/* ============================================================
   Offer manage — widok "Produkty i usługi" ({portal}ManageOffers):
   galeria kart produktów z grafikami + sekcja tworzenia.
   ============================================================ */

.offer-manage__header {
  text-align: left;
  margin-bottom: 0.75rem;
}

.offer-manage__title {
  color: var(--main-color);
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.offer-manage__intro {
  color: var(--ld-muted, #6b7280);
  font-size: 0.85rem;
  max-width: 860px;
  margin: 0 0 0.5rem;
  text-align: left;
}

.offer-manage__create-btn {
  margin-bottom: 0.25rem;
}

.campaign-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto 0.9rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--ld-border, #e3e6ef);
  border-radius: 14px;
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #14122b);
}

.campaign-context__label,
.campaign-context__name {
  display: block;
}

.campaign-context__label {
  color: var(--ld-muted, #6b7280);
  font-size: 0.8rem;
}

.campaign-context__name {
  overflow-wrap: anywhere;
}

.campaign-context__change {
  flex: 0 0 auto;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .campaign-context {
    align-items: flex-start;
    flex-direction: column;
  }
}

.offer-ai-sources {
  border: 1px solid var(--ld-border, #e3e6ef);
  border-radius: 10px;
  padding: 0.8rem;
  background: var(--ld-surface, #fff);
}

.offer-ai-sources label {
  color: var(--ld-text, #14122b);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.offer-ai-sources__requirement {
  color: var(--ld-muted, #6b7280);
  font-size: 0.82rem;
}

/* Keep AI sources and the first editable version of the offer visible together on desktop. */
.offer-create-modal__form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  column-gap: 1rem;
}

.offer-create-modal__name {
  grid-column: 1 / -1;
}

.offer-create-modal__description textarea {
  min-height: 125px !important;
}

.offer-create-modal__benefits textarea {
  min-height: 125px !important;
}

@media (max-width: 767.98px) {
  .offer-create-modal__form {
    display: block;
  }
}

.offer-manage__empty {
  text-align: left;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--ld-border, #e3e6ef);
  border-radius: 12px;
  color: var(--ld-muted, #6b7280);
}

.offer-picker--gallery {
  --offer-tile-size: 168px;
  justify-content: start;
}

.offer-tile--card {
  cursor: default;
}

.offer-tile--card:hover {
  transform: none;
  box-shadow: 0 4px 14px rgba(20, 18, 43, 0.1);
}

/* Akcje karty: trzy ikony zawsze w jednej linii. */
.offer-tile__actions {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  flex-wrap: nowrap;
}

.offer-tile__action {
  flex: 0 0 auto;
  padding: 0.25rem 0.55rem;
  line-height: 1.2;
}

.offer-tile__delete {
  color: var(--ld-danger, #d64550);
}

/* Password field with a show/hide visibility toggle. */
.password-input-wrap {
  position: relative;
}

.password-input-wrap .form-control {
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  padding: 0.35rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--ld-text-muted, #667085);
  line-height: 1;
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--ld-ink, #14122b);
}

.password-toggle:focus {
  outline: 3px solid rgba(108, 76, 241, 0.18);
  outline-offset: 1px;
}

/* === Warianty postów (facebookPosts / instagramPosts / telegramPosts) === */

.post-variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  align-items: start;
  gap: 12px;
}

.post-variants-grid > .form-group,
.card.mb-3.widget-content.bg-dark .post-variants-grid > .position-relative.form-group {
  min-width: 0;
  margin-bottom: 0;
}

.post-variants-grid .post-variant-card {
  min-width: 0;
  padding: 10px;
  margin-bottom: 0;
}

.post-variants-grid .post-variant-card__head {
  flex-wrap: wrap;
}

.post-variants-grid .post-variant-card__actions {
  margin-left: auto;
  flex-shrink: 0;
}

.post-variants-grid .textarea-post {
  height: 8rem;
  min-height: 6rem;
  resize: vertical;
}

.post-variants-grid [id^="imageBlock"] > div > .d-flex {
  align-items: flex-start;
  gap: 8px;
}

.post-variants-grid [id^="imageBlock"] img,
.post-variants-grid [id^="imageBlock"] video {
  max-width: 100%;
  height: 96px;
  object-fit: contain;
  object-position: left center;
}

.post-variants-grid .btn-trash,
form.task-layout-grid .widget-content-left .post-variants-grid .btn-trash {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 4px;
  margin-top: 0 !important;
}

/* Override the shared upload fragment's inline width and Bootstrap spacing. */
.post-variants-grid input[type="file"] {
  width: 100% !important;
  min-width: 0;
  margin-top: 8px !important;
}

.post-variants-grid .post-gen-panel__size {
  flex-wrap: wrap;
}

.post-variant-card {
  border: 1px solid var(--ld-border, rgba(255, 255, 255, 0.25));
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  text-align: left;
}

.post-variant-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.post-variant-card__title {
  font-weight: 600;
}

/* Ostrzeżenie, że wariant istnieje w kampanii, ale nie zostanie opublikowany. */
/* Ten sam kontrakt co .marketplace-card__photo-required: #ffc107 na jasnej
   powierzchni karty dawało 1,63:1. */
.post-variant-card__unused {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: inherit;
}

.post-variant-card__unused i {
  color: var(--ld-warning-ink, #935e06);
}

.post-variant-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-variant-card__actions .btn-trash {
  margin-top: 0 !important;
}

.post-variant-card__action {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 1.05rem;
  padding: 4px 8px;
  line-height: 1;
}

.post-variant-card__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.post-gen-panel {
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed var(--ld-border, rgba(255, 255, 255, 0.35));
  border-radius: 8px;
  text-align: left;
}

.post-gen-panel__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.post-gen-panel__buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.post-image-status {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(108, 76, 241, 0.15);
  font-size: 0.9rem;
}

.post-image-status--failed {
  background: rgba(187, 0, 0, 0.18);
}

.post-add-panel {
  text-align: left;
}

.post-add-panel__types {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.post-add-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  cursor: pointer;
}

.post-add-type.is-locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.post-add-panel__progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}

/* Nieudane generowanie wariantu. Wyspa jasnej powierzchni: tlo jest zahardkodowane na jasne
   w kazdym motywie, wiec token tekstu tez jest jasnopowierzchniowy - ten sam kontrakt co blok
   .modal-content. Bez wlasnej powierzchni komunikat bral kolor panelu albo motywu i schodzil
   ponizej progu AA: dziedziczony pomaranczowy 3,60:1 na karcie leadya-dark, a samo
   --ld-danger-ink 2,58:1 na leadya-nova i leadya-aura oraz 2,97:1 na leadya-ruby, bo te trzy
   motywy nie nadpisuja tego tokenu i dostawaly ciemna czerwien na ciemnej karcie. */
.post-add-panel__error {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 0.82rem;
  border-radius: 6px;
  background: #fdecec;
  --ld-danger-ink: #a32d2d;
  color: var(--ld-danger-ink);
  border-left: 3px solid var(--ld-danger-ink);
}

/* === Typ wariantu posta (pill toggle) i tryby regeneracji === */

.post-variant-card__type {
  display: inline-flex;
  border: 1px solid var(--ld-border, rgba(255, 255, 255, 0.35));
  border-radius: 999px;
  overflow: hidden;
}

.post-type-pill {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.78rem;
  padding: 3px 12px;
  cursor: pointer;
  line-height: 1.4;
}

.post-type-pill.is-active {
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  cursor: default;
}

.post-gen-panel__modes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.post-gen-panel__modes-label {
  font-size: 0.9rem;
  font-weight: 600;
}

.post-gen-panel__mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 0.9rem;
}

.post-image-status__retry {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.post-image-status__retry:hover {
  color: inherit;
}
.redis-system-alert {
    position: fixed;
    top: 60px;
    right: 16px;
    left: 296px;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(20, 18, 43, 0.16);
    color: var(--ld-text, #14122b);
}

.redis-system-alert strong,
.redis-system-alert span {
    display: block;
}

/* --ld-danger-soft i --ld-warning-soft nie istnieja w zadnym motywie, wiec zawsze
   wchodzil jasny fallback z var() — takze w LeadYa Dark, gdzie tekst i ikona brały
   jasny --ld-text i konczyly na 1,12:1 i 1,19:1. Tinty semantyczne maja zdefiniowane
   pary bg+ink i te pary dobieramy tutaj. */
.redis-system-alert--danger {
    background: var(--ld-danger-bg, #fcebeb);
    border-color: var(--ld-danger, #d92550);
    color: var(--ld-danger-ink, #a32d2d);
}

.redis-system-alert--warning {
    background: var(--ld-warning-bg, #fdf3e2);
    border-color: var(--ld-warning, #f7b924);
    color: var(--ld-warning-ink, #935e06);
}

.closed-sidebar .redis-system-alert {
    left: 96px;
}

@media (max-width: 991.98px) {
    .redis-system-alert,
    .closed-sidebar .redis-system-alert {
        right: 8px;
        left: 8px;
    }
}

/* === Historia wersji posta === */

.post-versions-panel {
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed var(--ld-border, rgba(255, 255, 255, 0.35));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.post-versions-panel__empty {
  font-size: 0.9rem;
  opacity: 0.85;
}

.post-version-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--ld-border, rgba(255, 255, 255, 0.2));
  border-radius: 8px;
}

.post-version-row__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 44px;
}

.post-version-row__thumb--none {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
}

.post-version-row__info {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.post-version-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.post-version-row__badge {
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(108, 76, 241, 0.35);
}

.post-version-row__badge--manual {
  background: rgba(255, 194, 75, 0.35);
}

.post-version-row__badge--baseline {
  background: rgba(255, 255, 255, 0.18);
}

.post-version-row__date {
  font-size: 0.78rem;
  opacity: 0.8;
}

.post-version-row__text {
  font-size: 0.82rem;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-version-row__restore {
  flex: 0 0 auto;
}

/* suwak długości posta w panelu regeneracji */
.post-gen-panel__size {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.post-gen-panel__size-range {
  flex: 0 1 180px;
}

.post-gen-panel__size-edge {
  font-size: 0.82rem;
  opacity: 0.9;
}

/* trzy niezależne suwaki długości w ustawieniach konta */
.response-size-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}

.response-size-row__name {
  flex: 0 0 110px;
  text-align: right;
  margin-right: 8px;
  font-size: 0.85rem;
}

/* wybór języka w panelu regeneracji posta */
.post-gen-panel__lang-label {
  margin-left: 12px;
}

.post-gen-panel__lang {
  flex: 0 1 150px;
  width: auto !important;
  height: 30px;
  padding: 2px 8px;
  font-size: 0.85rem;
}

/* ============================================================
   Zarządzanie grupami — fragment `components/group_management :: groupEdit`
   (widoki {portal}Campaigns). Karta leży na `.bg-dark`, które jest ciemne
   w większości motywów, ale jasne w `leadya` i `jamesbot`. Dlatego wszystkie
   powierzchnie sterujące (przyciski, pola, wiersze) są jasne z atramentowym
   tekstem — czytelność nie zależy od motywu. Jedyny tekst leżący wprost na
   karcie to etykiety kolumn i stan pusty: kolor bierze z `--gm-head-ink`,
   które jasne motywy nadpisują u siebie.
   ============================================================ */
.group-manager {
  --gm-head-ink: rgba(255, 255, 255, 0.78);
  --gm-surface: var(--ld-surface, #ffffff);
  --gm-ink: var(--ld-text, #1a1d2e);
  --gm-muted: var(--ld-text-muted, #667085);
  --gm-border: var(--ld-border, #e6e8f0);
  --gm-brand: var(--ld-brand, #6c4cf1);
  --gm-control-h: 34px;
  /* karta dziedziczy `align-items: center`, przez co pasek i lista zwezaly sie
     do szerokosci tresci i zostawialy puste marginesy po bokach */
  align-items: stretch;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem 0.35rem;
}

/* --- Pasek akcji: jeden rząd, przyciski tej samej wysokości --- */
.gm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
}

.gm-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.gm-toolbar__group--search {
  flex: 1 1 260px;
  justify-content: flex-end;
  max-width: 460px;
}

/* --- Przycisk bazowy: stała wysokość, ikona + krótka etykieta --- */
.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  height: var(--gm-control-h);
  padding: 0 0.75rem;
  border: 1px solid var(--gm-border);
  border-radius: 9px;
  background: var(--gm-surface);
  color: var(--gm-ink);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gm-btn:hover,
.gm-btn:focus-visible {
  border-color: var(--gm-brand);
  box-shadow: 0 2px 10px rgba(20, 18, 43, 0.18);
  color: var(--gm-ink);
  text-decoration: none;
  outline: none;
}

.gm-btn:disabled,
.gm-btn[disabled] {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

.gm-btn i {
  font-size: 0.85rem;
  line-height: 1;
}

.gm-btn__label {
  overflow: hidden;
  max-width: 40ch;
  text-overflow: ellipsis;
}

.gm-btn--brand {
  background: var(--gm-brand);
  border-color: var(--gm-brand);
  color: var(--ld-brand-ink, #ffffff);
}

.gm-btn--brand:hover,
.gm-btn--brand:focus-visible {
  background: var(--ld-brand-hover, #5a3bd8);
  border-color: var(--ld-brand-hover, #5a3bd8);
  color: var(--ld-brand-ink, #ffffff);
}

/* Akcja usuwająca wiele grup naraz. Celowo nie jest wypełniona na czerwono jak przycisk główny —
   to porządkowanie listy, a nie akcja destrukcyjna dla kampanii; kontakty i historia zostają. */
.gm-btn--danger {
  border-color: var(--ld-danger, #f04438);
  color: var(--ld-danger-ink, #a32d2d);
}

.gm-btn--danger:hover,
.gm-btn--danger:focus-visible {
  border-color: var(--ld-danger, #f04438);
  background: var(--ld-danger-bg, #fcebeb);
  color: var(--ld-danger-ink, #a32d2d);
}

.gm-btn--icon {
  width: var(--gm-control-h);
  padding: 0;
}

/* `#search-button` ma globalną regułę `height: 80%` — tutaj musi być równy pozostałym */
.group-manager #search-button {
  height: var(--gm-control-h);
}

/* --- Pole wyszukiwania i liczba pozycji: ta sama wysokość co przyciski --- */
.gm-search {
  position: relative;
  flex: 1 1 160px;
  min-width: 130px;
}

.gm-search__icon {
  position: absolute;
  top: 50%;
  left: 0.6rem;
  transform: translateY(-50%);
  color: var(--gm-muted);
  font-size: 0.78rem;
  pointer-events: none;
}

.group-manager .gm-search__input {
  width: 100%;
  height: var(--gm-control-h);
  padding: 0 0.6rem 0 1.85rem;
  border: 1px solid var(--gm-border);
  border-radius: 9px;
  background: var(--gm-surface);
  color: var(--gm-ink);
  font-size: 0.82rem;
}

.group-manager .gm-search__input:focus {
  border-color: var(--gm-brand);
  box-shadow: var(--ld-focus-ring, 0 0 0 0.2rem rgba(108, 76, 241, 0.2));
  outline: none;
}

.group-manager .gm-select {
  flex: 0 0 auto;
  width: auto;
  height: var(--gm-control-h);
  padding: 0 0.5rem;
  border: 1px solid var(--gm-border);
  border-radius: 9px;
  background: var(--gm-surface);
  color: var(--gm-ink);
  font-size: 0.82rem;
}

/* --- Komunikat naprawczy: powód i akcja w jednej linii zamiast wysokiego alertu --- */
.gm-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--ld-warning, #f79009);
  border-radius: 9px;
  background: var(--ld-warning-bg, #fdf3e2);
  color: var(--ld-warning-ink, #935e06);
  font-size: 0.82rem;
  font-weight: 600;
}

.gm-notice__icon {
  flex: 0 0 auto;
}

.gm-notice__text {
  flex: 1 1 220px;
  min-width: 0;
}

/* --- Lista grup: stałe kolumny, nagłówek i wiersze zawsze wyrównane --- */
.gm-list {
  --gm-cols: minmax(0, 1fr) 132px 128px 92px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gm-list--members {
  --gm-cols: minmax(0, 1fr) 124px 132px 128px 92px;
}

.gm-list--basic {
  --gm-cols: minmax(0, 1fr) 92px;
}

.gm-list-head {
  display: grid;
  grid-template-columns: var(--gm-cols);
  align-items: center;
  gap: 0 0.4rem;
  padding: 0 0.55rem 0.1rem;
}

.gm-head-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--gm-head-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.gm-head-cell--name {
  justify-content: flex-start;
  padding-left: 1.8rem;
  text-align: left;
}

.gm-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.gm-sort:hover,
.gm-sort:focus-visible {
  background: rgba(127, 127, 127, 0.3);
  outline: none;
}

.gm-row {
  display: grid;
  grid-template-columns: var(--gm-cols);
  align-items: stretch;
  gap: 0 0.4rem;
  border: 1px solid var(--gm-border);
  border-radius: 10px;
  background: var(--gm-surface);
  color: var(--gm-ink);
}

.gm-row:hover {
  border-color: var(--gm-brand);
}

/* Wiersz wybrany do kampanii — cały wiersz w barwie marki. Przeglądarki bez
   `:has()` podświetlą samą nazwę (reguła `.gm-row-main.element-selected`),
   a stan i tak zostaje czytelny dzięki znacznikowi `.gm-row-mark`. */
.gm-row:has(.element-selected) {
  border-color: var(--gm-brand);
  background: var(--ld-brand-soft, #f1edfe);
}

.gm-row-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.42rem 0.55rem;
  border: 0;
  border-radius: 10px 0 0 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.gm-row-main:focus-visible {
  outline: 2px solid var(--gm-brand);
  outline-offset: -2px;
}

/* Znacznik wyboru — stan czytelny także bez rozróżniania kolorów */
.gm-row-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--gm-border);
  border-radius: 5px;
  background: var(--ld-bg, #f6f7fb);
  /* Ptaszek jest widoczny wylacznie w stanie wybranym, czyli na tle marki
     (.element-selected), wiec bierze jej atrament — biel dawala 2,87:1 w LeadYa Dark. */
  color: var(--ld-brand-ink, #ffffff);
  font-size: 0.62rem;
}

.gm-row-mark i {
  opacity: 0;
}

.gm-row-main.element-selected {
  background: var(--ld-brand-soft, #f1edfe);
}

.gm-row-main.element-selected .gm-row-mark {
  border-color: var(--gm-brand);
  background: var(--gm-brand);
}

.gm-row-main.element-selected .gm-row-mark i {
  opacity: 1;
}

/* Nazwa i pigulki w jednej linii — wiersz zostaje niski, a szeroka kolumna nazwy
   nie stoi pusta; na waskim ekranie pigulki zawijaja sie pod nazwe. */
.gm-row-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  min-width: 0;
}

.gm-row-name {
  overflow: hidden;
  color: var(--gm-ink);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.gm-row-tags.is-not-joined .gm-tag {
  text-decoration: line-through;
}

/* Kolor pigulki nie moze pochodzic z `.text-group-*` (biel na jasnym tle wiersza
   wybranego byla nieczytelna) — stan niesie `.gm-row-mark` i obwodka wiersza,
   a legacy klasy zostaja w markupie, bo przelacza je `switchGroupActivity`. */
.gm-tag,
.gm-tag.text-group-selected,
.gm-tag.text-group-not-selected {
  display: inline-block;
  overflow: hidden;
  max-width: 22ch;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--ld-border-soft, #f0f1f5);
  color: var(--gm-muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-row-main.element-selected .gm-tag:not(.gm-tag--status) {
  background: rgba(255, 255, 255, 0.75);
  color: var(--gm-brand);
}

/* Status dołączania do grupy — informuje o blokadzie, więc nie jest przekreślany */
.gm-tag--status {
  background: var(--ld-warning-bg, #fdf3e2);
  color: var(--ld-warning-ink, #935e06) !important;
  text-decoration: none !important;
}

/* Trzy stany statusu dołączenia. Kolor jest tą samą informacją co przycisk sprzątania listy:
   czerwone i pomarańczowe pigułki to dokładnie te grupy, które usuwa „Usuń grupy, które mnie
   nie zaakceptowały”. Grupy bez zaraportowanego statusu nie dostają pigułki wcale. */
.gm-tag--join-joined {
  background: var(--ld-success-bg, #e8f6ed);
  color: var(--ld-success-ink, #1c6b3c) !important;
}

.gm-tag--join-pending {
  background: var(--ld-warning-bg, #fdf3e2);
  color: var(--ld-warning-ink, #935e06) !important;
}

.gm-tag--join-not_accepted {
  background: var(--ld-danger-bg, #fcebeb);
  color: var(--ld-danger-ink, #a32d2d) !important;
}

.gm-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.35rem 0.2rem;
  font-size: 0.76rem;
  line-height: 1.2;
  text-align: center;
}

.gm-cell-value {
  color: var(--gm-ink);
  font-weight: 600;
}

.gm-cell-sub {
  color: var(--gm-muted);
  font-size: 0.68rem;
  font-weight: 600;
}

/* Wyczerpanie grupy: im mniej kontaktów zostało, tym mocniejsze ostrzeżenie */
.gm-cell-sub.is-low {
  color: var(--ld-success-ink, #0e7a4f);
}

.gm-cell-sub.is-mid {
  color: var(--ld-warning-ink, #935e06);
}

.gm-cell-sub.is-high {
  color: var(--ld-danger-ink, #a32d2d);
}

.gm-cell--actions {
  flex-direction: row;
  gap: 0.25rem;
  padding-right: 0.4rem;
}

.gm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--gm-border);
  border-radius: 8px;
  background: var(--ld-bg, #f6f7fb);
  color: var(--gm-muted);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gm-icon-btn:hover,
.gm-icon-btn:focus-visible {
  border-color: var(--gm-brand);
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--gm-brand);
  outline: none;
}

.gm-icon-btn--danger:hover,
.gm-icon-btn--danger:focus-visible {
  border-color: var(--ld-danger, #f04438);
  background: var(--ld-danger-bg, #fcebeb);
  color: var(--ld-danger-ink, #a32d2d);
}

/* --- Dane pobrane z grupy (sekcja rozwijana) --- */
.gm-details {
  grid-column: 1 / -1;
}

.gm-details__body {
  padding: 0.6rem 0.7rem 0.7rem;
  border-top: 1px solid var(--gm-border);
  color: var(--gm-ink);
  text-align: left;
}

.gm-details__title {
  margin-bottom: 0.15rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.gm-details__hint {
  margin-bottom: 0.6rem;
  color: var(--gm-muted);
  font-size: 0.72rem;
}

.gm-details__section {
  margin-bottom: 0.6rem;
}

.gm-details__section:last-child {
  margin-bottom: 0;
}

.gm-details__label {
  margin-bottom: 0.15rem;
  color: var(--gm-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.gm-details__text {
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.gm-details__text--scroll {
  overflow-y: auto;
  max-height: 240px;
}

.gm-details__cover {
  max-width: 100%;
  max-height: 160px;
  border-radius: 8px;
  object-fit: cover;
}

/* Grupa bez pobranych szczegółów — przycisk nadal działa, ale nie udaje, że jest co pokazać */
.gm-icon-btn--muted {
  border-style: dashed;
  opacity: 0.65;
}

/* --- Popup doboru grup przez AI --- */
.gs-modal {
  color: var(--gm-ink, inherit);
  text-align: left;
}

.gs-modal__intro {
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
}

.gs-modal__section {
  margin-bottom: 0.9rem;
}

.gs-modal__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.gs-modal__section--half {
  flex: 1 1 220px;
  min-width: 0;
}

.gs-modal__label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.gs-modal__hint {
  margin-bottom: 0.35rem;
  color: var(--gm-muted, #6b6b7b);
  font-size: 0.72rem;
}

.gs-modal__textarea {
  min-height: 120px;
}

.gs-modal__range {
  width: 100%;
}

.gs-modal__empty,
.gs-modal__status,
.gs-modal__result {
  margin-top: 0.4rem;
  font-size: 0.78rem;
}

.gs-modal__status.is-warning,
.gs-modal__result.is-warning {
  color: var(--ld-danger-ink, #a32d2d);
  font-weight: 600;
}

.gs-modal__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
}

/* --- Stan pusty --- */
.gm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.5rem 1rem;
  /* Szarość neutralna — obwódka ma być widoczna i na ciemnej, i na jasnej karcie */
  border: 1px dashed rgba(127, 127, 127, 0.5);
  border-radius: 12px;
  text-align: center;
}

.gm-empty__icon {
  color: var(--gm-head-ink);
  font-size: 1.6rem;
}

.gm-empty__title {
  margin: 0;
  color: var(--gm-head-ink);
  font-size: 0.92rem;
  font-weight: 700;
}

/* --- Wąski ekran: wiersz staje się kartą, komórki dostają własne etykiety --- */
@media (max-width: 767.98px) {
  .gm-toolbar__group--search {
    max-width: none;
  }

  .gm-list-head {
    display: none;
  }

  .gm-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: 0.3rem;
  }

  .gm-row-main {
    grid-column: 1 / -1;
    border-radius: 10px 10px 0 0;
  }

  .gm-cell {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.35rem;
    grid-column: 1;
    padding: 0.1rem 0.6rem;
    text-align: left;
  }

  .gm-cell::before {
    content: attr(data-label);
    color: var(--gm-muted);
    font-size: 0.68rem;
    font-weight: 600;
  }

  .gm-cell--actions {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: center;
    justify-content: flex-end;
  }

  .gm-cell--actions::before {
    content: none;
  }
}

/* === Jasna karta zadania (task-card--surface) =========================
   Widok wiadomości był jedną wielką czarną płytą na jasnym tle panelu.
   Karta dostaje powierzchnię z tokenów motywu, a ciemny zostaje wyłącznie
   pasek sterowania zadaniem — czytelny toolbar zamiast ściany czerni.
   Klasa jest opt-in: `.bg-dark` zostaje, więc cała kompaktowa siatka
   `form.task-layout-grid` działa dalej bez zmian.
   Prefiks jest długi celowo — plik motywu ładuje się PO additional.css
   i nadpisuje `.bg-dark` z `!important`. */

.card.mb-3.widget-content.bg-dark.task-card--surface {
  background-color: var(--ld-surface, #ffffff) !important;
  color: var(--ld-text, #1a1d2e);
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 12px;
}

.card.mb-3.widget-content.bg-dark.task-card--surface .text-white,
.card.mb-3.widget-content.bg-dark.task-card--surface label,
.card.mb-3.widget-content.bg-dark.task-card--surface .card-title,
.card.mb-3.widget-content.bg-dark.task-card--surface .widget-heading,
.card.mb-3.widget-content.bg-dark.task-card--surface .text-center {
  color: var(--ld-text, #1a1d2e) !important;
}

/* Formularz musi zostać przezroczysty, żeby dziedziczył powierzchnię karty. Bazowa
   reguła `form` maluje tło tokenem --color-black, który tylko w Ruby jest naprawdę
   czarny (w Classic, Nova, Aura i Sky to biel). Etykiety wymuszone wyżej na
   --ld-text schodziły tam do kontrastu 1,21:1 — czarne na czarnym. */
.card.mb-3.widget-content.bg-dark.task-card--surface form {
  background-color: transparent;
  color: var(--ld-text, #1a1d2e);
}

/* main.css maluje `.text-muted` pomarańczem z !important — na jasnej powierzchni
   karty to 2,28:1. Podpowiedź o limicie znaków bierze token drugoplanowy motywu. */
.card.mb-3.widget-content.bg-dark.task-card--surface .text-muted {
  color: var(--ld-text-muted, #667085) !important;
}

.card.mb-3.widget-content.bg-dark.task-card--surface .form-control,
.card.mb-3.widget-content.bg-dark.task-card--surface .custom-select {
  background-color: var(--ld-surface, #ffffff) !important;
  color: var(--ld-text, #1a1d2e) !important;
  border: 1px solid var(--ld-border, #e6e8f0) !important;
}

.card.mb-3.widget-content.bg-dark.task-card--surface .form-control::placeholder {
  color: var(--ld-text-muted, #667085);
}

/* wkładka Opcji zaawansowanych: półprzezroczysta biel zakładała ciemne tło */
.card.mb-3.widget-content.bg-dark.task-card--surface form.task-layout-grid .card.card-body,
.card.mb-3.widget-content.bg-dark.task-card--surface .task-compact-note {
  background: var(--ld-bg, #f6f7fb);
  border: 1px solid var(--ld-border, #e6e8f0);
  color: var(--ld-text, #1a1d2e);
}

/* Pasek sterowania zadaniem zostaje ciemny: panele task-auto__* i przyciski
   task-nav-bar__btn są zbudowane na półprzezroczystej bieli i białym tekście. */
.card.mb-3.widget-content.bg-dark.task-card--surface .task-component-inline-controls {
  background: var(--ld-ink, #14122b);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.6rem;
}

.card.mb-3.widget-content.bg-dark.task-card--surface .task-component-inline-controls label,
.card.mb-3.widget-content.bg-dark.task-card--surface .task-component-inline-controls .text-white,
.card.mb-3.widget-content.bg-dark.task-card--surface .task-component-inline-controls span,
.card.mb-3.widget-content.bg-dark.task-card--surface .task-component-inline-controls .widget-heading {
  color: #fff !important;
}

/* === Warianty pierwszej wiadomości ===================================
   Kart wariantów będą dziesiątki, więc lista jest przewijalna, numerowana,
   z licznikiem i trybem kompaktowym; akcje to ikony w jednej linii. */

.msg-variants__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.msg-variants__label {
  font-weight: 600;
}

.msg-variants__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  font-size: 0.76rem;
  font-weight: 600;
}

.msg-variants__hint {
  font-size: 0.76rem;
  color: var(--ld-text-muted, #667085);
}

.msg-variants__compact-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  width: 30px;
  height: 30px;
  line-height: 1;
  flex: 0 0 auto;
}

.msg-variants {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.msg-variant {
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  background: var(--ld-bg, #f6f7fb);
  text-align: left;
}

.msg-variant--pending {
  opacity: 0.75;
}

.msg-variant__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.msg-variant__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ld-text-muted, #667085);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.msg-variant__actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.msg-variant__action {
  background: transparent;
  border: none;
  border-radius: 7px;
  color: inherit;
  cursor: pointer;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 1;
  font-size: 0.92rem;
}

.msg-variant__action:hover:not(:disabled) {
  background: var(--ld-brand-soft, rgba(108, 76, 241, 0.12));
  color: var(--ld-brand, #6c4cf1);
}

.msg-variant__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.msg-variant__action.is-on {
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
}

.msg-variant__action--delete:hover:not(:disabled) {
  background: var(--ld-danger-soft, #fde8ec);
  color: var(--ld-danger, #d92550);
}

.msg-variant__vars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.3rem 0 0;
}

.msg-variant__vars-label {
  font-size: 0.74rem;
  color: var(--ld-text-muted, #667085);
}

.msg-variant__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 999px;
  background: var(--ld-surface, #ffffff);
  color: inherit;
  font-size: 0.76rem;
  line-height: 1.5;
  cursor: pointer;
}

.msg-variant__chip:hover:not(:disabled) {
  border-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand, #6c4cf1);
}

.msg-variant__chip:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Tryb kompaktowy — przegląd dziesiątek wariantów zamiast czytania każdego */
.msg-variants.is-compact .msg-variant__vars,
.msg-variants.is-compact .msg-image-panel {
  display: none !important;
}

.msg-variants.is-compact .msg-variant .message-textarea {
  min-height: 2.2em !important;
  height: 2.2em;
  overflow: hidden;
  resize: none;
}

.msg-variants__add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.msg-variants__progress {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--ld-text-muted, #667085);
}

/* Panel grafiki wariantu — odsłaniany dopiero ikoną obrazka */

.msg-image-panel {
  margin-top: 0.4rem;
  padding: 0.5rem 0.6rem;
  border: 1px dashed var(--ld-border, #e6e8f0);
  border-radius: 8px;
  background: var(--ld-surface, #ffffff);
}

.msg-image-panel__modes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 0.35rem;
}

.msg-image-panel__mode {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
  font-size: 0.84rem;
  cursor: pointer;
}

.msg-image-panel__mode.is-locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.msg-image-panel__label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.84rem;
}

.msg-image-panel__buttons {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.msg-image-status {
  margin-top: 0.4rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  background: var(--ld-brand-soft, rgba(108, 76, 241, 0.15));
  font-size: 0.82rem;
}

.msg-image-status--failed {
  background: var(--ld-danger-soft, rgba(217, 37, 80, 0.15));
}

@media (min-width: 992px) {
  /* lista wariantów przewija się wewnątrz karty, przycisk dodawania zostaje widoczny */
  .msg-variants {
    max-height: 46vh;
    overflow-y: auto;
    padding-right: 0.25rem;
  }

  /* Pole liczbowe było jedynym wyśrodkowanym elementem w siatce — reszta jest
     do lewej. Wyrównujemy je do sąsiedniego wyboru produktu. Prefiks karty jest
     konieczny: reguła kompresji pól liczbowych ustawia `align-items: center`
     z wyższą specyficznością. */
  .card.mb-3.widget-content.bg-dark form.task-layout-grid .form-group.message-how-many-messages {
    /* !important, bo reguła kompresji pól liczbowych używa :has() i wygrywa specyficznością */
    align-items: stretch !important;
    text-align: left;
  }

  .card.mb-3.widget-content.bg-dark form.task-layout-grid .form-group.message-how-many-messages > label {
    justify-content: flex-start;
  }

  .card.mb-3.widget-content.bg-dark form.task-layout-grid .message-how-many-messages > input[type='number'].form-control {
    width: 100%;
    max-width: none;
    text-align: left;
  }
}

/* === Ogłoszenia marketplace (widok postów, tylko Facebook) ===
   Sekcja żyje na ciemnej karcie `.bg-dark`, więc kolory dobieramy jak dla
   `.post-variant-card`: jawny biały tekst i półprzezroczyste obramowania. */

.marketplace-posts {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--ld-border, rgba(255, 255, 255, 0.25));
  text-align: left;
}

.marketplace-posts__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.marketplace-posts__intro {
  flex: 1 1 320px;
  min-width: 0;
}

.marketplace-posts__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
}

.marketplace-posts__lead {
  margin: 0;
  font-size: 0.86rem;
  color: #d7d9e4;
}

.marketplace-posts__switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  cursor: pointer;
  font-weight: 600;
  white-space: normal;
}

.marketplace-posts__switch input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ---------- Marketplace postów: powierzchnia zależy od motywu ----------
   Blok siedzi w .card.bg-dark, ale to NIE gwarantuje ciemnego tła: .bg-dark jest
   białe w Classic i Sky, a w Ruby przykrywa je biały `form` (additional.css maluje
   każdy formularz na --ld-surface; tylko NEW_LEADYA i Aura mają override
   `.bg-dark form { background: transparent }`). Dlatego jasne kolory dobrane pod
   ciemną kartę znikały: #d7d9e4 dawało 1,29:1, #ffffff 1,07:1, --ld-accent 1,10:1.
   Tekst bierze więc kolor powierzchni przez `inherit` (kontrakt `form`/`.bg-dark`
   każdego motywu jest już poprawny), a ikony sygnalizujące stan dostają token,
   który zmierzono na obu skrajnych powierzchniach (biel i #14122b). */
.marketplace-posts__off {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 0.86rem;
  color: inherit;
}

.marketplace-posts__routing {
  list-style: none;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--ld-border, rgba(255, 255, 255, 0.25));
  border-radius: 10px;
}

.marketplace-posts__routing li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.marketplace-posts__routing li + li {
  margin-top: 6px;
}

/* --ld-brand zmierzone na obu powierzchniach: 3,47:1 na #14122b (NEW_LEADYA)
   i 4,9-6,2:1 na bieli — powyżej progu 3:1 dla ikony (WCAG 2.1 SC 1.4.11).
   --ld-accent dawał tu 1,50:1 na jasnej powierzchni. */
.marketplace-posts__routing i {
  margin-top: 3px;
  color: var(--ld-brand, #6c4cf1);
}

.marketplace-posts__filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 10px;
}

.marketplace-posts__filters .sales-post-button {
  background: transparent;
  border: 1px solid var(--ld-border, rgba(255, 255, 255, 0.35));
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  line-height: 1;
  /* Bez tego przycisk zostaje przy czerni z domyślnego stylu <button>, a ikona
     dziedziczy ją zamiast koloru panelu — 1,16:1 w LeadYa Dark. */
  color: inherit;
}

.marketplace-posts__filters .sales-post-button .sales-post-icon {
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
}

.marketplace-posts__filters .sales-post-button.is-active {
  background: var(--ld-brand, #6c4cf1);
  border-color: var(--ld-brand, #6c4cf1);
}

/* Stan wybrany ma własne tło marki, więc ikona bierze atrament marki
   (--ld-brand-ink jest ciemny w LeadYa Dark, gdzie marka jest jasnym pomarańczem). */
.marketplace-posts__filters .sales-post-button.is-active .sales-post-icon {
  color: var(--ld-brand-ink, #ffffff);
}

.marketplace-posts__empty {
  margin: 12px 0;
  font-size: 0.88rem;
  color: inherit;
}

.marketplace-card {
  border: 1px solid var(--ld-border, rgba(255, 255, 255, 0.25));
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  text-align: left;
}

.marketplace-card.hidden-post {
  display: none;
}

.marketplace-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.marketplace-card__title {
  font-weight: 600;
}

.marketplace-card__type {
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
}

/* #ff8080 było dobrane pod ciemną kartę i na jasnej powierzchni dawało 2,27:1.
   --ld-danger (#f04438, wspólny dla wszystkich motywów) trzyma 3,76:1 na bieli
   i 4,92:1 na #14122b. */
.marketplace-card__delete {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--ld-danger, #f04438);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.marketplace-card__delete:hover,
.marketplace-card__delete:focus {
  color: var(--ld-danger, #f04438);
  filter: brightness(0.9);
}

.marketplace-card__fields .form-group {
  margin-bottom: 10px;
}

.marketplace-card__fields label {
  font-size: 0.82rem;
  margin-bottom: 3px;
}

.marketplace-posts__add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.marketplace-posts__add-label {
  font-size: 0.88rem;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .marketplace-posts__head {
    flex-direction: column;
    align-items: stretch;
  }

  .marketplace-posts__add {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Ostrzeżenie o braku zdjęcia: tekst czyta się z powierzchni (żaden pojedynczy
   kolor nie daje 4,5:1 jednocześnie na bieli i na #14122b), sam trójkąt niesie
   kolor rodziny warning, zmierzony ≥3:1 na obu powierzchniach. */
.marketplace-card__photo-required {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 0.84rem;
  color: inherit;
}

.marketplace-card__photo-required i {
  color: var(--ld-warning-ink, #935e06);
}

/* ── Zakładki widoku postów: zwykłe posty vs ogłoszenia marketplace ──────────
   Oba panele żyją w jednym formularzu, więc ukryty panel nadal się zapisuje.
   Panel jest chowany dopiero klasą dodawaną przez JS — bez skryptu użytkownik
   widzi obie sekcje zamiast pustej strony. */

.posts-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
  border-bottom: 1px solid var(--ld-border, rgba(255, 255, 255, 0.22));
  padding-bottom: 8px;
}

/* Zakładka bez własnego tła — kolor musi iść z powierzchni karty, bo ta jest
   ciemna tylko w NEW_LEADYA, Aura i LeadYa Dark. Na jasnej (Classic, Sky oraz
   Ruby pod białym formularzem) hardkodowana biel dawała 1,0:1: zakładka i jej
   ikona znikały całkowicie. */
.posts-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--ld-border, rgba(255, 255, 255, 0.22));
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.posts-tab:hover,
.posts-tab:focus-visible {
  border-color: var(--ld-brand, #6c4cf1);
}

.posts-tab.is-active {
  background: var(--ld-brand, #6c4cf1);
  border-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
}

.posts-tab__count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

/* Wyłączone ogłoszenia: licznik przygaszony, ale nadal czytelny (nie samym kolorem
   niesiemy znaczenie — obok jest jawny komunikat w zakładce). */
.posts-tab__count.is-off {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}

.posts-tab-panel.is-hidden {
  display: none;
}

.marketplace-card__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.marketplace-card__actions .marketplace-card__delete {
  margin-left: 0;
}

.marketplace-posts__add-hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
}

/* ============================================================
   Campaign type picker — graficzny wybor typu kampanii
   (krok "Co chcesz robic w tej kampanii?" w kreatorze) oraz
   popup opcji zaawansowanych kampanii. Ukryty select pozostaje
   zrodlem prawdy, wiec jest schowany dostepnie, a nie display:none.
   ============================================================ */

.campaign-type-picker__native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.campaign-type-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}

.campaign-type-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--ld-surface, #ffffff);
  border: 2px solid var(--ld-border, #e3e6ef);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  color: var(--ld-text, #14122b);
  text-align: left;
}

.campaign-type-tile:hover,
.campaign-type-tile:focus-visible {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 4px 14px rgba(20, 18, 43, 0.14);
  transform: translateY(-2px);
  outline: none;
}

.campaign-type-tile.is-selected {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 0 0 3px var(--ld-brand-soft, rgba(108, 76, 241, 0.25));
}

.campaign-type-tile__art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ld-bg, #f6f7fb);
}

.campaign-type-tile__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.campaign-type-tile__name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--ld-text, #14122b);
}

.campaign-type-tile__desc {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--ld-text-muted, #5b5872);
}

/* Podpis pojawia sie tylko na kafelku wskazanym przez AI i znika po recznym wyborze. */
.campaign-type-tile__badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
}

/* ============================================================
   Campaign option picker — graficzny wybor zakresu kampanii
   (krok kreatora doprecyzowujacy wybrany typ). Ukryte pole
   pozostaje zrodlem prawdy, kafelki tylko je odzwierciedlaja.
   ============================================================ */

.campaign-option-picker__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ld-text, #14122b);
}

.campaign-option-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.campaign-option-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--ld-surface, #ffffff);
  border: 2px solid var(--ld-border, #e3e6ef);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  color: var(--ld-text, #14122b);
  text-align: left;
}

.campaign-option-tile:hover,
.campaign-option-tile:focus-visible {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 4px 14px rgba(20, 18, 43, 0.14);
  transform: translateY(-2px);
  outline: none;
}

.campaign-option-tile.is-selected {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 0 0 3px var(--ld-brand-soft, rgba(108, 76, 241, 0.25));
}

.campaign-option-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ld-brand-soft, rgba(108, 76, 241, 0.12));
  color: var(--ld-brand, #6c4cf1);
  font-size: 17px;
}

.campaign-option-tile__name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--ld-text, #14122b);
}

.campaign-option-tile__desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ld-text-muted, #5b5872);
}

.campaign-option-group__notes {
  min-height: 90px !important;
}

/* Opcje zaawansowane kampanii: wejscie ma byc widoczne, ale nie konkurowac
   z glownymi kafelkami akcji na stronie kampanii. */
.campaign-options__entry {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ld-border, #e3e6ef);
  border-radius: 999px;
  background: transparent;
  color: var(--ld-text-muted, #5b5872);
  font-size: 0.82rem;
  cursor: pointer;
}

.campaign-options__entry:hover,
.campaign-options__entry:focus-visible {
  border-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand, #6c4cf1);
  outline: none;
}

.campaign-options__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.5rem;
}

.campaign-options__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--ld-border, #e3e6ef);
  border-radius: 10px;
  color: var(--ld-text, #14122b);
}

.campaign-options__item.is-on {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand-soft, rgba(108, 76, 241, 0.08));
}

.campaign-options__item-name {
  font-weight: 600;
  display: block;
}

.campaign-options__item-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--ld-text-muted, #5b5872);
}

@media (max-width: 575.98px) {
  .campaign-type-picker {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .campaign-option-picker {
    grid-template-columns: 1fr;
  }
}

/* AI Act compliance strategy shared by campaign Playground views. */
/* Panel lezy POD Playgroundem. Wybor wariantu zostaje widoczny - to swiadoma decyzja
   uzytkownika, a nie szczegol do schowania - ale jego powierzchnia jest zminimalizowana:
   pasek naglowka, rzad chipow, jedna linia opisu i kompaktowa bramka zgody. Panel nie jest
   karta-bohaterem: bez cienia, bez brandowej szyny, maly promien.
   Tlo zostaje na parze --ld-surface/--ld-text, bo tylko ta para ma sprawdzony kontrast
   we wszystkich motywach. */
.ai-compliance {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.7rem 0.6rem;
  color: var(--ld-text, #1a1d2e);
  background: var(--ld-surface, #fff);
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 8px;
  text-align: left;
}

.ai-compliance__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.ai-compliance__bar-icon {
  flex: 0 0 auto;
  color: var(--ld-brand, #6c4cf1);
}

.ai-compliance__bar-label {
  flex: 0 0 auto;
  color: var(--ld-text, #1a1d2e);
  font-weight: 700;
}

.ai-compliance__badge,
.ai-compliance__source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

.ai-compliance__badge {
  margin-right: 0.35rem;
  vertical-align: middle;
  color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand-soft, #f1edfe);
  border: 1px solid var(--ld-brand, #6c4cf1);
}

/* Status wyboru, nie pole formularza - dlatego bez ramki i tla pola.
   W pasku ustepuje miejsca znacznikowi: skraca sie wielokropkiem zamiast lamac linie. */
.ai-compliance__source {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.25rem 0 0.25rem 0.85rem;
  position: relative;
  color: var(--ld-text-muted, #667085);
  font-weight: 600;
}

.ai-compliance__source::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ld-brand, #6c4cf1);
}

.ai-compliance__reason {
  margin: 0 0 0.6rem;
  color: var(--ld-text-muted, #667085);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Kontrast wskaznika focusu musi byc widoczny na bialym panelu (WCAG 1.4.11),
   dlatego pelny brand, a nie --ld-brand-soft. */
.ai-compliance__action:focus,
.ai-compliance__action:focus-visible,
.ai-compliance__more-summary:focus,
.ai-compliance__more-summary:focus-visible,
.ai-compliance__chip:focus-visible {
  outline: 3px solid var(--ld-brand, #6c4cf1);
  outline-offset: 2px;
}

/* Rzad chipow zamiast siatki wysokich kafelkow - warianty maja byc widoczne od razu,
   ale kosztowac jedna linie, a nie pol ekranu. */
.ai-compliance__picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
}

/* Chipy leza na powierzchni panelu, wiec musza miec wlasne tlo,
   inaczej w kazdym motywie zlewaja sie z panelem. */
.ai-compliance__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  color: var(--ld-text, #1a1d2e);
  background: var(--ld-bg, #f6f7fb);
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
}

.ai-compliance__chip i {
  color: var(--ld-text-muted, #667085);
}

/* Wybor nie moze wynikac z samego koloru - stad pogrubienie, ramka brandu i znacznik. */
.ai-compliance__chip.is-selected {
  color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand-soft, #f1edfe);
  border-color: var(--ld-brand, #6c4cf1);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--ld-brand, #6c4cf1);
}

.ai-compliance__chip.is-selected i,
.ai-compliance__chip:hover:not(.is-unavailable) i {
  color: var(--ld-brand, #6c4cf1);
}

.ai-compliance__chip:hover:not(.is-unavailable) {
  border-color: var(--ld-brand, #6c4cf1);
}

.ai-compliance__chip.is-unavailable {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Opis dotyczy wylacznie wariantu wybranego - trzy opisy naraz byly glownym zjadaczem miejsca. */
.ai-compliance__hint {
  margin: 0.4rem 0 0.55rem;
  color: var(--ld-text-muted, #667085);
  font-size: 0.78rem;
  line-height: 1.4;
}

.ai-compliance__hint:empty {
  display: none;
}

.ai-compliance__bubble {
  position: relative;
  margin: 0;
  padding: 0.7rem 0.9rem;
  color: var(--ld-text, #1a1d2e);
  background: var(--ld-brand-soft, #f1edfe);
  border: 1px solid var(--ld-brand, #6c4cf1);
  border-radius: 14px 14px 14px 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.ai-compliance__bubble:empty::before {
  content: "\2014";
  color: var(--ld-text-muted, #667085);
}

/* Podglad wiadomosci i uzasadnienie prawne to material do przeczytania raz - jako jedyne
   chowaja sie pod rozwijaniem, zeby powrot na strone nie kosztowal znowu pol ekranu. */
.ai-compliance__more {
  margin-top: 0.55rem;
}

.ai-compliance__more-summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ld-brand, #6c4cf1);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.78rem;
  list-style: none;
}

.ai-compliance__more-summary::-webkit-details-marker {
  display: none;
}

.ai-compliance__more-caret {
  margin-left: auto;
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.ai-compliance__more[open] .ai-compliance__more-caret {
  transform: rotate(180deg);
}

.ai-compliance__more-body {
  margin-top: 0.5rem;
}

.ai-compliance__more-body .ai-compliance__bubble {
  margin-bottom: 0.6rem;
}

/* Panel dotyczy tylko brzmienia rozmowy, wiec konczy sie samym zapisem - zgoda PKE
   przeniosla sie do popupu przy uruchomieniu kampanii. */
.ai-compliance__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.ai-compliance__status {
  margin: 0.45rem 0 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.8rem;
}

.ai-compliance__status:empty {
  display: none;
}

/* --ld-danger (#f04438) na bialym tle to ~3.8:1 - za malo dla tekstu,
   dlatego komunikat bledu uzywa ciemniejszego wariantu z tej samej rodziny. */
.ai-compliance__status.is-error {
  color: var(--ld-danger-ink, #a32d2d);
  font-weight: 700;
}

/* Przycisk stoi w rzedzie ze zgoda, wiec bierze tylko swoja szerokosc.
   Na waskim ekranie media query rozciaga go na cala szerokosc. */
.ai-compliance__action {
  flex: 0 0 auto;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Popup ponownej akceptacji regulaminu 1.2 - jedyna powierzchnia AI Act,
   ktora widzi kazdy uzytkownik, wiec uzywa tego samego jezyka co panel strategii. */
.terms-update__header {
  display: block;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ld-border, #e6e8f0);
}

/* Uwaga na motyw ciemny: turbobot przyciemnia .modal-body, ale zostawia
   .modal-header i .modal-footer jasne. Tekst w naglowku i stopce nie moze
   wiec brac --ld-text (w turbobocie jasny) - zostaje jawny ciemny kolor. */
.terms-update__title {
  margin: 0.6rem 0 0.25rem;
  color: #14122b;
  font-size: 1.25rem;
  font-weight: 700;
}

.terms-update__date {
  margin: 0;
  color: #667085;
  font-size: 0.85rem;
  font-weight: 600;
}

.terms-update__lead {
  margin: 0 0 0.85rem;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Najwazniejsza tresc popupu: co konkretnie sie zmienilo. */
.terms-update__change {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem;
  background: var(--ld-brand-soft, #f1edfe);
  border: 1px solid var(--ld-brand, #6c4cf1);
  border-radius: 10px;
}

.terms-update__change p {
  margin: 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.88rem;
  line-height: 1.5;
}

.terms-update__change-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ld-surface, #fff);
  color: var(--ld-brand, #6c4cf1);
  font-size: 15px;
}

.terms-update__gate {
  margin-top: 0.85rem;
  padding: 0.75rem;
  background: var(--ld-warning-bg, #fdf3e2);
  border: 1px solid var(--ld-warning, #f79009);
  border-radius: 10px;
}
/* Link do regulaminu stoi na tincie ostrzegawczym, wiec bierze ink z tej samej
   rodziny (kontrakt .ld-badge--*). Domyslny link Bootstrapa (#3f6ad8) daje tu
   4,48:1 - tuz pod progiem AA. Podkreslenie zostaje, zeby nie zgubic afordancji. */
.terms-update__gate a {
  color: var(--ld-warning-ink, #935e06);
  font-weight: 600;
  text-decoration: underline;
}


.terms-update__footer {
  justify-content: space-between;
}

/* Stopka modala jest jasna w kazdym motywie - patrz komentarz przy .terms-update__title. */
.terms-update__logout {
  color: #667085;
  font-weight: 600;
}

.terms-update__logout:hover,
.terms-update__logout:focus {
  color: #14122b;
}

.leadya-onboarding__compliance {
  margin-bottom: 0.85rem;
  padding: 0.75rem;
  color: var(--ld-text, #1a1d2e);
  background: var(--ld-brand-soft, #f1edfe);
  border: 1px solid var(--ld-brand, #6c4cf1);
  border-radius: 10px;
}

.leadya-onboarding__compliance p {
  margin: 0.5rem 0 0;
  line-height: 1.45;
}

/* Popup podstawy marketingowej pytany przy uruchomieniu kampanii. Ten sam jezyk co popup
   regulaminu 1.2, bo obie powierzchnie stawiaja jedno pytanie prawne przed jedna akcja. */
.marketing-consent-modal__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  /* Naglowek modala zostaje jasny takze w turbobocie - patrz komentarz przy .terms-update__title. */
  color: #14122b;
  font-size: 1.1rem;
  font-weight: 700;
}

.marketing-consent-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-brand, #6c4cf1);
  font-size: 14px;
}

.marketing-consent-modal__intro {
  margin: 0 0 0.85rem;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Samo oswiadczenie jest tym, po co otwarl sie popup - dlatego wyroznione, a nie w przypisie.
   `padding-left` musi stac po skroconym `padding`: kwadrat checkboxa Bootstrapa to `::before`
   z `left: -1.5rem` wzgledem etykiety, wiec lewy padding 0.75rem rysowal go 11px NA ZEWNATRZ
   bursztynowej ramki - popup wygladal wtedy tak, jakby zgody nie dalo sie zaznaczyc. */
.marketing-consent-modal__consent {
  padding: 0.75rem;
  padding-left: 2.25rem;
  background: var(--ld-warning-bg, #fdf3e2);
  border: 1px solid var(--ld-warning, #f79009);
  border-radius: 10px;
}

.marketing-consent-modal__consent .custom-control-label {
  color: var(--ld-text, #1a1d2e);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}

.marketing-consent-modal__consent input:focus + label::before {
  outline: 3px solid var(--ld-brand, #6c4cf1);
  outline-offset: 2px;
}

/* Tint i tekst z tej samej rodziny koloru - sam --ld-text-muted spada tu ponizej 4.5:1. */
.marketing-consent-modal__legal {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  color: var(--ld-warning-ink, #935e06);
  font-size: 0.82rem;
  line-height: 1.45;
}

.marketing-consent-modal__legal i {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

/* --ld-danger na bialym tle to ~3.8:1 - za malo dla tekstu. */
.marketing-consent-modal__error {
  margin: 0.7rem 0 0;
  color: var(--ld-danger-ink, #a32d2d);
  font-size: 0.85rem;
  font-weight: 700;
}

.marketing-consent-modal__error:empty {
  display: none;
}

/* Komunikat systemowy Playgroundu: musi byc odrozniony od wiadomosci rozmowy, bo nie pochodzi
   ani od uzytkownika, ani od LeadYa. Bez niego nieudane wyslanie bylo zupelnie niewidoczne. */
.playground-notice {
  margin: 12px auto 0;
  padding: 8px 12px;
  max-width: 85%;
  color: #935e06;
  background: #fdf3e2;
  border: 1px solid #f79009;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 575.98px) {
  .ai-compliance {
    padding: 0.5rem 0.55rem 0.6rem;
  }

  /* Na waskim ekranie pasek lamie sie zamiast sciskac zrodlo wyboru do wielokropka. */
  .ai-compliance__bar {
    flex-wrap: wrap;
  }

  /* Chipy na pelna szerokosc: trzy warianty obok siebie w 375 px daja same wielokropki. */
  .ai-compliance__chip {
    flex: 1 1 100%;
  }

  .ai-compliance__action {
    flex: 1 1 100%;
  }
}

/* Komunikat o wyniku klikniecia "Uruchom teraz" nad paskiem zadania. */
.task-auto__run-flash {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* ============================================================
   Program partnerski: nawigacja zakładek, kafelki dołączenia,
   statystyki przeglądu i typografia regulaminu.
   ============================================================ */

/* main.css (ArchitectUI) ustawia .text-muted na pomarańcz #ff8d56 !important
   (kontrast 2,3:1 na białym). Na stronach programu partnerskiego tekst
   poboczny ma być czytelny i brać kolor z tokenu motywu. */
.partner-program-page .text-muted {
  color: var(--ld-text-muted, #667085) !important;
}

.partner-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.partner-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 999px;
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #1a1d2e);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.partner-nav__item i {
  font-size: 0.78rem;
  color: var(--ld-text-muted, #667085);
}

.partner-nav__item:hover,
.partner-nav__item:focus {
  border-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-text, #1a1d2e);
  text-decoration: none;
}

.partner-nav__item:focus-visible {
  outline: 2px solid var(--ld-brand, #6c4cf1);
  outline-offset: 2px;
}

.partner-nav__item.is-active,
.partner-nav__item.is-active i {
  background: var(--ld-brand, #6c4cf1);
  border-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
}

.partner-nav__group-label {
  flex: 0 0 100%;
  margin-top: 5px;
  color: var(--ld-text-muted, #667085);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.partner-nav__item--agreement {
  border-color: color-mix(in srgb, var(--ld-brand, #6c4cf1) 28%, var(--ld-border, #e6e8f0));
  background: color-mix(in srgb, var(--ld-brand, #6c4cf1) 6%, var(--ld-surface, #fff));
}

.partner-nav__item--admin {
  border-color: color-mix(in srgb, var(--ld-warning-ink, #8a5a00) 35%, var(--ld-border, #e6e8f0));
  background: var(--ld-warning-bg, #fff8e1);
}

/* Materiały partnera: pliki sprzedażowe i trzy krótkie lekcje Akademii. */
.partner-materials-page {
  display: grid;
  gap: 16px;
}

.partner-materials-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border-radius: var(--ld-radius, 12px);
  background: linear-gradient(135deg, var(--ld-ink, #14122b), var(--ld-brand, #6c4cf1));
  color: #ffffff;
  overflow: hidden;
}

.partner-materials-hero h1 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.1;
}

.partner-materials-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
}

.partner-materials-hero__eyebrow,
.partner-materials-section__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.partner-materials-hero__eyebrow {
  color: var(--ld-accent, #ffc24b);
}

.partner-materials-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.partner-materials-hero__secondary {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.partner-materials-hero__secondary:hover,
.partner-materials-hero__secondary:focus {
  color: var(--ld-accent, #ffc24b);
}

.partner-materials-hero__mark {
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 3rem;
  transform: rotate(4deg);
}

.partner-materials-nav {
  margin: 0;
}

.partner-materials-section {
  padding: 20px;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #1a1d2e);
}

.partner-materials-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.partner-materials-section__eyebrow {
  color: var(--ld-brand, #6c4cf1);
}

.partner-materials-section__head h2 {
  margin: 3px 0 4px;
  color: var(--ld-text, #1a1d2e);
  font-size: 1.35rem;
}

.partner-materials-section__head p {
  max-width: 760px;
  margin: 0;
  color: var(--ld-text-muted, #667085);
}

.partner-materials-section__time {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ld-info-bg, #eaf4ff);
  color: var(--ld-info-ink, #174f78);
  font-size: 0.78rem;
  font-weight: 800;
}

.partner-materials-video__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.8fr);
  align-items: center;
  gap: 20px;
}

.partner-materials-video__player,
.partner-materials-video__iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-ink, #14122b);
}

.partner-materials-video__player {
  position: relative;
  display: grid;
  padding: 0;
  place-items: center;
  overflow: hidden;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(20, 18, 43, 0.18);
}

.partner-materials-video__player::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 43, 0.08), rgba(20, 18, 43, 0.66));
  content: "";
}

.partner-materials-video__player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.partner-materials-video__player:hover img {
  transform: scale(1.025);
}

.partner-materials-video__player:focus-visible {
  outline: 3px solid var(--ld-accent, #ffc24b);
  outline-offset: 3px;
}

.partner-materials-video__play {
  position: absolute;
  z-index: 1;
  display: grid;
  width: 64px;
  height: 64px;
  padding-left: 4px;
  place-items: center;
  border-radius: 50%;
  background: var(--ld-brand, #6c4cf1);
  box-shadow: 0 8px 24px rgba(20, 18, 43, 0.35);
  font-size: 1.3rem;
}

.partner-materials-video__play-label {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 14px;
  left: 18px;
  font-weight: 800;
  text-align: center;
}

.partner-materials-video__copy h3 {
  margin: 0 0 8px;
  color: var(--ld-text, #1a1d2e);
  font-size: 1.15rem;
}

.partner-materials-video__copy p {
  margin: 0 0 14px;
  color: var(--ld-text-muted, #667085);
}

.partner-materials-video__copy a {
  color: var(--ld-brand, #6c4cf1);
  font-weight: 800;
}

.partner-materials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.partner-download-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-bg, #f6f7fb);
}

.partner-download-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  font-size: 1.25rem;
}

.partner-download-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.partner-download-card h3 {
  margin: 8px 0 5px;
  color: var(--ld-text, #1a1d2e);
  font-size: 1.05rem;
}

.partner-download-card p {
  margin: 0 0 7px;
  color: var(--ld-text-muted, #667085);
}

.partner-download-card__meta {
  margin-bottom: 12px;
  color: var(--ld-text-muted, #667085);
  font-size: 0.78rem;
  font-weight: 700;
}

.partner-download-card .btn {
  margin-top: auto;
}

.partner-download-card .btn-outline-primary {
  border-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand, #6c4cf1);
}

.partner-download-card .btn-outline-primary:hover,
.partner-download-card .btn-outline-primary:focus {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
}

.partner-materials-compliance {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--ld-warning-border, #f2c94c);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-warning-bg, #fff7dd);
  color: var(--ld-warning-ink, #6b4c00);
}

.partner-materials-compliance > i {
  margin-top: 3px;
}

.partner-materials-compliance h3,
.partner-materials-compliance p {
  margin: 0;
  color: inherit;
}

.partner-materials-compliance h3 {
  margin-bottom: 3px;
  font-size: 0.95rem;
}

.partner-academy-list {
  display: grid;
  gap: 10px;
}

.partner-academy-lesson {
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-bg, #f6f7fb);
  overflow: hidden;
}

.partner-academy-lesson summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--ld-text, #1a1d2e);
  cursor: pointer;
  list-style: none;
}

.partner-academy-lesson summary::-webkit-details-marker {
  display: none;
}

.partner-academy-lesson summary:focus-visible {
  outline: 2px solid var(--ld-brand, #6c4cf1);
  outline-offset: -3px;
}

.partner-academy-lesson__number {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  font-size: 0.82rem;
  font-weight: 900;
}

.partner-academy-lesson__summary {
  display: grid;
  gap: 2px;
}

.partner-academy-lesson__summary strong {
  color: var(--ld-text, #1a1d2e);
  font-size: 1rem;
}

.partner-academy-lesson__summary > span:last-child,
.partner-academy-lesson__meta {
  color: var(--ld-text-muted, #667085);
  font-size: 0.83rem;
}

.partner-academy-lesson__meta {
  font-weight: 800;
  text-transform: uppercase;
}

.partner-academy-lesson summary > i {
  color: var(--ld-text-muted, #667085);
  transition: transform 0.18s ease;
}

.partner-academy-lesson[open] summary > i {
  transform: rotate(180deg);
}

.partner-academy-lesson__content {
  padding: 0 16px 16px 70px;
  border-top: 1px solid var(--ld-border, #e6e8f0);
  color: var(--ld-text, #1a1d2e);
}

.partner-academy-lesson__content h3 {
  margin: 14px 0 7px;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.95rem;
}

.partner-academy-lesson__content ul {
  margin: 0;
  padding-left: 18px;
}

.partner-academy-lesson__content li + li {
  margin-top: 5px;
}

.partner-academy-lesson__exercise {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--ld-accent, #ffc24b);
  border-radius: 6px;
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #1a1d2e);
}

@media (max-width: 767.98px) {
  .partner-materials-hero {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .partner-materials-hero__mark {
    display: none;
  }

  .partner-materials-grid {
    grid-template-columns: 1fr;
  }

  .partner-materials-video__layout {
    grid-template-columns: 1fr;
  }

  .partner-materials-section {
    padding: 15px;
  }

  .partner-materials-section__head {
    flex-direction: column;
  }

  .partner-academy-lesson__content {
    padding-left: 16px;
  }
}

/* Kafelki dołączenia do programu (Progress vs Performance) */
.partner-join-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
}

.partner-join-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #1a1d2e);
}

.partner-join-tile.is-recommended {
  border: 2px solid var(--ld-brand, #6c4cf1);
}

.partner-join-tile__badge {
  margin-bottom: 8px;
}

.partner-join-tile__list {
  margin: 0 0 4px;
  padding-left: 18px;
}

.partner-join-tile__list li {
  margin-bottom: 4px;
}

/* Siatka statystyk na przeglądzie partnera */
.partner-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.partner-stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-surface, #fff);
}

.partner-stat small {
  color: var(--ld-text-muted, #667085);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.partner-stat strong {
  color: var(--ld-text, #1a1d2e);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Typografia regulaminu programu partnerskiego */
.partner-terms {
  max-width: 900px;
  text-align: left;
}

.partner-terms h5 {
  margin: 1.1rem 0 0.4rem;
  font-weight: 800;
}

.partner-terms ol {
  margin-bottom: 0.4rem;
  padding-left: 20px;
}

.partner-terms ol li {
  margin-bottom: 0.25rem;
}

/* --- Przenoszenie kampanii miedzy kontami i serwerami (eksport/import XML) --- */
.campaign-transfer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--ld-border, #e3e3ee);
  border-radius: 8px;
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #14122b);
  font-size: 0.74rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ct-btn:hover,
.ct-btn:focus-visible {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-brand, #6c4cf1);
  outline: none;
}

.ct-btn-label {
  white-space: nowrap;
}

.campaign-transfer-hint {
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.7rem;
}

/* Popup importu. Naglowek i stopka modala maja w main.css na sztywno jasne tlo,
   dlatego tytul bierze jawny ciemny kolor zamiast --ld-text (jasny w turbobocie). */
.ci-modal-title {
  color: #14122b;
}

/* main.css maluje .modal-content na sztywno na bialo w KAZDYM motywie, wiec wnetrze
   popupu jest jasna powierzchnia niezaleznie od motywu. Zamiast nadpisywac kolor
   kazdego tekstu z osobna, tresc popupu dostaje tu tokeny pasujace do tej powierzchni
   - reszta regul dalej czyta --ld-*. Bez tego w LeadYa Dark jasny --ld-text laduje na
   bialym tle (zmierzone 1,31:1) i tresc popupu jest nieczytelna. */
.ci-modal {
  --ld-surface: #ffffff;
  --ld-text: #1a1d2e;
  --ld-text-muted: #667085;
  color: var(--ld-text);
  text-align: left;
}

.ci-modal-intro {
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
}

.ci-rules {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.ci-rules li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.ci-rule-icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--ld-brand, #6c4cf1);
}

.ci-file-group {
  margin-bottom: 0.2rem;
}

.ci-file-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.ci-file-input {
  height: auto;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

.ci-file-hint {
  margin: 0.3rem 0 0;
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.72rem;
}

.ci-state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.ci-state-busy {
  border: 1px solid var(--ld-border, #e3e3ee);
  background: var(--ld-bg, #f6f7fb);
  color: var(--ld-text, #14122b);
}

.ci-state-error {
  border: 1px solid var(--ld-danger, #f04438);
  background: var(--ld-danger-bg, #fcebeb);
  color: var(--ld-danger-ink, #a32d2d);
  font-weight: 600;
}

.ci-state-success {
  display: block;
  border: 1px solid var(--ld-success, #12b76a);
  background: var(--ld-success-bg, #e7f7ef);
  color: var(--ld-success-ink, #05603a);
}

.ci-spinner {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ld-border, #e3e3ee);
  border-top-color: var(--ld-brand, #6c4cf1);
  border-radius: 50%;
  animation: ci-spin 0.9s linear infinite;
}

@keyframes ci-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 575.98px) {
  .campaign-transfer-hint {
    flex: 1 1 100%;
  }
}

/* Notka w panelu strategii: pierwsze wiadomosci z AI czekaja na zatwierdzenie jako wlasna
   tresc uzytkownika. Tint ostrzegawczy z inkiem z tej samej rodziny (kontrakt .ld-badge--*),
   bo sam --ld-text-muted na tincie spada ponizej 4.5:1. */
.ai-compliance__approval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.7rem;
  color: var(--ld-warning-ink, #7a4a00);
  background: var(--ld-warning-bg, #fdf3e2);
  border: 1px solid var(--ld-warning, #f79009);
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.ai-compliance__approval > span {
  flex: 1 1 14rem;
}

.ai-compliance__approve {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Popup przed uruchomieniem pokazuje tylko brakujace sekcje; kolejne sekcje oddziela odstep. */
.marketing-consent-modal__section + .marketing-consent-modal__section {
  margin-top: 0.85rem;
}

/* ============================================================
   Akademia - przypomnienie o szkoleniach (fragments/tutorial_reminder)
   Karta celowo powtarza wyglad "Video do tego kroku" z panelu
   pierwszego uruchomienia (.leadya-onboarding__academy): jasna
   powierzchnia na tokenach --ld-*, waskie kolumny i kadr 16:9
   ograniczony do szerokosci kolumny, zeby film nie zajmowal pol
   ekranu. Film zastapiony miniatura startuje dopiero na klikniecie.
   ============================================================ */
.tutorial-academy {
  margin: 0 0 1rem;
  padding: 1.1rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #1a1d2e);
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.06);
}

/* Dwie kolumny jak w panelu pierwszego uruchomienia: opis po lewej, karty
   z filmami po prawej - dzieki temu wiersz nie konczy sie pusta polowa. */
.tutorial-academy__layout {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  gap: 1.1rem;
  align-items: start;
}

.tutorial-academy__lead {
  max-width: 46ch;
  margin: 0.35rem 0 0;
  color: var(--ld-text-muted, #667085);
  font-size: 0.9rem;
  line-height: 1.5;
}

.tutorial-academy__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tutorial-academy__optional {
  color: var(--ld-text-muted, #667085);
  letter-spacing: 0.04em;
}

.tutorial-academy__title {
  margin: 0.2rem 0 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

/* Kafelek ma twardy limit 320 px (patrz .tutorial-academy__item), wiec kadr
   filmu zostaje maly niezaleznie od tego, jak szeroki jest widok, ktory
   doklada fragment; nadmiar kafelkow zawija sie do nastepnego wiersza. */
.tutorial-academy__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tutorial-academy__item {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  flex: 1 1 260px;
  min-width: 240px;
  max-width: 320px;
  padding: 0.85rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-bg, #f6f7fb);
}

.tutorial-academy__item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  /* Dwie linie tytulu na zapas: kadry sasiednich kafelkow zaczynaja sie
     wtedy na tej samej wysokosci, niezaleznie od dlugosci nazwy. */
  min-height: 2.25rem;
}

.tutorial-academy__name {
  min-width: 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
}

.tutorial-academy__name:hover,
.tutorial-academy__name:focus {
  color: var(--ld-brand, #6c4cf1);
  text-decoration: underline;
}

/* "Zapoznalem sie - schowaj akademie": jedyna akcja paska, ktora dziala na wszystkie
   ekrany naraz, wiec dostaje pelny kolor marki. Kafelki maja tylko obrys, zeby nie
   konkurowaly z nia o uwage. */
.tutorial-academy__dismiss {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #fff);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.tutorial-academy__dismiss:hover {
  filter: brightness(1.08);
}

.tutorial-academy__dismiss:focus-visible {
  outline: 3px solid var(--ld-brand, #6c4cf1);
  outline-offset: 2px;
}

.tutorial-academy__dismiss[disabled] {
  cursor: progress;
  opacity: 0.75;
}

/* Przycisk chowa pasek na wszystkich ekranach, wiec obok niego stoi zdanie, gdzie
   szkolenia zostaja i skad wracaja - inaczej wyglada jak nieodwracalne skasowanie. */
.tutorial-academy__dismiss-note {
  max-width: 46ch;
  margin: 0.4rem 0 0;
  color: var(--ld-text-muted, #667085);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* Tekst bledu bierze ink z rodziny tla (kontrakt .ld-badge--*): samo --ld-danger na
   ciemnej powierzchni LeadYa Dark dawaloby 3,3:1, czyli ponizej progu. */
.tutorial-academy__dismiss-error {
  display: inline-block;
  max-width: 46ch;
  margin: 0.4rem 0 0;
  padding: 0.3rem 0.55rem;
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-danger-bg, #fcebeb);
  color: var(--ld-danger-ink, #a32d2d);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.tutorial-academy__dismiss-error[hidden] {
  display: none;
}

.tutorial-academy__expand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  border-radius: var(--ld-radius-sm, 8px);
  border-color: var(--ld-brand, #6c4cf1);
  background: transparent;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.tutorial-academy__expand:hover,
.tutorial-academy__expand:focus {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #fff);
}

.tutorial-academy__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ld-radius-sm, 8px);
  background: #101828;
}

.tutorial-academy__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Nagranie z wlasnej domeny wypelnia ten sam kadr co odtwarzacz YouTube. */
.tutorial-academy__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #101828;
  object-fit: contain;
}

/* Miniatura zamiast odtwarzacza: strona nie pobiera YouTube'a przy wejsciu
   i nic nie zaczyna grac samo - film rusza dopiero po kliknieciu. */
.tutorial-academy__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tutorial-academy__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tutorial-academy__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #fff);
  font-size: 1rem;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.35);
  transition: transform 0.15s ease;
}

.tutorial-academy__play:hover .tutorial-academy__play-icon {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Miniatura to dowolna klatka filmu, wiec sam outline marki moze na niej
   zniknac; biala obwodka wokol kola odtwarzania trzyma widoczny focus. */
.tutorial-academy__play:focus {
  outline: 3px solid var(--ld-brand, #6c4cf1);
  outline-offset: -3px;
}

.tutorial-academy__play:focus .tutorial-academy__play-icon {
  box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(17, 24, 39, 0.35);
}

.tutorial-academy__copy {
  max-height: 5.5rem;
  margin: 0;
  overflow: auto;
  color: var(--ld-text-muted, #667085);
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 991.98px) {
  .tutorial-academy__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tutorial-academy__item {
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .tutorial-academy {
    padding: 0.9rem;
  }

  .tutorial-academy__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .tutorial-academy__item-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .tutorial-academy__dismiss {
    width: 100%;
    justify-content: center;
  }
}

.academy-restore__note {
  margin: 0 0 0.4rem;
  color: var(--ld-text-muted, #667085);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ============================================================
   Popup jednego szkolenia Akademii ("Powieksz" w kafelku paska).

   Wlasny popup zamiast modala Bootstrapa: 4 z 50 widokow doklejajacych pasek nie
   laduja bootstrap.min.js, wiec $.fn.modal w globalnym jQuery tam nie istnieje
   (documentation/Modal-Popup-Guide.md). Kolory ida z tokenow --ld-*, wiec popup
   dziedziczy motyw, lacznie z ciemna powierzchnia LeadYa Dark.
   ============================================================ */
.academy-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.academy-lightbox[hidden] {
  display: none;
}

/* Strona pod popupem nie moze sie przewijac razem z nim - inaczej zamkniecie
   popupu wraca w zupelnie inne miejsce ekranu. */
body.academy-lightbox-open {
  overflow: hidden;
}

.academy-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.62);
}

.academy-lightbox__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #1a1d2e);
  box-shadow: 0 32px 80px rgba(17, 24, 39, 0.45);
}

.academy-lightbox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--ld-border, #e6e8f0);
}

.academy-lightbox__title {
  margin: 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.academy-lightbox__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-bg, #f6f7fb);
  color: var(--ld-text, #1a1d2e);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.academy-lightbox__close:hover {
  background: var(--ld-border, #e6e8f0);
}

.academy-lightbox__close:focus-visible {
  outline: 3px solid var(--ld-brand, #6c4cf1);
  outline-offset: 2px;
}

.academy-lightbox__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 1.15rem;
}

.academy-lightbox__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: var(--ld-radius-sm, 8px);
  background: #101828;
}

.academy-lightbox__frame[hidden] {
  display: none;
}

.academy-lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.academy-lightbox__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #101828;
  object-fit: contain;
}

/* Caly opis, bez przyciecia z kafelka - po to jest powiekszenie. */
.academy-lightbox__copy {
  color: var(--ld-text, #1a1d2e);
  font-size: 0.92rem;
  line-height: 1.6;
}

.academy-lightbox__copy[hidden] {
  display: none;
}

.academy-lightbox__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--ld-border, #e6e8f0);
  /* Stopka zostaje na --ld-surface, nie na --ld-bg: w motywie Classic marka na tle
     strony daje 4,42:1, czyli ponizej progu dla linku "Otworz w Akademii". */
  background: var(--ld-surface, #fff);
}

.academy-lightbox__link {
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.85rem;
  font-weight: 700;
}

.academy-lightbox__link[hidden] {
  display: none;
}

.academy-lightbox__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 575.98px) {
  .academy-lightbox {
    padding: 0;
  }

  .academy-lightbox__dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .academy-lightbox__foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .academy-lightbox__actions {
    justify-content: flex-end;
  }
}

/* --- Udostepnianie kampanii innym uzytkownikom (publikacja i wybor szablonu) --- */
.campaign-type-badge-new {
  display: inline-block;
  background-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.cs-pricing {
  border: 0;
  margin: 0 0 0.6rem;
  padding: 0;
}

.cs-pricing__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.cs-pricing__option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--ld-border, #e3e3ee);
  border-radius: 10px;
  background: var(--ld-surface, #ffffff);
  cursor: pointer;
}

.cs-pricing__option:focus-within {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: var(--ld-focus-ring, 0 0 0 3px rgba(108, 76, 241, 0.35));
}

.cs-pricing__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cs-pricing__title {
  color: var(--ld-text, #14122b);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}

.cs-pricing__hint {
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.72rem;
  line-height: 1.35;
}

.cs-price-group {
  margin-top: 0.6rem;
}

.cs-price-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 220px;
}

.cs-price-currency {
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.8rem;
}

/* Lista udostepnionych kampanii: kafelki zamiast tabeli, jedna akcja na kafelek. */
.cs-offers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.6rem;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
}

.cs-offer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--ld-border, #e3e3ee);
  border-radius: 12px;
  background: var(--ld-surface, #ffffff);
}

.cs-offer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

.cs-offer__title {
  color: var(--ld-text, #14122b);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
}

.cs-offer__badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.7rem;
  white-space: nowrap;
}

.cs-offer__badge--paid {
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
}

.cs-offer__meta {
  margin: 0;
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.7rem;
}

.cs-offer__description {
  margin: 0;
  color: var(--ld-text, #14122b);
  font-size: 0.76rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-offer__use {
  align-self: flex-start;
  margin-top: 0.15rem;
}

.cs-wallet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  padding: 0.3rem 0.6rem;
  border-radius: 10px;
  background: var(--ld-brand-soft, #f1edfe);
  color: var(--ld-brand, #6c4cf1);
  font-size: 0.75rem;
}

.cs-empty {
  padding: 1.2rem 0.5rem;
  text-align: center;
}

.cs-empty__icon {
  font-size: 1.6rem;
  color: var(--ld-brand, #6c4cf1);
}

.cs-empty__title {
  margin: 0.5rem 0 0.2rem;
  color: var(--ld-text, #14122b);
  font-size: 0.9rem;
  font-weight: 600;
}

.cs-empty__text {
  margin: 0;
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.78rem;
}

@media (max-width: 575.98px) {
  .cs-pricing__options {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-offers {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Oceny szablonow kampanii i podzial portfela partnera --- */
.cs-offer__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.cs-offer__stars {
  color: #f0a30a;
  font-size: 0.78rem;
}

.cs-offer__rating-count {
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.7rem;
}

.cs-rate {
  display: inline-flex;
  gap: 0.1rem;
  margin-left: auto;
}

.cs-rate__star {
  padding: 0 0.1rem;
  border: 0;
  background: transparent;
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.cs-rate__star:hover,
.cs-rate__star:focus-visible,
.cs-rate__star.is-chosen {
  color: #f0a30a;
  outline: none;
}

.cs-offer__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.cs-wallet-split {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.cs-wallet-split__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cs-wallet-split__label {
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cs-wallet-split__value {
  color: var(--ld-text, #14122b);
  font-size: 1.15rem;
  font-weight: 700;
}

.cs-wallet-split__hint {
  margin: 0.6rem 0 0;
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.78rem;
}

/* --- Moderacja udostepnionych kampanii: kolejka, decyzje i powod odrzucenia --- */
.cs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.cs-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ld-border-soft, #f0f1f5);
  border-radius: 999px;
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cs-filter:hover,
.cs-filter:focus-visible {
  border-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand, #6c4cf1);
  text-decoration: none;
}

.cs-filter.cs-filter--active {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
}

.cs-filter--active:hover,
.cs-filter--active:focus-visible {
  color: var(--ld-brand-ink, #ffffff);
}

.cs-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--ld-border-soft, #f0f1f5);
  color: var(--ld-text, #14122b);
  font-size: 0.72rem;
  line-height: 1;
}

.cs-filter--active .cs-filter__count {
  background: transparent;
  color: var(--ld-brand-ink, #ffffff);
}

.cs-review-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.cs-review-actions form {
  margin: 0;
}

.cs-review-note {
  margin-top: 0.3rem;
  max-width: 22rem;
  color: var(--ld-text, #14122b);
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: normal;
}

.cs-reject-form__label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--ld-text, #14122b);
  font-size: 0.8rem;
  font-weight: 600;
}

.cs-reject-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.cs-offer__review {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.cs-offer__review--pending {
  background: var(--ld-warning-bg, #fdf3e2);
  color: var(--ld-warning-ink, #935e06);
}

.cs-offer__review--rejected {
  background: var(--ld-danger-bg, #fcebeb);
  color: var(--ld-danger-ink, #a32d2d);
}

/* Licznik na kafelku panelu administracyjnego: rog karty jest jedynym miejscem,
   ktore nie walczy z dwuliniowym tytulem ani z grafika po prawej. */
.facebook-option-card__count {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--ld-danger-ink, #a32d2d);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

/* Przyciski decyzji stanely poza rodzina .btn-success/.btn-danger, gdy legacy
   przerabialo je na wielki CTA (1.2rem, przezroczyste tlo) i na czarne tlo —
   "Zatwierdz" bylo wtedy bialym tekstem na przezroczystym prostokacie. Tamte
   nadpisania juz nie istnieja, ale zostajemy przy wlasnych klasach: rzad przyciskow
   w tabeli ma byc drobny, a kolory bierzemy wprost z tokenow --ld-*. */
.cs-review-btn {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.3rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 8px;
  white-space: nowrap;
}

.cs-review-btn i {
  margin-right: 0.25rem;
}

/* --ld-success (#12b76a) to kolor sygnalu, nie tlo przycisku: biel dawala na nim
   2,62:1 we wszystkich motywach. --ld-success-btn istnieje dokladnie po to i trzyma
   5,36:1. */
.cs-review-btn--approve,
.cs-review-btn--approve:hover,
.cs-review-btn--approve:focus {
  background: var(--ld-success-btn, #0e7a4f);
  border-color: var(--ld-success-btn, #0e7a4f);
  color: #ffffff;
}

.cs-review-btn--reject {
  background: var(--ld-surface, #ffffff);
  border-color: var(--ld-danger, #f04438);
  color: var(--ld-danger-ink, #a32d2d);
}

.cs-review-btn--reject:hover,
.cs-review-btn--reject:focus {
  background: var(--ld-danger-bg, #fcebeb);
  color: var(--ld-danger-ink, #a32d2d);
}

.cs-review-btn--reject-confirm,
.cs-review-btn--reject-confirm:hover,
.cs-review-btn--reject-confirm:focus {
  background: var(--ld-danger, #f04438);
  border-color: var(--ld-danger, #f04438);
  color: #ffffff;
}

.cs-review-btn--neutral {
  background: var(--ld-surface, #ffffff);
  border-color: var(--ld-border, #e6e8f0);
  color: var(--ld-text-muted, #667085);
}

.cs-review-btn--neutral:hover,
.cs-review-btn--neutral:focus {
  background: var(--ld-border-soft, #f0f1f5);
  color: var(--ld-text, #1a1d2e);
}

/* Bootstrapowe .text-muted jest w motywach LeadYa pomaranczowe i czyta sie jak
   ostrzezenie - w tabeli marketplace'u drugi plan ma byc drugim planem. */
.cs-cell-muted {
  color: var(--ld-text-muted, #667085);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* Klasa powstala, gdy globalne .text-center ustawialo jeszcze bialy tekst 1.2rem
   i liczby instalacji, zarobkow oraz statusy byly niewidoczne na bialej karcie.
   Tamta regula juz nie istnieje, wiec .text-center bylby tu wystarczajacy —
   zostawiamy wlasna klase, bo jawny kolor komorki nie zalezy od tego, co dowolny
   motyw zrobi z narzedziem wyrownania. */
.cs-cell-center {
  text-align: center;
  color: var(--ld-text, #1a1d2e);
}

/* Historia zmian kampanii. Popup korzysta z tych samych klas .ci-* co import,
   bo to ten sam rodzaj rozmowy z uzytkownikiem - lista dostaje tylko wlasny uklad. */
.cv-list {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 20rem;
  overflow-y: auto;
}

.cv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ld-border, #e3e3ee);
  border-radius: 8px;
  margin-bottom: 0.4rem;
  background: var(--ld-surface, #ffffff);
}

.cv-item--current {
  border-color: var(--ld-brand, #6c4cf1);
}

.cv-item__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.cv-item__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ld-text, #14122b);
}

.cv-item__badge {
  flex: 0 0 auto;
}

.cv-item__meta {
  flex: 1 1 100%;
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.72rem;
  line-height: 1.35;
}

/* Bootstrapowy .btn-outline-primary bierze kolor z main.css (#3f6ad8) i na bialym tle
   popupu daje 2,95:1 - za malo na tekst przycisku. Przywrocenie wersji to akcja
   drugoplanowa, wiec dostaje wlasny, czytelny kolor zamiast koloru marki. */
.cv-item__action {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.75rem;
  border-color: #b9bacb;
  color: #34355c;
}

.cv-item__action:hover,
.cv-item__action:focus {
  border-color: #34355c;
  background: #f2f2f7;
  color: #14122b;
}

.cv-empty {
  margin: 0.8rem 0 0;
  color: var(--ld-text-muted, #6b6b7b);
  font-size: 0.8rem;
}

/* Pasek opiekuna na koncie klienta. Ma byc widoczny od razu i przez caly czas,
   ale nie konkurowac z glownym CTA strony - stad tint ostrzegawczy zamiast koloru marki. */
.acting-admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--ld-warning, #e5a13a);
  border-radius: 10px;
  background: var(--ld-warning-bg, #fff5e2);
  color: var(--ld-warning-ink, #6d4300);
  font-size: 0.85rem;
  line-height: 1.4;
}

.acting-admin-bar__icon {
  flex: 0 0 auto;
  font-size: 1rem;
}

.acting-admin-bar__text {
  flex: 1 1 16rem;
  min-width: 0;
}

.acting-admin-bar__text strong {
  margin-right: 0.35rem;
}

.acting-admin-bar__action {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ============================================================
   Widok pojedynczego uzytkownika (/userSingle)
   Ten widok skladaja klasy Bootstrapa, ktore w tym repo maja
   legacy nadpisania o zasiegu globalnym:
   - additional.css: .card { background: var(--color-black) } — w motywie
     Ruby --color-black to #000000, wiec kazda karta robila sie czarna;
   - additional.css: .card-header/.card-title { color: var(--color-white) }
     — na naglowku .bg-white dawalo bialy tekst na bialym tle (kontrast 1:1);
   - additional.css: .row { align-items: center } — kolumny o roznej
     wysokosci wychodzily wzgledem siebie w pionie;
   - main.css: .h-100 { height: 100vh } (druga, wygrywajaca deklaracja)
     — kafelek uprawnien mial wysokosc calego ekranu zamiast tresci;
   - main.css: .text-muted { color: #ff8d56 } — pomarancz na jasnym tle.
   Zamiast zmieniac reguly globalne (blast radius calej aplikacji)
   neutralizujemy je tutaj punktowo, tokenami --ld-*.
   ============================================================ */

.admin-user .card {
  background-color: var(--ld-surface);
  color: var(--ld-text);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  padding: 0;
}

.admin-user .card-header {
  background-color: var(--ld-surface);
  border-bottom: 1px solid var(--ld-border-soft);
  padding: 0.85rem 1.1rem;
}

.admin-user .card-header,
.admin-user .card-title,
.admin-user .card-header .card-title {
  color: var(--ld-text);
  text-align: left;
  font-weight: 600;
}

.admin-user .card-body {
  padding: 1.1rem;
}

.admin-user .card-body > form,
.admin-user form {
  padding: 0;
}

.admin-user .text-muted,
.admin-user small.text-muted,
.admin-user .form-text.text-muted {
  color: var(--ld-text-muted) !important;
}

.admin-user label {
  color: var(--ld-text);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.admin-user .list-group-item {
  background-color: var(--ld-surface);
  color: var(--ld-text);
  border-color: var(--ld-border-soft);
}

.admin-user .table {
  color: var(--ld-text);
}

.admin-user .table thead th {
  background-color: var(--ld-bg);
  color: var(--ld-text);
  border-bottom: 1px solid var(--ld-border);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Bootstrapowy .row centruje sie w pionie przez legacy reguly repo — na tym
   widoku kolumny maja rozna wysokosc i musza zaczynac sie od gory. */
.admin-user .row {
  align-items: flex-start;
}

/* ——— Naglowek strony ——— */

.admin-user__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
}

.admin-user__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ld-brand-soft);
  color: var(--ld-brand);
  font-size: 1.05rem;
}

.admin-user__identity-main {
  flex: 1 1 16rem;
  min-width: 0;
}

.admin-user__email {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ld-text);
  overflow-wrap: anywhere;
}

.admin-user__name {
  display: block;
  font-size: 0.85rem;
  color: var(--ld-text-muted);
}

.admin-user__identity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.admin-user__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* ——— Sekcja skladana ——— */

.admin-user__section {
  border-top: 1px solid var(--ld-border-soft);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.admin-user__section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.admin-user__section > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ld-text-muted);
}

.admin-user__section > summary::-webkit-details-marker {
  display: none;
}

.admin-user__section > summary::before {
  content: "\f054";
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.65rem;
  color: var(--ld-brand);
  transition: transform 0.15s ease-in-out;
}

.admin-user__section[open] > summary::before {
  transform: rotate(90deg);
}

.admin-user__section > summary:focus-visible {
  outline: none;
  box-shadow: var(--ld-focus-ring);
  border-radius: var(--ld-radius-sm);
}

.admin-user__section-hint {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ld-text-muted);
}

.admin-user__section-body {
  padding-top: 0.6rem;
}

/* ——— Pasek salda ——— */

.admin-user__balances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.admin-user__balance {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-bg);
}

.admin-user__balance-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ld-text-muted);
}

.admin-user__balance-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ld-text);
}

.admin-user__balance--credits .admin-user__balance-value {
  color: var(--ld-warning-ink);
}

.admin-user__balance--payout .admin-user__balance-value {
  color: var(--ld-success-ink);
}

/* ——— Kafelki wyboru (wina / kanal zwrotu) ——— */

.admin-user__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.admin-user__choice {
  position: relative;
  display: block;
  margin: 0;
}

.admin-user__choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.admin-user__choice-box {
  display: block;
  height: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-surface);
  cursor: pointer;
  transition: border-color 0.12s ease-in-out, background-color 0.12s ease-in-out;
}

.admin-user__choice-box strong {
  display: block;
  font-size: 0.88rem;
  color: var(--ld-text);
}

.admin-user__choice-box span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ld-text-muted);
}

.admin-user__choice input:checked + .admin-user__choice-box {
  border-color: var(--ld-brand);
  background: var(--ld-brand-soft);
}

.admin-user__choice input:focus-visible + .admin-user__choice-box {
  box-shadow: var(--ld-focus-ring);
}

.admin-user__choice input:disabled + .admin-user__choice-box {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ——— Podsumowanie skutkow operacji ——— */

.admin-user__effects {
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--ld-info);
  border-left-width: 3px;
  border-radius: var(--ld-radius-sm);
  background: var(--ld-info-bg);
  color: var(--ld-info-ink);
  font-size: 0.82rem;
  line-height: 1.5;
}

.admin-user__effects ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.admin-user__effects strong {
  color: var(--ld-info-ink);
}

.admin-user__effects--warning {
  border-color: var(--ld-warning);
  background: var(--ld-warning-bg);
  color: var(--ld-warning-ink);
}

.admin-user__effects--warning strong {
  color: var(--ld-warning-ink);
}

/* ——— Kafelek uprawnienia ———
   Celowo bez .h-100: w main.css wygrywa deklaracja height:100vh, wiec
   kazdy kafelek mial wysokosc calego okna. Rownanie wysokosci zalatwia
   sam flexbox kolumny .row. */

.admin-user__permission {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-bg);
}

.admin-user__permission .custom-control-label {
  font-weight: 600;
  color: var(--ld-text);
}

.admin-user__permission small {
  color: var(--ld-text-muted);
}

.admin-user__permission .form-control {
  font-size: 0.85rem;
}

/* ——— Strefa niebezpieczna ——— */

.admin-user__danger.card {
  border-color: var(--ld-danger);
}

.admin-user__danger .card-header {
  background: var(--ld-danger-bg);
  border-bottom-color: var(--ld-danger);
}

.admin-user__danger .card-header,
.admin-user__danger .card-title {
  color: var(--ld-danger-ink);
}

/* ——— Tabela transferow ——— */

.admin-user__transfer-comment {
  max-width: 22rem;
  white-space: normal;
  font-size: 0.82rem;
  color: var(--ld-text-muted);
}

.admin-user__transfer-id {
  font-size: 0.75rem;
  color: var(--ld-text-muted);
  overflow-wrap: anywhere;
}

.admin-user__amount--positive { color: var(--ld-success-ink); font-weight: 600; }
.admin-user__amount--negative { color: var(--ld-danger-ink); font-weight: 600; }

@media (max-width: 575.98px) {
  .admin-user__identity {
    align-items: flex-start;
  }

  .admin-user__balances {
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  }
}

/* ——— Formularz nie jest czarnym prostokatem w karcie ———
   additional.css ma globalne form { background: var(--color-black); padding: 1rem },
   a w Ruby --color-black to #000000 — kazdy formularz tego widoku wychodzil
   czarnym blokiem, z nieczytelnymi etykietami. Regula stoi po bloku wyzej,
   wiec wygrywa przy tej samej specyficznosci. */

.admin-user form {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* ——— Kontrast: warianty Bootstrapa liczone tokenami motywu ———
   Bootstrapowe .btn-outline-* i .link maja stale kolory (#6c757d, #3f6ad8,
   #e53935), ktore na tle motywu wypadaja ponizej 4,5:1 — najgorzej w Classic
   i Sky, gdzie identyfikator licencji mial 1,98:1. Kazdy token "ink" jest z
   definicji czytelny na swojej powierzchni, wiec para ink/surface dziala
   zarowno w motywach jasnych, jak i w LeadYa Dark, gdzie role sie odwracaja.
   Zmierzone po zmianie: wszystkie motywy bez naruszen 4,5:1 na tym widoku. */

.app-main .app-main__inner.admin-user {
  /* main.css tonuje obszar tresci pol przezroczystym fioletem; Ruby, Nova i
     Classic to nadpisuja, Sky i Dark nie — przez co ciemne tokeny Dark ladowaly
     na jasnym tle. Tutaj tlo bierzemy zawsze z tokenu motywu. */
  background-color: var(--ld-bg);
}

.admin-user .link {
  color: var(--ld-brand);
}

.admin-user .btn-danger {
  background-color: var(--ld-danger-ink);
  border-color: var(--ld-danger-ink);
  color: var(--ld-surface);
}

.admin-user .btn-outline-secondary {
  color: var(--ld-text-muted);
  border-color: var(--ld-border);
}

.admin-user .btn-outline-secondary:hover,
.admin-user .btn-outline-secondary:focus {
  background-color: var(--ld-text-muted);
  border-color: var(--ld-text-muted);
  color: var(--ld-surface);
}

.admin-user .btn-outline-primary {
  color: var(--ld-brand);
  border-color: var(--ld-brand);
}

.admin-user .btn-outline-primary:hover,
.admin-user .btn-outline-primary:focus {
  background-color: var(--ld-brand);
  border-color: var(--ld-brand);
  color: var(--ld-surface);
}

.admin-user .btn-outline-danger {
  color: var(--ld-danger-ink);
  border-color: var(--ld-danger-ink);
}

.admin-user .btn-outline-danger:hover,
.admin-user .btn-outline-danger:focus {
  background-color: var(--ld-danger-ink);
  border-color: var(--ld-danger-ink);
  color: var(--ld-surface);
}

.admin-user .btn-outline-success {
  color: var(--ld-success-ink);
  border-color: var(--ld-success-ink);
}

.admin-user .btn-outline-success:hover,
.admin-user .btn-outline-success:focus {
  background-color: var(--ld-success-ink);
  border-color: var(--ld-success-ink);
  color: var(--ld-surface);
}

.admin-user .btn-outline-warning {
  color: var(--ld-warning-ink);
  border-color: var(--ld-warning-ink);
}

.admin-user .btn-outline-warning:hover,
.admin-user .btn-outline-warning:focus {
  background-color: var(--ld-warning-ink);
  border-color: var(--ld-warning-ink);
  color: var(--ld-surface);
}

/* .ld-badge--neutral paruje --ld-text-muted z --ld-border-soft i w jasnych
   motywach zatrzymuje sie na 4,41:1. Na tym widoku bierze pelny kolor tekstu. */
.admin-user .ld-badge--neutral {
  color: var(--ld-text);
}

/* Zaznaczony kafelek stoi na --ld-brand-soft, gdzie tekst poboczny spada do
   4,2:1; wybrana opcja i tak powinna czytac sie najmocniej. */
.admin-user__choice input:checked + .admin-user__choice-box span {
  color: var(--ld-text);
}

/* ============================================================
   Wybor rodzaju produktu w formularzu tworzenia: cos, co
   uzytkownik sprzedaje, albo grupa na Facebooku, do ktorej
   zaprasza. Kafelki maja ten sam jezyk wizualny co wybor
   zakresu kampanii, bo pelnia te sama role.
   ============================================================ */

.offer-kind-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.offer-kind-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--ld-surface, #ffffff);
  border: 2px solid var(--ld-border, #e3e6ef);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  color: var(--ld-text, #14122b);
  text-align: left;
}

.offer-kind-tile:hover,
.offer-kind-tile:focus-visible {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 4px 14px rgba(20, 18, 43, 0.14);
  transform: translateY(-2px);
  outline: none;
}

.offer-kind-tile.is-selected {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 0 0 3px var(--ld-brand-soft, rgba(108, 76, 241, 0.25));
}

.offer-kind-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ld-brand-soft, rgba(108, 76, 241, 0.12));
  color: var(--ld-brand, #6c4cf1);
  font-size: 17px;
}

.offer-kind-tile__name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--ld-text, #14122b);
}

.offer-kind-tile__desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ld-text-muted, #5b5872);
}

/* Pola produktu-grupy stoja na wlasnej powierzchni, dokladnie jak .offer-ai-sources.
   To ta powierzchnia definiuje kontrakt kolorow: --ld-text i --ld-text-muted sa dobrane
   do --ld-surface w kazdym motywie. Bez niej etykiety dziedziczyly szarosc Bootstrapa i
   ladowaly na ciemnym tle kreatora (zmierzone 1,27:1 w LeadYa Classic). */
.offer-group-source {
  border: 1px solid var(--ld-border, #e3e6ef);
  border-radius: 10px;
  padding: 0.8rem;
  background: var(--ld-surface, #ffffff);
  text-align: left;
}

.offer-group-source label {
  color: var(--ld-text, #14122b);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.offer-group-source__hint {
  color: var(--ld-text-muted, #667085);
}

/* Komunikat o stanie grup: pusty, dopoki nie ma czego powiedziec, wiec bez
   marginesu na pusto - inaczej formularz rozjezdzalby sie bez tresci. */
.offer-group-source__status:empty {
  display: none;
}

.offer-group-source__status {
  margin: 0.5rem 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ld-text, #14122b);
}

/* Produkt-grupa ma w siatce wyboru wlasny znacznik, bo od rodzaju produktu
   zalezy, jakie typy kampanii pokaze nastepny krok kreatora. */
.offer-tile__kind {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--ld-brand, #6c4cf1);
  color: var(--ld-brand-ink, #ffffff);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Przyciski konturowe staja na powierzchni motywu, nie na tle strony.
   --ld-brand w Classic to jasny #864af9: na --ld-bg dawal 4,42:1, na
   --ld-surface daje 4,82:1. Przy okazji przyciski przestaja przejmowac tint
   obszaru tresci i czytaja sie jako osobne elementy. */
.admin-user .btn-outline-primary,
.admin-user .btn-outline-secondary,
.admin-user .btn-outline-danger,
.admin-user .btn-outline-success,
.admin-user .btn-outline-warning {
  background-color: var(--ld-surface);
}

/* Bootstrap gasi etykiete wylaczonego pola stalym #6c757d, ktory na ciemnej
   powierzchni LeadYa Dark schodzi do 3,09:1. Wylaczone pole nadal musi byc
   czytelne - o tym, ze jest wylaczone, mowia kursor i sam kontrolka. */
.admin-user .custom-control-input:disabled ~ .custom-control-label,
.admin-user fieldset[disabled] .custom-control-label,
.admin-user fieldset[disabled] label {
  color: var(--ld-text-muted);
}

/* ——— Karty plyna w kolumnach, zamiast siedziec w dwoch polowach ———
   Karty tego widoku maja skrajnie rozna wysokosc: formularz danych ma kilkaset
   pikseli, karta licencji kilkadziesiat. Sztywny podzial .col-lg-6 zostawial pod
   krotsza kolumna nawet pol ekranu pustki. Uklad kolumnowy dolewa kolejna karte
   tam, gdzie jest miejsce, a break-inside trzyma kazda karte w calosci. */

.admin-user__cards {
  column-count: 2;
  column-gap: 1rem;
}

.admin-user__cards > .card {
  /* inline-block + width 100% to warunek, zeby WebKit nie dzielil karty miedzy
     kolumny mimo break-inside. */
  display: inline-block;
  vertical-align: top;
  width: 100%;
  margin-bottom: 1rem;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

@media (min-width: 1600px) {
  .admin-user__cards {
    column-count: 3;
  }
}

@media (max-width: 991.98px) {
  .admin-user__cards {
    column-count: 1;
  }
}

/* ——— Gestsze odstepy ———
   Widok administratora jest gestym narzedziem pracy, nie strona sprzedazowa:
   domyslne odstepy Bootstrapa wypychaly polowe tresci pod przewijanie. */

.admin-user .card-header {
  padding: 0.7rem 1rem;
}

.admin-user .card-body {
  padding: 0.9rem 1rem;
}

.admin-user .form-group {
  margin-bottom: 0.7rem;
}

.admin-user__identity {
  padding: 0.7rem 1rem;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}

.admin-user__actions {
  margin-bottom: 0.75rem;
}

.admin-user__section {
  padding-top: 0.55rem;
  margin-top: 0.55rem;
}

.admin-user__balances {
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.admin-user__balance {
  padding: 0.5rem 0.6rem;
}

.admin-user__effects {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.7rem;
}

.admin-user .list-group-item {
  padding: 0.6rem 1rem;
}

/* Formularz debugu to jeden select i przycisk - nie potrzebuje calej szerokosci
   karty ani wlasnego wiersza na kazdy element. */
.admin-user .form-inline .form-control {
  width: auto;
  min-width: 8rem;
}

/* ============================================================
   Szczegoly grupy pod wyborem grupy. Panel stoi na wlasnej
   powierzchni, bo pojawia sie i w kreatorze (jasny formularz),
   i na ciemnej karcie zadania zapraszania - tokeny --ld-text
   i --ld-text-muted sa dobrane wlasnie do --ld-surface.
   ============================================================ */

.group-details-panel {
  margin-top: 0.6rem;
  border: 1px solid var(--ld-border, #e3e6ef);
  border-radius: 10px;
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #14122b);
  text-align: left;
}

.group-details-panel[hidden] {
  display: none;
}

.group-details-panel__body {
  padding: 0.7rem;
}

.group-details-panel__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
  color: var(--ld-text, #14122b);
  font-size: 0.86rem;
  font-weight: 700;
}

/* Kod jezyka jako obrys, nie jako tint marki: --ld-brand na --ld-brand-soft schodzi
   ponizej 4,5:1 w LeadYa Dark, Sky i Classic (zmierzone 4,08-4,26). Tekst pobocznego
   koloru na powierzchni panelu to ta sama para, ktora niosa etykiety sekcji. */
.group-details-panel__badge {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--ld-border, #e3e6ef);
  border-radius: 999px;
  background: transparent;
  color: var(--ld-text-muted, #667085);
  font-size: 0.66rem;
  font-weight: 700;
}

.group-details-panel__hint {
  margin-bottom: 0.6rem;
  color: var(--ld-text-muted, #667085);
  font-size: 0.74rem;
  line-height: 1.4;
}

.group-details-panel__section {
  margin-bottom: 0.6rem;
}

.group-details-panel__section:last-child {
  margin-bottom: 0;
}

.group-details-panel__label {
  margin-bottom: 0.15rem;
  color: var(--ld-text-muted, #667085);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.group-details-panel__text {
  color: var(--ld-text, #14122b);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Regulamin i ostatnie posty potrafia miec tysiace znakow - bez wlasnego scrolla
   jeden wybor grupy wypchnalby przycisk dalej poza ekran. */
.group-details-panel__text--scroll {
  overflow-y: auto;
  max-height: 180px;
}

.group-details-panel__cover {
  display: block;
  max-width: 100%;
  max-height: 140px;
  margin-bottom: 0.6rem;
  border-radius: 8px;
  object-fit: cover;
}

/* Krotkie pole pomocnicze w formularzu produktu. Kreator ustawia wszystkim swoim
   polom tekstowym min-height 180px z !important - to sluszne dla opisu osobowosci
   czy strategii, ale nie dla jednego zdania o produkcie. */
.campaign-wizard .offer-ai-sources textarea {
  min-height: 84px !important;
}

/* ============================================================
   Analytics dashboards (adminAnalyticsPanel / customerAnalyticsPanel / user overview)
   ============================================================ */
.analytics-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.analytics-page-title {
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--ld-text);
}
.analytics-page-subtitle {
  color: var(--ld-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.analytics-user-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 320px;
}
.analytics-user-picker .select2-container {
  min-width: 240px;
}
.analytics-period-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.analytics-period-switch-label {
  color: var(--ld-text-muted);
}
.analytics-daily-chart {
  height: 320px;
  width: 100%;
}
.analytics-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ld-text-muted);
  padding: 24px 8px;
}
.analytics-empty i {
  font-size: 1.4rem;
}
.analytics-kpi-time {
  font-size: 1.1rem;
}
.analytics-na {
  color: var(--ld-text-muted);
}
.analytics-campaign-name {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
}
.analytics-campaign-name-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-campaign-block {
  color: var(--ld-text-muted);
  font-size: 0.82rem;
  margin-top: 2px;
}
.analytics-portal-icon {
  font-size: 1.1rem;
  color: var(--ld-text-muted);
}
.analytics-portal-icon--fb {
  color: #4267B2;
}
.analytics-portal-icon--ig {
  color: #DD2A7B;
}
.analytics-portal-icon--tg {
  color: #229ED9;
}
.analytics-icon-link {
  color: var(--ld-brand);
}
.analytics-icon-link:hover {
  color: var(--ld-brand-hover);
}
.analytics-user-email {
  color: var(--ld-text-muted);
  font-size: 0.82rem;
}
.analytics-campaign-tile {
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  /* Legacy .card uses --color-black, which is truly black in Ruby. Keep the dashboard
     surface and its text in the same theme-token family in every LeadYa theme. */
  background-color: var(--ld-surface);
  color: var(--ld-text);
}
.analytics-campaign-tile--running {
  border-color: var(--ld-success);
  box-shadow: 0 0 0 1px var(--ld-success);
}
.analytics-campaign-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.analytics-campaign-tile-name {
  font-weight: 600;
  color: var(--ld-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.analytics-campaign-tile-block {
  color: var(--ld-text-muted);
  font-size: 0.82rem;
  margin: 2px 0 8px 0;
}
.analytics-campaign-tile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 10px 0;
}
.analytics-campaign-tile-stat {
  display: flex;
  flex-direction: column;
  min-width: 72px;
}
.analytics-campaign-tile-value {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ld-text);
}
.analytics-campaign-tile-stat-label {
  color: var(--ld-text-muted);
  font-size: 0.78rem;
}
/* WSZYSTKIE kafelki sekcji maja te sama wysokosc, nie tylko te w jednym wierszu: siatka z
   grid-auto-rows: 1fr rowna wszystkie rzedy, czego .row Bootstrapa nie potrafi. Przyciski stoja
   na dolnej krawedzi, bo kampanie roznia sie liczba pierscieni i dlugoscia nazwy. */
.analytics-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  /* Motyw ustawia align-items: center wyzej w drzewie, przez co kafelek stal na srodku swojego
     rzedu zamiast go wypelnic - rzedy byly rowne, a kafelki nie. */
  align-items: stretch;
  gap: 16px;
  margin-right: 0;
  margin-left: 0;
}
.analytics-tile-row > [class*="col-"] {
  display: flex;
  width: auto;
  max-width: none;
  flex: 1 1 auto;
  padding-right: 0;
  padding-left: 0;
}
.analytics-tile-row .analytics-campaign-tile {
  height: 100%;
  /* Odstep miedzy rzedami daje row-gap siatki. Margines karty (.mb-3) lezalby POZA obszarem
     kafelka o wysokosci 100% i sklejal rzedy - stad zero. */
  margin-bottom: 0;
}
.analytics-tile-row .analytics-campaign-tile {
  width: 100%;
}
.analytics-tile-row .analytics-campaign-tile > .card-body {
  display: flex;
  flex-direction: column;
}
.analytics-campaign-tile-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

/* A lone campaign uses the available row instead of leaving empty grid columns. */
.analytics-tile-row > :only-child {
  grid-column: 1 / -1;
  min-width: 0;
}
.analytics-tile-row > :only-child .analytics-campaign-tile-charts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 18px;
}
.analytics-tile-row > :only-child .analytics-campaign-tile-charts > p {
  flex-basis: 100%;
}
.analytics-tile-row > :only-child .analytics-campaign-tile-charts > .campaign-donuts {
  flex: 0 1 auto;
  max-width: 100%;
}
.analytics-tile-row > :only-child .campaign-donut {
  flex: 0 1 180px;
  width: 180px;
  max-width: 100%;
}

/* Lejek kampanii jako zagniezdzone paski: kazdy krok jest podzbiorem poprzedniego, wiec pasek
   moze sie tylko zwezac. Szerokosc bierze sie z procentu policzonego po stronie serwera
   (CampaignFunnelDto), ktory nigdy nie przekracza 100, wiec pasek nie wyjdzie poza tor.
   Etykieta i liczba stoja obok kazdego paska, wiec znaczenie nie zalezy od samego koloru. */
.campaign-funnel {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(60px, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  margin: 10px 0 6px;
}
.campaign-funnel__label {
  color: var(--ld-text-muted);
  font-size: 0.76rem;
  line-height: 1.2;
}
.campaign-funnel__track {
  display: block;
  height: 10px;
  border-radius: 999px;
  background-color: var(--ld-border);
}
.campaign-funnel__bar {
  display: block;
  height: 100%;
  min-width: 3px;
  width: var(--funnel-width, 0%);
  border-radius: 999px;
  background-color: var(--ld-brand);
}
.campaign-funnel__bar--read { background-color: var(--ld-info); }
.campaign-funnel__bar--answered { background-color: var(--ld-success); }
.campaign-funnel__bar--qualified { background-color: var(--ld-warning); }
.campaign-funnel__value {
  color: var(--ld-text);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.campaign-funnel__pct {
  color: var(--ld-text-muted);
  font-size: 0.74rem;
  font-weight: 500;
  margin-left: 3px;
}
.campaign-funnel__note {
  color: var(--ld-text-muted);
  font-size: 0.74rem;
  margin: 0 0 8px;
}
.analytics-funnel-chart {
  min-height: 200px;
}
/* Dwa pierscienie na jeden lejek: ten sam zbior (kontakty zagajone) pociety raz po losie
   wiadomosci, raz po werdykcie leada. Wykres rysuje Chart.js z paczki ArchitectUI (main.js),
   a legenda powtarza kazda wartosc tekstem, wiec znaczenie nie zalezy od samego koloru. */
.campaign-donuts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 6px 0 10px;
}
.campaign-donuts__pool {
  color: var(--ld-text-muted);
  font-size: 0.78rem;
  margin: 4px 0 0;
}
.campaign-donut {
  flex: 1 1 150px;
  min-width: 140px;
  margin: 0;
}
.campaign-donut__canvas {
  position: relative;
  max-width: 150px;
  margin: 0 auto;
}
/* Chart.js 2 mierzy sie wzgledem RODZICA canvasa i wymaga, zeby canvas byl jego jedynym
   dzieckiem - etykieta w srodku obok canvasa sprawiala, ze pierscien rysowal sie jako cwiartka
   ogromnego kola. Stad osobny kontener na sam wykres, a napis lezy nad nim jako rodzenstwo. */
.campaign-donut__chart {
  position: relative;
  width: 100%;
}
.campaign-donut__chart canvas {
  display: block;
}
.campaign-donut__center {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Napis ma sie zmiescic w dziurze pierscienia (cutout 68% z 150 px), nie wejsc na wykres. */
  max-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  line-height: 1.1;
}
.campaign-donut__center strong {
  color: var(--ld-text);
  font-size: 1.15rem;
}
.campaign-donut__center small {
  color: var(--ld-text-muted);
  font-size: 0.66rem;
}
.campaign-donut__caption {
  color: var(--ld-text);
  font-size: 0.8rem;
  font-weight: 600;
  margin: 6px 0 2px;
  text-align: center;
}
.campaign-donut__legend {
  list-style: none;
  margin: 0;
  padding: 0;
}
.campaign-donut__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ld-text-muted);
  font-size: 0.74rem;
  line-height: 1.5;
}
.campaign-donut__legend b {
  color: var(--ld-text);
  margin-left: auto;
}
.campaign-donut__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ld-brand);
}
.campaign-donut__dot--answered { background-color: var(--ld-success); }
.campaign-donut__dot--read { background-color: var(--ld-info); }
.campaign-donut__dot--qualified { background-color: var(--ld-warning); }
.campaign-donut__dot--partial { background-color: var(--ld-warning); opacity: 0.5; }
.campaign-donut__dot--ours { background-color: var(--ld-brand); }
.campaign-donut__dot--rest { background-color: var(--ld-text-muted); opacity: 0.35; }

/* Popup szczegolow: swiadomie bez Bootstrapa, bo 56 widokow panelu nie laduje bootstrap.min.js
   i $.fn.modal tam nie istnieje. Fragment sam przenosi sie pod <body>, wiec zaden kontekst
   ukladania (.app-main z-index 8, .app-header z-index 10) nie uwiezi go pod backdropem. */
.campaign-stats-popup {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.campaign-stats-popup[hidden] { display: none; }
.campaign-stats-popup__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(16, 18, 32, 0.55);
}
.campaign-stats-popup__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 18px 20px 20px;
  border-radius: var(--ld-radius);
  background-color: var(--ld-surface);
  color: var(--ld-text);
  box-shadow: 0 18px 44px rgba(16, 18, 32, 0.28);
}
.campaign-stats-popup__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.campaign-stats-popup__title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ld-text);
  font-size: 1rem;
}
.campaign-stats-popup__close {
  flex: 0 0 auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ld-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.campaign-stats-popup__close:hover { color: var(--ld-text); }
.campaign-stats-popup__body { margin-top: 10px; }

/* Panel "co to za osoby" nad liczbami w popupie: pojawia sie po kliknieciu wycinka pierscienia.
   Nazwy kontaktow to dane osobowe, wiec panel niesie ld-mask i wypada z nagran sesji. */
.campaign-stats-slice {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--ld-radius-sm);
  background-color: var(--ld-brand-soft);
  color: var(--ld-text);
}
.campaign-stats-slice[hidden] { display: none; }
.campaign-stats-slice__head {
  font-size: 0.85rem;
}
.campaign-stats-slice__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.campaign-stats-slice__list li {
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaign-stats-slice__more {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 600;
}
.campaign-stats-slice__empty {
  margin: 6px 0 0;
  color: var(--ld-text-muted);
  font-size: 0.8rem;
}
.contacts-stats-slice-badge a {
  margin-left: 6px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
body.campaign-stats-popup-open { overflow: hidden; }

/* Historia kampanii pod przyciskiem "Pokaz wiecej": przelacznik dni/miesiace/lata i wykres
   liniowy na tym samym Chart.js co pierscienie. Wysokosc kontenera jest stala, bo canvas
   responsywny w rodzicu o wysokosci auto rosnie przy kazdym przerysowaniu. */
.campaign-stats-history {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ld-border);
}
.campaign-stats-history__panel {
  margin-top: 10px;
}
.campaign-stats-history__panel[hidden] { display: none; }
.campaign-stats-history__switch {
  margin-bottom: 8px;
}
.campaign-stats-history__chart {
  position: relative;
  height: 240px;
}
.campaign-stats-history__chart[hidden] { display: none; }
.campaign-stats-history__status {
  margin: 8px 0 0;
  color: var(--ld-text-muted);
  font-size: 0.78rem;
}
.campaign-stats-history__status[hidden] { display: none; }
.campaign-stats-details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px;
  margin: 0 0 12px;
}
.campaign-stats-details__grid dt {
  color: var(--ld-text-muted);
  font-size: 0.74rem;
  font-weight: 500;
}
.campaign-stats-details__grid dd {
  color: var(--ld-text);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
.user-dashboard-section .card-title {
  text-transform: none;
}
@media (max-width: 767px) {
  .analytics-user-picker {
    min-width: 0;
    width: 100%;
  }
  .analytics-daily-chart {
    height: 260px;
  }
}

/* Slim status bar shown on /user while the LeadYa client is running. */
.leadya-running-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ld-success);
  background: var(--ld-success-bg);
  color: var(--ld-success-ink);
  border-radius: var(--ld-radius);
  margin-bottom: 12px;
}
.leadya-running-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ld-success);
  flex: 0 0 auto;
  animation: leadya-running-pulse 2s infinite;
}
.leadya-running-text {
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
}
/* The only action that stays out of the collapsed installation block: the way into the
   machine that runs LeadYa. Solid --ld-success-ink instead of .btn-success, because the legacy
   .btn-success rule forces 1.2rem/0.8rem (too big for a slim bar) and its hover paints
   --color-black, which is white in most themes. */
.leadya-running-bar__remote {
  background-color: var(--ld-success-ink);
  border-color: var(--ld-success-ink);
  color: var(--ld-success-bg);
  font-weight: 600;
}
.leadya-running-bar__remote:hover,
.leadya-running-bar__remote:focus {
  background-color: var(--ld-success-ink);
  border-color: var(--ld-success-ink);
  color: var(--ld-success-bg);
  filter: brightness(0.92);
}
/* Bootstrap grey on the green tint measured 4.26:1, and only 2.6:1 in LeadYa Dark. The
   secondary action takes the same semantic family as the bar, so both buttons read as a pair
   (solid = open the desktop, outline = unfold the installation block). */
.leadya-running-bar .btn-outline-secondary {
  color: var(--ld-success-ink);
  border-color: var(--ld-success-ink);
  background-color: transparent;
}
.leadya-running-bar .btn-outline-secondary:hover,
.leadya-running-bar .btn-outline-secondary:focus {
  color: var(--ld-success-bg);
  background-color: var(--ld-success-ink);
  border-color: var(--ld-success-ink);
}
@keyframes leadya-running-pulse {
  0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(18, 183, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); }
}

/* ==========================================================================
   Akademia LeadYa - kafelki szkolen
   Kazde szkolenie ma grafike. Pierwszym zrodlem jest miniatura filmu; szkolenie
   bez filmu dostaje kafelek w kolorach motywu z ikona tematu - ta sama receptura
   gradientu co .offer-tile__art--placeholder, zeby Akademia wygladala jak reszta
   produktu, a nie jak lista linkow.
   ========================================================================== */

.academy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.academy-head__text {
  min-width: 0;
}

/*
   Naglowek lezy wprost na .card, a .card bierze tlo z --color-black, ktory w motywie Ruby
   jest naprawde czarny (w pozostalych motywach bialy). Tekst na karcie musi wiec dziedziczyc
   kolor po motywie, tak jak .card-title, a nie brac --ld-text opisujacego --ld-surface.
   Hierarchie robi tu typografia, nie kolor. Kafelki nizej maja wlasne --ld-surface,
   wiec tam tokeny tekstu sa juz poprawne.
*/
.academy-head__title {
  margin: 0 0 0.15rem;
  color: inherit;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}

.academy-head__lead {
  margin: 0;
  color: inherit;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Postep: pasek plus liczba. Sam pasek nie mowi ile zostalo, wiec liczba zostaje. */
.academy-progress {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 200px;
}

.academy-progress__track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--ld-border, #e6e8f0);
  overflow: hidden;
}

.academy-progress__fill {
  display: block;
  width: var(--academy-progress, 0%);
  height: 100%;
  border-radius: 999px;
  background: var(--ld-success, #12b76a);
}

.academy-progress__label {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.academy-section + .academy-section {
  margin-top: 1.4rem;
}

.academy-section__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
  color: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.academy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.85rem;
}

.academy-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #ffffff);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.academy-card:hover,
.academy-card:focus-within {
  border-color: var(--ld-brand, #6c4cf1);
  box-shadow: 0 6px 18px rgba(20, 18, 43, 0.12);
  transform: translateY(-2px);
}

.academy-card__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.academy-card__link:hover,
.academy-card__link:focus {
  color: inherit;
  text-decoration: none;
}

.academy-card__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 24%, var(--ld-accent, #ffc24b) 0, transparent 44%),
    linear-gradient(135deg, var(--ld-brand, #6c4cf1) 0%, var(--ld-ink, #14122b) 100%);
}

.academy-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ikona tematu zastepuje miniature, gdy szkolenie nie ma jeszcze filmu. */
.academy-card__icon {
  color: #ffffff;
  font-size: 2.2rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.academy-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(20, 18, 43, 0.62);
  color: #ffffff;
  font-size: 0.9rem;
}

.academy-card__badge {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--ld-success, #12b76a);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
}

.academy-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.65rem 0.75rem 0.5rem;
}

.academy-card__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ld-text-muted, #667085);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.academy-card__name {
  color: var(--ld-text, #1a1d2e);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.academy-card__foot {
  padding: 0 0.75rem 0.7rem;
}

/* Przelacznik "obejrzane" zostaje checkboxem tego samego formularza co wczesniej,
   wiec odznaczenie nadal cofa status. Widoczny jest tylko styl pigulki. */
.academy-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 999px;
  background: var(--ld-bg, #f6f7fb);
  color: var(--ld-text-muted, #667085);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.academy-watch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.academy-watch:hover {
  border-color: var(--ld-brand, #6c4cf1);
  color: var(--ld-text, #1a1d2e);
}

/* Checkbox jest wizualnie ukryty, wiec obramowanie focusu musi pokazac pigulka. */
.academy-watch:focus-within {
  outline: 2px solid var(--ld-brand, #6c4cf1);
  outline-offset: 2px;
}

.academy-card.is-watched .academy-watch {
  border-color: var(--ld-success, #12b76a);
  background: var(--ld-success-bg, #e7f8f0);
  color: var(--ld-success-ink, #0e7a4f);
}

.academy-empty {
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-bg, #f6f7fb);
  color: var(--ld-text-muted, #667085);
  font-size: 0.9rem;
}

/* --- Widok lekcji (academyTutorialsCategories) ------------------------------
   Film startuje dopiero po kliknieciu w miniature - odtwarzacz jest wstawiany
   przez ten sam handler co w fragments/tutorial_reminder.html, wiec lekcja
   uzywa jego klas .tutorial-academy__frame / __play / __thumb.
   -------------------------------------------------------------------------- */

.academy-lesson + .academy-lesson {
  margin-top: 1.1rem;
}

.academy-lesson {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #ffffff);
}

.academy-lesson__media {
  min-width: 0;
}

.academy-lesson__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.5rem;
}

.academy-lesson__title {
  margin: 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

/* Instrukcja byla wczesniej w <textarea disabled> - nie dalo sie jej przewijac
   wzrokiem ani zaznaczyc, a tekst wygladal na wylaczone pole formularza. */
.academy-lesson__copy {
  margin: 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-line;
}

.academy-lesson__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.3rem;
}

.academy-lesson__done {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ld-success-ink, #0e7a4f);
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  .academy-lesson {
    grid-template-columns: minmax(0, 1fr);
  }

  .academy-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
  }

  .academy-progress {
    min-width: 100%;
  }
}

/* Lejek wiadomosci kampanii na stronie glownej portalu (fragments/campaign_message_stats.html). */
.campaign-message-stats {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  background: var(--ld-surface);
}
.campaign-message-stats__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.campaign-message-stats__title {
  font-weight: 700;
  color: var(--ld-text);
}
.campaign-message-stats__hint,
.campaign-message-stats__empty {
  color: var(--ld-text-muted);
  font-size: 0.8rem;
  margin: 0;
}
.campaign-message-stats .analytics-campaign-tile-stats {
  margin: 8px 0 0;
}
/* Znacznik odczytana przy dacie ostatniej wiadomosci na liscie kontaktow i w panelu szczegolow. */
.contacts-conversation-read {
  color: var(--ld-primary);
  font-size: 0.75rem;
  margin-right: 2px;
}
/* Opcja planu follow-upow: czekaj na odczytanie poprzedniej wiadomosci. */
.follow-up-plan__option {
  margin: 8px 0 12px;
}

/* ------------------------------------------------------------------------------------------
   Campaign suggestions: proposals of the daily digest and the assistant (tab, main page strip)
   ------------------------------------------------------------------------------------------ */
.campaign-suggestions-strip {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--ld-border, #E3E5EF);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #14122B);
}
.campaign-suggestions-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.campaign-suggestions-strip__title {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.campaign-suggestions-strip__count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ld-brand, #6C4CF1);
  color: var(--ld-brand-ink, #ffffff);
  font-size: 12px;
  text-align: center;
}
.campaign-suggestions-strip__hint,
.campaign-suggestions__lead,
.campaign-suggestions__digest-meta {
  color: var(--ld-text-muted, #6B6A85);
  font-size: 13px;
}
.campaign-suggestions-strip__link,
.gm-discovery__link {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ld-brand, #6C4CF1);
}
.campaign-suggestions-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.campaign-suggestions-strip__empty,
.campaign-suggestions__empty {
  margin: 8px 0 0;
  color: var(--ld-text-muted, #6B6A85);
  font-size: 13px;
}
/* Karta lezy na .bg-dark, ktore jest ciemne w NEW_LEADYA, Aura i LeadYa Dark,
   a jasne w Classic i Sky (czarne w Ruby) — twardy --ld-text lapal 1,07-1,22:1.
   Kolor karty dobiera motyw: NEW_LEADYA i Aura przez .bg-dark, pozostale przez
   --reg-text-color (Ruby nie rozjasnia .bg-dark, a dziedziczony #495057 dawal 2,3:1 na czerni).
   align-items: stretch - .widget-content z main.css centrowal bloki wezsze od karty (filtry,
   pusty stan), wiec startowaly na innej linii niz tytul i ramka podsumowania. */
.campaign-suggestions {
  padding: 14px 16px;
  color: var(--reg-text-color, inherit);
  align-items: stretch;
}
/* --ld-text-muted jest dobrany do --ld-surface, a na ciemnej karcie NEW_LEADYA i Aura dawal
   3,21-3,67:1. Te teksty biora kolor karty, a hierarchie niesie rozmiar pisma. */
.campaign-suggestions .campaign-suggestions__lead,
.campaign-suggestions .campaign-suggestions__digest-meta,
.campaign-suggestions .campaign-suggestions__empty {
  color: inherit;
}
.campaign-suggestions__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}
/* --ld-surface-subtle nie istnieje w zadnym motywie, wiec zawsze wchodzil jasny
   fallback #F6F7FB — takze wewnatrz ciemnej karty .bg-dark, gdzie tekst i ikona sa
   jasne (1,07:1 w NEW_LEADYA i Aura, 1,22:1 w LeadYa Dark). Neutralny tint czyta sie
   na obu powierzchniach, a kolor tresci zostaje z karty. */
.campaign-suggestions__digest {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--ld-border, #E3E5EF);
  border-radius: var(--ld-radius, 12px);
  background: rgba(128, 128, 128, 0.12);
  color: inherit;
}
.campaign-suggestions__digest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.campaign-suggestions__digest-title {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.campaign-suggestions__pref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  cursor: pointer;
}
/* Ten sam napis niesie potwierdzenie i blad wysylki, wiec nie maluje go zielen sukcesu
   (na ciemnej karcie i tak 2,98:1) — bierze kolor karty. */
.campaign-suggestions__digest-result {
  font-size: 13px;
  font-weight: 600;
}
.campaign-suggestions__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
/* Karta maluje wlasna powierzchnie, wiec bierze tez jej tekst: dziedziczony z ciemnego .bg-dark
   bialy dawal nazwe kampanii biala na bialym (1,00:1 w NEW_LEADYA, Aura i Ruby). */
.campaign-suggestions__stat-card {
  padding: 8px 10px;
  border: 1px solid var(--ld-border-soft, #ECEDF4);
  border-radius: var(--ld-radius-sm, 8px);
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #14122B);
}
/* Metryki podsumowania stoja w stalej siatce: wartosc i etykieta zaczynaja sie na tych samych
   liniach pionowych w kazdym wierszu i w kazdej karcie tej samej szerokosci. Wspolne
   .analytics-campaign-tile-stats to flex-wrap, ktory ustawial kazda pare za szerokoscia
   poprzedniej etykiety, wiec kazdy wiersz mial inne punkty startu. */
.campaign-suggestions__stat-card .analytics-campaign-tile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  align-items: start;
  gap: 10px 12px;
  margin: 8px 0 0;
}
.campaign-suggestions__stat-card .analytics-campaign-tile-stat {
  min-width: 0;
}
.campaign-suggestions__stat-card .analytics-campaign-tile-stat:only-child {
  grid-column: 1 / -1;
}
/* Naglowek karty ma zawsze jedna linie: zawinieta nazwa obnizala metryki tylko tej karty i wiersze
   sasiednich kart przestawaly stac na tej samej wysokosci. Pelna nazwa zostaje w title. */
.campaign-suggestions__stat-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaign-suggestions__stat-name .ld-badge {
  flex-shrink: 0;
}
.campaign-suggestions__stat-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 4px;
}
.campaign-suggestions__observations {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
}
.campaign-suggestions__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}
.cs-filter {
  border: 1px solid var(--ld-border, #E3E5EF);
  border-radius: 999px;
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #14122B);
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
}
.cs-filter.is-active {
  background: var(--ld-brand, #6C4CF1);
  border-color: var(--ld-brand, #6C4CF1);
  color: var(--ld-brand-ink, #ffffff);
}
.cs-filter__count {
  opacity: 1;
  margin-left: 4px;
}
.campaign-suggestions__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}
.cs-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--ld-border, #E3E5EF);
  border-left: 4px solid var(--ld-brand, #6C4CF1);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #14122B);
}
.cs-card--closed {
  border-left-color: var(--ld-border, #E3E5EF);
}
.cs-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--ld-text-muted, #6B6A85);
}
.cs-card__kind {
  font-weight: 700;
  color: var(--ld-brand, #6C4CF1);
}
.cs-card__status {
  margin-left: auto;
}
.cs-card__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.cs-card__summary,
.cs-card__rationale {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
}
.cs-card__groups {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}
.cs-card__group-meta,
.cs-card__group-summary {
  color: var(--ld-text-muted, #6B6A85);
}
.cs-card__group-summary {
  display: block;
}
.cs-card__changes summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--ld-brand, #6C4CF1);
}
.cs-card__changes ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--ld-text-muted, #6B6A85);
}
.cs-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--ld-text-muted, #6B6A85);
}
.cs-card__actions {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
}
.cs-card__result {
  flex-basis: 100%;
  color: var(--ld-text, #14122B);
}
.cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--ld-radius-sm, 8px);
  border: 1px solid var(--ld-border, #E3E5EF);
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #14122B);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cs-btn:disabled {
  opacity: .6;
  cursor: default;
}
.cs-btn--approve {
  background: var(--ld-success-btn, #1B7F4C);
  border-color: var(--ld-success-btn, #1B7F4C);
  color: #fff;
}
.cs-btn--reject {
  border-color: var(--ld-danger, #B42318);
  color: var(--ld-danger-ink, #B42318);
}
.cs-btn--brand {
  background: var(--ld-brand, #6C4CF1);
  border-color: var(--ld-brand, #6C4CF1);
  color: var(--ld-brand-ink, #ffffff);
}
.gm-discovery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--ld-border, #E3E5EF);
  border-radius: var(--ld-radius, 12px);
  background: var(--ld-surface, #ffffff);
  color: var(--ld-text, #14122B);
}
.gm-discovery__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  flex: 1 1 320px;
}
.gm-discovery__icon {
  color: var(--ld-brand, #6C4CF1);
}
.gm-discovery__title {
  font-weight: 700;
}
.gm-discovery__hint {
  font-size: 13px;
  color: var(--ld-text-muted, #6B6A85);
}
/* Pasek zadania lezy tu na karcie z --ld-surface, a nie na .bg-dark, wiec domyslne tokeny
   `--tbar-*` dla ciemnej karty dawaly biala nazwe zadania i godziny na bialym (1,00:1),
   a "Wlaczone" i "Codziennie" 1,05-1,31:1. Tokeny idą z rodziny powierzchni, ktora kazdy
   motyw dobiera spojnie — jasna w piecu motywach, ciemna w LeadYa Dark. */
.gm-discovery .task-auto__task-panel {
  --tbar-ink: var(--ld-text);
  --tbar-ink-soft: var(--ld-text);
  --tbar-ink-muted: var(--ld-text-muted);
  --tbar-line: var(--ld-border);
  --tbar-line-chip: var(--ld-border);
  --tbar-line-strong: var(--ld-border);
  --tbar-fill: var(--ld-bg);
  --tbar-fill-focus: var(--ld-border);
  --tbar-fill-badge: var(--ld-bg);
  --tbar-track: var(--ld-text-muted);
  --tbar-knob: var(--ld-surface);
  --tbar-dot-off: var(--ld-text-muted);
  --tbar-on-ink: var(--ld-success-ink);
  --tbar-on-bg: var(--ld-success-bg);
  --tbar-state-on-ink: var(--ld-success-ink);
  --tbar-state-on-bg: var(--ld-success-bg);
  --tbar-running-ink: var(--ld-success-ink);
  --tbar-running-bg: var(--ld-success-bg);
  --tbar-panel-bg: transparent;
  --tbar-time-icon-filter: none;
  flex: 1 1 320px;
  margin: 0;
}
@media (max-width: 575px) {
  .cs-card__actions,
  .campaign-suggestions-strip__link {
    margin-left: 0;
  }
}
/* ------------------------------------------------------------------ */
/* Dodatkowe interakcje z postem (post_interactions.html, postInteractions.js) */
/* Plan reakcji i komentarzy z innych kont + lista zaplanowanych interakcji.   */
/* ------------------------------------------------------------------ */
.account-settings-advanced {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 0.85rem;
}
.account-settings-advanced summary {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
    list-style-position: inside;
}
.account-settings-advanced__content {
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 1rem;
}
.post-interactions__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-start;
    justify-content: space-between;
}
.post-interactions__intro {
    color: var(--ld-text-muted, #c9d1e0);
    font-size: 0.9rem;
    max-width: 62rem;
}
.post-interactions__head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* .task-nav-bar__btn to chip zaprojektowany na ciemny pasek konsoli: biały tekst,
   biała półprzezroczysta ramka i tło. Tu siedzi wprost na karcie .bg-dark, która
   jest jasna w Classic i Sky — przycisk razem z ikoną miał 1,0:1. Neutralny tint
   i kolor z powierzchni działają na obu wariantach karty. */
.post-interactions__head-actions .task-nav-bar__btn,
.profile-adjustment__head-actions .task-nav-bar__btn {
    background-color: rgba(128, 128, 128, 0.16);
    border-color: rgba(128, 128, 128, 0.42);
    color: inherit;
}
.post-interactions__head-actions .task-nav-bar__btn:hover,
.profile-adjustment__head-actions .task-nav-bar__btn:hover {
    background-color: rgba(128, 128, 128, 0.28);
    border-color: rgba(128, 128, 128, 0.6);
    color: inherit;
}
.post-interactions__empty {
    color: var(--ld-text-muted, #c9d1e0);
    font-size: 0.9rem;
    padding: 6px 0;
}
.post-interactions__rule {
    display: grid;
    grid-template-columns: 28px minmax(160px, 1.2fr) minmax(180px, 2fr) minmax(170px, 0.9fr) 36px;
    gap: 10px;
    align-items: end;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--ld-border-soft, rgba(255, 255, 255, 0.15));
    border-radius: var(--ld-radius-sm, 8px);
    background: rgba(255, 255, 255, 0.04);
}
.post-interactions__rule-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 34px;
    color: var(--ld-accent, #ff8fab);
    font-size: 1.1rem;
}
.post-interactions__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: 0.8rem;
    color: var(--ld-text-muted, #c9d1e0);
}
.post-interactions__field .form-control {
    font-size: 0.9rem;
    min-height: 34px;
}
.post-interactions__field textarea.form-control {
    resize: vertical;
    min-height: 34px;
}
.post-interactions__delay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.post-interactions__remove,
.post-interactions__row-action {
    border: none;
    background: transparent;
    color: var(--ld-text-muted, #c9d1e0);
    cursor: pointer;
    height: 34px;
    width: 34px;
    border-radius: var(--ld-radius-sm, 8px);
}
.post-interactions__remove:hover,
.post-interactions__row-action:hover {
    color: var(--ld-danger, #ff6b6b);
    background: rgba(255, 255, 255, 0.08);
}
.post-interactions__row-action[data-action="retry"]:hover {
    color: var(--ld-success, #4cd6a4);
}
.post-interactions__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}
.post-interactions__count {
    opacity: 0.8;
    margin-left: 4px;
}
.post-interactions__feedback {
    font-size: 0.9rem;
}
.post-interactions__feedback.is-ok {
    color: var(--ld-success, #4cd6a4);
}
.post-interactions__feedback.is-error {
    color: var(--ld-danger, #ff6b6b);
}
.post-interactions__table {
    color: inherit;
    font-size: 0.85rem;
}
.post-interactions__table th {
    border-top: none;
    color: var(--ld-text-muted, #c9d1e0);
    font-weight: 600;
    white-space: nowrap;
}
.post-interactions__table td {
    vertical-align: top;
    border-color: var(--ld-border-soft, rgba(255, 255, 255, 0.15));
}
.post-interactions__table .link {
    color: inherit;
    text-decoration: underline;
}
.post-interactions__excerpt {
    color: var(--ld-text-muted, #c9d1e0);
}
.post-interactions__comment-text {
    display: inline-block;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.post-interactions__status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
}
.post-interactions__status--planned {
    background: var(--ld-info-bg, #1f3a5f);
    color: var(--ld-info-ink, #cfe4ff);
}
.post-interactions__status--done {
    background: var(--ld-success-bg, #1d4d3a);
    color: var(--ld-success-ink, #c7f5dd);
}
.post-interactions__status--failed {
    background: var(--ld-danger-bg, #5a2323);
    color: var(--ld-danger-ink, #ffd1d1);
}
.post-interactions__status--skipped,
.post-interactions__status--cancelled {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ld-text-muted, #c9d1e0);
}
.post-interactions__row-actions {
    white-space: nowrap;
    width: 40px;
}
@media (max-width: 900px) {
    .post-interactions__rule {
        grid-template-columns: 28px 1fr 36px;
    }
    .post-interactions__field--comment,
    .post-interactions__field--reaction,
    .post-interactions__field--delay {
        grid-column: 2 / 3;
    }
}

/* ------------------------------------------------------------------ */
/* Dostosowanie konta na potrzeby kampanii (profile_adjustment.html,   */
/* profileAdjustment.js): snapshot profilu + propozycje zmian AI.        */
/* ------------------------------------------------------------------ */
.profile-adjustment__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-start;
    justify-content: space-between;
}
.profile-adjustment__intro {
    color: var(--ld-text-muted, #c9d1e0);
    font-size: 0.9rem;
    max-width: 72ch;
}
.profile-adjustment__head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.profile-adjustment.is-busy .profile-adjustment__change-actions button,
.profile-adjustment.is-busy .profile-adjustment__file {
    pointer-events: none;
    opacity: 0.6;
}
.profile-adjustment__grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(300px, 2fr);
    gap: 16px;
}
@media (max-width: 991px) {
    .profile-adjustment__grid {
        grid-template-columns: 1fr;
    }
}
.profile-adjustment__section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 10px;
}
.profile-adjustment__empty {
    color: var(--ld-text-muted, #c9d1e0);
    font-size: 0.9rem;
    padding: 8px 0;
}
.profile-adjustment__identity {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}
.profile-adjustment__photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ld-border, #3a4256);
    background: var(--ld-surface-2, #2b3140);
    flex: 0 0 auto;
}
.profile-adjustment__photo--missing {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--ld-text-muted, #c9d1e0);
}
.profile-adjustment__name {
    font-weight: 600;
    font-size: 1.05rem;
    color: inherit;
}
.profile-adjustment__login,
.profile-adjustment__extracted {
    font-size: 0.8rem;
    color: var(--ld-text-muted, #c9d1e0);
}
.profile-adjustment__cover {
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}
.profile-adjustment__fields,
.profile-adjustment__change-body {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0;
    font-size: 0.9rem;
}
.profile-adjustment__label {
    color: var(--ld-text-muted, #c9d1e0);
    font-weight: 500;
    white-space: nowrap;
}
.profile-adjustment__value {
    margin: 0;
    overflow-wrap: anywhere;
}
.profile-adjustment__value--multiline {
    white-space: pre-line;
}
.profile-adjustment__warnings {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--ld-text-muted, #c9d1e0);
}
.profile-adjustment__warnings ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
.profile-adjustment__change {
    border: 1px solid var(--ld-border, #3a4256);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--ld-surface-2, rgba(255, 255, 255, 0.03));
}
.profile-adjustment__change--approved { border-color: #4f9de6; }
.profile-adjustment__change--done { border-color: #3fb27f; }
.profile-adjustment__change--failed { border-color: #e35d6a; }
.profile-adjustment__change--rejected,
.profile-adjustment__change--skipped { opacity: 0.65; }
.profile-adjustment__change-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 8px;
}
.profile-adjustment__change-title {
    font-weight: 600;
}
.profile-adjustment__change-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.profile-adjustment__type,
.profile-adjustment__mode,
.profile-adjustment__status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.08);
}
.profile-adjustment__status--proposed { background: rgba(255, 193, 7, 0.25); }
.profile-adjustment__status--approved { background: rgba(79, 157, 230, 0.3); }
.profile-adjustment__status--done { background: rgba(63, 178, 127, 0.3); }
.profile-adjustment__status--failed { background: rgba(227, 93, 106, 0.35); }
.profile-adjustment__status--rejected,
.profile-adjustment__status--skipped { background: rgba(255, 255, 255, 0.12); }
.profile-adjustment__change-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.profile-adjustment__bio-input {
    width: 100%;
    min-height: 56px;
    resize: vertical;
}
.profile-adjustment__counter {
    font-size: 0.75rem;
    color: var(--ld-text-muted, #c9d1e0);
    text-align: right;
}
.profile-adjustment__hint {
    font-size: 0.78rem;
    color: var(--ld-text-muted, #c9d1e0);
    margin-top: 4px;
}
.profile-adjustment__file {
    margin-top: 6px;
    font-size: 0.85rem;
    max-width: 100%;
}
.profile-adjustment__proposal-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #4f9de6;
    display: block;
    margin-bottom: 6px;
}
.profile-adjustment__post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.profile-adjustment__post {
    border: 1px solid var(--ld-border, #3a4256);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    background: var(--ld-surface-2, rgba(255, 255, 255, 0.03));
}
.profile-adjustment__post-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--ld-text-muted, #c9d1e0);
    font-size: 0.75rem;
    margin-bottom: 4px;
}
.profile-adjustment__post-link {
    margin-left: auto;
    color: inherit;
}
.profile-adjustment__post-text {
    margin: 0;
    max-height: 7.5em;
    overflow: hidden;
    white-space: pre-line;
}

/* LeadYa chat identity: shared capabilities with a portrait and voice for each theme. */
.leadya-assistant.leadya-assistant--persona {
  bottom: max(var(--ld-chat-bottom, 84px), env(safe-area-inset-bottom)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
}
.leadya-assistant--persona[hidden],
.leadya-assistant--persona [hidden] { display: none !important; }
.leadya-assistant--persona .leadya-assistant__launcher {
  display: flex; align-items: center; gap: 10px;
  width: auto; max-width: calc(100vw - 32px); height: 64px; padding: 5px 16px 5px 5px;
  border: 1px solid var(--ld-border); border-radius: 36px;
  background: var(--ld-surface); color: var(--ld-text);
  box-shadow: 0 6px 24px #14122b24; font-size: 13px; font-weight: 600;
}
.leadya-assistant--persona .leadya-assistant__avatar {
  position: relative; display: block; flex: 0 0 auto; isolation: isolate;
  width: 52px; height: 52px; overflow: hidden; border-radius: 50%;
  border: 3px solid var(--ld-brand); background: var(--ld-brand-soft);
}
.leadya-assistant--persona .leadya-assistant__avatar img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.leadya-assistant--persona .leadya-assistant__avatar::after {
  content: none;
}
.leadya-assistant--persona .leadya-assistant__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.leadya-assistant--persona .leadya-assistant__header .leadya-assistant__avatar { width: 44px; height: 44px; }
.leadya-assistant--persona .leadya-assistant__panel {
  bottom: 0; width: min(390px, calc(100vw - 32px));
  height: min(580px, var(--ld-chat-height, calc(100dvh - 100px)));
  border-color: var(--ld-border); border-radius: var(--ld-radius);
  background: var(--ld-surface); color: var(--ld-text);
}
.leadya-assistant--persona.leadya-assistant--open .leadya-assistant__launcher { visibility: hidden; }
.leadya-assistant--persona .leadya-assistant__header {
  flex: 0 0 auto; gap: 8px; padding: 12px; background: var(--ld-surface); color: var(--ld-text);
  border-bottom: 1px solid var(--ld-border);
}
.leadya-assistant--persona .leadya-assistant__header .leadya-assistant__subtitle { color: var(--ld-text-muted); font-size: 12px; }
.leadya-assistant--persona .leadya-assistant__header .leadya-assistant__role { color: var(--ld-text); font-size: 12px; }
.leadya-assistant--persona .leadya-assistant__title { font-size: 16px; }
.leadya-assistant--persona .leadya-assistant__ai { margin-left: 4px; color: var(--ld-text-muted); font-size: 10px; font-weight: 600; }
.leadya-assistant--persona .leadya-assistant__close,
.leadya-assistant--persona .leadya-assistant__expand {
  width: 36px; height: 36px; border: 1px solid var(--ld-border);
  background: var(--ld-bg); color: var(--ld-text);
}
.leadya-assistant--persona .leadya-assistant__campaign-hint {
  flex: 0 0 auto; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--ld-border);
  background: var(--ld-bg); color: var(--ld-text); font-size: 12px; line-height: 1.5;
}
/* Remembered conversation style: says it is on and offers the way back that needs no model. */
.leadya-assistant--persona .leadya-assistant__personality {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--ld-border);
  background: var(--ld-bg); color: var(--ld-text); font-size: 12px; line-height: 1.5;
}
.leadya-assistant--persona .leadya-assistant__personality[hidden] { display: none; }
.leadya-assistant--persona .leadya-assistant__personality-reset {
  flex: 0 0 auto; min-height: 28px; padding: 3px 12px; border: 1px solid var(--ld-border); border-radius: 999px;
  background: var(--ld-surface); color: var(--ld-text); font: inherit; font-weight: 600; cursor: pointer;
}
.leadya-assistant--persona .leadya-assistant__personality-reset:hover,
.leadya-assistant--persona .leadya-assistant__personality-reset:focus-visible { border-color: var(--ld-brand); }
.leadya-assistant--persona .leadya-assistant__personality-reset:disabled { opacity: .6; cursor: default; }
.leadya-assistant--persona .leadya-assistant__messages { min-height: 0; background: var(--ld-bg); }
.leadya-assistant--persona .leadya-assistant__message--assistant .leadya-assistant__bubble {
  background: var(--ld-surface); color: var(--ld-text); border-color: var(--ld-border);
}
.leadya-assistant--persona .leadya-assistant__message--user .leadya-assistant__bubble,
.leadya-assistant--persona .leadya-assistant__send {
  background: var(--ld-brand); color: var(--ld-brand-ink);
}
.leadya-assistant--persona .leadya-assistant__form { flex: 0 0 auto; background: var(--ld-surface); border-color: var(--ld-border); }
.leadya-assistant--persona .leadya-assistant__input { min-width: 0; width: 100%; background: var(--ld-surface); color: var(--ld-text); border-color: var(--ld-text-muted); }
.leadya-assistant--persona .leadya-assistant__input::placeholder { color: var(--ld-text-muted); opacity: 1; }
.leadya-assistant--persona :is(button, textarea):focus-visible { outline: 2px solid var(--ld-text); outline-offset: 3px; }
.leadya-assistant--persona .leadya-assistant__typing-dots span { background: var(--ld-brand); }
.leadya-assistant--persona[data-persona="aura"] .leadya-assistant__avatar { border-width: 1px; border-radius: 18px; }
.leadya-assistant--persona[data-persona="classic"] .leadya-assistant__avatar { border-radius: 42% 58% 48% 52%; }
.leadya-assistant--persona[data-persona="dark"] .leadya-assistant__avatar { border-radius: 10px; box-shadow: 0 0 12px var(--ld-brand-soft); }
.leadya-assistant--persona[data-persona="ruby"] .leadya-assistant__avatar { border-radius: 7px; }
.leadya-assistant--persona[data-persona="sky"] .leadya-assistant__avatar { border-radius: 16px; }
.leadya-assistant--persona[data-persona="ruby"] .leadya-assistant__bubble { border-radius: 5px; }
.leadya-assistant--persona[data-persona="aura"] .leadya-assistant__bubble { border-radius: 16px; line-height: 1.55; }
.leadya-assistant--persona.leadya-assistant--expanded .leadya-assistant__panel {
  bottom: var(--ld-chat-bottom, 84px); max-height: var(--ld-chat-height); height: auto; width: auto; border-radius: 0;
}
@media (min-width: 992px) and (min-height: 700px) {
  .leadya-assistant--persona.leadya-assistant--expanded .leadya-assistant__panel {
    top: auto; bottom: var(--ld-chat-bottom, 84px); height: min(52vh, var(--ld-chat-height)); min-height: 0;
  }
}
@media (max-width: 520px) {
  .leadya-assistant--persona .leadya-assistant__launcher { height: 58px; font-size: 12px; }
  .leadya-assistant--persona .leadya-assistant__launcher .leadya-assistant__avatar { width: 46px; height: 46px; }
  .leadya-assistant--persona .leadya-assistant__input { font-size: 16px; }
}
/* Calendar configuration is isolated from the campaign wizard stacking contexts. */
.leadya-calendar-frame { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--ld-border); border-radius: var(--ld-radius); background: var(--ld-surface); }
.leadya-calendar-dialog { width: min(1400px, 96vw); max-width: 96vw; max-height: 94vh; padding: 16px; border: 1px solid var(--ld-border); border-radius: var(--ld-radius); color: var(--ld-text); background: var(--ld-surface); }
.leadya-calendar-dialog::backdrop { background: rgb(15 23 42 / 55%); }
.leadya-calendar-dialog__toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.leadya-calendar-dialog__toolbar a.btn { color: var(--ld-text) !important; background: var(--ld-surface) !important; border-color: var(--ld-border) !important; text-decoration: underline; }
#leadyaCalendarChoice .btn-link, .calendar-oauth-guide a { color: var(--ld-text) !important; text-decoration: underline; }
.calendar-training a:not(.btn) { color: var(--ld-text) !important; text-decoration: underline; }
.calendar-training { margin-top: 24px; }
.calendar-oauth-guide code { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 575px) { .leadya-calendar-dialog { padding: 8px; } .leadya-calendar-frame { min-height: 320px; } }

@media (prefers-reduced-motion: reduce) {
  .leadya-assistant--persona .leadya-assistant__typing-dots span { animation: none; opacity: .7; }
}

/* User-controlled cadence for optional email notifications. */
.email-preferences {
  max-width: 66rem;
  margin: 0 auto;
}

.email-preferences__header {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

.email-preferences__header h1 {
  margin: .3rem 0 .65rem;
  color: var(--ld-color-text, #14122b);
}

.email-preferences__eyebrow {
  color: var(--ld-color-primary, #6c4cf1);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.email-preferences__important {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid #ded8f8;
  border-radius: .75rem;
  background: #f5f2ff;
}

.email-preferences__important i {
  margin-top: .2rem;
  color: var(--ld-color-primary, #6c4cf1);
}

.email-preferences__important p,
.email-preference-card p {
  margin: 0;
}

.email-preferences__grid {
  display: grid;
  gap: 1rem;
}

.email-preference-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid #e3e1eb;
  border-radius: .9rem;
  background: #fff;
  box-shadow: 0 .35rem 1.1rem rgb(31 28 58 / 6%);
}

.email-preference-card h2 {
  margin: 0 0 .45rem;
  font-size: 1.12rem;
}

.email-preference-card__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: end;
}

.email-preference-card__form label {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 600;
}

.email-preference-card__form select {
  min-height: 2.5rem;
  padding: .45rem .65rem;
  border: 1px solid #c9c5d6;
  border-radius: .45rem;
  background: #fff;
}

@media (max-width: 800px) {
  .email-preference-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .email-preference-card__form {
    grid-template-columns: 1fr;
  }

  .email-preference-card__form label {
    grid-column: auto;
  }
}

/* Theme settings select the interface and its companion as one persisted choice. */
.ld-theme-bundles { color: var(--ld-text); }
.ld-theme-bundles__heading { margin-bottom: 20px; }
.ld-theme-bundles__heading h1 { margin: 0 0 8px; color: var(--ld-text); font-size: 26px; font-weight: 700; }
.ld-theme-bundles__heading p { margin: 0; color: var(--ld-text-muted); font-size: 14px; line-height: 1.6; }
.ld-theme-bundles .ld-theme-bundles__form {
  margin: 0; padding: 0; width: auto; max-width: none; border: 0; border-radius: 0;
  background: transparent; color: var(--ld-text); box-shadow: none;
}
.ld-theme-bundles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ld-theme-bundle {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 2px solid var(--ld-border); border-radius: 18px; background: var(--ld-surface);
}
.ld-theme-bundle.is-current { border-color: var(--ld-brand); }
.ld-theme-bundle__preview { position: relative; background: var(--ld-bg); }
.ld-theme-bundle__preview > img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 920; object-fit: cover; }
.ld-theme-bundle__current {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border: 1px solid var(--ld-border); border-radius: 20px;
  background: var(--ld-surface); color: var(--ld-text); font-size: 12px; font-weight: 700;
}
.ld-theme-bundle__body { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 14px 16px 16px; }
.ld-theme-bundle__identity { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; }
.ld-theme-bundle__portrait {
  position: relative; width: 88px; height: 88px; margin-top: -36px;
  border: 4px solid var(--ld-surface); border-radius: 20px; object-fit: cover;
}
.ld-theme-bundle__identity h2 { margin: 0 0 4px; color: var(--ld-text); font-size: 18px; font-weight: 700; }
.ld-theme-bundle__character { margin: 0; color: var(--ld-text-muted); font-size: 13px; line-height: 1.5; }
.ld-theme-bundle__sample { flex: 1; margin: 0; color: var(--ld-text); font-size: 13px; line-height: 1.6; }
.ld-theme-bundle .ld-theme-bundle__choose {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px;
  margin: 0; padding: 10px 14px; border: 1px solid var(--ld-brand); border-radius: 10px;
  background: var(--ld-brand); color: var(--ld-brand-ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left;
  cursor: pointer; box-shadow: none; text-transform: none;
}
.ld-theme-bundle__choose:hover:not(:disabled) { text-decoration: underline; }
.ld-theme-bundle__choose:focus-visible { outline: 3px solid var(--ld-text); outline-offset: 3px; }
.ld-theme-bundle .ld-theme-bundle__choose:disabled {
  background: var(--ld-bg); border-color: var(--ld-border); color: var(--ld-text-muted); cursor: default; opacity: 1;
}
@media (max-width: 1200px) { .ld-theme-bundles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ld-theme-bundles__grid { grid-template-columns: 1fr; gap: 16px; }
  .ld-theme-bundles__heading h1 { font-size: 23px; }
}

/* A native dialog keeps the choice above every panel stacking context and traps keyboard focus. */
.ld-persona-choice {
  width: min(1000px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 24px; border: 1px solid var(--ld-border); border-radius: 20px;
  background: var(--ld-surface, #fff); color: var(--ld-text, #14122b);
  box-shadow: 0 24px 100px #14122b55; overflow: auto;
}
.ld-persona-choice:not([open]) { display: none; }
.ld-persona-choice .ld-persona-choice__form {
  margin: 0; padding: 0; width: auto; max-width: none; border: 0;
  background: var(--ld-surface, #fff); color: var(--ld-text, #14122b); box-shadow: none;
}
.ld-persona-choice::backdrop { background: #14122ba6; }
.ld-persona-choice h2 { margin: 4px 0 8px; font-size: 26px; font-weight: 700; }
.ld-persona-choice p { margin: 0 0 16px; }
.ld-persona-choice__eyebrow { color: var(--ld-text-muted); font-size: 12px; font-weight: 600; }
.ld-persona-choice fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ld-persona-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ld-persona-card {
  position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 4px 12px;
  align-content: start; margin: 0; padding: 14px; border: 2px solid var(--ld-border);
  border-radius: 14px; background: var(--ld-bg); color: var(--ld-text); cursor: pointer;
}
.ld-persona-card input { position: absolute; right: 12px; top: 12px; accent-color: var(--ld-brand); }
.ld-persona-card img { grid-row: span 2; width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.ld-persona-card__name { padding-right: 16px; font-weight: 700; font-size: 15px; }
.ld-persona-card__character { color: var(--ld-text-muted); font-size: 12px; line-height: 1.4; }
.ld-persona-card__sample { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.ld-persona-card:has(input:checked) { border-color: var(--ld-brand); box-shadow: 0 0 0 1px var(--ld-brand); }
.ld-persona-card:focus-within { outline: 2px solid var(--ld-text); outline-offset: 3px; }
.ld-persona-choice footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 18px; }
.ld-persona-choice footer p { flex: 1 1 280px; margin: 0; font-size: 12px; color: var(--ld-text-muted); }
.ld-persona-choice footer .btn-primary { background: var(--ld-brand); border-color: var(--ld-brand); color: var(--ld-brand-ink); }
.ld-persona-choice footer .btn-link {
  color: var(--ld-text); background: transparent; border: 0; font-size: 14px; font-weight: 400;
}
.ld-persona-choice__error { padding-top: 16px; color: var(--ld-text); font-weight: 600; }
@media (max-width: 760px) {
  .ld-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-persona-card { grid-template-columns: 56px 1fr; padding: 12px; gap: 6px; }
  .ld-persona-card img { width: 56px; height: 56px; }
}
@media (max-width: 480px) {
  .ld-persona-choice { padding: 16px; max-height: calc(100dvh - 16px); width: calc(100vw - 16px); }
  .ld-persona-choice h2 { font-size: 23px; }
  .ld-persona-grid { grid-template-columns: 1fr; }
}

/* Billing actions must remain readable in both LeadYa themes. */
.token-budget-secondary {
  color: var(--ld-text, #1a1d2e);
  background: var(--ld-surface, #fff);
  border: 1px solid currentColor;
}
.token-budget-secondary:hover,
.token-budget-secondary:focus-visible {
  color: var(--ld-text, #1a1d2e);
  background: var(--ld-surface, #fff);
  text-decoration: underline;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The launcher can be moved temporarily; the conversation keeps its default anchor. */
.leadya-assistant__launcher { cursor: grab; user-select: none; }
.leadya-assistant__launcher.is-dragging { cursor: grabbing; }
.leadya-assistant .leadya-assistant__launcher.is-displaced {
  position: fixed; left: var(--ld-chat-left); top: var(--ld-chat-top); right: auto; bottom: auto; margin: 0;
}

/* A shared workspace keeps every popup above chat, including native dialogs.
   The widget is a direct child of the active modal, outside .modal-dialog's transform. */
.ld-assistant-modal {
  --ld-modal-gap: clamp(10px, 2vw, 24px);
  --ld-modal-content-height: calc(var(--ld-modal-height) - 2 * var(--ld-modal-gap));
}
.ld-assistant-modal.modal {
  /* Also constrain legacy iframe popups with inline viewport dimensions. */
  top: var(--ld-workspace-top, 0px) !important;
  height: var(--ld-modal-height) !important;
  overflow: hidden;
}
.ld-assistant-modal .modal-dialog {
  --ld-modal-gap: inherit;
  width: calc(100% - 2 * var(--ld-modal-gap));
  max-height: var(--ld-modal-content-height);
  min-height: 0;
  margin: var(--ld-modal-gap) auto;
}
.ld-assistant-modal .modal-dialog.offer-modal-full {
  max-width: 1440px;
  height: var(--ld-modal-content-height);
}
.ld-assistant-modal .modal-content {
  max-height: var(--ld-modal-content-height);
  min-height: 0;
  overflow: hidden;
}
.ld-assistant-modal .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.ld-assistant-modal .modal-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.ld-assistant-modal .modal-header,
.ld-assistant-modal .modal-footer { flex-shrink: 0; }
.ld-assistant-modal .modal-footer { flex-wrap: wrap; gap: 4px; }
dialog.ld-assistant-modal {
  top: calc(var(--ld-workspace-top, 0px) + var(--ld-modal-gap));
  bottom: auto;
  max-height: var(--ld-modal-content-height);
  margin: 0 auto;
}
.ld-chat-modal .leadya-assistant.leadya-assistant--persona {
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
}
.ld-chat-split .leadya-assistant.leadya-assistant--persona .leadya-assistant__panel {
  position: fixed;
  top: calc(var(--ld-workspace-top, 0px) + var(--ld-workspace-half, 50dvh));
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: var(--ld-workspace-half, 50dvh);
  max-height: var(--ld-workspace-half, 50dvh);
  min-height: 0;
  border-radius: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.ld-chat-split .leadya-assistant__launcher { display: none; }
/* Last-page actions can scroll clear of the widget or the controlling workspace. */
.ld-chat-available .app-main__inner::after {
  content: '';
  display: block;
  height: 88px;
  pointer-events: none;
}
.ld-chat-split { overflow: hidden; }
.ld-chat-split .app-container,
.ld-chat-split .main-content.auth-page {
  position: fixed;
  top: var(--ld-workspace-top, 0px);
  left: 0;
  width: 100%;
  height: var(--ld-workspace-half, 50dvh);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  /* Fixed descendants (header, sidebar and action bars) belong to the upper workspace. */
  transform: translateZ(0);
}
.ld-chat-split .main-content.auth-page { align-items: flex-start; }
.ld-chat-split .app-container .app-header { position: sticky; top: 0; }
.ld-chat-split .app-container .app-main { padding-top: 0; min-height: 0; }
.ld-chat-split .app-container .app-sidebar {
  height: calc(var(--ld-workspace-half, 50dvh) - 60px);
}
.ld-chat-split .app-container .app-footer { position: static; width: auto; }
.ld-chat-split .app-main__inner::after { display: none; }
.ld-chat-fullscreen .app-container,
.ld-chat-fullscreen .main-content.auth-page,
.ld-chat-fullscreen .language-selector-container,
.ld-chat-fullscreen .ld-assistant-modal > :not(.leadya-assistant) { visibility: hidden; }
.ld-chat-fullscreen .leadya-assistant.leadya-assistant--persona .leadya-assistant__panel {
  top: var(--ld-workspace-top, 0px);
  height: var(--ld-workspace-height, 100dvh);
  max-height: var(--ld-workspace-height, 100dvh);
}

/* Persistent credit budget outside the collapsible mobile navigation. */
.app-header .header-credits { position: relative; flex: 0 0 auto; margin: 0 10px; color: var(--ld-text); }
.header-credits > summary { list-style: none; display: flex; flex-direction: column; justify-content: center; min-height: 44px; max-width: 180px; padding: 5px 12px; border: 1px solid var(--ld-border); border-radius: 12px; background: var(--ld-surface); cursor: pointer; line-height: 1.25; }
.header-credits > summary::-webkit-details-marker { display: none; }
.header-credits > summary span { font-size: 11px; }
.header-credits > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; }
.header-credits > summary:focus-visible, .header-credits a:focus-visible { outline: 2px solid var(--ld-brand); outline-offset: 3px; }
.header-credits .header-credits-panel { position: absolute; top: 100%; left: 0; width: 320px; max-width: calc(100vw - 24px); padding: 16px; background: var(--ld-surface); color: var(--ld-text); border: 1px solid var(--ld-border); border-radius: 12px; box-shadow: 0 8px 24px #0003; max-height: calc(100dvh - 76px); overflow-y: auto; }
.header-credits-panel > strong { display: block; margin-bottom: 12px; }
.header-credits-panel p { margin: 0 0 12px; font-size: 13px; }
.header-credits-panel progress { display: block; width: 100%; height: 8px; margin-top: 8px; accent-color: var(--ld-brand); }
.header-credits-panel dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 13px; }
.header-credits-panel dt { font-weight: 400; }
.header-credits-panel dd { margin: 0; font-variant-numeric: tabular-nums; }
.header-credits .header-credits-panel a { display: block; padding: 10px; color: var(--ld-text); text-decoration: underline; border-radius: 8px; }
.header-credits .header-credits-panel .header-credits-topup { border: 1px solid var(--ld-border); margin-top: 6px; font-weight: 600; }
@media (min-width: 992px) {
    .app-header .app-header__content { min-width: 0; padding-left: 0; }
}
@media (max-width: 991.98px) {
    .app-header .header-credits { position: absolute; right: 52px; top: 7px; margin: 0; }
    .header-credits > summary { max-width: 138px; min-height: 44px; padding: 4px 8px; }
    .header-credits .header-credits-panel { left: auto; right: -40px; }
    .app-header:has(.header-credits) .app-header__logo { max-width: calc(100% - 230px); margin-left: 48px; margin-right: auto; }
    .app-header:has(.header-credits) .app-header__logo .logo-src { max-width: 100%; background-position: left center; }
}

.fanpage-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:16px; }
.fanpage-post { color:var(--ld-text); background:var(--ld-surface); border:1px solid var(--ld-border); }
.fanpage-labels,.fanpage-actions,.fanpage-dates { display:flex; flex-wrap:wrap; gap:8px; }
.fanpage-copy { white-space:pre-wrap; overflow-wrap:anywhere; margin:10px 0; }
.fanpage-post video { width:100%; max-height:360px; margin-top:12px; }
.fanpage-form { display:grid; gap:14px; }
.fanpage-form label { display:block; margin:0; }
.fanpage-form label > span { display:block; margin-bottom:5px; }
.fanpage-audit { white-space:pre-wrap; overflow-wrap:anywhere; max-height:360px; color:var(--ld-text); }
.fanpage details > summary { cursor:pointer; padding:8px 0; }
.fanpage details > summary.card-header { padding:12px 16px; }
.fanpage .badge-light { color:var(--ld-text); background:var(--ld-bg); }

.fanpage-image{max-width:100%;height:auto;border-radius:var(--ld-radius-md,8px)}
/* Kontrast wspólnych kontrolek. Legacy main.css używa jasnych akcentów jako
   tekstu (#ff8d56, #ebad49, #f7b924). Dobieramy ink do powierzchni, a dla
   wypełnionych kontrolek zawsze ustawiamy razem tło i tekst. Specyficzność
   body chroni kontrakt przed później ładowanymi regułami legacy motywów. */
body .text-muted,
body .table .text-muted { color: var(--ld-text-muted) !important; }
body .text-success { color: var(--ld-success-ink) !important; }
body .text-warning { color: var(--ld-warning-ink) !important; }
body .text-danger { color: var(--ld-danger-ink) !important; }
body .text-info { color: var(--ld-info-ink) !important; }
body a.link,
body a.link:hover,
body .page-link { color: var(--ld-link); }
body .pagination .page-item:not(.active) .page-link { background: var(--ld-surface); color: var(--ld-link) !important; }
body .page-item.active .page-link {
  background-color: var(--ld-brand);
  border-color: var(--ld-brand);
  color: var(--ld-brand-ink);
}
body .btn.btn-info { background: #1560ac; border-color: #1560ac; color: #fff; }
body .btn.btn-info:hover,
body .btn.btn-info:focus { background: #104c89; border-color: #104c89; color: #fff; }
body .btn-outline-warning { color: var(--ld-warning-ink); border-color: currentColor; }
body .btn-outline-info { color: var(--ld-info-ink); border-color: currentColor; }
body .btn-outline-success { color: var(--ld-success-ink); border-color: currentColor; }
body .btn-outline-danger { color: var(--ld-danger-ink); border-color: currentColor; }
body .btn-outline-warning:hover,
body .btn-outline-warning:focus { background: var(--ld-warning-bg); color: var(--ld-warning-ink); }
body .btn-outline-info:hover,
body .btn-outline-info:focus { background: var(--ld-info-bg); color: var(--ld-info-ink); }
body .btn-outline-success:hover,
body .btn-outline-success:focus { background: var(--ld-success-bg); color: var(--ld-success-ink); }
body .btn-outline-danger:hover,
body .btn-outline-danger:focus { background: var(--ld-danger-bg); color: var(--ld-danger-ink); }
body .badge.badge-info { background: var(--ld-info-bg) !important; color: var(--ld-info-ink) !important; }
body .badge.badge-success { background: var(--ld-success-bg) !important; color: var(--ld-success-ink) !important; }
body .badge.badge-warning { background: var(--ld-warning-bg) !important; color: var(--ld-warning-ink) !important; }
body .badge.badge-danger { background: var(--ld-danger-bg) !important; color: var(--ld-danger-ink) !important; }

body .card-header:not([class*="bg-"]) {
  background: var(--ld-surface);
  color: var(--ld-text);
}
body .card-header:not([class*="bg-"]) .card-title { color: inherit !important; }
.app-header .header-avatar-initials,
.leadya-onboarding__step.is-active .leadya-onboarding__step-label,
.facebook-workspace__eyebrow,
.facebook-workspace-control__fixed { color: var(--ld-link); }
.facebook-journey__step.is-active small { color: var(--ld-text); }
.campaign-type-badge-recommended { background: var(--ld-success-bg); color: var(--ld-success-ink); }
.offer-manage__intro { color: var(--ld-text-muted); }
.card.wallet-balance-card { background: var(--ld-surface); color: var(--ld-text); }
.wallet-balance-card small { color: var(--ld-text-muted); }

/* Zwykłe tabele mają własną powierzchnię. Nie mogą dziedziczyć czerni karty
   Ruby albo fioletu legacy, zachowując szary tekst Bootstrapa. */
body table.table:not(.table-dark) {
  background-color: var(--ld-surface);
  color: var(--ld-text) !important;
}
body .card .nav-item .nav-link { color: inherit !important; }
body .card .nav-tabs .nav-link.active {
  background-color: var(--ld-brand);
  color: var(--ld-brand-ink) !important;
}
body .btn-outline-primary { color: var(--ld-link); border-color: currentColor; }
body .btn-outline-primary:hover,
body .btn-outline-primary:focus { background: var(--ld-brand); color: var(--ld-brand-ink); }
body .btn-outline-secondary,
body .btn-outline-dark { color: var(--ld-text-muted); border-color: currentColor; }
body .btn-outline-secondary:hover,
body .btn-outline-secondary:focus,
body .btn-outline-dark:hover,
body .btn-outline-dark:focus { background: var(--ld-border-soft); color: var(--ld-text); }
.academy-card__badge { background: var(--ld-success-btn); color: #fff; }
.academy-routing-item__name { color: var(--ld-text); }
body .bg-dark table.table :is(label, .text-center, .card-title) { color: var(--ld-text) !important; }
/* Nieaktywna kontrolka nadal musi dać się odczytać. */
body button:disabled:not(.btn) { background: var(--ld-border-soft); color: var(--ld-text-muted); }
body .btn.btn-success { background: var(--ld-success-btn, #0e7a4f); border-color: var(--ld-success-btn, #0e7a4f); color: #fff; }
body .btn.btn-success:hover,
body .btn.btn-success:focus { background: #09643f; border-color: #09643f; color: #fff; }
body .btn.btn-light { background: var(--ld-border-soft); border-color: var(--ld-border); color: var(--ld-text); }
body .btn.btn-light:hover,
body .btn.btn-light:focus { background: var(--ld-brand); color: var(--ld-brand-ink); }
body .table form { background: transparent; color: inherit; }
.wallet-settings .card { background: var(--ld-surface); color: var(--ld-text); }
.wallet-settings a.text-decoration-none { color: var(--ld-link); }
.facebook-workspace-control__links a,
body .table td a:not(.btn):not(.badge):not(.page-link) { color: var(--ld-link); }
.offer-manage__title { color: var(--ld-text); }
body .btn.btn-medium { background: var(--ld-warning-bg); border-color: var(--ld-warning-ink); color: var(--ld-warning-ink); }
body .btn.btn-medium:hover,
body .btn.btn-medium:focus { background: var(--ld-warning-ink); color: var(--ld-warning-bg) !important; }
body form .btn.btn-link { color: inherit; }
body .btn.btn-low { background: var(--ld-brand); border-color: var(--ld-brand); color: var(--ld-brand-ink); }
body .btn.btn-low:hover,
body .btn.btn-low:focus { background: var(--ld-brand-hover); color: var(--ld-brand-ink); }
.leadya-sidebar-rail-item.is-active .leadya-sidebar-rail-text strong,
.leadya-sidebar-rail-item.is-active .leadya-sidebar-rail-text small { color: var(--ld-brand-ink) !important; }
.ai-compliance__badge { color: var(--ld-link); }
body .app-theme-white .app-page-title { background: var(--ld-surface); color: var(--ld-text); }
body .app-page-title .page-title-subheading { opacity: 1; color: var(--ld-text-muted); }
.partner-nav .partner-nav__item.is-active { color: var(--ld-brand-ink); }
body .btn.btn-dark { background: var(--ld-surface) !important; color: var(--ld-link); border-color: var(--ld-border); }
.analytics-page-subtitle a,
.partner-layout .card a:not(.btn) { color: var(--ld-link); }
body .support-table-header { background: var(--ld-surface); }
body .support-table-title { color: var(--ld-text) !important; }

/* Kompaktowy system popupow otwieranych z topbara. */
.ld-modal-header { align-items:center; background:linear-gradient(135deg,var(--ld-brand-soft,#f1edfe),#fff 68%); border-bottom:1px solid var(--ld-border); padding:.9rem 1.15rem; }
.ld-modal-heading { align-items:center; display:flex; gap:.75rem; min-width:0; }
.ld-modal-heading__icon,.settings-card__icon { align-items:center; background:var(--ld-brand-soft,#f1edfe); border:1px solid var(--ld-border); border-radius:11px; color:var(--ld-brand,#6c4cf1); display:inline-flex; flex:0 0 auto; height:2.35rem; justify-content:center; width:2.35rem; }
.ld-modal-heading .modal-title { color:var(--ld-text); font-size:1.05rem; font-weight:750; line-height:1.25; margin:0; }
.ld-modal-heading__description { color:var(--ld-text-muted); font-size:.78rem; line-height:1.35; margin:.15rem 0 0; }
.ld-modal-header .close { align-items:center; border-radius:9px; display:inline-flex; height:2rem; justify-content:center; margin:0 0 0 auto; padding:0; width:2rem; }
.support-modal .modal-content { max-height:calc(100dvh - 2rem); overflow:hidden; }
.support-modal .modal-header { flex-shrink:0; }
.support-modal__body { min-height:0; overflow-y:auto; scrollbar-width:none; padding:.9rem; }
.support-modal__body::-webkit-scrollbar { display:none; }
.support-modal__body .support-tiles { gap:.65rem; }
.support-modal__body .support-tile { border-radius:13px; }
.support-modal__body .support-tile__media { background:#f4f0fc; }
.support-modal__body .support-tile__media img { aspect-ratio:2.35/1; object-fit:contain; }
.support-modal__body .support-tile__body { padding:.62rem .75rem .72rem; }
.support-modal__body .support-tile--wide { grid-template-columns:minmax(6.5rem,34%) minmax(0,1fr); }

.settings-modal { margin:1.25rem auto; max-width:min(70rem,calc(100vw - 2rem)); }
.settings-modal .modal-content { border:1px solid var(--ld-border); border-radius:16px; max-height:calc(100dvh - 2.5rem); overflow:hidden; }
.settings-modal__body { background:var(--ld-bg); min-height:0; overflow-y:auto; scrollbar-width:none; padding:.8rem; }
.settings-modal__body::-webkit-scrollbar { display:none; }
.settings-modal :is(.modal-header,.modal-footer,.settings-modal__tabs) { flex-shrink:0; }
.settings-modal [data-settings-panel][hidden] { display:none!important; }
.settings-modal__tabs { display:flex; flex-wrap:wrap; gap:.35rem; padding:.6rem .8rem; background:var(--ld-surface); border-bottom:1px solid var(--ld-border); }
.settings-modal__tabs .btn { white-space:normal; text-align:left; color:var(--ld-text); background:var(--ld-bg); border:1px solid var(--ld-border); border-radius:9px; font-size:.8rem; padding:.5rem .75rem; }
.settings-modal__tabs .btn.is-active { background:var(--ld-brand); color:var(--ld-brand-ink); border-color:var(--ld-brand); }
.settings-modal__tabs .btn:focus-visible { outline:2px solid var(--ld-link); outline-offset:2px; }
.settings-modal__summary { margin:0 0 .65rem; }
.settings-modal__summary>div { flex:0 1 28rem; max-width:100%; padding:0; }
.settings-card { background:var(--ld-surface); border:1px solid var(--ld-border); border-radius:13px; margin-bottom:.7rem; padding:.85rem; }
.settings-card__heading { align-items:center; display:flex; gap:.6rem; margin-bottom:.65rem; text-align:left; }
.settings-card__icon { border-radius:9px; height:1.95rem; width:1.95rem; }
.settings-card__heading h5 { color:var(--ld-text); font-size:.9rem; font-weight:700; margin:0; }
.settings-card label { color:var(--ld-text)!important; font-size:.78rem; font-weight:650; margin-bottom:.3rem; text-align:left; }
.settings-card .form-control,.settings-card select,.settings-card textarea { background:var(--ld-surface); border-color:var(--ld-border); border-radius:9px; color:var(--ld-text); font-size:.82rem; }
.settings-card .form-control:focus,.settings-card select:focus,.settings-card textarea:focus { border-color:var(--ld-brand,#6c4cf1); box-shadow:var(--ld-focus-ring,0 0 0 .2rem rgba(108,76,241,.2)); }
.settings-card--limits .position-relative.form-group { margin:0; }
.account-limits-grid { align-items:center; row-gap:.55rem; }
.account-limits-grid>div { color:var(--ld-text-muted); font-size:.76rem; line-height:1.3; }
.account-limits-grid>div[style*="text-align: right"] { color:var(--ld-text); font-weight:650; }
.account-limits-grid .form-control { height:2.15rem; padding:.35rem .55rem; }
.account-working-hours { align-items:end; background:var(--ld-bg); border-radius:11px; display:grid; gap:.75rem; grid-template-columns:repeat(3,minmax(0,1fr)); margin-right:0!important; padding:.75rem; }
.account-working-hours>* { margin:0!important; }
.account-working-hours__field { display:grid; gap:.35rem; min-width:0; }
.account-working-hours__field .form-control { width:100%; }
.account-working-hours__field--toggle { align-items:center; grid-template-columns:minmax(0,1fr) auto; min-height:3.8rem; }
.account-working-hours__field--toggle .switch { margin:0; }
.content-generation-settings { display:grid; gap:.75rem; }
.content-generation-row { align-items:center; background:var(--ld-bg); border-radius:11px; display:grid; gap:.65rem; grid-template-columns:minmax(11rem,1fr) auto minmax(12rem,2fr) auto 3rem; padding:.7rem .8rem; }
.content-generation-row label { margin:0; }
.content-generation-row output { color:var(--ld-text); font-variant-numeric:tabular-nums; font-weight:700; text-align:right; }
.settings-modal--account #accountSettingsForm>.row { gap:.7rem; margin:0; }
.settings-modal--account #accountSettingsForm { border:0; margin:0; padding:0; }
.settings-modal--account #accountSettingsForm>.row { align-items:flex-start; }
.settings-modal--account #accountSettingsForm>.row>[data-settings-panel] { background:var(--ld-surface); border:1px solid var(--ld-border); border-radius:11px; flex:1 1 100%; max-width:100%; padding:.75rem; }
.settings-modal--account #accountSettingsForm .text-center { text-align:left!important; }
.settings-modal--account #accountSettingsForm .justify-content-center { justify-content:flex-start!important; }
.settings-modal--account #accountSettingsForm .mt-3 { margin-top:.6rem!important; }
.settings-modal--account #accountGender { min-height:2.2rem; padding:.3rem .6rem; }
.settings-modal__toolbar { align-items:center; display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.65rem; }
.settings-modal__toolbar .btn { border:1px solid var(--ld-border); border-radius:9px; color:var(--ld-text); font-size:.78rem; padding:.42rem .7rem; }
.settings-modal__toolbar .btn-group .btn:first-child { border-radius:9px 0 0 9px; }
.settings-modal__toolbar .btn-group .dropdown-toggle-split { border-radius:0 9px 9px 0; }
.campaign-settings-form>.settings-card--model { display:grid; gap:.35rem .75rem; grid-template-columns:minmax(12rem,.8fr) minmax(16rem,1.2fr); }
.campaign-settings-form>.settings-card--model .settings-card__heading { grid-row:1/span 4; margin:0; }
.campaign-settings-form>.settings-card--model>label { display:none; }
.campaign-settings-form>.settings-card--model p { color:var(--ld-text-muted); font-size:.75rem; margin:0; }
.campaign-settings-grid { align-items:flex-start; gap:.7rem; margin:0; }
.campaign-settings-grid>.settings-card { flex:1 1 100%; max-width:100%; margin:0; }
.campaign-settings-grid #campaignBasics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem 1rem; }
.campaign-settings-grid #campaignBasics .settings-card__heading { grid-column:1/-1; }
.campaign-settings-grid .mt-3 { margin-top:.65rem!important; text-align:left!important; }
.campaign-settings-grid textarea.form-control { min-height:4.4rem; resize:vertical; }
.campaign-settings-grid #editCampaignStrategy { height:9rem; }
.settings-modal__primary-action { align-items:center; display:flex; justify-content:flex-end; margin-top:.2rem; }
.settings-modal__primary-action .btn-primary { border-radius:9px; font-size:.82rem; font-weight:700; padding:.55rem 1rem; }
.settings-modal__footer { background:var(--ld-surface); border-top:1px solid var(--ld-border); padding:.65rem .9rem; }

@media (max-width:767.98px) {
  .settings-modal { margin:0; max-width:none; min-height:100%; }
  .settings-modal .modal-content { border:0; border-radius:0; max-height:100dvh; }
  .settings-modal__body { padding:.65rem; }
  .settings-modal--account #accountSettingsForm>.row>.col-md-6,.campaign-settings-grid>.settings-card { flex-basis:100%; max-width:100%; }
  .account-working-hours { grid-template-columns:minmax(0,1fr); }
  .content-generation-row { grid-template-columns:auto minmax(0,1fr) auto 2.5rem; }
  .content-generation-row label { grid-column:1/-1; }
  .campaign-settings-form>.settings-card--model { display:block; }
  .campaign-settings-form>.settings-card--model .settings-card__heading { margin-bottom:.65rem; }
  .account-limits-grid>div,.account-limits-grid>div[style*="text-align: right"] { text-align:left!important; }
  .ld-modal-heading__description { display:none; }
  .campaign-settings-grid #campaignBasics { grid-template-columns:minmax(0,1fr); }
  .account-limits-grid { display:grid; grid-template-columns:minmax(0,1fr) 4.5rem minmax(0,1fr); gap:.5rem; margin:0; }
  .account-limits-grid>div { width:auto; max-width:none; padding:0; }
  .support-modal .modal-content { min-height:0; max-height:100dvh; overflow:hidden; }
  .support-modal .modal-header { flex-shrink:0; }
  .support-modal__body { min-height:0; overflow-y:auto; scrollbar-width:none; padding:.6rem; }
  .support-modal__body::-webkit-scrollbar { display:none; }
  .support-modal__body .support-tile { display:grid; grid-template-columns:5.5rem minmax(0,1fr); }
  .support-modal__body .support-tile__media { height:100%; }
  .support-modal__body .support-tile__media img { height:100%; aspect-ratio:auto; }
  .support-modal__body .support-tile__body { align-self:center; padding:.6rem; }
  .support-modal__body .support-tile__title { font-size:.85rem; }
  .support-modal__body .support-tile__description { font-size:.72rem; }
}
body .btn-outline-warning { background: var(--ld-warning-bg); }
body .btn-outline-info { background: var(--ld-info-bg); }
.academy-routing-section__title { color: var(--ld-text); }
.academy-routing-item__chevron { color: var(--ld-link); }
body .select2-selection__placeholder { color: #566077 !important; }
body .text-primary { color: var(--ld-link) !important; }
body .btn.btn-warning { background: var(--ld-warning-bg); border-color: var(--ld-warning-ink); color: var(--ld-warning-ink); }
body .btn.btn-warning:hover,
body .btn.btn-warning:focus { background: var(--ld-warning-ink); color: var(--ld-warning-bg); }
body code { color: var(--ld-danger-ink); }
body .btn.btn-danger { background: #b42318; border-color: #b42318; color: #fff; }
body .btn.btn-danger:hover,
body .btn.btn-danger:focus { background: #912018; border-color: #912018; color: #fff; }
.partner-program-page .card a:not(.btn):not(.partner-nav__item) { color: var(--ld-link); }

/* Partner-assisted Facebook account unlock marketplace. */
.account-action-page {
    display: block;
    padding: 100px 16px 32px;
}

.account-action-card,
.account-unlock-card {
    max-width: 760px;
    margin: 0 auto;
}

.account-unlock-page {
    max-width: 1100px;
    margin: 0 auto;
}

.account-unlock-section {
    margin-bottom: 18px;
}

.account-unlock-feedback {
    margin-top: 16px;
}

.account-unlock-facts {
    display: grid;
    grid-template-columns: minmax(140px, 210px) 1fr;
    gap: 8px 18px;
}

.account-unlock-facts dt {
    color: var(--ld-text-muted);
    font-weight: 600;
}

.account-unlock-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.account-unlock-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0;
}

.account-unlock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.account-unlock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.account-unlock-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 128px;
    padding: 16px;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    background: var(--ld-surface);
    color: var(--ld-text);
}

a.account-unlock-tile:hover,
a.account-unlock-tile:focus {
    border-color: var(--ld-brand);
    color: var(--ld-text);
    text-decoration: none;
}

.account-unlock-empty {
    padding: 18px;
    border: 1px dashed var(--ld-border);
    border-radius: var(--ld-radius-md);
    color: var(--ld-text-muted);
}

.account-unlock-candidate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ld-border);
}

.account-unlock-stars {
    color: var(--ld-warning-ink);
}

.account-unlock-invite,
.account-unlock-secret {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    background: var(--ld-surface-subtle);
}

.account-unlock-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.account-unlock-message {
    align-self: flex-start;
    max-width: 78%;
    padding: 12px 14px;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    background: var(--ld-surface-subtle);
}

.account-unlock-message.is-own {
    align-self: flex-end;
    border-color: var(--ld-brand);
}

.account-unlock-message p {
    margin: 5px 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.account-unlock-chat-submit {
    margin-top: 10px;
}

.account-unlock-rating {
    display: inline-block;
    width: auto;
    margin-right: 10px;
}

@media (max-width: 575.98px) {
    .account-unlock-facts {
        grid-template-columns: 1fr;
    }

    .account-unlock-facts dd {
        margin-bottom: 8px;
    }

    .account-unlock-candidate {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-unlock-message {
        max-width: 94%;
    }
}
body .alert.alert-light { background: var(--ld-surface); color: var(--ld-text); }
body .table .white-link { color: var(--ld-link) !important; }
body .table .thead-light th { background: #f8f9fa; color: #566077; }
.campaign-type-badge-new { color: var(--ld-brand-ink); }
.modal-content .account-settings-advanced > summary { color: var(--ld-text-muted); }
body .btn.btn-simple { background: var(--ld-surface); color: var(--ld-text); border-color: var(--ld-border); }
body .btn.btn-simple:hover,
body .btn.btn-simple:focus { background: var(--ld-brand); color: var(--ld-brand-ink); }
body .btn.btn-turn-campaign { background: var(--ld-success-btn); color: #fff; border-color: var(--ld-success-btn); }
body .btn.btn-turn-campaign:hover,
body .btn.btn-turn-campaign:focus { background: #09643f; color: #fff; }
.modal-content form.text-white { color: var(--ld-text) !important; }
#editUserAddressModal label { color: var(--ld-text); }
body .btn .white-link,
body .btn .white-link span { color: inherit !important; }

/* Fanpage dialogs reserve the assistant's default bottom-right footprint. */
.fanpage-form { align-content:start; }
.fanpage-modal .modal-footer { justify-content:flex-start; padding-right:240px; }
.fanpage-modal .modal-footer > .btn { flex:0 1 auto; max-width:100%; white-space:normal; }
.fanpage-version { padding:16px; border:1px solid var(--ld-border); border-radius:var(--ld-radius-md,8px); }
.fanpage-version img,.fanpage-version video { display:block; width:100%; max-height:380px; object-fit:contain; margin:12px 0; }
@media(max-width:575px) { .fanpage-modal .modal-footer { padding-right:16px; padding-bottom:80px; } }

/* Fanpage connection wizard */
.fanpage-setup-body{display:block!important}.fanpage-setup-body section{max-width:960px}.fanpage-steps{display:flex;flex-wrap:wrap;gap:12px;padding:0;list-style:none;margin-bottom:24px}.fanpage-steps li{padding:8px 12px;border:1px solid var(--ld-border);border-radius:8px;color:var(--ld-text)}.fanpage-steps li[aria-current="step"]{border-color:var(--ld-primary);font-weight:700}.fanpage-instructions{padding-left:24px}.fanpage-instructions li{margin-bottom:16px}.fanpage-setup-body [hidden],#fanpage-setup .modal-footer [hidden]{display:none!important}

/* Panel tresci kampanii w kreatorze (Playground): pierwsze wiadomosci i follow-upy, ktore LeadYa
   wysle bez zmian. Ta sama jasna powierzchnia i ten sam rytm co `.ai-compliance` tuz pod nim -
   oba panele mowia o tej samej rzeczy, wiec nie moga wygladac jak dwa rozne widzety. */
.campaign-openers {
  /* The shared fixed header is 60px tall; match the existing 90px anchor offset. */
  scroll-margin-top: 90px;
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.7rem 0.7rem;
  color: var(--ld-text, #1a1d2e);
  background: var(--ld-surface, #fff);
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 8px;
  text-align: left;
}

.campaign-openers__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.campaign-openers__bar-icon {
  flex: 0 0 auto;
  color: var(--ld-brand, #6c4cf1);
}

.campaign-openers__bar-label {
  font-weight: 700;
}

.campaign-openers__badge {
  margin-left: auto;
  padding: 0.1rem 0.45rem;
  color: var(--ld-success-ink, #17663f);
  background: var(--ld-success-bg, #e6f6ed);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.campaign-openers__intro {
  margin: 0.45rem 0 0;
  color: var(--ld-text-muted, #5b6178);
  font-size: 0.8rem;
  line-height: 1.45;
}

.campaign-openers__section-title {
  margin: 0.8rem 0 0.35rem;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Numer wariantu z lewej, tekst w srodku, kasowanie z prawej - kolumna tekstu ma rosnac, bo to
   ona jest tresc, a nie ozdoba. */
.campaign-openers__variant {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.campaign-openers__variant[hidden],
.campaign-openers__variant-navigation[hidden] { display: none !important; }

.campaign-openers__variant-navigation {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.45rem;
}

.campaign-openers__variant-navigation select { margin-top: 0.2rem; }

.campaign-openers__variant-number {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.35rem;
  color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand-soft, #f1edfe);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.campaign-openers__variant .campaign-opener-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
}

.campaign-openers__variant-remove {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

.campaign-openers__add {
  margin-top: 0.15rem;
}

.campaign-openers__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.campaign-openers__actions .campaign-openers__publish {
  font-size: 1rem;
  font-weight: 700;
  min-height: 44px;
  padding: 0.65rem 1.15rem;
}

.campaign-openers__playground {
  border-top: 1px solid var(--ld-border);
  margin-top: 0.8rem;
  padding-top: 0.75rem;
}

.campaign-openers > .btn-link {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0;
  text-align: left;
}

.campaign-openers fieldset {
  min-width: 0;
  padding: 0;
}

#createCampaignStep3 {
  align-items: flex-start !important;
}

#createCampaignStep3 .campaign-review-column {
  margin: 0 auto;
  min-width: 0;
  max-width: 58.333333%;
}

.campaign-review-chat-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}

.campaign-review-chat-heading .playground-heading {
  color: var(--ld-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.campaign-review-chat-heading button {
  flex: 0 0 auto;
}

.campaign-openers #playgroundChatContainer {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  height: 240px;
  overflow-y: auto;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.campaign-review-chat-input {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  padding: 0.5rem;
}

.campaign-review-chat-input #what_to_write {
  min-width: 0;
}

.campaign-openers .follow-up-plan__rows {
  gap: 0.45rem;
  margin: 0.5rem 0;
}

.campaign-openers .follow-up-step {
  grid-template-columns: 2rem minmax(5rem, 0.3fr) minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.55rem;
}

.campaign-openers .follow-up-step__instruction {
  min-width: 0;
}

.campaign-openers .follow-up-step__remove {
  grid-column: 3;
  justify-self: end;
}

.campaign-review-complete {
  background: var(--ld-success-bg);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  color: var(--ld-success-ink);
  padding: 0.75rem;
  text-align: left;
}

#campaignOpenersDiscardPrompt {
  background: var(--ld-warning-bg);
  color: var(--ld-warning-ink);
}

.campaign-openers__actions > button,
#campaignOpenersDiscardPrompt > button {
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 767.98px) {
  #createCampaignStep3 > .col-1:first-child { order: 1; }
  #createCampaignStep3 > .campaign-review-column {
    flex: 1 1 calc(100% - 96px);
    max-width: calc(100% - 96px);
    order: 2;
  }
  #createCampaignStep3 > .col-1:last-child { order: 3; }
  #createCampaignStep3 > .col-3 {
    flex: 0 0 100%;
    max-width: 100%;
    order: 4;
  }
  .campaign-review-chat-heading { align-items: stretch; flex-direction: column; }
  .campaign-review-chat-heading button { align-self: flex-start; }
  .campaign-openers__actions .campaign-openers__publish { width: 100%; }
  .campaign-openers .follow-up-step { grid-template-columns: 2rem minmax(0, 1fr); }
  .campaign-openers .follow-up-step > *:not(.follow-up-step__number) { grid-column: 2; }
}

@media (max-width: 575.98px) {
  .campaign-openers__variant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .campaign-openers__variant-number,
  .campaign-openers__variant .campaign-opener-text {
    grid-column: 1 / -1;
  }

  .campaign-openers__variant .campaign-opener-text {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .campaign-openers {
    /* Desktop adds the sticky campaign console below the fixed header. */
    scroll-margin-top: 140px;
  }
}

.campaign-openers__status {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
}

/* --ld-danger na bialym tle to ~3.8:1 - za malo dla tekstu, wiec para tint+ink jak w reszcie panelu. */
.campaign-openers__status.is-error {
  color: var(--ld-danger-ink, #a32d2d);
}

.campaign-openers__status.is-success {
  color: var(--ld-success-ink, #17663f);
}

.campaign-openers__status:empty {
  display: none;
}
/* ---------------------------------------------------------------------------------------------
   Popup uruchomienia kampanii (fragments/campaign_launch_modal.html, campaignLaunch.js): wybor,
   co zrobic z pozostalymi kampaniami konta, i podzial dziennych limitow suwakami. Naglowek
   i przyciski dziedzicza style .marketing-consent-modal__*, wiec oba popupy startowe wygladaja
   tak samo. Kolory z tokenow --ld-*; tekst pomocniczy bierze --ld-text-muted (>= 4.5:1 na
   powierzchni), stan przekroczenia --ld-danger-ink. */
/* Tytul jest elementem flex naglowka modala: bez min-width: 0 nazwa kampanii z nowrap nie kurczy
   sie i na 375 px wypycha przycisk zamykania poza modal. */
.campaign-launch-modal .marketing-consent-modal__title {
  flex: 1 1 auto;
  min-width: 0;
}

.campaign-launch-modal__name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ld-brand, #6c4cf1);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-launch-modal__summary {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.9rem;
  line-height: 1.5;
}

.campaign-launch-modal__option {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 10px;
  color: var(--ld-text, #1a1d2e);
  cursor: pointer;
}

.campaign-launch-modal__option[hidden] {
  display: none;
}

.campaign-launch-modal__option.is-selected {
  border-color: var(--ld-brand, #6c4cf1);
  background: var(--ld-brand-soft, #f1edfe);
}

.campaign-launch-modal__option input {
  flex: 0 0 auto;
  margin-top: 0.25rem;
}

.campaign-launch-modal__option input:focus-visible {
  outline: 3px solid var(--ld-brand, #6c4cf1);
  outline-offset: 2px;
}

.campaign-launch-modal__option strong {
  display: block;
  font-size: 0.92rem;
}

.campaign-launch-modal__option small {
  display: block;
  color: var(--ld-text-muted, #566077);
  font-size: 0.8rem;
  line-height: 1.4;
}

.campaign-launch-modal__others {
  margin-top: 0.25rem;
  font-weight: 600;
}

.campaign-launch-modal__shares {
  margin-top: 0.5rem;
}

.campaign-launch-modal__kind {
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ld-border, #e6e8f0);
  border-radius: 10px;
}

.campaign-launch-modal__kind-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.88rem;
  font-weight: 700;
}

.campaign-launch-modal__kind-meta {
  color: var(--ld-text-muted, #566077);
  font-size: 0.8rem;
  font-weight: 400;
}

.campaign-launch-modal__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, 2fr) 3.2rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0.25rem 0;
  color: var(--ld-text, #1a1d2e);
  font-size: 0.85rem;
}

.campaign-launch-modal__row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-launch-modal__badge {
  margin-left: 0.35rem;
}

.campaign-launch-modal__row input[type="range"] {
  width: 100%;
  min-width: 0;
}

.campaign-launch-modal__row-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.campaign-launch-modal__row-used {
  grid-column: 1 / -1;
  margin-top: -0.15rem;
  color: var(--ld-text-muted, #566077);
  font-size: 0.75rem;
}

.campaign-launch-modal__total {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-top: 0.25rem;
  color: var(--ld-text-muted, #566077);
  font-size: 0.82rem;
}

.campaign-launch-modal__total.is-over {
  color: var(--ld-danger-ink, #a32d2d);
  font-weight: 700;
}

@media (max-width: 575px) {
  .campaign-launch-modal__row {
    grid-template-columns: minmax(0, 1fr) 3rem;
  }

  .campaign-launch-modal__row input[type="range"] {
    grid-column: 1 / -1;
  }
}

/* Product-specific campaign reuse: keep text readable inside legacy dark wizard containers. */
.campaign-wizard .campaign-reuse {
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #14122b);
  border-color: var(--ld-border, #d8dce5) !important;
}
.campaign-wizard .campaign-reuse h3,
.campaign-wizard .campaign-reuse p,
.campaign-wizard .campaign-reuse label {
  color: var(--ld-text, #14122b) !important;
}
.campaign-wizard .campaign-reuse .btn-outline-light {
  color: var(--ld-text, #14122b);
  border-color: var(--ld-border, #d8dce5);
}

/* Partner contests: one visual language for the admin editor, partner panel and public page. */
.ld-hidden-frame {
  display: none;
  visibility: hidden;
}

.contest-admin,
.partner-contests-page {
  --contest-purple: #5b35d5;
  --contest-purple-dark: #3d228f;
  --contest-gold: #f6b91a;
  --contest-ink: var(--ld-text, #17152b);
  --contest-muted: var(--ld-text-muted, #62677a);
  --contest-surface: var(--ld-surface, #fff);
  --contest-border: var(--ld-border, #e2e4ec);
}

.contest-admin__hero,
.partner-contests-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 86% 20%, rgb(255 255 255 / 20%), transparent 27%),
    linear-gradient(128deg, #25145f 0%, #5b35d5 58%, #7656e5 100%);
  color: #fff;
  box-shadow: 0 1.25rem 3rem rgb(35 18 91 / 20%);
}

.contest-admin__hero h1,
.partner-contests-hero h1 {
  margin: 0.35rem 0 0.55rem;
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.08;
}

.contest-admin__hero p,
.partner-contests-hero p {
  max-width: 48rem;
  margin: 0;
  color: rgb(255 255 255 / 82%);
  font-size: 1rem;
}

.contest-eyebrow {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contest-admin__hero-icon,
.partner-contests-hero__prize {
  display: grid;
  flex: 0 0 auto;
  width: 7rem;
  height: 7rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 2rem;
  background: rgb(255 255 255 / 13%);
  color: #ffd96b;
  font-size: 3rem;
  transform: rotate(5deg);
}

.contest-alert {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid;
  border-radius: 0.75rem;
  font-weight: 650;
}

.contest-alert--success {
  border-color: #9cdcbc;
  background: var(--ld-success-bg, #e7f8f0);
  color: var(--ld-success-ink, #0e6745);
}

.contest-alert--danger {
  border-color: #efb5b5;
  background: var(--ld-danger-bg, #fcebeb);
  color: var(--ld-danger-ink, #972f2f);
}

.contest-admin__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 0.75fr);
  gap: 1.5rem;
  align-items: start;
}

.contest-admin__create,
.contest-admin__list,
.contest-admin__editor,
.contest-entries {
  border: 1px solid var(--contest-border);
  border-radius: 1rem;
  background: var(--contest-surface);
  color: var(--contest-ink);
  box-shadow: 0 0.75rem 2rem rgb(25 27 45 / 7%);
}

.contest-admin__create,
.contest-admin__list,
.contest-admin__editor {
  padding: clamp(1rem, 2.5vw, 1.65rem);
}

.contest-admin__editor {
  margin-top: 1.5rem;
}

.contest-section-heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.25rem;
}

.contest-section-heading > div {
  flex: 1;
}

.contest-section-heading h2 {
  margin: 0;
  color: var(--contest-ink);
  font-size: 1.2rem;
}

.contest-section-heading p {
  margin: 0.25rem 0 0;
  color: var(--contest-muted);
}

.contest-section-heading--compact {
  align-items: flex-start;
}

.contest-step {
  display: grid;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: #ede9ff;
  color: #4b2bb7;
  font-weight: 850;
}

.contest-form {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.contest-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contest-form__grid--rules {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--contest-border);
}

.contest-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.4rem;
}

.contest-field--wide {
  grid-column: 1 / -1;
}

.contest-field label,
.contest-variant label,
.contest-public__entry > label:not(.contest-check) {
  margin: 0;
  color: var(--contest-ink, #17152b);
  font-size: 0.8rem;
  font-weight: 800;
}

.contest-field small,
.contest-check small {
  display: block;
  color: var(--contest-muted);
  font-weight: 500;
}

.contest-field input,
.contest-field select,
.contest-field textarea,
.contest-variant input,
.contest-variant textarea,
.contest-public__entry textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid var(--contest-border, #dfe1e9);
  border-radius: 0.65rem;
  background: var(--contest-surface, #fff);
  color: var(--contest-ink, #17152b);
  line-height: 1.45;
}

.contest-field textarea,
.contest-variant textarea,
.contest-public__entry textarea {
  resize: vertical;
}

.contest-field input:focus,
.contest-field select:focus,
.contest-field textarea:focus,
.contest-variant input:focus,
.contest-variant textarea:focus,
.contest-public__entry textarea:focus,
.contest-check input:focus-visible,
.contest-public__cta:focus-visible,
.contest-public__panel-link:focus-visible {
  outline: 3px solid rgb(91 53 213 / 24%);
  outline-offset: 2px;
  border-color: #5b35d5;
}

.contest-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--contest-border);
  border-radius: 0.7rem;
  background: var(--ld-surface-soft, #f7f7fb);
  color: var(--contest-ink);
  cursor: pointer;
}

.contest-check input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.12rem;
  accent-color: #5b35d5;
}

.contest-check span {
  min-width: 0;
}

.contest-check--legal {
  border-color: #d4c8ff;
  background: #f3f0ff;
  color: #28146c;
}

.contest-ai-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid #5b35d5;
  border-radius: 0.35rem 0.7rem 0.7rem 0.35rem;
  background: var(--ld-surface-soft, #f6f4ff);
  color: var(--contest-muted);
}

.contest-ai-note i {
  margin-top: 0.15rem;
  color: #5b35d5;
}

.contest-primary-action {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 1.2rem;
}

.contest-primary-action.is-loading i {
  animation: contest-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes contest-pulse {
  to { transform: scale(1.18) rotate(8deg); opacity: 0.65; }
}

.contest-admin-list {
  display: grid;
  gap: 0.7rem;
}

.contest-admin-card {
  display: grid;
  gap: 0.4rem;
  padding: 0.9rem;
  border: 1px solid var(--contest-border);
  border-radius: 0.75rem;
  background: var(--ld-surface-soft, #f8f8fb);
  color: var(--contest-ink);
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.contest-admin-card:hover,
.contest-admin-card.is-selected {
  border-color: #7a5ae0;
  color: var(--contest-ink);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1.25rem rgb(91 53 213 / 12%);
}

.contest-admin-card > span:last-child {
  color: var(--contest-muted);
  font-size: 0.8rem;
}

.contest-status {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 0.26rem 0.58rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contest-status--draft {
  background: var(--ld-warning-bg, #fff3d8);
  color: var(--ld-warning-ink, #7b5100);
}

.contest-status--published {
  background: var(--ld-success-bg, #e7f8f0);
  color: var(--ld-success-ink, #0e6745);
}

.contest-status--resolved {
  background: #ede9ff;
  color: #4827aa;
}

.contest-empty {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem;
  border: 1px dashed var(--contest-border, #dfe1e9);
  border-radius: 0.8rem;
  color: var(--contest-muted, #62677a);
  text-align: center;
}

.contest-variant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.contest-variant {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--contest-border);
  border-top: 4px solid;
  border-radius: 0.8rem;
}

.contest-variant legend {
  width: auto;
  margin: 0;
  padding: 0 0.35rem;
  color: var(--contest-ink);
  font-size: 0.82rem;
  font-weight: 850;
}

.contest-variant--public { border-top-color: #3772ff; }
.contest-variant--user { border-top-color: #17a673; }
.contest-variant--partner { border-top-color: #7a3fd2; }

.contest-field--review {
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--ld-warning-bg, #fff7e5);
}

.contest-publish-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid #b8dfca;
  border-radius: 0.8rem;
  background: var(--ld-success-bg, #e7f8f0);
  color: var(--ld-success-ink, #0e6745);
}

.contest-publish-panel p {
  margin: 0.2rem 0 0;
}

.contest-inline-form {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.contest-readonly {
  padding: 1rem;
  border: 1px solid var(--contest-border);
  border-radius: 0.75rem;
}

.contest-readonly__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.4rem;
  margin-bottom: 1rem;
}

.contest-variant-grid--readonly {
  margin: 0 0 1rem;
}

.contest-variant-grid--readonly h3 {
  margin: 0;
  color: var(--contest-ink);
  font-size: 1rem;
}

.contest-variant-grid--readonly p {
  margin: 0;
  color: var(--contest-muted);
  line-height: 1.55;
  white-space: pre-wrap;
}

.contest-readonly__criteria {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.contest-readonly__criteria > div {
  padding: 0.8rem;
  border-radius: 0.65rem;
  background: var(--ld-surface-soft, #f7f7fb);
}

.contest-readonly__criteria dt {
  margin-bottom: 0.25rem;
  color: var(--contest-ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.contest-readonly__criteria dd {
  margin: 0;
  color: var(--contest-muted);
  white-space: pre-wrap;
}

.contest-copy-block {
  margin-top: 1rem;
  color: inherit;
  line-height: 1.65;
  white-space: pre-wrap;
}

.contest-entries {
  margin-top: 1.5rem;
  padding: 1.25rem;
}

.contest-result-form {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.contest-result-form__limit {
  color: var(--contest-muted);
}

.contest-entry-row {
  display: grid;
  grid-template-columns: auto minmax(9rem, 0.55fr) minmax(12rem, 1.5fr) auto;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--contest-border);
  border-radius: 0.7rem;
  cursor: pointer;
}

.contest-entry-row input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #5b35d5;
}

.contest-entry-row__person {
  font-weight: 800;
}

.contest-entry-row__description,
.contest-entry-row time {
  color: var(--contest-muted);
}

.contest-result-public {
  padding: 1rem;
  border-radius: 0.8rem;
  background: #f1edff;
  color: #2e196e;
}

.partner-contests-page .partner-materials-nav {
  margin-bottom: 1.25rem;
}

.contest-empty--large {
  min-height: 17rem;
  align-items: center;
  justify-content: center;
  background: var(--contest-surface);
}

.contest-empty--large i {
  color: #6b49d9;
  font-size: 2.4rem;
}

.partner-contest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.partner-contest-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.35rem;
  border: 1px solid var(--contest-border);
  border-radius: 1rem;
  background: var(--contest-surface);
  color: var(--contest-ink);
  box-shadow: 0 0.75rem 2rem rgb(25 27 45 / 7%);
}

.partner-contest-card--published {
  border-top: 4px solid #17a673;
}

.partner-contest-card--resolved {
  border-top: 4px solid #6b49d9;
}

.partner-contest-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.partner-contest-card__entry {
  color: var(--ld-success-ink, #0e6745);
  font-size: 0.78rem;
  font-weight: 750;
}

.partner-contest-card h2 {
  margin: 1rem 0 0.5rem;
  color: var(--contest-ink);
  font-size: 1.35rem;
}

.partner-contest-card__copy {
  display: -webkit-box;
  overflow: hidden;
  color: var(--contest-muted);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.partner-contest-card__facts {
  display: grid;
  gap: 0.6rem;
  margin: auto 0 1rem;
  padding-top: 0.6rem;
}

.partner-contest-card__facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--contest-border);
}

.partner-contest-card__facts dt {
  color: var(--contest-muted);
  font-size: 0.78rem;
}

.partner-contest-card__facts dd {
  margin: 0;
  font-weight: 750;
  text-align: right;
}

.partner-contest-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dashboard-contests {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--ld-border, #e2e4ec);
  border-radius: 1rem;
  background: var(--ld-surface, #fff);
  color: var(--ld-text, #17152b);
  box-shadow: 0 0.75rem 2rem rgb(25 27 45 / 7%);
}

.dashboard-contests__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-contests__heading .contest-eyebrow {
  color: #5b35d5;
}

.dashboard-contests__heading h2 {
  margin: 0.2rem 0 0;
  color: var(--ld-text, #17152b);
  font-size: 1.35rem;
}

.dashboard-contests__heading > a {
  color: var(--ld-link, #4e2eb5);
  font-weight: 750;
}

.dashboard-contests__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.dashboard-contest-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--ld-border, #e2e4ec);
  border-radius: 0.8rem;
  background: var(--ld-surface-soft, #f8f8fb);
  color: var(--ld-text, #17152b);
  text-decoration: none;
}

.dashboard-contest-card:hover {
  border-color: #7a5ae0;
  color: var(--ld-text, #17152b);
  text-decoration: none;
  box-shadow: 0 0.6rem 1.3rem rgb(91 53 213 / 11%);
}

.dashboard-contest-card h3 {
  margin: 0.75rem 0 0.35rem;
  color: inherit;
  font-size: 1.05rem;
}

.dashboard-contest-card > p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ld-text-muted, #62677a);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dashboard-contest-card__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  color: #4d2bb6;
}

/* Standalone public contest page has fixed accessible brand tokens, independent of panel themes. */
.contest-public {
  --contest-public-bg: #f7f6fb;
  --contest-public-ink: #171329;
  --contest-public-muted: #5d5a6d;
  --contest-public-purple: #5b35d5;
  --contest-public-purple-dark: #382084;
  --contest-public-gold: #ffc84b;
  min-width: 320px;
  margin: 0;
  background: var(--contest-public-bg);
  color: var(--contest-public-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.contest-public * {
  box-sizing: border-box;
}

.contest-public__shell {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.contest-public__header {
  display: flex;
  min-height: 4.6rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem max(1rem, calc((100% - 1120px) / 2));
  border-bottom: 1px solid #e5e1ef;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: blur(12px);
}

.contest-public__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #201447;
  font-size: 1.25rem;
  font-weight: 850;
  text-decoration: none;
}

.contest-public__brand:hover {
  color: #201447;
  text-decoration: none;
}

.contest-public__brand-mark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 0.72rem;
  background: linear-gradient(145deg, #724bea, #3f238d);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0.5rem 1.1rem rgb(73 39 160 / 22%);
}

.contest-public__panel-link {
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  color: #432696;
  font-weight: 750;
}

.contest-public__panel-link:hover {
  background: #eee9ff;
  color: #2d176c;
  text-decoration: none;
}

.contest-public__hero {
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(4rem, 7vw, 6rem);
  background:
    radial-gradient(circle at 73% 18%, rgb(255 203 90 / 22%), transparent 23%),
    radial-gradient(circle at 12% 85%, rgb(130 92 255 / 30%), transparent 27%),
    linear-gradient(132deg, #170d3b 0%, #372082 54%, #5a37ba 100%);
  color: #fff;
}

.contest-public__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.contest-public__hero h1 {
  max-width: 13ch;
  margin: 0.55rem 0 1rem;
  color: #fff;
  font-size: clamp(2.35rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.contest-public__lead {
  max-width: 45rem;
  margin-bottom: 1.35rem;
  color: rgb(255 255 255 / 82%);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  white-space: pre-wrap;
}

.contest-public__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

.contest-public__badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.72rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

.contest-public__cta {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.2rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--contest-public-gold);
  color: #352300;
  font-weight: 850;
  box-shadow: 0 0.8rem 1.7rem rgb(8 5 23 / 20%);
  cursor: pointer;
}

.contest-public__cta:hover {
  background: #ffd56f;
  color: #241800;
  text-decoration: none;
  transform: translateY(-1px);
}

.contest-public__prize {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.6rem;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 1.4rem;
  background: rgb(255 255 255 / 12%);
  backdrop-filter: blur(14px);
  box-shadow: 0 1.5rem 3rem rgb(8 4 28 / 22%);
}

.contest-public__prize-icon {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  margin-bottom: 1.25rem;
  border-radius: 1.1rem;
  background: #ffc84b;
  color: #3d2900;
  font-size: 2rem;
  transform: rotate(-4deg);
}

.contest-public__prize > span:not(.contest-public__prize-icon) {
  color: #d9ccff;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contest-public__prize strong {
  margin: 0.25rem 0 0.55rem;
  color: #fff;
  font-size: 1.7rem;
}

.contest-public__prize p,
.contest-public__prize small {
  color: rgb(255 255 255 / 78%);
  line-height: 1.55;
}

.contest-public__timeline {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: -1.8rem;
  padding: 1.25rem;
  border: 1px solid #e4dfef;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1rem 2.5rem rgb(27 17 58 / 10%);
}

.contest-public__timeline > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.65rem;
  align-items: center;
  padding: 0.35rem 1rem;
  border-right: 1px solid #ece8f2;
}

.contest-public__timeline > div:last-of-type {
  border-right: 0;
}

.contest-public__timeline > div > span {
  display: grid;
  grid-row: 1 / 3;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: #eee9ff;
  color: #4827aa;
  font-weight: 850;
}

.contest-public__timeline small {
  color: var(--contest-public-muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.contest-public__timeline strong {
  color: var(--contest-public-ink);
}

.contest-public__timeline > p {
  grid-column: 1 / -1;
  margin: 0.75rem 1rem 0;
  color: var(--contest-public-muted);
  font-size: 0.78rem;
  text-align: right;
}

.contest-public__rules-summary,
.contest-public__result,
.contest-public__regulations {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.contest-public__section-head {
  max-width: 45rem;
  margin-bottom: 1.5rem;
}

.contest-public__section-head .contest-eyebrow,
.contest-public__result .contest-eyebrow {
  color: #5935c9;
}

.contest-public__section-head h2,
.contest-public__result h2 {
  margin: 0.35rem 0 0.65rem;
  color: var(--contest-public-ink);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.contest-public__section-head p,
.contest-public__result > p {
  color: var(--contest-public-muted);
  line-height: 1.65;
}

.contest-public__criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.contest-public__criteria-grid article {
  padding: 1.25rem;
  border: 1px solid #e3dfeb;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.7rem 1.6rem rgb(27 17 58 / 6%);
}

.contest-public__criteria-grid i {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border-radius: 0.75rem;
  background: #eee9ff;
  color: #4d2bb6;
}

.contest-public__criteria-grid h3 {
  margin: 1rem 0 0.45rem;
  color: var(--contest-public-ink);
  font-size: 1rem;
}

.contest-public__criteria-grid p {
  margin: 0;
  color: var(--contest-public-muted);
  line-height: 1.6;
  white-space: pre-wrap;
}

.contest-public__entry-wrap {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: #21134f;
}

.contest-public__entry {
  display: grid;
  gap: 0.85rem;
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2.3rem);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.2rem;
  background: #fff;
  color: var(--contest-public-ink);
  box-shadow: 0 1.5rem 3rem rgb(7 3 22 / 22%);
}

.contest-public__entry h2 {
  margin: 0.35rem 0;
  color: var(--contest-public-ink);
}

.contest-public__entry p {
  color: var(--contest-public-muted);
}

.contest-check--public {
  --contest-border: #ded8ee;
  --contest-ink: var(--contest-public-ink);
  --contest-muted: var(--contest-public-muted);
  background: #f7f5fc;
}

.contest-public__entry .contest-public__cta {
  justify-self: start;
}

.contest-public__closed,
.contest-public__guest {
  display: flex;
  max-width: 52rem;
  align-items: flex-start;
  gap: 1rem;
  margin-inline: auto;
  padding: 1.35rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 9%);
  color: #fff;
}

.contest-public__closed i,
.contest-public__guest i {
  color: #ffd46a;
  font-size: 1.7rem;
}

.contest-public__closed p,
.contest-public__guest p {
  margin: 0.3rem 0 0;
  color: rgb(255 255 255 / 74%);
}

.contest-public__result {
  border-bottom: 1px solid #e2deeb;
}

.contest-public__winners {
  display: grid;
  gap: 0.7rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.contest-public__winners li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid #ded8ed;
  border-radius: 0.8rem;
  background: #fff;
}

.contest-public__winners li > span {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 50%;
  background: #ffc84b;
  color: #382500;
  font-weight: 900;
}

.contest-public__regulations details {
  overflow: hidden;
  border: 1px solid #ded9e9;
  border-radius: 1rem;
  background: #fff;
}

.contest-public__regulations summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.35rem;
  color: var(--contest-public-ink);
  font-weight: 850;
  cursor: pointer;
}

.contest-public__regulations summary small {
  color: var(--contest-public-purple);
}

.contest-public__regulations .contest-copy-block {
  margin: 0;
  padding: 1.35rem;
  border-top: 1px solid #ebe7f1;
  color: var(--contest-public-muted);
}

.contest-public__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem max(1rem, calc((100% - 1120px) / 2));
  background: #160c36;
  color: rgb(255 255 255 / 70%);
}

.contest-public__footer span:first-child {
  color: #fff;
  font-weight: 850;
}

.contest-notfound {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 80% 20%, rgb(255 200 75 / 20%), transparent 24%),
    linear-gradient(135deg, #170d3b, #4a2da0);
}

.contest-notfound__card {
  width: min(30rem, 100%);
  padding: 2rem;
  border-radius: 1.2rem;
  background: #fff;
  color: var(--contest-public-ink);
  text-align: center;
  box-shadow: 0 1.5rem 3rem rgb(7 3 22 / 28%);
}

.contest-notfound__card .contest-public__brand-mark {
  margin-inline: auto;
}

.contest-notfound__card h1 {
  margin: 1rem 0 0.5rem;
}

.contest-notfound__card p {
  margin-bottom: 1.2rem;
  color: var(--contest-public-muted);
}

@media (max-width: 991px) {
  .contest-admin__workspace,
  .contest-public__hero-grid {
    grid-template-columns: 1fr;
  }

  .contest-variant-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-contests__grid {
    grid-template-columns: 1fr;
  }

  .contest-admin__list {
    order: -1;
  }

  .contest-public__prize {
    max-width: 30rem;
  }
}

@media (max-width: 767px) {
  .contest-admin__hero-icon,
  .partner-contests-hero__prize {
    display: none;
  }

  .contest-form__grid,
  .partner-contest-grid,
  .contest-public__criteria-grid,
  .contest-public__timeline {
    grid-template-columns: 1fr;
  }

  .contest-public__timeline > div {
    border-right: 0;
    border-bottom: 1px solid #ece8f2;
  }

  .contest-public__timeline > div:last-of-type {
    border-bottom: 0;
  }

  .contest-public__timeline > p {
    grid-column: auto;
    text-align: left;
  }

  .contest-entry-row {
    grid-template-columns: auto 1fr;
  }

  .contest-entry-row__description,
  .contest-entry-row time {
    grid-column: 2;
  }

  .contest-publish-panel,
  .contest-public__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .contest-inline-form .btn,
  .contest-primary-action {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .contest-public__shell {
    width: min(100% - 1.1rem, 1120px);
  }

  .contest-public__header {
    min-height: 4rem;
  }

  .contest-public__brand {
    font-size: 1.05rem;
  }

  .contest-public__hero h1 {
    font-size: 2.45rem;
  }

  .contest-public__hero {
    padding-top: 2.6rem;
  }

  .contest-public__badges {
    align-items: flex-start;
    flex-direction: column;
  }

  .contest-public__cta,
  .contest-public__entry .contest-public__cta {
    width: 100%;
  }

  .contest-public__regulations summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contest-admin-card,
  .contest-public__cta,
  .contest-primary-action.is-loading i {
    transition: none;
    animation: none;
  }
}
/* Cash payments use the same alignment on wide and narrow screens. */
.stripe-payments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.stripe-payment-summary { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 8px; }

/* Administrator inventory: fixed role alignment, explicit states, no secret editors. */
.integration-inventory { color: var(--ld-text); text-align: left; }
.integration-inventory-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 12px; }
.integration-inventory h1 { font-size: 1.5rem; margin: 0 0 6px; }
.integration-inventory-heading p { margin: 0; color: var(--ld-text-muted); }
.integration-inventory-notice { padding: 12px; border: 1px solid var(--ld-border); border-radius: 8px; background: var(--ld-surface); }
.integration-inventory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr)); gap: 12px; align-items: start; }
.integration-card { min-width: 0; padding: 16px; background: var(--ld-surface); border: 1px solid var(--ld-border); border-radius: 12px; }
.integration-card header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin-bottom: 12px; }
.integration-card h2 { font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.integration-state { padding: 4px 8px; border-radius: 6px; background: var(--ld-info-bg); color: var(--ld-info-ink); font-size: .8rem; }
.integration-card[data-state="MISSING"] .integration-state,
.integration-card[data-state="PARTIAL"] .integration-state { background: var(--ld-warning-bg); color: var(--ld-warning-ink); }
.integration-card[data-state="UNAVAILABLE"] .integration-state { background: var(--ld-danger-bg); color: var(--ld-danger-ink); }
.integration-card[data-state="VERIFIED"] .integration-state { background: var(--ld-success-bg); color: var(--ld-success-ink); }
.integration-evidence { color: var(--ld-text-muted); font-size: .9rem; }
.integration-requirements { list-style: none; padding: 0; margin: 12px 0; }
.integration-requirements li { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ld-border); align-items: start; }
.integration-inventory code { color: var(--ld-text); font-size: .8rem; overflow-wrap: anywhere; }
.integration-requirements span { color: var(--ld-text-muted); font-size: .8rem; }
.integration-guide { margin-top: 12px; }
.integration-guide summary { cursor: pointer; color: var(--ld-text); font-weight: 600; padding: 8px 0; }
.integration-inventory a:focus-visible, .integration-guide summary:focus-visible { outline: 3px solid var(--ld-brand); outline-offset: 3px; }
.integration-guide-content { border-top: 1px solid var(--ld-border); padding-top: 12px; font-size: .9rem; overflow-wrap: anywhere; }
.integration-guide-content ol { padding-left: 20px; }
.integration-guide-content li { margin-bottom: 8px; }
.integration-guide-content a { color: var(--ld-text); text-decoration: underline; }
@media (max-width: 600px) {
  .integration-inventory-heading, .integration-card header { grid-template-columns: minmax(0, 1fr); }
  .integration-inventory-heading > a, .integration-state { justify-self: start; }
  .integration-card { padding: 12px; }
  .integration-requirements li { grid-template-columns: minmax(0, 1fr) 80px; }
}

/* Keep warm-up safety guidance readable inside both light cards and dark campaign panels. */
.contact-warm-up__title {
  color: var(--ld-text, #1a1d2e);
  font-weight: 600;
}

.contact-warm-up__help {
  color: var(--ld-text-muted, #667085);
}
/* Partner settlements tab (/partnerSettlements) and the administrative payout queue (/adminPartnerPayouts). */
/* The shared partner scope centres pages with margin auto, which in the column flex of .app-main__outer sizes them
   to their content; a table or the steps grid would then widen the page past a phone viewport. */
.partner-settlements-page,.admin-partner-payouts { width: 100%; min-width: 0; }
.partner-settlements-hero__available { display: grid; justify-items: start; gap: .35rem; min-width: 220px; text-align: left; }
.partner-settlements-hero__available strong { font-size: 1.6rem; }
.partner-settlements-hero__available .btn { margin-top: .35rem; }
.partner-settlements-hero__hint { color: #fff; font-size: .8rem; font-weight: 700; text-decoration: underline; }
.partner-settlements-hero__hint:hover,.partner-settlements-hero__hint:focus { color: #fff; }
.partner-payout-panel,.partner-payout-history,.partner-payout-ledger { margin-top: 1rem; }
/* Tiles of one row are stretched to the tallest; without align-content the extra height moves the values of the shorter ones. */
.partner-settlements-page .partner-tree-summary article { align-items: start; align-content: start; }
.partner-settlements-page .partner-agreement-steps { margin-top: 0; }
.partner-settlements-page .partner-agreement-steps li { opacity: 1; }
.partner-settlements-page .partner-agreement-steps li:not(.is-current):not(.is-done) > span { color: var(--ld-text, #172033); }
.partner-settlements-page .partner-agreement-steps .is-done > span { background: var(--ld-success-bg, #e3f6ec); color: var(--ld-success-ink, #0b6b44); }
/* Commission balance per currency; a negative balance is a refund correction whose value other currencies hold. */
.partner-settlements-page .partner-tree-summary.partner-commission-balances { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.partner-commission-balances article.is-debt strong { color: var(--ld-danger-ink, #a32d2d); }
.partner-commission-balances small b { color: var(--ld-text, #172033); }
.partner-commission-netting p { margin: .25rem 0; }
@media (max-width: 720px) {
  .partner-settlements-page .partner-tree-summary.partner-commission-balances { grid-template-columns: 1fr; }
}
.partner-payout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.partner-payout-card { display: grid; gap: .75rem; padding: 1.25rem; border: 1px solid var(--partner-border); border-radius: 18px; background: var(--ld-surface, #fff); }
.partner-payout-card h3 { margin: 0; font-size: 1.05rem; }
.partner-payout-card p,.partner-payout-card__text { margin: 0; color: var(--partner-muted); }
.partner-payout-modal .partner-payout-card__text { margin-bottom: 1rem; }
.partner-payout-card form { margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.partner-payout-card .btn { justify-self: start; }
.partner-payout-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.partner-payout-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem 1rem; margin: 0; }
.partner-payout-facts .is-wide { grid-column: 1 / -1; }
.partner-payout-facts dt { color: var(--partner-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.partner-payout-facts dd { margin: .1rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.partner-payout-card .partner-payout-buyer { color: var(--ld-text, #172033); font-size: .85rem; }
.partner-payout-ledger > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; cursor: pointer; list-style: none; }
.partner-payout-ledger > summary::-webkit-details-marker { display: none; }
.partner-payout-ledger > summary::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--partner-accent); transition: transform .15s ease; }
.partner-payout-ledger[open] > summary { margin-bottom: 1rem; }
.partner-payout-ledger[open] > summary::before { transform: rotate(90deg); }
.partner-payout-ledger > summary h2 { margin: 0; font-size: 1.25rem; }
.partner-payout-ledger > summary span { color: var(--partner-muted); }
.partner-clients-hero__settlements { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; color: #fff; font-weight: 700; text-decoration: underline; }
.partner-clients-hero__settlements:hover,.partner-clients-hero__settlements:focus { color: #fff; }
.partner-payout-queue { margin-top: 1.5rem; }
.partner-payout-queue > h2 { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; font-size: 1.2rem; }
.partner-payout-queue__empty { margin: 0; padding: 1rem; border: 1px dashed var(--partner-border); border-radius: 14px; color: var(--partner-muted); }
.partner-admin-application.partner-admin-payout { grid-template-columns: minmax(220px, 1fr) minmax(150px, .6fr) minmax(220px, 1fr) minmax(280px, 1.2fr); align-items: start; }
.partner-admin-payout .partner-admin-application__identity h3 { margin: 0; font-size: 1rem; }
.partner-admin-application.partner-admin-payout > * { min-width: 0; }
.partner-admin-payout .partner-admin-application__identity > div { min-width: 0; }
.partner-admin-payout .partner-admin-application__identity h3,.partner-admin-payout .partner-admin-application__identity small,.partner-admin-payout__money a { overflow-wrap: anywhere; }
.partner-admin-payout__money,.partner-admin-payout__billing { display: grid; gap: .2rem; min-width: 0; }
.partner-admin-payout__money strong { font-size: 1.2rem; }
.partner-admin-payout__money small,.partner-admin-payout__billing small { color: var(--partner-muted); overflow-wrap: anywhere; }
.partner-admin-payout__money small.is-short,.partner-admin-payout__warning { color: var(--ld-danger-ink, #a32d2d); font-weight: 700; }
.partner-admin-payout__warning { margin: 0; font-size: .8rem; }
.partner-admin-application.partner-admin-payout .partner-admin-application__actions { display: grid; gap: .45rem; grid-column: auto; }
.partner-admin-payout .partner-admin-inline { margin-top: 0; }
@media (max-width: 1100px) {
  .partner-admin-application.partner-admin-payout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .partner-settlements-hero__available { width: 100%; }
  .partner-settlements-page .partner-agreement-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-admin-application.partner-admin-payout { grid-template-columns: 1fr; }
  .partner-payout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .partner-settlements-page .partner-agreement-steps { grid-template-columns: 1fr; }
}
/* Partner earning hub and its agreement workflow. */
.partner-hub,
.partner-application-page,
.admin-partner-functions,
.partner-settlements-page,
.admin-partner-payouts,
.partner-levels-page,
.partner-tree-page,
.partner-training-page {
  --partner-accent: var(--ld-primary, #5b4bea);
  --partner-accent-soft: color-mix(in srgb, var(--partner-accent) 11%, var(--ld-surface, #fff));
  --partner-success: var(--ld-success, #14855f);
  --partner-border: var(--ld-border, #dfe3eb);
  --partner-muted: var(--ld-text-muted, #687387);
  max-width: 1440px;
  margin: 0 auto;
  color: var(--ld-text, #172033);
}

.partner-hub__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  overflow: hidden;
  position: relative;
  border-radius: 24px;
  background: linear-gradient(130deg, var(--partner-accent), color-mix(in srgb, var(--partner-accent) 64%, #0c1740));
  color: #fff;
  box-shadow: 0 22px 55px color-mix(in srgb, var(--partner-accent) 24%, transparent);
}

.partner-hub__hero::after {
  content: "";
  width: 320px;
  height: 320px;
  position: absolute;
  right: -95px;
  bottom: -170px;
  border: 45px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
}

.partner-hub__hero h1 { margin: .3rem 0 .45rem; color: #fff; font-size: clamp(1.85rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.04em; }
.partner-hub__hero p { max-width: 700px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 1.05rem; }
.partner-hub__hero .btn { z-index: 1; flex: 0 0 auto; border: 0; font-weight: 700; }
.partner-hub__eyebrow { color: var(--partner-accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.partner-hub__hero .partner-hub__eyebrow { color: rgba(255, 255, 255, .78); }

.partner-dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.partner-stat-card {
  min-height: 148px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .8rem;
  padding: 1.25rem;
  border: 1px solid var(--partner-border);
  border-radius: 18px;
  background: var(--ld-surface, #fff);
  box-shadow: 0 10px 30px rgba(23, 32, 51, .06);
}
.partner-stat-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--partner-accent-soft); color: var(--partner-accent); font-size: 1.05rem; }
.partner-stat-card > div:not(.partner-stat-card__icon):not(.partner-stat-card__spark):not(.partner-stat-card__split) { min-width: 0; }
.partner-stat-card span { display: block; color: var(--partner-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.partner-stat-card strong { display: block; margin-top: .25rem; font-size: clamp(1.35rem, 1.8vw, 1.8rem); letter-spacing: -.035em; overflow-wrap: anywhere; }
.partner-stat-card small { grid-column: 1 / -1; align-self: end; color: var(--partner-muted); }
.partner-stat-card__spark { height: 32px; grid-column: 1 / -1; display: flex; align-items: end; gap: 5px; }
.partner-stat-card__spark i { flex: 1; height: 30%; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--partner-accent) 30%, transparent); }
.partner-stat-card__spark i:nth-child(2) { height: 48%; }.partner-stat-card__spark i:nth-child(3) { height: 40%; }
.partner-stat-card__spark i:nth-child(4) { height: 72%; }.partner-stat-card__spark i:nth-child(5) { height: 100%; background: var(--partner-accent); }
.partner-stat-card__split { height: 7px; grid-column: 1 / -1; display: flex; gap: 3px; overflow: hidden; border-radius: 9px; }
.partner-stat-card__split span { background: color-mix(in srgb, var(--partner-muted) 25%, transparent); }
.partner-stat-card__split .is-active { background: var(--partner-success); }

.partner-link-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--partner-accent) 24%, var(--partner-border));
  border-radius: 22px;
  background: linear-gradient(120deg, var(--partner-accent-soft), var(--ld-surface, #fff) 55%);
}
.partner-link-card__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 19px; background: var(--partner-accent); color: #fff; font-size: 1.35rem; }
.partner-link-card__content > span { color: var(--partner-accent); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.partner-link-card h2 { margin: .2rem 0; font-size: 1.35rem; }.partner-link-card p { margin: 0 0 .85rem; color: var(--partner-muted); }
.partner-link-card__copy { max-width: 760px; display: flex; padding: .35rem; border: 1px solid var(--partner-border); border-radius: 12px; background: var(--ld-surface, #fff); }
.partner-link-card__copy input { min-width: 0; flex: 1; padding: 0 .65rem; border: 0; outline: 0; background: transparent; color: var(--ld-text, #172033); font-family: monospace; }
.partner-link-card__copy .btn { white-space: nowrap; }.partner-link-card__more { font-weight: 700; white-space: nowrap; }

.partner-level-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; margin: 1rem 0 2.2rem; padding: 1.15rem 1.5rem; border: 1px solid var(--partner-border); border-radius: 18px; background: var(--ld-surface, #fff); }
.partner-level-card__ring { --partner-progress: 0%; width: 82px; height: 82px; display: grid; place-content: center; position: relative; border-radius: 50%; background: conic-gradient(var(--partner-success) var(--partner-progress), color-mix(in srgb, var(--partner-border) 70%, transparent) 0); text-align: center; }
.partner-level-card__ring::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: var(--ld-surface, #fff); }
.partner-level-card__ring strong,.partner-level-card__ring span { z-index: 1; line-height: 1; }.partner-level-card__ring strong { font-size: 1.5rem; }.partner-level-card__ring span { margin-top: .25rem; color: var(--partner-muted); font-size: .62rem; text-transform: uppercase; }
.partner-level-card h2 { margin: .15rem 0; }.partner-level-card p { margin: 0; color: var(--partner-muted); }
.partner-performance-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.15rem; margin: -1.2rem 0 2.2rem; padding: 1.25rem 1.5rem; border: 1px solid color-mix(in srgb, var(--partner-accent) 30%, var(--partner-border)); border-radius: 18px; background: linear-gradient(120deg, var(--partner-accent-soft), var(--ld-surface, #fff) 60%); }
.partner-performance-card__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--partner-accent); color: #fff; font-size: 1.2rem; }
.partner-performance-card h2 { margin: .15rem 0 .8rem; }.partner-performance-card p { margin: .85rem 0 0; color: var(--partner-muted); }
.partner-performance-card__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.partner-performance-card__metrics div { padding: .75rem; border: 1px solid var(--partner-border); border-radius: 12px; background: var(--ld-surface, #fff); }
.partner-performance-card__metrics small,.partner-performance-card__metrics strong { display: block; }.partner-performance-card__metrics small { color: var(--partner-muted); }.partner-performance-card__metrics strong { margin-top: .2rem; }

.partner-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.partner-section-heading h1,.partner-section-heading h2 { margin: .2rem 0; letter-spacing: -.025em; }.partner-section-heading p { margin: 0; color: var(--partner-muted); }
.partner-section-heading__count { padding: .45rem .7rem; border-radius: 999px; background: var(--partner-accent-soft); color: var(--partner-accent); font-size: .75rem; font-weight: 800; white-space: nowrap; }
.partner-earning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.partner-earning-card { min-height: 235px; display: flex; flex-direction: column; padding: 1.3rem; border: 1px solid var(--partner-border); border-radius: 18px; background: var(--ld-surface, #fff); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.partner-earning-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--partner-accent) 55%, var(--partner-border)); box-shadow: 0 16px 35px rgba(23, 32, 51, .08); }
.partner-earning-card.is-active { border-color: color-mix(in srgb, var(--partner-success) 45%, var(--partner-border)); }
.partner-earning-card__top { display: flex; align-items: center; justify-content: space-between; }
.partner-earning-card__icon { width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 14px; background: var(--partner-accent-soft); color: var(--partner-accent); font-size: 1.1rem; }
.partner-earning-card h3 { margin: 1rem 0 .45rem; font-size: 1.08rem; }.partner-earning-card p { flex: 1; color: var(--partner-muted); line-height: 1.55; }
.partner-earning-card__action { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; border-top: 1px solid var(--partner-border); font-weight: 800; }
.partner-earning-card__action::after { content: "\f061"; font-family: "Font Awesome 6 Free"; }

.partner-shortcuts { margin-top: 2.3rem; }.partner-shortcuts__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }
.partner-shortcuts__grid a { display: flex; align-items: center; gap: .65rem; padding: .85rem; border: 1px solid var(--partner-border); border-radius: 12px; background: var(--ld-surface, #fff); color: var(--ld-text, #172033); font-weight: 700; }
.partner-shortcuts__grid i { color: var(--partner-accent); }.partner-shortcuts__grid a:hover { border-color: var(--partner-accent); text-decoration: none; }
.partner-hub__join { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1.5rem; border: 1px solid var(--partner-border); border-radius: 18px; background: var(--ld-surface, #fff); }
.partner-hub__join form { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }.partner-hub__join p { margin: 0; color: var(--partner-muted); }.partner-hub__join h2 { margin: 0 0 .25rem; }.partner-hub__join-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--partner-accent-soft); color: var(--partner-accent); font-size: 1.35rem; }

.partner-application-page__back { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-weight: 700; }
.partner-application-hero { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px solid var(--partner-border); border-radius: 20px; background: var(--ld-surface, #fff); }
.partner-application-hero .partner-earning-card__icon { width: 70px; height: 70px; font-size: 1.5rem; }.partner-application-hero h1 { margin: .2rem 0; }.partner-application-hero p { margin: 0; color: var(--partner-muted); }
.partner-agreement-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: 1rem 0; padding: 0; list-style: none; }
.partner-agreement-steps li { display: flex; align-items: center; gap: .7rem; padding: .85rem; border: 1px solid var(--partner-border); border-radius: 14px; background: var(--ld-surface, #fff); opacity: .65; }
.partner-agreement-steps li > span { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--partner-border) 55%, transparent); font-weight: 800; }
.partner-agreement-steps strong,.partner-agreement-steps small { display: block; }.partner-agreement-steps small { color: var(--partner-muted); }
.partner-agreement-steps .is-current { border-color: var(--partner-accent); opacity: 1; }.partner-agreement-steps .is-current > span { background: var(--partner-accent); color: #fff; }
.partner-agreement-steps .is-done { border-color: color-mix(in srgb, var(--partner-success) 45%, var(--partner-border)); opacity: 1; }.partner-agreement-steps .is-done > span { background: var(--partner-success); color: #fff; }
.partner-application-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1rem; }
.partner-application-card { padding: 1.35rem; border: 1px solid var(--partner-border); border-radius: 18px; background: var(--ld-surface, #fff); }
.partner-application-card form { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.partner-application-card--aside { grid-column: 2; grid-row: 1 / span 3; }.partner-application-card--aside li { margin-bottom: .65rem; color: var(--partner-muted); }
.partner-b2b-form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }.partner-b2b-form label { margin: 0; font-weight: 700; }.partner-b2b-form input { margin-top: .35rem; }.partner-b2b-form .is-wide { grid-column: 1 / -1; }
.partner-b2b-form__notice { display: flex; gap: .6rem; padding: .8rem; border-radius: 10px; background: var(--partner-accent-soft); color: var(--partner-muted); font-weight: 500; }
.partner-join-performance { margin-top: 24px; }
.partner-join-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0; }
.partner-join-actions form { margin: 0; }
.partner-document-download { display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1px dashed var(--partner-accent); border-radius: 12px; background: var(--partner-accent-soft); }.partner-document-download > div { flex: 1; }.partner-document-download strong,.partner-document-download small { display: block; }.partner-document-download small { color: var(--partner-muted); }
.partner-upload-form { display: grid; gap: .55rem; margin-top: 1rem; }.partner-upload-form small { color: var(--partner-muted); }
.partner-application-card--status,.partner-application-card--active { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.partner-status-illustration { width: 82px; height: 82px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 50%; background: var(--partner-accent-soft); color: var(--partner-accent); font-size: 1.8rem; }.partner-application-card--active .partner-status-illustration { background: color-mix(in srgb, var(--partner-success) 13%, transparent); color: var(--partner-success); }

.admin-partner-functions > .partner-section-heading { margin-bottom: 1.25rem; }.partner-admin-list { display: grid; gap: .8rem; }.partner-admin-application { display: grid; grid-template-columns: minmax(260px, 1.2fr) auto auto minmax(280px, 1.2fr); align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--partner-border); border-radius: 16px; background: var(--ld-surface, #fff); }
.partner-admin-application__identity { display: flex; align-items: center; gap: .75rem; }.partner-admin-application__identity h2 { margin: 0; font-size: 1rem; }.partner-admin-application__identity strong,.partner-admin-application__identity small { display: block; }.partner-admin-application__identity small { color: var(--partner-muted); }
.partner-admin-application__status small { display: block; margin-top: .3rem; color: var(--partner-muted); }.partner-admin-application__documents { display: grid; gap: .25rem; }.partner-admin-application__actions form { padding: 0; background: transparent; box-shadow: none; }.partner-admin-inline { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }.partner-admin-empty { padding: 4rem 1rem; border: 1px dashed var(--partner-border); border-radius: 18px; text-align: center; color: var(--partner-muted); }.partner-admin-empty i { font-size: 2rem; color: var(--partner-accent); }

@media (max-width: 1100px) {
  .partner-dashboard-stats { grid-template-columns: repeat(2, 1fr); }
  .partner-earning-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-agreement-steps { grid-template-columns: repeat(2, 1fr); }
  .partner-admin-application { grid-template-columns: 1fr auto; }.partner-admin-application__documents,.partner-admin-application__actions { grid-column: 1 / -1; }
  .partner-shortcuts__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .partner-hub__hero,.partner-hub__join,.partner-link-card,.partner-level-card,.partner-performance-card { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .partner-hub__hero .btn,.partner-hub__join .btn { width: 100%; }
  .partner-dashboard-stats,.partner-earning-grid,.partner-agreement-steps,.partner-application-grid,.partner-b2b-form { grid-template-columns: 1fr; }
  .partner-b2b-form .is-wide,.partner-application-card--aside { grid-column: 1; grid-row: auto; }
  .partner-link-card__icon { width: 48px; height: 48px; }.partner-link-card__copy { align-items: stretch; flex-direction: column; gap: .4rem; }.partner-link-card__copy input { min-height: 42px; }
  .partner-level-card .btn { width: 100%; }.partner-section-heading { align-items: flex-start; flex-direction: column; }
  .partner-shortcuts__grid,.partner-performance-card__metrics { grid-template-columns: 1fr 1fr; }.partner-application-hero { align-items: flex-start; }.partner-application-hero .partner-earning-card__icon { width: 52px; height: 52px; flex: 0 0 auto; }
  .partner-admin-application { grid-template-columns: 1fr; }.partner-admin-application__documents,.partner-admin-application__actions { grid-column: auto; }.partner-admin-inline { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { .partner-earning-card { transition: none; } }

/* Partner levels, financial tree and training catalog share the same visual language. */
.partner-network-hero,
.partner-training-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
  padding: clamp(1.5rem, 4vw, 2.7rem);
  overflow: hidden;
  position: relative;
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--partner-accent) 92%, #253477), #17244f);
  color: #fff;
  box-shadow: 0 20px 45px color-mix(in srgb, var(--partner-accent) 18%, transparent);
}
.partner-network-hero::after,
.partner-training-hero::after { content: ""; width: 270px; height: 270px; position: absolute; right: -105px; bottom: -165px; border: 38px solid rgba(255,255,255,.08); border-radius: 50%; }
.partner-network-hero h1,.partner-training-hero h1 { max-width: 780px; margin: .25rem 0 .55rem; color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -.04em; }
.partner-network-hero p,.partner-training-hero p { max-width: 790px; margin: 0; color: rgba(255,255,255,.8); line-height: 1.65; }
.partner-network-hero .partner-hub__eyebrow,.partner-training-hero .partner-hub__eyebrow { color: rgba(255,255,255,.72); }
.partner-network-hero .btn { z-index: 1; flex: 0 0 auto; font-weight: 800; }
.partner-network-hero__period { min-width: 150px; z-index: 1; padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); text-align: center; }
.partner-network-hero__period span,.partner-network-hero__period strong { display: block; }.partner-network-hero__period span { color: rgba(255,255,255,.72); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.partner-network-hero__period strong { margin-top: .25rem; font-size: 1.2rem; }
.partner-level-hero-actions { min-width: 230px; display: grid; z-index: 1; gap: .65rem; }
.partner-level-model { padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.24); border-radius: 15px; background: rgba(255,255,255,.13); backdrop-filter: blur(8px); }
.partner-level-model span,.partner-level-model strong { display: block; }.partner-level-model span { color: rgba(255,255,255,.7); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.partner-level-model strong { margin-top: .2rem; color: #fff; font-size: 1.15rem; }

.partner-level-card__progress { width: min(100%, 620px); height: 10px; margin-top: .9rem; overflow: hidden; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--partner-border) 70%, transparent); }
.partner-level-card__progress::-webkit-progress-bar { border-radius: 999px; background: color-mix(in srgb, var(--partner-border) 70%, transparent); }
.partner-level-card__progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--partner-accent), var(--partner-success)); }
.partner-level-card__progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--partner-accent), var(--partner-success)); }
.partner-level-card__exp { min-width: 130px; padding: .8rem 1rem; border-left: 1px solid var(--partner-border); text-align: right; }
.partner-level-card__exp span,.partner-level-card__exp strong,.partner-level-card__exp small { display: block; }.partner-level-card__exp span,.partner-level-card__exp small { color: var(--partner-muted); }.partner-level-card__exp strong { font-size: 1.8rem; }
.partner-level-section { margin-top: 2.5rem; }
.partner-level-roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.partner-level-roadmap article { min-height: 150px; display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: 1rem; position: relative; border: 1px solid var(--partner-border); border-radius: 16px; background: var(--ld-surface, #fff); box-shadow: 0 8px 24px rgba(23,32,51,.04); }
.partner-level-roadmap article.is-current { border-color: var(--partner-accent); background: linear-gradient(145deg, var(--partner-accent-soft), var(--ld-surface, #fff)); box-shadow: 0 12px 28px color-mix(in srgb, var(--partner-accent) 14%, transparent); }
.partner-level-roadmap__level { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--partner-accent-soft); color: var(--partner-accent); font-weight: 900; }
.partner-level-roadmap small,.partner-level-roadmap strong,.partner-level-roadmap p { display: block; }.partner-level-roadmap small { color: var(--partner-muted); }.partner-level-roadmap strong { margin: .15rem 0; color: var(--partner-accent); font-size: 1.55rem; }.partner-level-roadmap p { margin: 0; color: var(--partner-muted); font-size: .82rem; line-height: 1.45; }.partner-level-roadmap article > i { position: absolute; top: .75rem; right: .75rem; color: var(--partner-success); }
.partner-level-note { display: flex; align-items: flex-start; gap: .8rem; margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--partner-accent-soft); color: var(--partner-muted); }.partner-level-note i { margin-top: .2rem; color: var(--partner-accent); }.partner-level-note p { margin: 0; }
.partner-level-rules,.partner-entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.partner-level-rules article,.partner-entry-grid article { padding: 1.35rem; border: 1px solid var(--partner-border); border-radius: 18px; background: var(--ld-surface, #fff); }
.partner-level-rules strong { display: block; color: var(--partner-accent); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1; }.partner-level-rules span { display: block; margin: .45rem 0; font-weight: 800; }.partner-level-rules small,.partner-entry-grid p { color: var(--partner-muted); }
.partner-entry-grid i { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: var(--partner-accent-soft); color: var(--partner-accent); }.partner-entry-grid h3 { margin: .85rem 0 .35rem; }.partner-entry-grid p { margin: 0; line-height: 1.55; }
.partner-disclosure-card { overflow: hidden; border: 1px solid var(--partner-border); border-radius: 18px; background: var(--ld-surface, #fff); box-shadow: 0 8px 22px rgba(23,32,51,.04); }
.partner-disclosure-card.is-current { border-color: var(--partner-accent); background: linear-gradient(145deg, var(--partner-accent-soft), var(--ld-surface, #fff)); box-shadow: 0 12px 28px color-mix(in srgb, var(--partner-accent) 14%, transparent); }
.partner-disclosure-card summary { min-height: 92px; display: flex; align-items: center; gap: .8rem; padding: 1.05rem; cursor: pointer; list-style: none; }
.partner-disclosure-card summary::-webkit-details-marker { display: none; }
.partner-disclosure-card summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--partner-accent) 35%, transparent); outline-offset: -3px; }
.partner-disclosure-card__title { flex: 1; font-size: 1rem; font-weight: 800; }.partner-disclosure-card__title > strong { display: block; color: inherit; font-size: inherit; }.partner-disclosure-card summary small { display: block; margin-top: .25rem; color: var(--partner-accent); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.partner-disclosure-card summary > .fa-chevron-down { width: auto; height: auto; margin-left: auto; background: none; color: var(--partner-muted); transition: transform .18s ease; }
.partner-disclosure-card[open] summary > .fa-chevron-down { transform: rotate(180deg); }
.partner-disclosure-card__content { padding: 0 1.15rem 1.2rem; border-top: 1px solid color-mix(in srgb, var(--partner-border) 72%, transparent); color: var(--partner-muted); font-size: .82rem; line-height: 1.55; }
.partner-disclosure-card__content h4 { margin: 1rem 0 .35rem; color: var(--ld-text, #172033); font-size: .78rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }.partner-disclosure-card__content ul { margin: 0; padding-left: 1.15rem; }.partner-disclosure-card__content li + li { margin-top: .25rem; }.partner-disclosure-card__content p { margin: .7rem 0 0; }
.partner-entry-grid .partner-disclosure-card { min-width: 0; }
.partner-internal-ladder .partner-disclosure-card summary { align-items: flex-start; flex-wrap: wrap; }.partner-internal-ladder .partner-disclosure-card__rate { flex: 0 0 100%; }.partner-internal-ladder .partner-disclosure-card__rate strong { color: var(--partner-accent); font-size: 1.5rem; }.partner-internal-ladder .partner-disclosure-card__title { flex: 1; }
.partner-internal-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }.partner-internal-rules article { padding: 1.25rem; border: 1px solid var(--partner-border); border-radius: 18px; background: var(--ld-surface, #fff); }.partner-internal-rules strong,.partner-internal-rules span,.partner-internal-rules small { display: block; }.partner-internal-rules strong { color: var(--partner-accent); font-size: 1.3rem; }.partner-internal-rules span { margin: .35rem 0; font-weight: 800; }.partner-internal-rules small { color: var(--partner-muted); line-height: 1.55; }
@media (hover: hover) {
  .partner-disclosure-card:not([open]):hover > .partner-disclosure-card__content { display: block; }
}
.partner-package-exp { margin-bottom: 1rem; }.partner-package-exp__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }.partner-package-exp__grid article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid var(--partner-border); border-radius: 14px; background: var(--ld-surface, #fff); }.partner-package-exp__grid i { color: var(--partner-accent); }.partner-package-exp__grid strong { grid-column: 2; }.partner-package-exp__empty { padding: 1.5rem; border: 1px dashed var(--partner-border); border-radius: 14px; color: var(--partner-muted); text-align: center; }

.partner-tree-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin: 1rem 0; }
.partner-tree-summary article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid var(--partner-border); border-radius: 16px; background: var(--ld-surface, #fff); box-shadow: 0 8px 22px rgba(23,32,51,.045); }
.partner-tree-summary i { width: 42px; height: 42px; display: grid; grid-row: 1 / span 2; place-items: center; border-radius: 13px; background: var(--partner-accent-soft); color: var(--partner-accent); }.partner-tree-summary span,.partner-tree-summary strong,.partner-tree-summary small { display: block; }.partner-tree-summary span,.partner-tree-summary small { color: var(--partner-muted); }.partner-tree-summary span { font-size: .75rem; font-weight: 800; text-transform: uppercase; }.partner-tree-summary strong { font-size: 1.25rem; }.partner-tree-summary small { grid-column: 1 / -1; font-size: .72rem; }
.partner-tree-panel { padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--partner-border); border-radius: 20px; background: color-mix(in srgb, var(--ld-surface, #fff) 90%, var(--partner-accent-soft)); }
.partner-tree-panel__header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }.partner-tree-panel__header h2 { margin: .25rem 0; }.partner-tree-panel__header p { margin: 0; color: var(--partner-muted); }
.partner-tree-legend { display: flex; gap: .8rem; color: var(--partner-muted); font-size: .78rem; white-space: nowrap; }.partner-tree-legend span { display: flex; align-items: center; gap: .35rem; }.partner-tree-legend i { width: 9px; height: 9px; border-radius: 50%; }.partner-tree-legend .is-partner { background: var(--partner-accent); }.partner-tree-legend .is-client { background: var(--partner-success); }
.partner-tree-list,.partner-tree-list ul { margin: 0; padding: 0; list-style: none; }.partner-tree-list ul { margin-left: 1.3rem; padding-left: 1.3rem; position: relative; }.partner-tree-list ul::before { content: ""; height: calc(100% - 22px); position: absolute; top: 0; left: 0; border-left: 2px solid color-mix(in srgb, var(--partner-accent) 25%, var(--partner-border)); }.partner-tree-list ul > li { position: relative; }.partner-tree-list ul > li::before { content: ""; width: 1.3rem; position: absolute; top: 31px; left: -1.3rem; border-top: 2px solid color-mix(in srgb, var(--partner-accent) 25%, var(--partner-border)); }
.partner-tree-node { margin: .75rem 0; overflow: hidden; border: 1px solid var(--partner-border); border-radius: 16px; background: var(--ld-surface, #fff); box-shadow: 0 7px 20px rgba(23,32,51,.04); }.partner-tree-node--partner { border-left: 4px solid var(--partner-accent); }.partner-tree-node--client { border-left: 4px solid var(--partner-success); }
.partner-tree-node__header { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; }.partner-tree-node__avatar { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--partner-accent-soft); color: var(--partner-accent); }.partner-tree-node--client .partner-tree-node__avatar { background: color-mix(in srgb, var(--partner-success) 11%, transparent); color: var(--partner-success); }
.partner-tree-node__identity { min-width: 0; flex: 1; }.partner-tree-node__identity > span { color: var(--partner-accent); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.partner-tree-node__identity h3 { margin: .05rem 0; font-size: 1rem; }.partner-tree-node__identity small { display: block; overflow: hidden; color: var(--partner-muted); text-overflow: ellipsis; white-space: nowrap; }.partner-tree-node__children { padding: .3rem .55rem; border-radius: 999px; background: var(--partner-accent-soft); color: var(--partner-accent); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.partner-tree-node__rates { display: flex; gap: .55rem; padding: 0 1rem .75rem; }.partner-tree-node__rates span { padding: .3rem .55rem; border-radius: 8px; background: color-mix(in srgb, var(--partner-border) 35%, transparent); color: var(--partner-muted); font-size: .72rem; }.partner-tree-node__rates strong { color: var(--ld-text, #172033); }
.partner-tree-node__rates .is-active { background: color-mix(in srgb, var(--partner-success) 13%, transparent); }.partner-tree-node__rates .is-active strong { color: var(--partner-success); }.partner-tree-node__rates .is-suspended { background: color-mix(in srgb, #f0a000 16%, transparent); }.partner-tree-node__rates .is-suspended strong { color: #9a5f00; }
.partner-tree-node__financials,.partner-tree-node__client-meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--partner-border); }.partner-tree-node__client-meta { grid-template-columns: repeat(4, minmax(0,1fr)); }.partner-tree-node__financials > div,.partner-tree-node__client-meta > div { padding: .75rem 1rem; border-right: 1px solid var(--partner-border); }.partner-tree-node__financials > div:last-child,.partner-tree-node__client-meta > div:last-child { border-right: 0; }.partner-tree-node__financials span,.partner-tree-node__financials strong,.partner-tree-node__financials small,.partner-tree-node__client-meta span,.partner-tree-node__client-meta strong { display: block; }.partner-tree-node__financials span,.partner-tree-node__financials small,.partner-tree-node__client-meta span { color: var(--partner-muted); font-size: .7rem; }.partner-tree-node__financials strong,.partner-tree-node__client-meta strong { margin: .12rem 0; font-size: .94rem; }
.partner-tree-empty { padding: 3rem 1rem; text-align: center; }.partner-tree-empty > i { color: var(--partner-accent); font-size: 2.5rem; }.partner-tree-empty h3 { margin: .8rem 0 .35rem; }.partner-tree-empty p { color: var(--partner-muted); }

.partner-training-hero > i { z-index: 1; color: rgba(255,255,255,.82); font-size: clamp(3rem, 8vw, 6rem); }.partner-training-hero--implementation { background: linear-gradient(135deg, color-mix(in srgb, var(--partner-success) 82%, #215193), #163b48); }
.partner-training-paths { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin: 1rem 0; }.partner-training-path { min-height: 310px; display: flex; flex-direction: column; padding: clamp(1.25rem, 3vw, 2rem); position: relative; border: 1px solid var(--partner-border); border-radius: 20px; background: var(--ld-surface, #fff); }.partner-training-path > i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--partner-accent-soft); color: var(--partner-accent); font-size: 1.25rem; }.partner-training-path__number { position: absolute; top: 1.25rem; right: 1.4rem; color: color-mix(in srgb, var(--partner-accent) 17%, transparent); font-size: 2rem; font-weight: 900; }.partner-training-path h2 { margin: 1.1rem 0 .5rem; }.partner-training-path p { flex: 1; color: var(--partner-muted); line-height: 1.65; }.partner-training-path .btn { align-self: flex-start; }.partner-training-path small { margin-top: .7rem; color: var(--partner-muted); }
.partner-training-process,.partner-training-verification { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }.partner-training-verification { grid-template-columns: repeat(4,minmax(0,1fr)); }.partner-training-process div,.partner-training-verification div { padding: 1rem; border-radius: 14px; background: var(--partner-accent-soft); }.partner-training-process strong,.partner-training-process span,.partner-training-verification span,.partner-training-verification strong,.partner-training-verification small { display: block; }.partner-training-process span,.partner-training-verification small { margin-top: .2rem; color: var(--partner-muted); }.partner-training-verification span { color: var(--partner-accent); font-size: .68rem; font-weight: 900; }.partner-training-verification strong { margin: .25rem 0; }
.partner-download-card--featured { border-color: color-mix(in srgb, var(--partner-accent) 45%, var(--partner-border)); background: linear-gradient(145deg, var(--partner-accent-soft), var(--ld-surface, #fff)); }
.partner-admin-verification { display: block; max-width: 460px; margin-bottom: .55rem; padding: .65rem; border-radius: 10px; background: var(--partner-accent-soft); color: var(--partner-muted); font-size: .78rem; line-height: 1.45; }.partner-admin-verification input { margin-right: .35rem; }

@media (max-width: 1100px) {
  .partner-tree-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .partner-training-verification { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .partner-network-hero,.partner-training-hero,.partner-tree-panel__header { align-items: flex-start; flex-direction: column; }.partner-network-hero__period { width: 100%; text-align: left; }
  .partner-level-hero-actions { width: 100%; }
  .partner-level-card__exp { padding: .8rem 0 0; border-top: 1px solid var(--partner-border); border-left: 0; text-align: left; }
  .partner-level-rules,.partner-entry-grid,.partner-internal-rules,.partner-training-paths,.partner-training-process { grid-template-columns: 1fr; }
  .partner-tree-node__financials,.partner-tree-node__client-meta { grid-template-columns: 1fr 1fr; }.partner-tree-node__financials > div,.partner-tree-node__client-meta > div { border-bottom: 1px solid var(--partner-border); }.partner-tree-node__identity small { white-space: normal; }.partner-tree-node__children { display: none; }
  .partner-training-hero > i { display: none; }
}
@media (max-width: 480px) {
  .partner-tree-summary,.partner-training-verification,.partner-tree-node__financials,.partner-tree-node__client-meta { grid-template-columns: 1fr; }
  .partner-tree-list ul { margin-left: .6rem; padding-left: .8rem; }.partner-tree-list ul > li::before { width: .8rem; left: -.8rem; }
  .partner-tree-node__rates { align-items: stretch; flex-direction: column; }
}
/* History of completed portal tasks: compact cards replace the legacy 12-column table. */
.task-history {
  max-width: 1280px;
  margin: 1rem auto 2rem;
  color: var(--ld-text);
}

.task-history__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.9rem;
}

.task-history__heading { min-width: 0; }
.task-history__eyebrow {
  margin: 0 0 0.2rem;
  color: var(--ld-link);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.task-history__heading h1 {
  margin: 0;
  color: var(--ld-text);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
}
.task-history__count {
  margin: 0.3rem 0 0;
  color: var(--ld-text-muted);
  font-size: 0.875rem;
}
.task-history__count strong { color: var(--ld-text); }
.task-history__clear {
  flex: none;
  border: 1px solid var(--ld-danger);
  border-radius: var(--ld-radius-sm);
  background: transparent;
  color: var(--ld-danger-ink);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}
.task-history__clear:hover { background: var(--ld-danger-bg); }
.task-history__clear:focus-visible,
.task-history__pagination a:focus-visible,
.task-history__item a:focus-visible {
  outline: 2px solid var(--ld-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--ld-brand);
}

.task-history__list { display: grid; gap: 0.65rem; }
.task-history__item { padding: 0.85rem 1.1rem; min-width: 0; }
.task-history__item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}
.task-history__item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.task-history__date {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--ld-text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.task-history__date time { color: var(--ld-text); font-weight: 600; }
.task-history__description {
  margin: 0.55rem 0 0;
  color: var(--ld-text);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.task-history__details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem 0.9rem;
  margin: 0.7rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--ld-border-soft);
}
.task-history__details > div { min-width: 0; }
.task-history__details dt {
  margin: 0 0 0.12rem;
  color: var(--ld-text-muted);
  font-size: 0.73rem;
  font-weight: 500;
}
.task-history__details dd {
  margin: 0;
  color: var(--ld-text);
  font-size: 0.86rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.task-history__details a { color: var(--ld-link); text-decoration: underline; text-underline-offset: 2px; }
.task-history__empty {
  padding: 2rem 1.25rem;
  color: var(--ld-text-muted);
  text-align: left;
}
.task-history__pagination { margin: 0.9rem 0; }
.task-history__pagination ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.task-history__pagination a,
.task-history__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-sm);
  background: var(--ld-surface);
  color: var(--ld-text);
  font-weight: 600;
  text-decoration: none;
}
.task-history__pagination a:hover { border-color: var(--ld-brand); color: var(--ld-link); }
.task-history__pagination [aria-current="page"] {
  border-color: var(--ld-brand);
  background: var(--ld-brand);
  color: var(--ld-brand-ink);
}
.task-history__pagination .task-history__ellipsis { color: var(--ld-text-muted); }

@media (max-width: 800px) {
  .task-history__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .task-history__header { align-items: stretch; flex-direction: column; padding: 0.9rem; }
  .task-history__clear { align-self: flex-start; }
  .task-history__item { padding: 0.8rem 0.9rem; }
  .task-history__item-head { flex-direction: column; }
  .task-history__date { white-space: normal; }
}

/* White-label editor uses the same panel surfaces and keeps every action readable at 375px. */
.ld-white-label { margin: 26px 0 40px; padding: 26px; border: 1px solid var(--ld-border, #dfe3ed); border-radius: 18px; background: var(--ld-surface, #fff); color: var(--ld-text, #1a2232); }
.ld-white-label__intro { display: grid; grid-template-columns: minmax(0, 1fr) 215px; gap: 20px; align-items: start; margin-bottom: 20px; }
.ld-white-label__eyebrow { color: var(--ld-brand, #6c4cf1); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.ld-white-label h2 { margin: 6px 0; font-size: 24px; font-weight: 750; }
.ld-white-label h3 { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.ld-white-label p { line-height: 1.5; }
.ld-white-label__intro p, .ld-white-label__price small, .ld-white-label__hint, .ld-white-label__summary small { color: var(--ld-text-muted, #596273); }
.ld-white-label__price { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 14px; background: var(--ld-brand-soft, #f4f2ff); }
.ld-white-label__price strong { font-size: 24px; line-height: 1.2; }
.ld-white-label__price span { font-size: 13px; }
.ld-white-label__price small { font-size: 12px; }
.ld-white-label__locked { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px; border: 1px dashed var(--ld-border, #dfe3ed); border-radius: 14px; }
.ld-white-label__locked p { margin: 0; }
.ld-white-label__layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; }
.ld-white-label__editor { min-width: 0; }
.ld-white-label__form, .ld-white-label__logo-form { display: grid; gap: 10px; justify-items: start; }
.ld-white-label label { display: block; margin-top: 5px; font-weight: 650; }
.ld-white-label input[type="text"] { width: min(100%, 560px); padding: 9px 12px; border: 1px solid var(--ld-border, #bdc4d0); border-radius: 9px; color: var(--ld-text, #1a2232); background: var(--ld-surface, #fff); }
.ld-white-label input[type="text"]:focus-visible, .ld-white-label input[type="file"]:focus-visible { outline: 2px solid var(--ld-brand, #6c4cf1); outline-offset: 2px; }
.ld-white-label__colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: min(100%, 560px); }
.ld-white-label__colors input { width: 70px; height: 42px; padding: 2px; border: 1px solid var(--ld-border, #bdc4d0); border-radius: 9px; background: transparent; }
.ld-white-label__optional { color: var(--ld-text-muted, #596273); font-size: 12px; font-weight: 400; }
.ld-white-label__hint { max-width: 560px; margin: 0 0 5px; font-size: 12px; }
.ld-white-label__logo-form, .ld-white-label__dns { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ld-border, #dfe3ed); }
.ld-white-label__dns code { overflow-wrap: anywhere; }
.ld-white-label__verified, .ld-white-label__active { color: #12683b; font-weight: 700; }
.ld-white-label__summary { display: grid; align-content: start; gap: 16px; }
.ld-white-label__summary form { display: grid; gap: 8px; }
.ld-white-label__preview { display: grid; justify-items: start; gap: 10px; padding: 18px; min-height: 190px; border: 1px solid var(--ld-border, #dfe3ed); border-top: 6px solid var(--ld-brand-primary, #861c33); border-radius: 14px; background: var(--ld-surface, #fff); box-shadow: 0 12px 26px rgba(20, 28, 50, .08); }
.ld-white-label__preview img { max-width: 160px; max-height: 45px; object-fit: contain; }
.ld-white-label__preview strong { font-size: 17px; }
.ld-white-label__preview span { font-size: 12px; }
.ld-white-label__preview-button { display: inline-block; padding: 7px 12px; border-radius: 7px; font-weight: 700; background: var(--ld-brand-primary, #861c33); color: var(--ld-brand-ink, #fff); }
@media (max-width: 760px) {
  .ld-white-label { padding: 18px; }
  .ld-white-label__intro, .ld-white-label__layout { grid-template-columns: 1fr; }
  .ld-white-label__price { max-width: 320px; }
  .ld-white-label__locked { align-items: start; flex-direction: column; }
}

/* Membership answers remain readable in both the group list and the picker panel. */
.membership-history { margin-top: 1rem; }
.membership-history > h6 { font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1.5; margin: 0 0 .75rem; }
.membership-history__entry { margin: .75rem 0; padding: .75rem; border: 1px solid var(--ld-border, #e6e8f0); border-radius: .5rem; }
.membership-history__entry > summary { cursor: pointer; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.membership-history__entry > p { font-size: .875rem; line-height: 1.5; margin: .75rem 0; }
.membership-history__entry .gm-details__label,
.membership-history__entry .group-details-panel__label { text-transform: none; font-size: .875rem; line-height: 1.5; font-weight: 600; margin-top: .75rem; }
.membership-history__entry .gm-details__text,
.membership-history__entry .group-details-panel__text { font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
/* Public company sources: fixed columns and one shared text edge at every width. */
.panorama-sources { padding: 1.25rem; color: var(--ld-text); background: var(--ld-surface); }
.panorama-sources h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
.panorama-sources h2, .panorama-mode legend { font-size: 1.1rem; font-weight: 600; }
.panorama-note { color: var(--ld-text-muted); font-size: .875rem; }
.panorama-mode { border: 0; padding: 0; margin: 1rem 0; }
.panorama-mode label { margin-right: 1rem; }
.panorama-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); gap: 1rem; }
.panorama-fields > [hidden], .panorama-tree [hidden] { display: none !important; }
.panorama-tree { max-height: 24rem; overflow-y: auto; border: 1px solid var(--ld-border); border-radius: .5rem; margin: .5rem 0; }
.panorama-branch { padding: .5rem .75rem; border-bottom: 1px solid var(--ld-border); }
.panorama-branch:last-child { border-bottom: 0; }
.panorama-branch summary { cursor: pointer; font-weight: 600; }
.panorama-leaves { display: grid; gap: .25rem; padding-top: .5rem; }
.panorama-leaves label { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .5rem; margin: 0; padding: .2rem 0; }
.panorama-leaves input { margin-top: .3rem; }
.panorama-selected { border-top: 1px solid var(--ld-border); padding-top: 1rem; margin-top: 1rem; }
.panorama-selected ul { list-style: none; padding: 0; }
.panorama-selected li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; border-bottom: 1px solid var(--ld-border); padding: .4rem 0; }
.panorama-selected li form { margin: 0; }
.panorama-results-table { overflow-x: auto; }
.panorama-results-table table { width: 100%; color: var(--ld-text); }
.panorama-results-table th, .panorama-results-table td { padding: .65rem; border-bottom: 1px solid var(--ld-border); text-align: left; overflow-wrap: anywhere; }
@media (max-width: 600px) { .panorama-fields { grid-template-columns: minmax(0, 1fr); } .panorama-sources { padding: .85rem; } }

.panorama-extract-controls { display: grid; grid-template-columns: minmax(5rem, 9rem) max-content; gap: 1rem; margin: .5rem 0 1rem; align-items: center; }
.panorama-result-links { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.panorama-results-table td { overflow-wrap: anywhere; min-width: 8rem; }

.panorama-sources .form-control { color: var(--ld-text); background: var(--ld-surface); border-color: var(--ld-border); }
.panorama-sources .form-control::placeholder { color: var(--ld-text-muted); opacity: 1; }

.panorama-sources form { padding: 0; color: inherit; background: transparent; box-shadow: none; }
.panorama-selected button { min-width: 2.75rem; min-height: 2.75rem; }

/* Town suggestions share the source form's existing alignment and theme tokens. */
.panorama-location { min-width: 0; }
.panorama-location-input { position: relative; }
.panorama-location-options {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    max-height: 16rem; overflow-y: auto; margin: 0; padding: .25rem;
    list-style: none; border: 1px solid var(--ld-border);
    border-radius: .5rem; background: var(--ld-surface); color: var(--ld-text);
    box-shadow: 0 .4rem 1rem rgba(0,0,0,.16);
}
.panorama-location-options[hidden] { display: none; }
.panorama-location-options [role="option"] { padding: .6rem .75rem; cursor: pointer; overflow-wrap: anywhere; }
.panorama-location-options [role="option"]:hover,
.panorama-location-options [aria-selected="true"] { background: var(--ld-bg); outline: 2px solid var(--ld-brand); outline-offset: -2px; }
/* Kampanie sekcji „Maile i telefony”: karty w stałej siatce (fragments/panorama_firm/campaigns.html). */
.panorama-campaign-grid { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.panorama-campaign-card { display: grid; gap: .75rem; align-content: start; padding: 1rem; color: var(--ld-text); background: var(--ld-surface); border: 1px solid var(--ld-border); border-radius: var(--ld-radius, .75rem); min-width: 0; }
.panorama-campaign-card.is-current { border-color: var(--ld-brand); box-shadow: 0 0 0 1px var(--ld-brand); }
.panorama-campaign-card--new { border-style: dashed; }
.panorama-campaign-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.panorama-campaign-card__name { font-weight: 600; color: var(--ld-link, var(--ld-brand)); overflow-wrap: anywhere; }
.panorama-campaign-card__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.panorama-campaign-card__stats dt { font-weight: 400; font-size: .8125rem; color: var(--ld-text-muted); }
.panorama-campaign-card__stats dd { margin: 0; font-size: 1.25rem; font-weight: 600; }
.panorama-campaign-card__rename summary { cursor: pointer; font-size: .875rem; color: var(--ld-text-muted); }
.panorama-campaign-card__rename form { margin-top: .5rem; }
.panorama-campaign-card__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.panorama-campaign-card .panorama-note { margin: 0; }
.panorama-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; align-items: center; margin: 0; }
.panorama-inline-form__label { grid-column: 1 / -1; margin: 0; font-size: .8125rem; color: var(--ld-text-muted); }
.panorama-icon-button { min-width: 2.75rem; min-height: 2.75rem; }
.panorama-campaign-create { display: grid; gap: .5rem; }
.panorama-campaign-create h2 { margin: 0; }
.panorama-server-unavailable { color: var(--ld-warning-ink); background: var(--ld-warning-bg); border-radius: var(--ld-radius-sm, .5rem); padding: .5rem .75rem; }
.panorama-console .panorama-console__server.is-warning { color: var(--ld-warning-ink); background: var(--ld-warning-bg); }
/* Drabinka zwężania konsoli (max-width: 1350px) chowa etykiety chipów. Nazwa kampanii Panoramy jest jedyną
   informacją paska, której nie niesie ikona, więc zostaje zawsze (z wielokropkiem), a serwer od 992 px. */
.panorama-console .panorama-console__campaign .campaign-console__chip-label,
.panorama-console .panorama-console__server .campaign-console__chip-label { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 991.98px) { .panorama-console .panorama-console__server .campaign-console__chip-label { display: none; } .panorama-console .panorama-console__campaign .campaign-console__chip-label { max-width: 9rem; } }

/* Voivodeships under the town field and the towns of the chosen one; one fixed grid keeps both on the same columns. */
.panorama-voivodeships,
.panorama-towns-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .35rem; }
.panorama-voivodeships { margin-top: .75rem; }
.panorama-voivodeships-label { grid-column: 1 / -1; font-weight: 600; }
.panorama-voivodeships .panorama-chip[data-voivodeship=""] { grid-column: 1 / -1; }
.panorama-chip,
.panorama-town {
    width: 100%; min-height: 2.25rem; padding: .3rem .6rem; font-size: .875rem; text-align: left; overflow-wrap: anywhere;
    color: var(--ld-text); background: var(--ld-surface); border: 1px solid var(--ld-border); border-radius: .5rem; cursor: pointer;
}
.panorama-chip:hover,
.panorama-town:hover { border-color: var(--ld-brand); }
.panorama-chip:focus-visible,
.panorama-town:focus-visible { outline: 2px solid var(--ld-brand); outline-offset: 2px; }
.panorama-chip[aria-pressed="true"],
.panorama-town[aria-pressed="true"] { font-weight: 600; background: var(--ld-bg); border-color: var(--ld-brand); box-shadow: inset 0 0 0 1px var(--ld-brand); }
.panorama-towns { margin-top: .75rem; }
.panorama-towns[hidden] { display: none; }
.panorama-towns .panorama-note { margin: 0 0 .35rem; }
.panorama-towns-list { max-height: 18rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
/* Contact-data filter of the result list: link chips on the same fixed grid idiom as the voivodeships, each
   with the number of companies it would leave; the chosen one is marked by aria-current, not by colour alone. */
.panorama-contact-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .35rem; margin: 0 0 .5rem; }
.panorama-contact-filter__label { grid-column: 1 / -1; font-weight: 600; }
.panorama-contact-filter .panorama-chip { display: flex; justify-content: space-between; align-items: center; gap: .5rem; text-decoration: none; }
.panorama-contact-filter .panorama-chip:hover { color: var(--ld-text); text-decoration: none; }
.panorama-contact-filter .panorama-chip[aria-current="true"] { font-weight: 600; background: var(--ld-bg); border-color: var(--ld-brand); box-shadow: inset 0 0 0 1px var(--ld-brand); }
.panorama-contact-filter__count { color: var(--ld-text-muted); font-variant-numeric: tabular-nums; }
.panorama-filter-warning { color: var(--ld-warning-ink); background: var(--ld-warning-bg); border-radius: var(--ld-radius-sm, .5rem); padding: .5rem .75rem; }
.panorama-page-status { font-weight: 600; }
/* Phones keep only the town search; the voivodeship shortcut would crowd the narrow form. */
@media (max-width: 600px) { .panorama-voivodeships, .panorama-towns { display: none !important; } }

/* Post text stored for the recent posts list is plain text rendered escaped; keep its line breaks. */
.ld-post-content-text { white-space: pre-line; overflow-wrap: anywhere; }