/* Dashboard additions — strictly follow main.css design tokens.
   Font: AvenirNextCyr; radius: 12/20px; primary: rgba(var(--bg-d), 1). */

/* ---------- Lead quality / accent badges ---------- */
.lead-badge {
    align-items: center;
    border-radius: 1.25rem;
    color: #fff;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: clamp(10px, .6527vw, .625rem);
    font-weight: 750;
    gap: 4px;
    letter-spacing: -.2px;
    line-height: 12px;
    padding: clamp(4px, .2611vw, .25rem) clamp(8px, .5222vw, .5rem);
    text-transform: uppercase;
    width: fit-content;
}
/* Specialization tag (single blue pill) — replaces old quality/CRM badges */
.lead-badge--spec     { background: rgba(var(--bg-d), 1); color: #fff; }
/* Quality wrapper: holds the specialization tag */
.lead-card__quality { align-items: center; display: inline-flex; gap: 4px; }

/* ---- PREPAID corner ribbon (card/grid modes) ---- */
.order-list__item[data-prepaid] .main-order { position: relative; }
.prepaid-ribbon {
    height: 78px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 78px;
    z-index: 3;
}
.prepaid-ribbon__txt {
    background: #2CB67D;
    box-shadow: 0 1px 4px rgba(6, 32, 44, .2);
    color: #fff;
    font-family: var(--font-family2);
    font-size: 9px;
    font-weight: 750;
    left: -6px;
    letter-spacing: .6px;
    line-height: 18px;
    position: absolute;
    text-align: center;
    top: 14px;
    transform: rotate(45deg);
    width: 110px;
}
.lead-badge--new      { background: rgba(var(--bg-d), 1); }
.lead-badge--urgent   { background: rgba(var(--cl-o), 1); }
.lead-badge--sold     { background: rgba(var(--cl-n), 1); color: #fff; }
.lead-badge--taken    { background: rgba(var(--cl-j), 1); color: rgba(var(--cl-q), 1); }
.lead-badge--call     { background: rgba(var(--bg-o), 1); }
.lead-badge--subs     { background: rgba(var(--cl-q), 1); }
.lead-badge--ghost    { background: rgba(var(--bg-u), 1); color: rgba(var(--cl-q), 1); }

/* ---------- Lead source (minimal: dot + text, no pill background) ---------- */
.lead-source {
    align-items: center;
    color: rgba(var(--cl-q), 1);
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: -.1px;
    line-height: 1;
    width: fit-content;
}
.lead-source__dot {
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    width: 8px;
}
.lead-source--google     .lead-source__dot { background: rgba(var(--bg-d), 1); }
.lead-source--googleads  .lead-source__dot { background: rgba(var(--cl-h), 1); }
.lead-source--meta       .lead-source__dot { background: rgba(var(--bg-d), 1); }
.lead-source--instagram  .lead-source__dot { background: #e4405f; }
.lead-source--tiktok     .lead-source__dot { background: rgba(var(--cl-q), 1); }
.lead-source--seo        .lead-source__dot { background: rgba(var(--bg-d), 1); }
.lead-source--website    .lead-source__dot { background: rgba(var(--bg-d), 1); }
.lead-source--app        .lead-source__dot { background: rgba(var(--bg-o), 1); }
.lead-source--partner    .lead-source__dot { background: rgba(var(--cl-h), 1); }
.lead-source--referral   .lead-source__dot { background: rgba(var(--bg-n), 1); }
.lead-source--email      .lead-source__dot { background: rgba(var(--bg-d), 1); }
.lead-source--content    .lead-source__dot { background: #00b8d9; }
.lead-source--callcenter .lead-source__dot { background: rgba(var(--cl-o), 1); }
.lead-source--other      .lead-source__dot { background: rgba(var(--cl-n), 1); }

/* ---------- Subscription pill on lead card (Basic / Pro / Premium) ---------- */
.subs-pill {
    align-items: center;
    border-radius: 100px;
    color: #fff;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 750;
    gap: 4px;
    letter-spacing: -.1px;
    line-height: 1;
    padding: 5px 10px;
    text-transform: uppercase;
    width: fit-content;
}
.subs-pill--basic   { background: rgba(var(--bg-d), .85); }
.subs-pill--pro     { background: rgba(var(--bg-o), 1); }
.subs-pill--premium { background: linear-gradient(135deg, rgba(var(--cl-h), 1), rgba(var(--cl-h), .8)); }

/* ---------- Lead card extended structure (uses existing .main-order shell) ---------- */
.lead-card__meta {
    align-items: center;
    color: rgba(var(--cl-e), 1);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-family2);
    font-size: 12px;
    gap: 10px;
    margin-bottom: 10px;
}
.lead-card__meta b { color: rgba(var(--cl-q), 1); font-weight: 600; }
.lead-card__badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
/* .lead-card__desc defined below with line-clamp */
.lead-card__tags {
    align-items: center;
    color: rgba(var(--cl-e), 1);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-family2);
    font-size: 12px;
    gap: 10px;
}
.lead-card__tag {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}
.lead-card__tag b { color: rgba(var(--cl-q), 1); font-weight: 600; }
.lead-card__footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: space-between;
    margin-top: auto;
}
.lead-card__price {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 22px;
    font-weight: 750;
}
.lead-card__price s {
    color: rgba(var(--cl-j), 1);
    font-size: 14px;
    font-weight: 500;
    margin-right: 8px;
}
.lead-card__discount {
    color: rgba(var(--bg-d), 1);
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
}

/* Big BUY LEAD button — extends .blue-btn shape */
.buy-btn {
    align-items: center;
    background: rgba(var(--bg-d), 1);
    border: 0;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 16px;
    font-weight: 750;
    gap: 10px;
    justify-content: center;
    letter-spacing: .2px;
    min-height: 48px;
    padding: 14px 28px;
    text-transform: uppercase;
    transition: all .25s;
    width: auto;
}
.buy-btn:hover  { background: rgba(var(--bg-d), .88); }
.buy-btn--green { background: rgba(var(--bg-d), 1); }
.buy-btn--green:hover { background: rgba(var(--bg-d), .88); }
.buy-btn--block { width: 100%; }

@media (max-width: 768px) {
    .buy-btn--sticky {
        bottom: 0;
        left: 0;
        position: sticky;
        width: 100%;
        z-index: 10;
    }
}

/* ---------- Filters panel ---------- */
.filters-section {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 18px 20px;
}
.filters-section__head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 14px;
}
.filters-section__title {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 16px;
    font-weight: 750;
}
.filters-section__hint {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 12px;
}
.filters-row {
    align-items: center;
    border-top: 1px dashed rgba(var(--bg-s), 1);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}
.filters-row:first-of-type { border-top: 0; padding-top: 0; }
.filters-row__label {
    color: rgba(var(--cl-q), 1);
    flex: 0 0 130px;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
}
.filter-chip {
    align-items: center;
    background: rgba(var(--bg-u), 1);
    border: 1px solid transparent;
    border-radius: 100px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    line-height: 1;
    padding: 8px 14px;
    transition: all .2s;
}
.filter-chip:hover         { background: rgba(var(--bg-s), 1); }
.filter-chip--active       { background: rgba(var(--bg-d), 1); color: #fff; }
.filter-chip--hot.filter-chip--active     { background: rgba(var(--bg-n), 1); }
.filter-chip--warm.filter-chip--active    { background: rgba(var(--cl-h), 1); }
.filter-chip--cold.filter-chip--active    { background: rgba(var(--bg-d), .85); }
.filter-chip--prepaid.filter-chip--active { background: rgba(var(--bg-d), 1); }

.filters-section__actions {
    align-items: center;
    border-top: 1px dashed rgba(var(--bg-s), 1);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    padding-top: 14px;
}
.btn-link {
    background: transparent;
    border: 0;
    color: rgba(var(--bg-d), 1);
    cursor: pointer;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 0;
}
.btn-ghost {
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 10px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
}
.btn-ghost:hover { background: rgba(var(--bg-s), 1); }
.btn-ghost--green { background: rgba(var(--bg-d), 1); color: #fff; }
.btn-ghost--green:hover { background: rgba(var(--bg-d), .88); }

/* ---------- Price filter inputs ---------- */
.price-presets {
    align-items: center;
    border-radius: 8px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    gap: 10px;
    padding: 8px 10px;
}
.price-presets:hover { background: rgba(var(--bg-i), 1); }
.price-presets input { accent-color: rgba(var(--bg-d), 1); }

.price-custom {
    border-top: 1px dashed rgba(var(--bg-s), 1);
    margin-top: 8px;
    padding-top: 10px;
}
.price-custom__hint {
    color: rgba(var(--cl-e), 1);
    display: block;
    font-family: var(--font-family2);
    font-size: 11px;
    margin-bottom: 6px;
}
.price-inputs {
    align-items: center;
    display: flex;
    gap: 8px;
}
.price-inputs input {
    background: rgba(var(--bg-i), 1);
    border: 1px solid rgba(var(--bg-s), 1);
    border-radius: 8px;
    color: rgba(var(--cl-q), 1);
    flex: 1;
    font-family: var(--font-family2);
    font-size: 13px;
    min-width: 0;
    outline: none;
    padding: 8px 10px;
}
.price-inputs input:focus { border-color: rgba(var(--bg-d), 1); }
.price-inputs span { color: rgba(var(--cl-e), 1); }

/* ---------- Filter creation modal ---------- */
.filter-modal {
    align-items: flex-start;
    bottom: 0;
    display: none;
    justify-content: center;
    left: 0;
    overflow-y: auto;
    padding: 40px 16px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 200;
}
.filter-modal.is-open { display: flex; }
.filter-modal__overlay {
    background: rgba(15, 18, 25, .42);
    inset: 0;
    position: absolute;
}
.filter-modal__body {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    max-width: 580px;
    padding: 26px 30px 24px;
    position: relative;
    width: 100%;
    z-index: 1;
}
.filter-modal__close {
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 50%;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    font-size: 18px;
    height: 32px;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 18px;
    top: 18px;
    width: 32px;
}
.filter-modal__close:hover { background: rgba(var(--bg-s), 1); }
.filter-modal__title {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 22px;
    font-weight: 750;
    margin: 0 0 6px;
    padding-right: 36px;
}
.filter-modal__subtitle {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    margin-bottom: 20px;
}
.filter-modal__field {
    display: block;
    margin-bottom: 18px;
}
.filter-modal__field-label {
    color: rgba(var(--cl-e), 1);
    display: block;
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.filter-modal__field input[type="text"],
.filter-modal__field input[type="number"] {
    background: rgba(var(--bg-i), 1);
    border: 1px solid rgba(var(--bg-s), 1);
    border-radius: 10px;
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 14px;
    outline: none;
    padding: 10px 12px;
    width: 100%;
}
.filter-modal__field input:focus { border-color: rgba(var(--bg-d), 1); }

.filter-modal .chip-group { gap: 6px; }
.filter-modal .chip-pick {
    align-items: center;
    background: rgba(var(--bg-u), 1);
    border-radius: 100px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 14px;
    transition: background .15s;
    user-select: none;
}
.filter-modal .chip-pick:hover { background: rgba(var(--bg-s), 1); }
.filter-modal .chip-pick input { display: none; }
.filter-modal .chip-pick.is-checked { background: rgba(var(--bg-d), 1); color: #fff; }

.filter-modal__check {
    align-items: center;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    gap: 10px;
    margin-bottom: 20px;
    padding-top: 6px;
}
.filter-modal__check input { accent-color: rgba(var(--bg-d), 1); }
.filter-modal__foot {
    border-top: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
}

/* ---------- Saved filters bar ---------- */
.saved-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.saved-filter {
    align-items: center;
    background: rgba(var(--cl-q), 1);
    border-radius: 100px;
    color: #fff;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    padding: 7px 14px;
}
.saved-filter__push {
    background: rgba(var(--bg-d), 1);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}
.saved-filter__edit,
.saved-filter__remove {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    opacity: .6;
    padding: 0 2px;
}
.saved-filter__edit:hover,
.saved-filter__remove:hover { opacity: 1; }
.saved-filter__name {
    cursor: pointer;
}
.saved-filter__create {
    align-items: center;
    background: rgba(var(--bg-d), 1);
    border: 0;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 700;
    gap: 4px;
    line-height: 1;
    padding: 7px 14px;
}
.saved-filter__create:hover { background: rgba(var(--bg-d), .88); }

/* ---------- Section title row ---------- */
.section-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}
.section-counter {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 13px;
}
.section-counter b { color: rgba(var(--bg-d), 1); font-weight: 750; }

/* ---------- Live activity strip ---------- */
.live-strip {
    align-items: center;
    background: rgba(var(--bg-i), 1);
    border-radius: 10px;
    color: rgba(var(--cl-p), 1);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-family2);
    font-size: 12px;
    gap: 18px;
    margin-bottom: 14px;
    padding: 10px 16px;
}
.live-strip__dot {
    animation: blink 1.4s infinite;
    background: rgba(var(--bg-d), 1);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}
.live-strip b { color: rgba(var(--cl-q), 1); font-weight: 700; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- Consultation tooltip ---------- */
.consult-tooltip {
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(var(--bg-i), 1) 0%, #eaf6fd 100%);
    border-radius: 10px;
    color: rgba(var(--cl-q), 1);
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    gap: 12px;
    line-height: 1.45;
    margin-bottom: 16px;
    padding: 14px 18px;
}
.consult-tooltip__icon {
    align-items: center;
    background: rgba(var(--bg-d), 1);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: 0 0 28px;
    font-weight: 750;
    height: 28px;
    justify-content: center;
    width: 28px;
}

/* ---------- Balance widget ---------- */
.balance-stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 20px;
}
.balance-stats__item {
    background: #fff;
    border-radius: 10px;
    padding: 16px 18px;
}
.balance-stats__label {
    color: rgba(var(--cl-e), 1);
    display: block;
    font-family: var(--font-family2);
    font-size: 12px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.balance-stats__value {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 22px;
    font-weight: 750;
}
.balance-stats__sub {
    color: rgba(var(--bg-d), 1);
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}
.balance-stats__sub--neg { color: rgba(var(--bg-n), 1); }

.balance-table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}
.balance-table table { border-collapse: collapse; width: 100%; }
.balance-table th,
.balance-table td {
    border-bottom: 1px solid rgba(var(--bg-u), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    padding: 12px 16px;
    text-align: left;
}
.balance-table th {
    background: rgba(var(--bg-i), 1);
    color: rgba(var(--cl-e), 1);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.balance-table tr:last-child td { border-bottom: 0; }
.balance-table .balance-table__pos { color: rgba(var(--bg-d), 1); font-weight: 700; }
.balance-table .balance-table__neg { color: rgba(var(--bg-n), 1); font-weight: 700; }

/* ---------- My Leads (CRM) layout ---------- */
.crm-card {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 14px;
    padding: 18px 20px;
}
.crm-card__head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 14px;
}
.crm-card__client {
    align-items: center;
    display: flex;
    gap: 12px;
}
.crm-card__avatar {
    align-items: center;
    background: rgba(var(--bg-u), 1);
    border-radius: 50%;
    color: rgba(var(--bg-d), 1);
    display: flex;
    font-family: var(--font-family2);
    font-size: 18px;
    font-weight: 750;
    height: 48px;
    justify-content: center;
    width: 48px;
}
.crm-card__name {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 16px;
    font-weight: 750;
}
.crm-card__sub {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 12px;
}
.crm-card__info {
    display: grid;
    gap: 8px 24px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 14px;
}
.crm-row {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 13px;
}
.crm-row__label {
    color: rgba(var(--cl-e), 1);
    display: inline-block;
    margin-right: 6px;
    min-width: 70px;
}
.crm-row__value { font-weight: 600; }
.crm-card__problem {
    background: rgba(var(--bg-i), 1);
    border-radius: 10px;
    color: rgba(var(--cl-p), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 14px;
    padding: 12px 14px;
}
.crm-card__actions {
    align-items: center;
    border-top: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
}
.crm-action {
    align-items: center;
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 10px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    padding: 9px 14px;
    text-decoration: none;
}
.crm-action:hover { background: rgba(var(--bg-s), 1); }
.crm-action--primary { background: rgba(var(--bg-d), 1); color: #fff; }
.crm-action--primary:hover { background: rgba(var(--bg-d), .88); }
.crm-action--call    { background: rgba(var(--bg-d), 1); color: #fff; }
.crm-action--call:hover { background: rgba(var(--bg-d), .88); }

/* CRM status dropdown */
.crm-status {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--cl-j), 1);
    border-radius: 10px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    padding: 8px 14px;
    position: relative;
    user-select: none;
}
.crm-status__dot {
    border-radius: 50%;
    height: 8px;
    width: 8px;
}
.crm-status[data-status="new"]    .crm-status__dot { background: rgba(var(--bg-d), 1); }
.crm-status[data-status="bought"] .crm-status__dot { background: rgba(var(--bg-o), 1); }
.crm-status[data-status="contact"].crm-status__dot,
.crm-status[data-status="contact"] .crm-status__dot { background: rgba(var(--cl-h), 1); }
.crm-status[data-status="noanswer"] .crm-status__dot { background: rgba(var(--cl-j), 1); }
.crm-status[data-status="appointment"] .crm-status__dot { background: #00b8d9; }
.crm-status[data-status="working"] .crm-status__dot { background: rgba(var(--bg-d), 1); }
.crm-status[data-status="sold"]   .crm-status__dot { background: rgba(var(--bg-d), 1); }
.crm-status[data-status="refuse"] .crm-status__dot { background: rgba(var(--cl-n), 1); }
.crm-status[data-status="bad"]    .crm-status__dot { background: rgba(var(--bg-n), 1); }
.crm-status[data-status="refund"] .crm-status__dot { background: rgba(var(--cl-o), 1); }
.crm-status[data-status="closed"] .crm-status__dot { background: rgba(var(--cl-q), 1); }
.crm-status__arrow {
    border: solid rgba(var(--cl-e), 1);
    border-width: 0 2px 2px 0;
    display: inline-block;
    margin-left: 4px;
    padding: 3px;
    transform: rotate(45deg);
}
.crm-status__menu {
    background: #fff;
    border-radius: 10px;
    display: none;
    left: 0;
    list-style: none;
    margin: 0;
    min-width: 220px;
    padding: 6px 0;
    position: absolute;
    top: calc(100% + 6px);
    z-index: 20;
}
.crm-status.is-open .crm-status__menu { display: block; }
.crm-status__menu li {
    align-items: center;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    gap: 8px;
    padding: 8px 14px;
}
.crm-status__menu li:hover { background: rgba(var(--bg-i), 1); }
.crm-status__menu li::before {
    border-radius: 50%;
    content: "";
    flex: 0 0 8px;
    height: 8px;
    width: 8px;
}
.crm-status__menu li[data-value="new"]::before { background: rgba(var(--bg-d), 1); }
.crm-status__menu li[data-value="bought"]::before { background: rgba(var(--bg-o), 1); }
.crm-status__menu li[data-value="contact"]::before { background: rgba(var(--cl-h), 1); }
.crm-status__menu li[data-value="noanswer"]::before { background: rgba(var(--cl-j), 1); }
.crm-status__menu li[data-value="appointment"]::before { background: #00b8d9; }
.crm-status__menu li[data-value="working"]::before { background: rgba(var(--bg-d), 1); }
.crm-status__menu li[data-value="sold"]::before { background: rgba(var(--bg-d), 1); }
.crm-status__menu li[data-value="refuse"]::before { background: rgba(var(--cl-n), 1); }
.crm-status__menu li[data-value="bad"]::before { background: rgba(var(--bg-n), 1); }
.crm-status__menu li[data-value="refund"]::before { background: rgba(var(--cl-o), 1); }
.crm-status__menu li[data-value="closed"]::before { background: rgba(var(--cl-q), 1); }

/* ---------- Lead Card detail page ---------- */
.lead-detail {
    background: #fff;
    border-radius: 10px;
    padding: 22px 24px;
}
.lead-detail__head {
    align-items: flex-start;
    border-bottom: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 16px;
}
.lead-detail__title {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 22px;
    font-weight: 750;
    margin: 8px 0 6px;
}
.lead-detail__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 320px;
}
@media (max-width: 900px) {
    .lead-detail__grid { grid-template-columns: 1fr; }
}
.lead-detail__section {
    margin-bottom: 18px;
}
.lead-detail__section-title {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.lead-detail__desc {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 15px;
    line-height: 1.55;
}
.lead-detail__side {
    background: rgba(var(--bg-i), 1);
    border-radius: 10px;
    padding: 18px 20px;
}
.lead-detail__price {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 28px;
    font-weight: 750;
    margin-bottom: 6px;
}
.lead-detail__price s { color: rgba(var(--cl-j), 1); font-size: 16px; font-weight: 500; margin-right: 10px; }
.lead-detail__price-note {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 12px;
    margin-bottom: 14px;
}
.lead-detail__price-note b { color: rgba(var(--bg-d), 1); }

/* ---------- Page-wide chip group ---------- */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---------- Filter dropdown bar ---------- */
.filters-bar {
    align-items: center;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 14px;
}
.filters-bar__spacer { flex: 1; }

.filter-dd { position: relative; }
.filter-dd__btn {
    align-items: center;
    background: rgba(var(--bg-u), 1);
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    line-height: 1;
    padding: 10px 14px;
    transition: background .2s;
}
.filter-dd__btn:hover { background: rgba(var(--bg-s), 1); }
.filter-dd__btn b { color: rgba(var(--bg-d), 1); font-weight: 750; }
.filter-dd__btn .filter-dd__chev {
    border: solid rgba(var(--cl-e), 1);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
}
.filter-dd.is-open .filter-dd__btn       { background: rgba(var(--bg-d), 1); color: #fff; border-color: rgba(var(--bg-d), 1); }
.filter-dd.is-open .filter-dd__btn b     { color: #fff; }
.filter-dd.is-open .filter-dd__btn .filter-dd__chev { border-color: #fff; transform: rotate(-135deg); }

.filter-dd__panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
    display: block !important;
    opacity: 0;
    pointer-events: none;
    left: 0;
    margin-top: 8px;
    min-width: 260px;
    padding: 12px;
    position: absolute;
    top: 100%;
    transform: scale(0.95) translateY(-6px);
    transform-origin: top left;
    transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 50;
}
.filter-dd.is-open .filter-dd__panel {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
}
.filter-dd__panel--wide { min-width: 340px; }

.filter-dd__head {
    align-items: center;
    border-bottom: 1px solid rgba(var(--bg-u), 1);
    color: rgba(var(--cl-e), 1);
    display: flex;
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: .5px;
    margin: -4px -4px 8px;
    padding: 4px 10px 10px;
    text-transform: uppercase;
}
.filter-dd__head a {
    color: rgba(var(--bg-d), 1);
    font-size: 12px;
    text-transform: none;
}

.filter-search {
    background: rgba(var(--bg-i), 1);
    border: 1px solid rgba(var(--bg-s), 1);
    border-radius: 10px;
    color: rgba(var(--cl-q), 1);
    display: block;
    font-family: var(--font-family2);
    font-size: 13px;
    margin-bottom: 8px;
    outline: none;
    padding: 9px 12px;
    width: 100%;
}
.filter-search:focus { border-color: rgba(var(--bg-d), 1); }

.filter-options {
    list-style: none;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: 0;
}
/* Price panel: no scroll — all content must fit */
.filter-dd--price .filter-options {
    max-height: none;
    overflow-y: visible;
}
.filter-dd--price .filter-dd__panel {
    min-width: 280px;
}
.filter-options li {
    border-radius: 8px;
    margin-bottom: 2px;
}
.filter-options li.filter-state {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 10px 10px 4px;
    pointer-events: none;
    text-transform: uppercase;
}
.filter-options label {
    align-items: center;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    gap: 10px;
    padding: 8px 10px;
    width: 100%;
}
.filter-options label:hover { background: rgba(var(--bg-i), 1); }
.filter-options input[type="checkbox"],
.filter-options input[type="radio"] {
    accent-color: rgba(var(--bg-d), 1);
    flex: 0 0 16px;
    height: 16px;
    width: 16px;
}
.filter-options label .filter-options__hint {
    color: rgba(var(--cl-e), 1);
    font-size: 11px;
    margin-left: auto;
}
.filter-options__empty {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 12px;
    padding: 16px 10px;
    text-align: center;
}

.filter-dd__foot {
    border-top: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: 10px -4px -4px;
    padding: 10px 4px 4px;
}

/* ---------- Active filters chip bar ---------- */
.active-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}
.active-filters:empty { display: none; }
.active-filter {
    align-items: center;
    background: rgba(var(--bg-d), 1);
    border-radius: 100px;
    color: #fff;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
    gap: 4px;
    line-height: 1;
    padding: 5px 5px 5px 12px;
}
.active-filter__key {
    color: rgba(255,255,255,.7);
    font-weight: 500;
}
.active-filter__x {
    align-items: center;
    background: rgba(255,255,255,.2);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    height: 18px;
    justify-content: center;
    line-height: 1;
    margin-left: 4px;
    padding: 0;
    width: 18px;
}
.active-filter__x:hover { background: rgba(255,255,255,.4); }
/* Grouped filter chip: one capsule per category, multiple values */
.active-filter__grp {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
}
.active-filter__item {
    align-items: center;
    display: inline-flex;
    gap: 2px;
}
.active-filter__item .active-filter__x {
    margin-left: 1px;
}
.active-filter__sep {
    color: rgba(255,255,255,.6);
    margin-right: 2px;
}
.active-filters__clear {
    background: transparent;
    border: 0;
    color: rgba(var(--bg-d), 1);
    cursor: pointer;
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px;
    padding: 4px 8px;
}

/* ---------- Lead card description preview (truncated to 2 lines with ellipsis) ---------- */
.lead-card__desc {
    -webkit-box-orient: vertical;
    color: rgba(var(--cl-p), 1);
    display: -webkit-box;
    font-family: var(--font-family2);
    font-size: 14px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.45;
    margin: 0 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- BUY button wrapper with Pro-discount hint ---------- */
.buy-wrap {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.buy-hint {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 11px;
    line-height: 1.2;
    text-align: right;
}
.buy-hint a {
    color: rgba(var(--bg-d), 1);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.buy-hint a:hover { color: rgba(var(--bg-l), 1); }

/* ---------- Graceful lead cards: hide empty optional blocks (feedback #3.1) ---------- */
.lead-card__desc:empty { display: none; }
.lead-card__tags:empty { display: none; }
.lead-card__tag:empty { display: none; }

/* ---------- Equal-height lead cards (rigid structure) ---------- */
.order-list { display: block; }
.order-list .order-list__item {
    list-style: none;
    margin-bottom: 14px;
}
.order-list .order-list__item .main-order {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* margin-top:auto now lives in .lead-card__footer itself */

/* ---------- Compact save-filter chip in filters-bar ---------- */
.filters-bar > .btn-ghost--green {
    align-items: center;
    display: inline-flex;
    font-size: 12px;
    gap: 4px;
    padding: 8px 12px;
}
.saved-filters:empty { display: none; }

/* ---------- CRM status badge (used on My Leads cards) ---------- */
.crm-status-badge {
    align-items: center;
    border-radius: 1.25rem;
    color: #fff;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: clamp(10px, .6527vw, .625rem);
    font-weight: 750;
    gap: 4px;
    letter-spacing: -.2px;
    line-height: 12px;
    padding: clamp(4px, .2611vw, .25rem) clamp(8px, .5222vw, .5rem);
    text-transform: uppercase;
    width: fit-content;
}
.crm-status-badge--new        { background: rgba(var(--bg-d), 1); }
.crm-status-badge--bought     { background: rgba(var(--bg-o), 1); }
.crm-status-badge--contact    { background: rgba(var(--cl-h), 1); }
.crm-status-badge--noanswer   { background: rgba(var(--cl-j), 1); color: rgba(var(--cl-q), 1); }
.crm-status-badge--appointment{ background: #00b8d9; }
.crm-status-badge--working    { background: rgba(var(--bg-d), 1); }
.crm-status-badge--sold       { background: rgba(var(--bg-d), .88); }
.crm-status-badge--refuse     { background: rgba(var(--cl-n), 1); }
.crm-status-badge--bad        { background: rgba(var(--bg-n), 1); }
.crm-status-badge--refund     { background: rgba(var(--cl-o), 1); }
.crm-status-badge--closed     { background: rgba(var(--cl-q), 1); }

/* ---------- Active lead view link (legacy) ---------- */
.lead-card__view-link {
    align-items: center;
    color: rgba(var(--bg-d), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
    gap: 4px;
    text-decoration: none;
}
.lead-card__view-link:hover { text-decoration: underline; }

/* ---------- Lead card top: time + badges + source on a single row ---------- */
.main-order__top .main-order__inner,
.lead-drawer__head .main-order__inner,
.lead-detail__head .main-order__inner {
    column-gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 8px;
}
.main-order__top .main-order__inner > .lead-source,
.lead-drawer__head .main-order__inner > .lead-source,
.lead-detail__head .main-order__inner > .lead-source {
    margin-left: auto;
}
.main-order__top .lead-card__badges,
.lead-drawer__head .main-order__inner .lead-card__badges,
.lead-detail__head .main-order__inner .lead-card__badges {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

/* ---------- Right drawer for lead detail ---------- */
.lead-drawer-backdrop {
    background: rgba(15, 18, 25, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    inset: 0;
    pointer-events: none;
    position: fixed;
    transition: background 280ms ease, backdrop-filter 280ms ease, -webkit-backdrop-filter 280ms ease;
    z-index: 90;
}
.lead-drawer-backdrop.is-open {
    background: rgba(15, 18, 25, .42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: auto;
}

.lead-drawer {
    background: #fff;
    bottom: 0;
    box-shadow: -16px 0 40px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    max-width: 600px;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
    width: 94%;
    z-index: 100;
}
.lead-drawer.is-open { transform: translateX(0); }

.lead-drawer__close {
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 50%;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    font-size: 18px;
    height: 32px;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 16px;
    top: 16px;
    width: 32px;
    z-index: 2;
}
.lead-drawer__close:hover { background: rgba(var(--bg-s), 1); }

.lead-drawer__head {
    border-bottom: 1px solid rgba(var(--bg-u), 1);
    padding: 22px 62px 20px 30px;
    position: relative;
}
.lead-drawer__title {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 22px;
    font-weight: 750;
    line-height: 1.3;
    margin: 12px 0 10px;
}
.lead-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 30px;
}
.lead-drawer__section { margin-bottom: 22px; }
.lead-drawer__section:last-child { margin-bottom: 0; }
.lead-drawer__section-title {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.lead-drawer__text {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 15px;
    line-height: 1.65;
    white-space: pre-line;
}
/* Full description block — primary readable content */
.lead-drawer__section [data-d-desc],
.lead-drawer__text[data-d-desc] {
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(var(--cl-q), 1);
}
.lead-drawer__foot {
    align-items: center;
    border-top: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    padding: 16px 30px;
}
.lead-drawer__price {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 22px;
    font-weight: 750;
}
.lead-drawer__price s { color: rgba(var(--cl-j), 1); font-size: 14px; font-weight: 500; margin-right: 8px; }
.lead-drawer__price-note { color: rgba(var(--bg-d), 1); font-size: 12px; font-weight: 600; }

/* Inbox drawer footer */
.lead-drawer__foot--inbox {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.lead-drawer__locked-note {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    text-align: center;
}
.lead-drawer__foot--inbox .inbox-accept-btn {
    width: 100%;
}

/* Make lead cards clickable */
.order-list__item[data-lead] { cursor: pointer; }

/* ---------- Subscription / pricing cards ---------- */
.pricing-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: 20px;
}
.pricing-card {
    background: #fff;
    border: 2px solid transparent;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 24px;
    position: relative;
}
.pricing-card--current { border-color: rgba(var(--bg-d), 1); }
.pricing-card--featured { border-color: rgba(var(--bg-o), 1); }
.pricing-card__badge {
    background: rgba(var(--bg-o), 1);
    border-radius: 100px;
    color: #fff;
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 750;
    left: 50%;
    letter-spacing: .3px;
    padding: 5px 12px;
    position: absolute;
    text-transform: uppercase;
    top: -12px;
    transform: translateX(-50%);
    white-space: nowrap;
}
.pricing-card__tier {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 12px;
    letter-spacing: .5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.pricing-card__name {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 22px;
    font-weight: 750;
    margin-bottom: 4px;
}
.pricing-card__discount {
    color: rgba(var(--bg-d), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
}
.pricing-card__price {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 30px;
    font-weight: 750;
    margin-bottom: 4px;
}
.pricing-card__price span {
    color: rgba(var(--cl-e), 1);
    font-size: 13px;
    font-weight: 600;
}
.pricing-card__list {
    color: rgba(var(--cl-p), 1);
    flex: 1;
    font-family: var(--font-family2);
    font-size: 13px;
    list-style: none;
    margin: 14px 0 18px;
    padding: 0;
}
.pricing-card__list li {
    padding: 6px 0 6px 22px;
    position: relative;
}
.pricing-card__list li::before {
    color: rgba(var(--bg-d), 1);
    content: "✓";
    font-weight: 750;
    left: 0;
    position: absolute;
}

/* ---------- Insufficient funds modal ---------- */
.funds-modal {
    align-items: center;
    bottom: 0;
    display: none;
    justify-content: center;
    left: 0;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 210;
}
.funds-modal.is-open { display: flex; }
.funds-modal__overlay {
    background: rgba(15,18,25,.42);
    inset: 0;
    position: absolute;
}
.funds-modal__body {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
    max-width: 400px;
    padding: 24px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}
.funds-modal__icon--success {
    background: rgba(var(--bg-d), .12) !important;
    color: rgba(var(--bg-d), 1) !important;
}
.funds-modal__icon--success .icon {
    height: 28px;
    width: 28px;
}
.funds-modal__icon {
    align-items: center;
    background: rgba(var(--cl-o), .12);
    border-radius: 50%;
    color: rgba(var(--cl-o), 1);
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 24px;
    font-weight: 750;
    height: 48px;
    justify-content: center;
    margin: 0 auto 12px;
    width: 48px;
}
.funds-modal__title {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 19px;
    font-weight: 750;
    margin: 0 0 6px;
}
.funds-modal__text {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 18px;
}
.funds-modal__stats {
    background: rgba(var(--bg-i), 1);
    border-radius: 4px;
    margin-bottom: 18px;
    padding: 12px 14px;
    text-align: left;
}
.funds-modal__stat {
    align-items: center;
    color: rgba(var(--cl-e), 1);
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    justify-content: space-between;
    padding: 4px 0;
}
.funds-modal__stat b { color: rgba(var(--cl-q), 1); }
.funds-modal__stat--deficit b { color: rgba(var(--cl-o), 1); }
/* Stacked footer: primary button on top, cancel as subtle text below */
.funds-modal__foot {
    align-items: stretch;
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}
.funds-modal .funds-modal__foot .buy-btn {
    background: rgba(var(--bg-d), 1) !important;
    font-size: 14px !important;
    letter-spacing: .3px !important;
    min-height: 44px !important;
    padding: 11px 18px !important;
    text-transform: uppercase;
    width: 100%;
}
.funds-modal .funds-modal__foot .btn-link {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(var(--cl-e), 1) !important;
    cursor: pointer;
    display: inline-block !important;
    font-family: var(--font-family2);
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 0 !important;
    text-align: center;
    transition: color .15s;
    width: 100%;
}
.funds-modal .funds-modal__foot .btn-link:hover {
    color: rgba(var(--cl-q), 1) !important;
}

/* ---------- Chat drawer (right side, in My Leads) ---------- */
.chat-drawer {
    background: #fff;
    bottom: 0;
    box-shadow: -16px 0 40px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    max-width: 460px;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
    width: 92%;
    z-index: 100;
}
.chat-drawer.is-open { transform: translateX(0); }
.chat-drawer__head {
    align-items: center;
    border-bottom: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    gap: 12px;
    padding: 16px 56px 16px 20px;
    position: relative;
}
.chat-drawer__close {
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 50%;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    font-size: 18px;
    height: 32px;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
}
.chat-drawer__close:hover { background: rgba(var(--bg-s), 1); }
.chat-drawer__name {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 16px;
    font-weight: 750;
}
.chat-drawer__sub {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 12px;
}
.chat-drawer__body {
    background: rgba(var(--bg-i), 1);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 18px 20px;
}
.chat-day {
    align-self: center;
    background: rgba(var(--bg-s), 1);
    border-radius: 100px;
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 11px;
    margin: 8px 0 2px;
    padding: 4px 12px;
}
.chat-msg {
    border-radius: 10px;
    font-family: var(--font-family2);
    font-size: 14px;
    line-height: 1.4;
    max-width: 78%;
    padding: 9px 13px 14px;
    position: relative;
}
.chat-msg--client {
    align-self: flex-start;
    background: #fff;
    border-radius: 14px 14px 14px 4px;
    color: rgba(var(--cl-q), 1);
}
.chat-msg--me {
    align-self: flex-end;
    background: rgba(var(--bg-d), 1);
    border-radius: 14px 14px 4px 14px;
    color: #fff;
}
.chat-msg__time {
    bottom: 4px;
    font-size: 10px;
    opacity: .65;
    position: absolute;
    right: 10px;
}
.chat-drawer__compose {
    align-items: flex-end;
    border-top: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    gap: 10px;
    padding: 12px 16px;
}
.chat-drawer__compose textarea {
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 10px;
    flex: 1;
    font-family: var(--font-family2);
    font-size: 14px;
    max-height: 100px;
    min-height: 40px;
    outline: none;
    padding: 10px 14px;
    resize: none;
}
.chat-drawer__compose button {
    background: rgba(var(--bg-d), 1);
    border: 0;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 700;
    padding: 11px 18px;
}
.chat-drawer__compose button:hover { background: rgba(var(--bg-d), .88); }

/* CRM detail drawer-specific tweaks (reuses .lead-drawer base) */
.lead-drawer .crm-row { font-size: 14px; padding: 8px 0; }
.lead-drawer .crm-card__client { gap: 14px; margin-bottom: 10px; }
.lead-drawer .crm-card__problem { margin: 14px 0; }

/* Make CRM cards clickable */
.crm-card[data-crm-card] { cursor: pointer; }

/* ---------- Mobile bottom navigation ---------- */
.mobile-bottom-nav {
    display: none;
}
@media (max-width: 768px) {
    /* Hide the left sidebar on mobile */
    .aside-menu {
        display: none !important;
    }
    /* Give the main container full width when sidebar is hidden */
    .main-inner__container {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Show bottom nav */
    .mobile-bottom-nav {
        background: rgba(var(--bg-a), 1);
        border-top: 1px solid rgba(var(--bg-u), 1);
        bottom: 0;
        display: flex;
        left: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        position: fixed;
        right: 0;
        scrollbar-width: none;
        z-index: 80;
    }
    .mobile-bottom-nav::-webkit-scrollbar { display: none; }

    .mobile-bottom-nav__item {
        align-items: center;
        color: rgba(var(--cl-e), 1);
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        font-family: var(--font-family2);
        font-size: 10px;
        font-weight: 600;
        gap: 3px;
        letter-spacing: -.1px;
        min-width: 64px;
        padding: 10px 8px 8px;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: color .15s;
    }
    .mobile-bottom-nav__item:active { opacity: .7; }
    .mobile-bottom-nav__item.active,
    .mobile-bottom-nav__item--active {
        color: rgba(var(--bg-d), 1);
    }
    .mobile-bottom-nav__item svg {
        height: 22px;
        width: 22px;
    }
    .mobile-bottom-nav__badge {
        background: rgba(var(--bg-n), 1);
        border-radius: 100px;
        color: #fff;
        font-size: 9px;
        font-weight: 750;
        line-height: 1;
        min-width: 16px;
        padding: 2px 4px;
        position: absolute;
        right: 10px;
        text-align: center;
        top: 6px;
    }

    /* Pad main content so it's not hidden behind bottom nav */
    .main-inner__container {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Empty state ---------- */
.empty-state {
    background: #fff;
    border-radius: 10px;
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 14px;
    padding: 40px 20px;
    text-align: center;
}
.empty-state b { color: rgba(var(--cl-q), 1); }


/* ============================================================
   RAW-STYLE ALIGNMENT  (site4 vs raw/aktualno/applications.html)
   --------------------------------------------------------------
   Raw signature:
     · border-radius 2-4px (NOT 10px), 3px on chrome containers
     · box-shadow 0 2px 11px 0 rgba(6,32,44,.09) on cards + chrome
     · font-weight 750 (AvenirNextCyr Heavy) on titles & price
     · clamp() fluid sizing tied to viewport
     · tonal --bg-h (#F8F8F8) for hairline ::before separators
     · --bg-l (#1499D8) reserved for price-pill background
   These overrides sit at end of file so they win on specificity
   parity. To revert: delete everything below this comment.
   ============================================================ */

/* ---- 1. Content cards : 2px + raw shadow ------------------ */
.order-list .order-list__item .main-order,
.crm-card,
.balance-stats__item,
.balance-table,
.pricing-card,
.lead-detail,
.live-strip,
.consult-tooltip,
.filters-section,
.empty-state {
    border-radius: 2px;
    box-shadow: 0 2px 11px 0 rgba(6, 32, 44, .09);
}

/* Inner / nested blocks : flat radius, no own shadow */
.lead-detail__side,
.crm-card__problem,
.funds-modal__stats {
    border-radius: 2px;
}

/* ---- 2. Chrome / bars / dropdowns : 3px + raw shadow ------ */
.filters-bar {
    border-radius: 3px;
    box-shadow: 0 2px 11px 0 rgba(6, 32, 44, .09);
}
.filter-dd__panel,
.crm-status__menu {
    border-radius: 3px;
}

/* ---- 3. Buttons / inputs / chips : 3px -------------------- */
.buy-btn,
.btn-ghost,
.crm-action,
.crm-status,
.filter-dd__btn,
.filter-search,
.filter-modal__field input[type="text"],
.filter-modal__field input[type="number"],
.chat-drawer__compose textarea,
.chat-drawer__compose button,
.price-inputs input,
.price-presets {
    border-radius: 3px;
}

/* Modals & drawers keep softer 8px corners (raw doesn't define
   modals, so we keep a mild radius — but tighten from 16px) */
.filter-modal__body,
.funds-modal__body {
    border-radius: 8px;
}

/* ---- 4. Hairline ::before separator on .main-order__top ---- */
.order-list .main-order__top {
    position: relative;
}
.order-list .main-order__top::before {
    background: rgba(var(--bg-h), 1);
    bottom: clamp(-12px, -.8125vw, -.625rem);
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
}
.order-list .main-order { padding-top: 14px; }
.order-list .lead-card__desc { padding-top: 4px; }

/* ---- 5. Heavy weights + letter-spacing (raw signature) ---- */
.main-order__title,
.lead-card__price,
.crm-card__name,
.balance-stats__value,
.pricing-card__name,
.pricing-card__price,
.lead-detail__title,
.lead-detail__price,
.filter-modal__title,
.funds-modal__title,
.chat-drawer__name,
.section-counter b,
.filter-dd__btn b {
    font-weight: 750;
    letter-spacing: -.2px;
}

/* ---- 6. Price pill in drawer + detail (raw .main-order__price)
   Synthetic background + radius 4px so price reads as a label,
   not a competing CTA next to the BUY button. Uses --bg-d so it
   stays inside the brand palette. ---------------------------- */
.lead-detail__price,
.lead-drawer__price {
    background: rgba(var(--bg-d), 1);
    border-radius: 4px;
    color: rgba(var(--cl-a), 1);
    display: inline-block;
    font-size: clamp(20px, 1.4vw, 26px);
    line-height: 1.1;
    padding: clamp(6px, .392vw, .5rem) clamp(10px, .65vw, .75rem);
}
.lead-detail__price s,
.lead-drawer__price s {
    color: rgba(var(--cl-a), .55);
    margin-right: 10px;
}
.lead-detail__price-note,
.lead-drawer__price-note {
    display: block;
    margin-top: 8px;
}

/* ---- 7. Fluid clamp() on card typography ------------------ */
.main-order__title {
    font-family: var(--font-family2);
    font-size: clamp(15px, 1.0444vw, 1rem);
    line-height: 1.25;
}
.lead-card__desc {
    font-size: clamp(13px, .9138vw, .875rem);
    line-height: 1.45;
}
.lead-card__tag,
.lead-card__tags { font-size: clamp(11px, .7833vw, .75rem); }
.main-order { padding: clamp(16px, 1.04vw, 1.25rem); }

/* ---- 8. Hover lift on clickable cards --------------------- */
.order-list__item[data-lead] .main-order,
.order-list__item[data-crm-card] .main-order,
.crm-card[data-crm-card] {
    transition: box-shadow .2s ease, transform .2s ease;
}
.order-list__item[data-lead]:hover .main-order,
.order-list__item[data-crm-card]:hover .main-order,
.crm-card[data-crm-card]:hover {
    box-shadow: 0 4px 18px 0 rgba(6, 32, 44, .14);
    transform: translateY(-1px);
}

/* ---- 9. Aside / sidebar (raw uses --bg-b dark block) ------- */
.aside-menu__inner,
.aside-menu__wrapper {
    box-shadow: 0 2px 11px 0 rgba(6, 32, 44, .09);
}

/* ---- 10. Cabinet-nav tab bar (raw has shadow + radius 3px)  */
.cabinet-nav {
    border-radius: 3px;
    box-shadow: 0 2px 11px 0 rgba(6, 32, 44, .09);
}
/* Tabs items: every link is the same height regardless of badge */
.cabinet-nav__item,
.cabinet-nav__link {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}
.cabinet-nav__link {
    line-height: 1;
    padding: 16px 0 18px;
}
.cabinet-nav__item .new-orders__badge {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1;
    min-height: 18px;
    padding: 3px 8px;
    vertical-align: middle;
}

/* Consultation tooltip: center icon to text vertically */
.consult-tooltip { align-items: center; }
.consult-tooltip__icon { flex: 0 0 28px; }

/* ---- 11b. Filter modal — compact redesign ----------------- */
.filter-modal__body {
    max-width: 640px;
    padding: 24px 28px 20px;
}
.filter-modal__body .filter-modal__title {
    font-size: 20px;
    letter-spacing: -.3px;
    margin: 0 0 24px;
    padding-right: 36px;
}
.filter-modal__subtitle {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 24px;
}
.filter-modal__close {
    right: 14px;
    top: 14px;
}

/* Two-column grid for fields */
.filter-modal__body .filter-modal__grid {
    display: grid;
    gap: 22px 20px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0;
}
.filter-modal__body .filter-modal__field {
    display: block;
    margin-bottom: 0;
    min-width: 0;
}
.filter-modal__body .filter-modal__field--full { grid-column: 1 / -1; }
.filter-modal__body > form > .filter-modal__field--full:first-of-type { margin-bottom: 22px; }
.filter-modal__body .filter-modal__field-label {
    color: rgba(var(--cl-e), 1);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Unified control height: input AND dropdown trigger share padding+font.
   !important fights the older .filter-modal__field input rules (font-size: 14px,
   padding: 10px 12px). Native datalist chrome is also reset here. */
.filter-modal__body .filter-modal__field input[type="text"],
.filter-modal__body .filter-modal__field input[type="number"],
.filter-modal__body input[list] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: rgba(var(--bg-u), 1) !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    font-family: var(--font-family2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 38px !important;
    line-height: 1.2 !important;
    padding: 0 12px !important;
    width: 100% !important;
}
/* Hide the native datalist dropdown indicator that adds the black ▼ */
.filter-modal__body input[list]::-webkit-calendar-picker-indicator,
.filter-modal__body input[list]::-webkit-list-button {
    display: none !important;
    opacity: 0;
}
/* Dropdown trigger: identical 38px height, no border to add px */
.filter-modal__body .filter-modal .filter-dd__btn,
.filter-modal__body .filter-dd__btn {
    border: 0 !important;
    box-sizing: border-box !important;
    height: 38px !important;
    line-height: 1.2 !important;
    padding: 0 12px !important;
}

/* Price range inputs — same height as other controls.
   Beats the older .price-inputs input rule (border + padding 8/10). */
.filter-modal__body .price-inputs {
    align-items: center;
    display: flex;
    gap: 10px;
}
.filter-modal__body .price-inputs input,
.filter-modal__body .price-inputs input[type="number"] {
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 3px;
    box-sizing: border-box;
    color: rgba(var(--cl-q), 1);
    flex: 1;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
    height: 38px;
    line-height: 1.2;
    min-width: 0;
    outline: none;
    padding: 0 12px;
}
.filter-modal__body .price-inputs input:focus {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(var(--bg-d), 1);
}
.filter-modal__body .price-inputs span {
    color: rgba(var(--cl-e), 1);
    flex: 0 0 auto;
    font-size: 14px;
}
.filter-modal__body .filter-modal__field input[type="text"]:focus,
.filter-modal__body .filter-modal__field input[type="number"]:focus {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(var(--bg-d), 1);
    outline: none;
}
/* Placeholder: muted, normal weight — clearly NOT a value.
   Higher specificity + !important to defeat the input's own
   font-weight: 600 that browsers leak into placeholder rendering. */
.filter-modal__body input::placeholder,
.filter-modal__body input::-webkit-input-placeholder {
    color: rgba(var(--cl-e), 1) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Required asterisk in label */
.filter-modal__req {
    color: rgba(var(--cl-o), 1);
    font-size: 12px;
    font-style: normal;
    margin-left: 2px;
}

/* Dropdown trigger — IDENTICAL to .filter-dd__btn in main filter-bar */
.filter-modal .filter-dd { display: block; position: relative; width: 100%; }
.filter-modal .filter-dd__btn {
    background: rgba(var(--bg-u), 1);
    border: 1px solid transparent;
    color: rgba(var(--cl-q), 1);
    font-size: 13px;
    font-weight: 600;
    justify-content: space-between;
    padding: 9px 12px;
    width: 100%;
}
/* Default (empty) state: muted; only show blue/bold when something selected */
.filter-modal .filter-dd__btn span[data-dd-label] {
    color: rgba(var(--cl-e), 1);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter-modal .filter-dd.has-selection .filter-dd__btn span[data-dd-label] {
    color: rgba(var(--bg-d), 1);
    font-weight: 750;
}
.filter-modal .filter-dd.is-open .filter-dd__btn span[data-dd-label] { color: #fff; }
.filter-modal .filter-dd__panel {
    max-height: none;
    min-width: 100%;
    overflow-y: visible;
    z-index: 60;
}
/* Tighten internal options list scroll: only ONE scrollbar */
.filter-modal .filter-dd__panel .filter-options {
    max-height: 260px;
    overflow-y: auto;
}

/* Footer: Push checkbox + Save in one row, single divider above */
.filter-modal__body .filter-modal__foot {
    align-items: center;
    border-top: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
}
.filter-modal__body .filter-modal__check {
    align-items: center;
    color: rgba(var(--cl-p), 1);
    cursor: pointer;
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.filter-modal__body .filter-modal__check input[type="checkbox"] {
    accent-color: rgba(var(--bg-d), 1);
    appearance: auto;
    -webkit-appearance: checkbox;
    flex: 0 0 14px;
    height: 14px;
    margin: 0;
    transform: none;
    width: 14px;
}
.filter-modal__save {
    background: rgba(var(--bg-d), 1);
    border: 0;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .1px;
    padding: 9px 22px;
    transition: background .2s;
}
.filter-modal__save:hover { background: rgba(var(--bg-d), .88); }

/* Location dropdown inside filter modal — panel stays inside the modal */
.filter-modal .filter-dd--location .filter-dd__panel {
    max-height: 280px;
    min-width: 100%;
    overflow: hidden;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 10;
}
.filter-modal .filter-dd--location .filter-dd__panel .filter-options {
    max-height: 200px;
    overflow-y: auto;
}
.filter-modal .filter-dd--location {
    position: relative;
    width: 100%;
}
.filter-modal .filter-dd--location .filter-dd__btn {
    width: 100%;
}

/* ============================================================
   FILTER SAVED CONFIRMATION MODAL
   ============================================================ */
.filter-saved-modal {
    align-items: center;
    bottom: 0;
    display: none;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1200;
}
.filter-saved-modal.is-open { display: flex; }
.filter-saved-modal__overlay {
    background: rgba(0, 0, 0, .45);
    inset: 0;
    position: absolute;
}
.filter-saved-modal__body {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    font-family: var(--font-family2);
    padding: 36px 32px 28px;
    position: relative;
    text-align: center;
    width: 360px;
    z-index: 1;
}
.filter-saved-modal__icon {
    align-items: center;
    background: rgba(var(--bg-d), 1);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 22px;
    font-weight: 750;
    height: 52px;
    justify-content: center;
    margin: 0 auto 16px;
    width: 52px;
}
.filter-saved-modal__title {
    color: rgba(var(--cl-b), 1);
    font-size: 20px;
    font-weight: 750;
    margin: 0 0 8px;
}
.filter-saved-modal__name {
    color: rgba(var(--cl-q), 1);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
}
.filter-saved-modal__tags {
    color: rgba(var(--cl-e), 1);
    font-size: 12px;
    margin: 0 0 24px;
}
.filter-saved-modal__foot {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.filter-saved-modal__apply {
    align-items: center;
    background: rgba(var(--bg-d), 1);
    border: 0;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 14px;
    font-weight: 750;
    justify-content: center;
    padding: 11px 32px;
    text-align: center;
    transition: background .2s;
    width: auto;
}
.filter-saved-modal__apply:hover { background: rgba(var(--bg-d), .88); }
.filter-saved-modal__close-btn {
    align-items: center;
    background: transparent;
    border: 0;
    color: rgba(var(--cl-e), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 13px;
    justify-content: center;
    padding: 6px 18px;
    text-align: center;
    transition: color .15s;
    width: auto;
}
.filter-saved-modal__close-btn:hover { color: rgba(var(--cl-q), 1); }

@media (max-width: 640px) {
    .filter-modal__grid { grid-template-columns: 1fr; }
    .filter-modal__body { padding: 18px 20px 16px; }
}

/* ---- 11. Close buttons — raw style (no chrome, just the glyph)
   Raw .close is background:none, border:none, just an icon. Our
   prior 32×32 grey circles felt foreign. Strip the chrome, bump
   the glyph weight, give a subtle hover tint. ---------------- */
.filter-modal__close,
.lead-drawer__close,
.chat-drawer__close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 24px;
    font-weight: 400;
    height: 28px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: color .15s ease, background-color .15s ease;
    width: 28px;
}
.filter-modal__close:hover,
.lead-drawer__close:hover,
.chat-drawer__close:hover {
    background: rgba(var(--bg-h), 1);
    color: rgba(var(--bg-d), 1);
}
.filter-modal__close:focus-visible,
.lead-drawer__close:focus-visible,
.chat-drawer__close:focus-visible {
    background: rgba(var(--bg-h), 1);
    outline: 2px solid rgba(var(--bg-d), .35);
    outline-offset: 2px;
}
/* "View similar" button (legacy ghost-style) */
.buy-btn--view {
    background: transparent !important;
    border: 1px solid rgba(var(--bg-s), 1) !important;
    color: rgba(var(--bg-d), 1) !important;
    text-decoration: none;
}
.buy-btn--view:hover {
    background: rgba(var(--bg-d), .06) !important;
    border-color: rgba(var(--bg-d), .4) !important;
}

/* Status dropdown box (prominent at top of CRM drawer) */
.crm-status-box {
    align-items: center;
    background: rgba(var(--bg-i), 1);
    border: 1px solid rgba(var(--bg-s), 1);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 14px;
    transition: border-color .15s, background .15s;
}
.crm-status-box:hover { border-color: rgba(var(--bg-d), .4); }
.crm-status-box__label { color: rgba(var(--bg-d), 1); }
.crm-status-box__value { color: rgba(var(--bg-d), 1); }
.crm-status-box__chev { color: rgba(var(--bg-d), 1); margin-left: auto; }

/* Action button row (Chat / Call / Task) */
.crm-actions-row {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.crm-action-btn {
    align-items: center;
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 3px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    padding: 9px 14px;
    transition: background .15s;
}
.crm-action-btn:hover { background: rgba(var(--cl-e), .15); }
.crm-action-btn--primary {
    background: rgba(var(--bg-d), 1);
    color: #fff;
}
.crm-action-btn--primary:hover { background: rgba(var(--bg-d), .88); }
.crm-action-btn .icon { height: 14px; width: 14px; }

/* CRM drawer footer — "Bought for $X" */
.lead-drawer__foot--crm {
    align-items: center;
    background: rgba(var(--bg-i), 1);
    border-top: 1px solid rgba(var(--bg-s), 1);
    display: flex;
    justify-content: center;
    padding: 14px 24px;
}
.lead-drawer__bought-for {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 500;
}
.lead-drawer__bought-for b {
    color: rgba(var(--cl-q), 1);
    font-weight: 750;
    margin-left: 4px;
}

/* CRM drawer avatar — photo with initials fallback */
.crm-card__avatar-wrap {
    background: rgba(var(--bg-d), 1);
    border-radius: 50%;
    flex-shrink: 0;
    height: 64px;
    overflow: hidden;
    position: relative;
    width: 64px;
}
.crm-card__avatar-img {
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 2;
}
.crm-card__avatar-img:not([src]),
.crm-card__avatar-img[src=""] { display: none; }
.crm-card__avatar-wrap .crm-card__avatar {
    align-items: center;
    background: transparent;
    color: #fff;
    display: flex;
    font-family: var(--font-family2);
    font-size: 22px;
    font-weight: 750;
    height: 100%;
    justify-content: center;
    margin: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 1;
}

/* Copyable contact rows — click to copy phone/email/city */
.crm-row__value[data-copy] {
    cursor: pointer;
    position: relative;
    transition: color .15s;
}
.crm-row__value[data-copy]:hover { color: rgba(var(--bg-d), 1); }
.crm-row__value[data-copy]::after {
    color: rgba(var(--cl-e), 1);
    content: "📋";
    font-size: 11px;
    margin-left: 6px;
    opacity: 0;
    transition: opacity .15s;
}
.crm-row__value[data-copy]:hover::after { opacity: .6; }
.crm-row__value[data-copy][data-copy-state="done"]::after {
    color: rgba(var(--bg-d), 1);
    content: "✓ Copied";
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 700;
    opacity: 1;
}

/* Lead drawer close — proper SVG centering */
.lead-drawer__close {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
}
.lead-drawer__close .icon {
    color: rgba(var(--cl-q), 1);
    height: 16px;
    width: 16px;
}

/* Subscription discount hint under BUY LEAD in drawer */
.lead-drawer__sub-hint {
    align-items: center;
    color: rgba(var(--cl-e), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    margin-top: 10px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}
.lead-drawer__sub-hint:hover { color: rgba(var(--bg-d), 1); }
.lead-drawer__sub-hint:hover b { color: rgba(var(--bg-l), 1); }
.lead-drawer__sub-hint .icon { color: rgba(var(--cl-h), 1); }
.lead-drawer__sub-hint b {
    color: rgba(var(--bg-d), 1);
    font-weight: 750;
}
.lead-drawer__sub-hint__arrow {
    color: rgba(var(--bg-d), 1);
    font-weight: 700;
    margin-left: 2px;
    transition: transform .15s ease;
}
.lead-drawer__sub-hint:hover .lead-drawer__sub-hint__arrow { transform: translateX(3px); }
.lead-drawer__foot {
    align-items: center;
    display: flex;
    flex-direction: column;
}
.lead-drawer__foot .buy-btn { width: 100%; }

/* ============================================================
   Hover tooltips for badges (data-tip attribute)
   ============================================================ */
[data-tip] {
    position: relative !important;
}
[data-tip]::before,
[data-tip]::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 9999;
}
[data-tip]::before {
    background: rgba(0, 0, 0, .92) !important;
    border-radius: 4px !important;
    bottom: calc(100% + 8px) !important;
    color: #fff !important;
    content: attr(data-tip) !important;
    font-family: var(--font-family2) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    left: 50% !important;
    letter-spacing: .1px !important;
    line-height: 1.4 !important;
    max-width: 240px !important;
    padding: 6px 10px !important;
    position: absolute !important;
    text-align: center !important;
    text-transform: none !important;
    transform: translateX(-50%) translateY(4px) scale(0.95);
    white-space: normal !important;
    width: max-content !important;
}
[data-tip]::after {
    border-color: rgba(0, 0, 0, .92) transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 5px 0 !important;
    bottom: calc(100% + 3px) !important;
    content: "" !important;
    height: 0 !important;
    left: 50% !important;
    position: absolute !important;
    transform: translateX(-50%) translateY(4px) scale(0.95);
    width: 0 !important;
}
[data-tip]:hover::before,
[data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Tooltip variant: appear BELOW the element (for tips near top of viewport) */
[data-tip-pos="bottom"]::before {
    bottom: auto !important;
    top: calc(100% + 8px) !important;
    transform: translateX(-50%) translateY(-4px);
}
[data-tip-pos="bottom"]::after {
    border-color: transparent transparent rgba(0, 0, 0, .92) !important;
    border-width: 0 5px 5px !important;
    bottom: auto !important;
    top: calc(100% + 3px) !important;
    transform: translateX(-50%) translateY(-4px);
}
[data-tip-pos="bottom"]:hover::before,
[data-tip-pos="bottom"]:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Corporate SVG icons (from Figma sprite)
   ============================================================ */
.icon {
    display: inline-block;
    fill: none;
    flex-shrink: 0;
    height: 16px;
    stroke: currentColor;
    vertical-align: middle;
    width: 16px;
}
.icon--xs { height: 13px; width: 13px; }
.icon--sm { height: 14px; width: 14px; }
.icon--lg { height: 20px; width: 20px; }
.icon--xl { height: 24px; width: 24px; }

/* Lead card tag icons — vertical align baseline with text */
.lead-card__tag .icon { margin-right: 2px; opacity: .75; }
.lead-card__tag .icon[href*="dollar"],
.lead-card__tag svg use[href*="dollar"] { opacity: 1; }

/* Buy-hint lightbulb */
.buy-hint .icon { color: rgba(var(--cl-h), 1); opacity: 1; }

/* Topbar Filters button gear */
.topbar__btn .icon { margin-right: 0; }

/* Replace text "i" inside consult-tooltip icon with proper SVG */
.consult-tooltip__icon svg { color: #fff; height: 12px; width: 12px; }

/* ---- #12 UX polish — May 25 ---------------------------------- */

/* 1. Saved filter pills — light, not black */
.saved-filter {
    background: rgba(var(--bg-u), 1) !important;
    border: 1px solid rgba(var(--cl-e), 0.22) !important;
    color: rgba(var(--cl-q), 1) !important;
}
.saved-filter__edit,
.saved-filter__remove { color: rgba(var(--cl-e), 1) !important; }
.saved-filter__edit:hover,
.saved-filter__remove:hover { color: rgba(var(--cl-q), 1) !important; }

/* 2. Hide duplicate section title row — tabs already name the page + count */
.section-title-row { display: none !important; }
/* Restore vertical rhythm after section-title-row removal */
.saved-filters:not(:empty),
.active-filters:not(:empty) { margin-bottom: 18px; }
.saved-filters:empty + .order-section,
.active-filters:empty + .saved-filters:empty + .order-section { margin-top: 4px; }

/* Sticky sidebar on desktop — page scrolls normally, sidebar stays in view */
@media (min-width: 769px) {
    .aside-menu {
        align-self: start;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        position: sticky;
        scrollbar-width: thin;
        top: 16px;
    }
    .aside-menu::-webkit-scrollbar { width: 6px; }
    .aside-menu::-webkit-scrollbar-thumb {
        background: rgba(var(--cl-e), .25);
        border-radius: 100px;
    }
}

/* (legacy 2-col min-width rule removed — grid modes handled by data-view-mode) */

/* ============================================================
   VARIANT C — Filter Drawer toolbar
   ============================================================ */

/* Compact toolbar (tabs + search + filters btn + sort) */
.topbar {
    align-items: center;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 11px 0 rgba(6, 32, 44, .09);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding: 9px 12px;
}
.topbar__tabs {
    display: flex;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.topbar__tab-item { display: inline-flex; }
.topbar__tab {
    align-items: center;
    color: rgba(var(--cl-e), 1);
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 14px;
    font-weight: 700;
    gap: 6px;
    padding: 6px 0;
    position: relative;
    text-decoration: none;
    transition: color .15s;
}
.topbar__tab:hover { color: rgba(var(--cl-q), 1); }
.topbar__tab.active { color: rgba(var(--bg-d), 1); }
.topbar__tab.active::after {
    background: rgba(var(--bg-d), 1);
    border-radius: 2px;
    bottom: -10px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}
.topbar__count {
    background: rgba(var(--bg-n), 1);
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    padding: 3px 8px;
}
.topbar__spacer { flex: 1; }
.topbar__search {
    align-items: center;
    background: rgba(var(--bg-u), 1);
    border-radius: 3px;
    display: flex;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    min-width: 200px;
}
.topbar__search-icon { font-size: 13px; opacity: .55; }
.topbar__search input {
    background: transparent;
    border: 0;
    color: rgba(var(--cl-q), 1);
    flex: 1;
    font-family: var(--font-family2);
    font-size: 13px;
    outline: none;
    width: 100%;
}
.topbar__btn {
    align-items: center;
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 3px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
    height: 36px;
    padding: 0 11px;
    transition: all .15s;
    white-space: nowrap;
}
.topbar__btn:hover { background: rgba(var(--cl-e), .12); }
.topbar__btn--primary {
    background: rgba(var(--bg-d), 1);
    color: #fff;
}
.topbar__btn--primary:hover { background: rgba(var(--bg-d), .88); }
.topbar__count--badge {
    background: rgba(var(--bg-n), 1);
    border-radius: 999px;
    box-shadow: 0 0 0 2px #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    padding: 2px 7px;
}
.topbar__btn--primary .topbar__count--badge {
    background: rgba(var(--bg-n), 1);
    box-shadow: 0 0 0 2px #fff;
}
.topbar__count--badge:empty,
.topbar__btn[data-open-filters] .topbar__count--badge[data-filter-count="0"],
.topbar__btn[data-open-saved] .topbar__count--badge[data-saved-count="0"] {
    display: none;
}

/* Combined chips row (Active + Saved) */
.chips-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    min-height: 0;
}
.chips-row .active-filters,
.chips-row .saved-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.chips-row .active-filters:empty,
.chips-row .saved-filters:empty { display: none; }
.chips-row:has(.active-filters:empty):has(.saved-filters:empty) { display: none; }

/* Filter drawer (slides in from right) */
.filter-drawer {
    background: #fff;
    box-shadow: -12px 0 32px rgba(0,0,0,.14);
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 92vw;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform .3s ease;
    visibility: hidden;
    width: 400px;
    z-index: 1000;
}
.filter-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}
.filter-drawer__head {
    align-items: center;
    border-bottom: 1px solid rgba(var(--bg-s), 1);
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
}
.filter-drawer__title {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 16px;
    font-weight: 750;
    margin: 0;
}
.filter-drawer__close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 20px;
    height: 30px;
    justify-content: center;
    line-height: 1;
    transition: background .15s;
    width: 30px;
}
.filter-drawer__close:hover { background: rgba(var(--bg-u), 1); }
.filter-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}
.filter-drawer__foot {
    align-items: center;
    border-top: 1px solid rgba(var(--bg-s), 1);
    display: flex;
    gap: 10px;
    padding: 12px 18px;
}
.filter-drawer__foot .btn-ghost--green {
    align-items: center;
    background: rgba(var(--bg-d), 1);
    border-radius: 3px;
    color: #fff;
    display: flex;
    flex: 1;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    padding: 0 16px;
}
.filter-drawer__foot .btn-link {
    align-items: center;
    background: transparent;
    border: 0;
    color: rgba(var(--cl-e), 1);
    cursor: pointer;
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
    height: 40px;
    justify-content: center;
    padding: 0 12px;
    white-space: nowrap;
}
.filter-drawer__foot .btn-link:hover { color: rgba(var(--cl-q), 1); }

/* Fix 1: скрыть «+ Save filter» пока inline-форма открыта */
.filter-inline-save.is-open + .filter-drawer__foot [data-inline-filter-open] {
    display: none;
}

/* ── INLINE SAVE FILTER FORM (Variant A) ── */
.filter-inline-save {
    background: rgba(var(--bg-i), 1);
    border-top: 2px solid rgba(var(--bg-d), .18);
    display: none;
    padding: 14px 18px 4px;
}
.filter-inline-save.is-open {
    animation: inlineSaveIn .18s ease;
    display: block;
}
@keyframes inlineSaveIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.filter-inline-save__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.filter-inline-save__title {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 750;
}
.filter-inline-save__cancel-x {
    background: none;
    border: 0;
    color: rgba(var(--cl-e), 1);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    transition: color .12s;
}
.filter-inline-save__cancel-x:hover { color: rgba(var(--cl-q), 1); }
.filter-inline-save__label {
    color: rgba(var(--cl-e), 1);
    display: block;
    font-family: var(--font-family2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.filter-inline-save__input {
    border: 1px solid rgba(var(--bg-s), 1);
    border-radius: 3px;
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    margin-bottom: 10px;
    outline: none;
    padding: 8px 12px;
    transition: border-color .15s;
    width: 100%;
}
.filter-inline-save__input:focus { border-color: rgba(var(--bg-d), 1); }
.filter-inline-save__input.is-error { border-color: rgba(var(--cl-o), 1); }
.filter-inline-save__check {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: var(--font-family2);
    font-size: 12px;
    gap: 8px;
    margin-bottom: 12px;
}
.filter-inline-save__check input[type="checkbox"] {
    accent-color: rgba(var(--bg-d), 1);
    flex-shrink: 0;
    height: 14px;
    width: 14px !important;
}
.filter-inline-save__check span {
    color: rgba(var(--cl-q), 1);
    flex: 1;
    line-height: 1.4;
}
.filter-inline-save__actions { display: flex; gap: 8px; margin-bottom: 14px; }
.filter-inline-save__save-btn {
    background: rgba(var(--bg-d), 1);
    border: 0;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    flex: 1;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    transition: background .15s;
}
.filter-inline-save__save-btn:hover { background: rgba(var(--bg-d), .88); }
.filter-inline-save__cancel-btn {
    background: rgba(var(--bg-u), 1);
    border: 0;
    border-radius: 3px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 14px;
    transition: background .15s;
}
.filter-inline-save__cancel-btn:hover { background: rgba(var(--bg-s), 1); }

/* Backdrop */
.filter-drawer__backdrop {
    background: rgba(0,0,0,.32);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .3s ease;
    visibility: hidden;
    z-index: 999;
}
.filter-drawer__backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Override filters-bar inside drawer: clean vertical stack with proper spacing */
.filter-drawer .filters-bar {
    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.filter-drawer .filters-bar__spacer,
.filter-drawer .filters-bar > .btn-ghost--green { display: none; }

/* Each filter-dd becomes a full-width row */
.filter-drawer .filters-bar .filter-dd {
    background: rgba(var(--bg-u), .55);
    border-radius: 4px;
    display: block;
    margin: 0;
    overflow: hidden;
    position: static;
    transition: background .2s;
    width: 100%;
}
.filter-drawer .filters-bar .filter-dd:hover { background: rgba(var(--bg-u), 1); }
.filter-drawer .filters-bar .filter-dd.is-open { background: rgba(var(--bg-u), 1); }

/* Dropdown button: full-width with label-left, value+chevron-right */
.filter-drawer .filters-bar .filter-dd__btn {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(var(--cl-q), 1) !important;
    display: flex !important;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 700;
    gap: 12px;
    justify-content: space-between;
    line-height: 1.2;
    padding: 14px 16px !important;
    width: 100%;
}
.filter-drawer .filters-bar .filter-dd__btn b {
    color: rgba(var(--bg-d), 1) !important;
    font-weight: 750;
}
.filter-drawer .filters-bar .filter-dd__chev {
    border: solid rgba(var(--cl-e), 1) !important;
    border-width: 0 2px 2px 0 !important;
    flex-shrink: 0;
    margin-left: auto;
    padding: 3px !important;
    transform: rotate(45deg);
    transition: transform .2s;
}
.filter-drawer .filters-bar .filter-dd.is-open .filter-dd__chev {
    border-color: rgba(var(--bg-d), 1) !important;
    transform: rotate(-135deg);
}

/* Panel: expands inline below button (not absolute popup)
   In closed state, force display:none so the row collapses to button height.
   In open state, re-show as block. */
.filter-drawer .filters-bar .filter-dd__panel {
    background: transparent !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(var(--bg-s), 1);
    box-shadow: none !important;
    display: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    opacity: 1 !important;
    padding: 10px 14px 14px !important;
    pointer-events: auto !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    z-index: auto;
}
.filter-drawer .filters-bar .filter-dd.is-open .filter-dd__panel {
    display: block !important;
}
.filter-drawer .filters-bar .filter-dd__head {
    display: none; /* "Reset" link redundant — Clear all at drawer foot */
}
.filter-drawer .filters-bar .filter-dd__foot {
    display: none; /* "Apply" button redundant — selections fire on change */
}
.filter-drawer .filters-bar .filter-options {
    max-height: 220px;
    overflow-y: auto;
}
.filter-drawer .filters-bar .filter-search {
    background: #fff;
    border: 1px solid rgba(var(--bg-s), 1);
    margin-bottom: 8px;
}

/* Hide old cabinet-nav (replaced by topbar) */
/* .top-section більше не ховаємо: підменю розділу «Консультації» і «Назад» на картці ліда потрібні */

/* Compact buy button — just the price, no "BUY LEAD" text */
.lead-card__footer .buy-btn {
    font-size: 14px !important;
    letter-spacing: .2px !important;
    min-height: 38px !important;
    padding: 9px 18px !important;
}
/* Hide Pro-plan hint in compact grid (price already on button) */
.lead-card__footer .buy-hint { display: none; }

/* 3. Compact consult-tooltip strip */
.consult-tooltip {
    border-radius: 3px !important;
    margin-bottom: 12px !important;
    padding: 8px 14px !important;
}
.consult-tooltip__icon {
    flex: 0 0 20px !important;
    font-size: 11px !important;
    height: 20px !important;
    width: 20px !important;
}

/* 4. CHAT button — compact (same look, less tall) */
[data-open-chat].buy-btn {
    font-size: 14px !important;
    letter-spacing: .1px !important;
    min-height: 40px !important;
    padding: 10px 22px !important;
}

/* 5. Active filters row — "Active:" prefix label */
.active-filters:not(:empty)::before {
    color: rgba(var(--cl-e), 1);
    content: "Активні:";
    font-family: var(--font-family2);
    font-size: 12px;
    white-space: nowrap;
}

/* суфікс " pts" біля рейтингу прибрано — на сайті його немає */

/* 7. Promo sidebar link — brand blue (kept for reference, hidden by #8 below) */
.aside-advertising__link { color: rgba(var(--bg-d), 1) !important; }
.aside-advertising__link:hover { color: rgba(var(--bg-l), 1) !important; opacity: 1 !important; }

/* Rotating tips inside .consult-tooltip */
.consult-tooltip[data-tips-rotator] {
    align-items: center !important;
    overflow: hidden;
}
.consult-tooltip__viewport {
    display: grid;
    flex: 1;
    line-height: 1.45;
}
.consult-tooltip__tip {
    color: rgba(var(--cl-q), 1);
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateY(6px);
    transition: opacity .55s ease, transform .55s ease;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.consult-tooltip__tip.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    height: auto;
    overflow: visible;
}
.consult-tooltip__tip:hover .consult-tooltip__cta { text-decoration: underline; }
.consult-tooltip__cta {
    color: rgba(var(--bg-d), 1);
    font-weight: 700;
    margin-left: 4px;
    white-space: nowrap;
}

/* Mobile: hide 3-col grid toggle, keep only grid2 + list */
@media (max-width: 767px) {
}

/* ---------- Lead card time chip ---------- */
.lead-card__time {
    align-items: center;
    color: rgba(var(--cl-e), 1);
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 500;
    gap: 3px;
    margin-left: 8px;
    white-space: nowrap;
}
.lead-card__time .icon {
    color: rgba(var(--cl-e), 1);
    height: 12px;
    opacity: .7;
    width: 12px;
}
/* Make sure source pill is pushed to the right with time before it */
.main-order__inner { gap: 6px; }
.main-order__inner .lead-source { margin-left: auto; }

/* ---------- Combined BUY · $price button ---------- */
.buy-btn {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    white-space: nowrap;
}
.buy-btn__label { font-weight: 750; letter-spacing: .03em; }
.buy-btn__sep   { opacity: .55; font-weight: 700; }
.buy-btn__price { font-weight: 750; }

/* ============================================================
   VIEW MODE: 3-COLUMN COMPACT (default)
   ============================================================ */
.order-list {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.order-list__item { display: block; }
.order-list__item .main-order { height: 100%; }

/* Compact tweaks for 3-col cards */
.order-list .main-order {
    padding: 12px;
}
.order-list .main-order__top { padding: 0; }
.order-list .main-order__inner { padding: 0; margin-bottom: 6px; }
.order-list .main-order__title {
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.25;
    margin-top: 2px;
}
.order-list .lead-card__desc {
    -webkit-line-clamp: 2;
    font-size: 12px;
    margin: 6px 0 8px;
}
.order-list .lead-card__footer {
    flex-direction: column;
    gap: 8px;
    padding: 0;
}
.order-list .lead-card__tags {
    gap: 5px 10px;
    font-size: 11px;
}
.order-list .lead-card__tag .icon { height: 11px; width: 11px; }
.order-list .buy-wrap { width: 100%; }
.order-list .buy-btn { padding: 8px 12px; width: 100%; font-size: 13px; }
.order-list .buy-hint { font-size: 11px; }

/* ============================================================
   VIEW MODE: 2-COLUMN (override default)
   ============================================================ */
.order-list--grid2,
[data-view-mode="grid2"] .order-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
[data-view-mode="grid2"] .order-list .main-order { padding: 16px; }
[data-view-mode="grid2"] .order-list .main-order__title { font-size: clamp(15px, 1.3vw, 18px); }
[data-view-mode="grid2"] .order-list .lead-card__desc { font-size: 13px; -webkit-line-clamp: 2; }
[data-view-mode="grid2"] .order-list .lead-card__footer { flex-direction: row; align-items: flex-end; }
[data-view-mode="grid2"] .order-list .buy-wrap { width: auto; }
[data-view-mode="grid2"] .order-list .buy-btn { width: auto; padding: 10px 18px; font-size: 14px; }

/* ============================================================
   VIEW MODE: LIST / TABLE (single row per lead)
   ============================================================ */

/* Wrapper — passthrough in grid modes; card shell in list mode */
.order-list-wrap { /* no styles in card/grid mode */ }

.order-list__head { display: none; }

/* ============================================================
   INBOX TAB STYLING (alert badge + ACCEPT button + timer)
   ============================================================ */
.topbar__count--alert,
.new-orders__badge--alert,
.mobile-bottom-nav__badge--alert {
    background: rgba(var(--bg-n), 1) !important;
    color: #fff !important;
}

/* Pulsing dot for Inbox tab when leads pending */
.topbar__tab .topbar__count--alert {
    animation: inbox-pulse 1.8s ease-in-out infinite;
}
@keyframes inbox-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ACCEPT button (Inbox card primary action) */
.inbox-accept-btn {
    background: rgba(var(--bg-d), 1) !important;
    border: 0;
    color: #fff !important;
    cursor: pointer;
    font-family: var(--font-family2);
}
.inbox-accept-btn:hover {
    filter: brightness(1.08);
}
.inbox-timer {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
/* When time running out (< 5 min) make it red-ish */
.inbox-accept-btn.is-urgent {
    background: rgba(var(--bg-n), 1) !important;
    animation: inbox-pulse 1.5s ease-in-out infinite;
}

/* Card fade-out on accept / expire */
.order-list__item.is-removing {
    animation: inbox-card-out .35s ease-in forwards;
}
@keyframes inbox-card-out {
    to { opacity: 0; transform: translateY(-6px) scale(.98); }
}

/* Inbox accept feedback message */
.inbox-accepted-msg {
    align-items: center;
    color: rgba(var(--bg-d), 1);
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    padding: 8px 0;
}

/* Inbox empty state */
.inbox-empty {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 11px 0 rgba(6, 32, 44, .09);
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    padding: 60px 24px;
    text-align: center;
}
.inbox-empty__title {
    color: rgba(var(--cl-q), 1);
    font-size: 18px;
    font-weight: 750;
    margin-bottom: 8px;
}

/* Responsive: collapse 3-col → 2-col on tablets, 1-col on mobile */
@media (max-width: 1200px) {
}
@media (max-width: 1100px) {
    .order-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-view-mode="grid2"] .order-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .order-list { grid-template-columns: 1fr; }
}

/* ============================================================
   PREMIUM MICRO-INTERACTIONS & TACTILE FEEDBACK OVERRIDES
   ============================================================ */

/* Tactile Click/Tap Response on all interactive components */
.btn, 
.buy-btn, 
.view-btn, 
.sidebar__nav-link,
.saved-filter, 
.filter-chip,
.mobile-bottom-nav__item {
    transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), 
                background-color 150ms ease, 
                border-color 150ms ease, 
                box-shadow 150ms ease,
                color 150ms ease;
}

.btn:active, 
.buy-btn:active, 
.view-btn:active, 
.sidebar__nav-link:active,
.saved-filter:active, 
.filter-chip:active,
.mobile-bottom-nav__item:active {
    transform: scale(0.96);
}

/* Strictly gate hover states to desktop mouse cursor users only (resolves mobile sticky hover states) */
@media (hover: hover) and (pointer: fine) {
    .btn:hover,
    .buy-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(6, 32, 44, .12);
    }
    .saved-filter:hover {
        background: rgba(var(--bg-s), 0.85);
    }
    .filter-chip:hover {
        background: rgba(var(--bg-s), 0.85);
    }
}

/* Tactile Click/Tap Response for Lead Cards and CRM Cards */
.order-list__item[data-lead] .main-order,
.order-list__item[data-crm-card] .main-order,
.crm-card[data-crm-card] {
    transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 180ms ease !important;
}

.order-list__item[data-lead]:active .main-order,
.order-list__item[data-crm-card]:active .main-order,
.crm-card[data-crm-card]:active {
    transform: scale(0.98) translateY(0) !important;
    box-shadow: 0 2px 8px rgba(6, 32, 44, 0.06) !important;
}

/* Staggered entrance animation for lead card list */
@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.order-list__item {
    opacity: 0;
    animation: cardEntrance 420ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.order-list__item:nth-child(1) { animation-delay: 0ms; }
.order-list__item:nth-child(2) { animation-delay: 40ms; }
.order-list__item:nth-child(3) { animation-delay: 80ms; }
.order-list__item:nth-child(4) { animation-delay: 120ms; }
.order-list__item:nth-child(5) { animation-delay: 160ms; }
.order-list__item:nth-child(6) { animation-delay: 200ms; }
.order-list__item:nth-child(n+7) { animation-delay: 240ms; }

/* Global Scrollbar Gutter Stabilization to prevent Layout Shift when side-drawers or modals open */
html {
    scrollbar-gutter: stable !important;
}

/* ============================================================
   Chat modal (My Leads) — floating bottom-right / expanded centered
   ============================================================ */
.chat-modal {
    bottom: 20px;
    pointer-events: none;
    position: fixed;
    right: 20px;
    top: auto;
    transform: translateY(20px);
    transition: transform .25s ease, opacity .25s ease;
    opacity: 0;
    z-index: 110;
}
.chat-modal.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.chat-modal__inner {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(6, 32, 44, .28);
    display: flex;
    flex-direction: column;
    height: 580px;
    overflow: hidden;
    width: 400px;
    max-height: calc(100vh - 40px);
    max-width: calc(100vw - 40px);
}
.chat-modal.is-expanded {
    inset: 0;
    bottom: 0;
    right: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    background: rgba(15, 25, 40, .55);
    padding: 30px;
}
.chat-modal.is-expanded .chat-modal__inner {
    height: 720px;
    width: 720px;
    max-height: calc(100vh - 60px);
    max-width: calc(100vw - 60px);
}

/* Header */
.chat-modal__head {
    align-items: center;
    background: linear-gradient(135deg, #1A2A40, #243454);
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: space-between;
    padding: 14px 16px;
}
.chat-modal__title {
    font-family: var(--font-family2);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}
.chat-modal__head-actions { display: flex; gap: 6px; }
.chat-modal__icon-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    display: flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    transition: background-color .15s ease, color .15s ease;
    width: 28px;
}
.chat-modal__icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Body — bubbles */
.chat-modal__body {
    background: #F5F7FA;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 16px;
}
.chat-bubble {
    align-items: flex-end;
    display: flex;
    gap: 8px;
    max-width: 90%;
}
.chat-bubble--me { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble--client { align-self: flex-start; }
.chat-bubble__ava {
    background: #ddd;
    border-radius: 50%;
    flex: 0 0 28px;
    height: 28px;
    object-fit: cover;
    width: 28px;
}
.chat-bubble__pill {
    background: #E8F1F9;
    border-radius: 14px;
    padding: 10px 14px 8px;
    position: relative;
    min-width: 0;
}
.chat-bubble--client .chat-bubble__pill {
    background: #fff;
    border: 1px solid rgba(var(--bg-u), 1);
}
.chat-bubble__label {
    color: rgba(var(--bg-d), 1);
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    margin-bottom: 4px;
    text-transform: capitalize;
}
.chat-bubble__text {
    color: rgba(var(--cl-q), 1);
    font-family: var(--font-family2);
    font-size: 13.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.chat-bubble__time {
    align-items: center;
    color: rgba(var(--cl-e), 1);
    display: flex;
    font-size: 10.5px;
    gap: 3px;
    justify-content: flex-end;
    margin-top: 5px;
}
.chat-bubble__time::after {
    color: rgba(var(--bg-d), 1);
    content: "✓";
    font-size: 11px;
}
.chat-bubble__attach {
    align-items: center;
    background: rgba(255, 255, 255, .7);
    border-radius: 8px;
    display: flex;
    font-size: 12px;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
}
.chat-bubble__attach-icon {
    align-items: center;
    background: rgba(var(--bg-d), 1);
    border-radius: 4px;
    color: #fff;
    display: flex;
    flex: 0 0 28px;
    font-size: 11px;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    width: 28px;
}
.chat-bubble__attach-meta { display: flex; flex-direction: column; }
.chat-bubble__attach-name { color: rgba(var(--cl-q), 1); font-weight: 700; font-size: 12.5px; }
.chat-bubble__attach-size { color: rgba(var(--cl-e), 1); font-size: 11px; }

.chat-day {
    color: rgba(var(--cl-e), 1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    margin: 6px 0;
    text-align: center;
    text-transform: uppercase;
}

/* Compose bar */
.chat-modal__compose {
    align-items: center;
    background: #fff;
    border-top: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    padding: 10px 12px;
}
.chat-modal__attach,
.chat-modal__send,
.chat-modal__call-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(var(--cl-e), 1);
    cursor: pointer;
    display: flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    transition: background-color .15s ease, color .15s ease;
    width: 36px;
}
.chat-modal__attach:hover { background: rgba(var(--bg-u), 1); color: rgba(var(--cl-q), 1); }
.chat-modal__send { background: rgba(var(--bg-d), 1); color: #fff; }
.chat-modal__send:hover { background: rgba(var(--bg-l), 1); }
.chat-modal__call-btn { color: rgba(var(--bg-d), 1); }
.chat-modal__call-btn:hover { background: rgba(19, 151, 214, .12); }
.chat-modal__input {
    background: rgba(var(--bg-i), .8);
    border: 0;
    border-radius: 20px;
    color: rgba(var(--cl-q), 1);
    flex: 1;
    font-family: var(--font-family2);
    font-size: 14px;
    min-width: 0;
    outline: 0;
    padding: 10px 16px;
}
.chat-modal__input::placeholder { color: rgba(var(--cl-e), 1); }

/* ============================================================
   Call modal — phone icon in chat
   ============================================================ */
.call-modal {
    align-items: center;
    display: none;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 200;
}
.call-modal.is-open { display: flex; }
.call-modal__overlay {
    background: rgba(10, 18, 30, .55);
    inset: 0;
    position: absolute;
}
.call-modal__panel {
    align-items: center;
    background: linear-gradient(160deg, #18283F, #0E1A2D);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 92vw;
    padding: 28px 36px 30px;
    position: relative;
    width: 520px;
    z-index: 1;
}
.call-modal__top-actions {
    display: flex;
    gap: 6px;
    position: absolute;
    right: 14px;
    top: 14px;
}
.call-modal__top-actions .call-modal__icon-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: rgba(255, 255, 255, .65);
    cursor: pointer;
    display: flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    transition: color .15s ease, background-color .15s ease;
    width: 28px;
}
.call-modal__top-actions .call-modal__icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.call-modal__avatar-wrap {
    margin-top: 18px;
    position: relative;
}
.call-modal__pulse {
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    height: 220px;
    inset: 0;
    margin: -25px;
    position: absolute;
    width: 220px;
    animation: callPulse 2.2s ease-out infinite;
}
@keyframes callPulse {
    0%   { transform: scale(.94); opacity: .8; }
    100% { transform: scale(1.18); opacity: 0; }
}
.call-modal__avatar {
    background: #1A2A40;
    border-radius: 50%;
    height: 170px;
    object-fit: cover;
    position: relative;
    width: 170px;
    z-index: 1;
}
.call-modal__name {
    font-family: var(--font-family2);
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
}
.call-modal__status {
    color: rgba(255, 255, 255, .68);
    font-family: var(--font-family2);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.call-modal__controls {
    display: flex;
    gap: 38px;
    margin-top: 14px;
}
.call-ctrl {
    align-items: center;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}
.call-ctrl__circle {
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 56px;
    justify-content: center;
    transition: background-color .15s ease, transform .15s ease;
    width: 56px;
}
.call-ctrl:hover .call-ctrl__circle { background: rgba(255, 255, 255, .22); transform: scale(1.04); }
.call-ctrl--end .call-ctrl__circle { background: rgba(var(--bg-n), 1); }
.call-ctrl--end:hover .call-ctrl__circle { background: rgba(var(--bg-n), .85); }
.call-ctrl__label {
    color: rgba(255, 255, 255, .8);
    font-family: var(--font-family2);
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   My Leads — card status badge (NEW / PROGRESS only)
   Spec badge (CRIM/FAM/RE/BIZ) is hidden on My Leads cards
   ============================================================ */
[data-crm-card] .lead-card__quality { display: none; }
.lead-card__status {
    align-items: center;
    border-radius: 1.25rem;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--font-family2);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .3px;
    padding: 3px 9px;
    text-transform: uppercase;
    white-space: nowrap;
}
.lead-card__status--new {
    background: rgba(var(--bg-n), 1);
    animation: leadStatusNewPulse 1.6s ease-in-out infinite;
}
.lead-card__status--working {
    background: rgba(var(--bg-d), 1);
}
.lead-card__status--waiting {
    background: rgba(var(--cl-h), 1);
}
.lead-card__status--closed {
    background: rgba(var(--cl-j), 1);
    color: rgba(var(--cl-q), 1);
}
@keyframes leadStatusNewPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, .42); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 45, 85, 0); }
}

/* Quick status filter row above My Leads cards */
.status-filter {
    align-items: center;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 11px 0 rgba(6, 32, 44, .09);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding: 8px;
}
.status-filter__btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 3px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 12.5px;
    font-weight: 700;
    gap: 7px;
    letter-spacing: .2px;
    padding: 9px 14px;
    transition: background-color .15s ease, color .15s ease;
}
.status-filter__btn:hover:not(.is-active) { background: rgba(var(--bg-u), 1); }
.status-filter__btn.is-active {
    background: rgba(var(--cl-q), 1);
    color: #fff;
}
.status-filter__btn--new.is-active     { background: rgba(var(--bg-n), 1); }
.status-filter__btn--working.is-active { background: rgba(var(--bg-d), 1); }
.status-filter__btn--waiting.is-active { background: rgba(var(--cl-h), 1); }
.status-filter__btn--closed.is-active  { background: rgba(var(--cl-j), 1); color: rgba(var(--cl-q), 1); }
.status-filter__count {
    background: rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    min-width: 18px;
    padding: 3px 6px;
    text-align: center;
}
.status-filter__btn:not(.is-active) .status-filter__count {
    background: rgba(var(--bg-u), 1);
    color: rgba(var(--cl-e), 1);
}
.status-filter__count:empty { display: none; }

/* Hide cards filtered out by status */
.order-list__item.is-filtered-out { display: none !important; }

/* CRM drawer — status dropdown (replaces the static crm-status-box) */
.crm-status-select {
    align-items: center;
    background: #fff;
    border: 1.5px solid rgba(var(--bg-u), 1);
    border-radius: 3px;
    color: rgba(var(--cl-q), 1);
    cursor: pointer;
    display: flex;
    font-family: var(--font-family2);
    font-size: 13px;
    font-weight: 700;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    position: relative;
    transition: border-color .15s ease;
}
.crm-status-select:hover { border-color: rgba(var(--bg-d), .6); }
.crm-status-select__label {
    color: rgba(var(--cl-e), 1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.crm-status-select__current {
    align-items: center;
    border-radius: 1.25rem;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .3px;
    padding: 3px 9px;
    text-transform: uppercase;
}
.crm-status-select__current[data-status="new"]     { background: rgba(var(--bg-n), 1); }
.crm-status-select__current[data-status="working"] { background: rgba(var(--bg-d), 1); }
.crm-status-select__current[data-status="waiting"] { background: rgba(var(--cl-h), 1); }
.crm-status-select__current[data-status="closed"]  { background: rgba(var(--cl-j), 1); color: rgba(var(--cl-q), 1); }
.crm-status-select__chev { color: rgba(var(--cl-e), 1); margin-left: auto; transition: transform .15s ease; }
.crm-status-select.is-open .crm-status-select__chev { transform: rotate(180deg); }
.crm-status-select__menu {
    background: #fff;
    border: 1px solid rgba(var(--bg-u), 1);
    border-radius: 3px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    display: none;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 5;
}
.crm-status-select.is-open .crm-status-select__menu { display: block; }
.crm-status-select__opt {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 10px;
    padding: 10px 14px;
    transition: background-color .15s ease;
}
.crm-status-select__opt:hover { background: rgba(var(--bg-i), 1); }
.crm-status-select__opt.is-active { background: rgba(19, 151, 214, .08); }
.crm-status-select__opt-pill {
    align-items: center;
    border-radius: 1.25rem;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .3px;
    padding: 3px 9px;
    text-transform: uppercase;
}
.crm-status-select__opt-pill[data-status="new"]     { background: rgba(var(--bg-n), 1); }
.crm-status-select__opt-pill[data-status="working"] { background: rgba(var(--bg-d), 1); }
.crm-status-select__opt-pill[data-status="waiting"] { background: rgba(var(--cl-h), 1); }
.crm-status-select__opt-pill[data-status="closed"]  { background: rgba(var(--cl-j), 1); color: rgba(var(--cl-q), 1); }

/* ============================================================
   "Moving to My Leads" overlay — Buy + Inbox Accept feedback
   ============================================================ */
.order-list__item.is-moving .main-order {
    position: relative;
    pointer-events: none;
}
.card-move-overlay {
    align-items: center;
    animation: cardMoveFadeIn .25s ease;
    background: rgba(255, 255, 255, .96);
    border-radius: inherit;
    box-shadow: inset 0 -3px 0 rgba(var(--bg-d), 1);
    color: rgba(var(--bg-d), 1);
    display: flex;
    font-family: var(--font-family2);
    font-size: 14px;
    font-weight: 750;
    gap: 10px;
    inset: 0;
    justify-content: center;
    letter-spacing: .5px;
    position: absolute;
    text-transform: uppercase;
    z-index: 10;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.card-move-overlay__arrow {
    animation: cardMoveArrow 1.1s ease-in-out infinite;
    font-size: 22px;
    line-height: 1;
}
.card-move-overlay__text {
    align-items: baseline;
    display: inline-flex;
}
.card-move-overlay__dots {
    display: inline-block;
    margin-left: 2px;
    min-width: 18px;
    text-align: left;
}
.card-move-overlay__dots i {
    animation: cardMoveDot 1.2s infinite;
    display: inline-block;
    font-style: normal;
    opacity: 0;
}
.card-move-overlay__dots i:nth-child(1) { animation-delay: 0s; }
.card-move-overlay__dots i:nth-child(2) { animation-delay: .2s; }
.card-move-overlay__dots i:nth-child(3) { animation-delay: .4s; }

@keyframes cardMoveFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardMoveArrow {
    0%   { transform: translateX(-14px); opacity: 0; }
    25%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { transform: translateX(18px); opacity: 0; }
}
@keyframes cardMoveDot {
    0%, 60%, 100% { opacity: 0; }
    20%, 40%      { opacity: 1; }
}

/* ============================================================
   Topbar Saved/Filters buttons — icon-only on tablet & mobile
   ============================================================ */
@media (max-width: 1100px) {
    .topbar__btn[data-open-saved],
    .topbar__btn[data-open-filters] {
        gap: 0;
        height: 36px;
        justify-content: center;
        min-width: 0;
        padding: 0;
        position: relative;
        width: 36px;
    }
    /* Hide the inner text node ("Saved"/"Filters") but keep the SVG */
    .topbar__btn[data-open-saved] > span:first-child,
    .topbar__btn[data-open-filters] > span:first-child {
        font-size: 0;
        gap: 0;
        line-height: 0;
    }
    .topbar__btn[data-open-saved] > span:first-child .icon,
    .topbar__btn[data-open-filters] > span:first-child .icon {
        font-size: initial;
        height: 16px;
        width: 16px;
    }
    /* Move the count badge to top-right corner as a small chip */
    .topbar__btn[data-open-saved] .topbar__count--badge,
    .topbar__btn[data-open-filters] .topbar__count--badge {
        font-size: 9px;
        line-height: 1;
        min-width: 14px;
        padding: 2px 4px;
        position: absolute;
        right: -5px;
        text-align: center;
        top: -5px;
    }
}

/* ============================================================
   SAVED FILTERS SIDEBAR DRAWER (feedback #1.1 / #1.2)
   ============================================================ */
.saved-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.saved-row {
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(var(--bg-s), 1);
    border-radius: 3px;
    display: flex;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.saved-row:hover {
    border-color: rgba(var(--bg-d), .5);
    box-shadow: 0 2px 11px 0 rgba(6, 32, 44, .09);
}
.saved-row__main {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-family: var(--font-family2);
    gap: 4px;
    padding: 12px 14px;
    text-align: left;
    min-width: 0;
}
.saved-row__name {
    align-items: center;
    color: rgba(var(--cl-q), 1);
    display: flex;
    font-size: 14px;
    font-weight: 750;
    gap: 7px;
}
.saved-row__push {
    background: rgba(var(--bg-d), 1);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(var(--bg-d), .18);
    flex: 0 0 7px;
    height: 7px;
    width: 7px;
}
.saved-row__params {
    color: rgba(var(--cl-e), 1);
    font-size: 12px;
    line-height: 1.4;
}
.saved-row__params--empty { font-style: italic; opacity: .7; }
.saved-row__actions {
    align-items: center;
    border-left: 1px solid rgba(var(--bg-u), 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.saved-row__edit,
.saved-row__delete {
    background: transparent;
    border: 0;
    color: rgba(var(--cl-e), 1);
    cursor: pointer;
    font-size: 15px;
    height: 50%;
    line-height: 1;
    padding: 0 14px;
    transition: background-color .15s ease, color .15s ease;
}
.saved-row__edit:hover   { background: rgba(var(--bg-d), .08); color: rgba(var(--bg-d), 1); }
.saved-row__delete:hover { background: rgba(var(--bg-n), .08); color: rgba(var(--bg-n), 1); }
.saved-list__empty,
.saved-list__limit {
    color: rgba(var(--cl-e), 1);
    font-family: var(--font-family2);
    font-size: 13px;
    line-height: 1.5;
    margin: 14px 2px 0;
}
.saved-list__limit { font-size: 12px; }

/* ============================================================
   HOVER STATES POLISH (feedback #13)
   Refine interactive feedback on mail/contacts/nav & links
   ============================================================ */

/* Sidebar contacts (email / phone / logout) */
.aside-contacts__link {
    transition: color .18s ease, background-color .18s ease;
}
.aside-contacts__link:hover {
    color: rgba(var(--bg-d), 1);
}
.aside-contacts__link:hover .aside-contacts__icon svg {
    color: rgba(var(--bg-d), 1);
}
.aside-contacts__icon svg { transition: color .18s ease; }

/* Header account links (balance + subscription) */
.user-about__balance-value,
.subscribe-label,
.user-about__rating {
    transition: color .18s ease, opacity .18s ease;
}
.user-about__balance-value:hover,
.subscribe-label:hover { color: rgba(var(--bg-l), 1); }
.user-about__rating:hover { opacity: .8; }

/* Sidebar nav items — smooth feedback */
.aside-nav__link { transition: background-color .18s ease, color .18s ease; }
.aside-nav__link:hover:not(.active) {
    background: rgba(var(--bg-d), .07);
    color: rgba(var(--bg-d), 1);
}
.aside-nav__link:hover:not(.active) svg { color: rgba(var(--bg-d), 1); }

/* Mobile bottom nav */
.mobile-bottom-nav__item { transition: color .18s ease, background-color .18s ease; }
.mobile-bottom-nav__item:hover:not(.active) { color: rgba(var(--bg-d), 1); }

/* Topbar tabs (All questions / My answers etc.) */
.topbar__tab { transition: color .18s ease, border-color .18s ease; }
.topbar__tab:hover:not(.active) { color: rgba(var(--bg-d), 1); }

/* Lead/CRM card lift already defined; ensure smooth transition on the shell */
.order-list__item[data-lead] .main-order,
.order-list__item[data-crm-card] .main-order {
    transition: box-shadow .2s ease, transform .2s ease;
}

/* Close buttons (drawers / modals) */
.lead-drawer__close,
.filter-drawer__close { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.lead-drawer__close:hover,
.filter-drawer__close:hover {
    background: rgba(var(--cl-e), .12);
    transform: rotate(90deg);
}

/* ============ ASIDE PROMO PLATE (sidebar advertising CTA) ============ */
.aside-promo {
    background: linear-gradient(135deg, rgba(var(--bg-d), 1) 0%, rgba(var(--bg-l), 1) 100%);
    border-radius: 2px;
    color: #fff;
    display: block;
    margin: 14px 0 6px;
    overflow: hidden;
    padding: 16px 16px 14px;
    position: relative;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.aside-promo:hover {
    box-shadow: 0 6px 20px rgba(19, 151, 214, .35);
    transform: translateY(-1px);
}
.aside-promo__title {
    color: #fff;
    font-family: var(--font-family2);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.1px;
    margin: 0 0 4px;
}
.aside-promo__text {
    color: rgba(255, 255, 255, .85);
    font-family: var(--font-family2);
    font-size: 11px;
    line-height: 1.4;
    margin: 0 0 10px;
}
.aside-promo__cta {
    align-items: center;
    background: rgba(255, 255, 255, .18);
    border-radius: 3px;
    color: #fff;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 700;
    gap: 6px;
    letter-spacing: .6px;
    padding: 7px 12px;
    text-transform: uppercase;
    transition: background-color .15s ease;
}
.aside-promo:hover .aside-promo__cta {
    background: rgba(255, 255, 255, .28);
}

/* ============ ASIDE PROMO — ACTIVE CAMPAIGN STATE ============ */
.aside-promo--active {
    background:
      radial-gradient(circle at 92% 0%, rgba(255, 255, 255, .14), transparent 55%),
      linear-gradient(160deg, #0a5e88 0%, #0d6fa0 50%, rgba(var(--bg-d), 1) 100%);
    padding: 14px 14px 14px;
    position: relative;
    text-align: center;
}
.aside-promo-active__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    min-height: 22px;
}
.aside-promo-active__badge {
    align-items: center;
    background: rgba(46, 213, 115, .92);
    border-radius: 1.25rem;
    color: #fff;
    display: inline-flex;
    font-family: var(--font-family2);
    font-size: 9px;
    font-weight: 750;
    gap: 5px;
    letter-spacing: .8px;
    padding: 3px 8px 3px 7px;
    text-transform: uppercase;
}
.aside-promo-active__badge::before {
    content: '';
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
    height: 5px;
    width: 5px;
}
.aside-promo-active__title {
    color: #fff;
    font-family: var(--font-family2);
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.1px;
    margin: 0 0 3px;
    text-align: center;
}
.aside-promo-active__valid {
    color: rgba(255, 255, 255, .82);
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 400;
    margin: 0 0 12px;
    text-align: center;
}
.aside-promo-active__rows {
    border-top: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 11px;
    padding-top: 11px;
}
.aside-promo-active__row {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}
.aside-promo-active__row > span {
    color: rgba(255, 255, 255, .9);
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1px;
    text-align: left;
}
.aside-promo-active__row > b {
    background: rgba(255, 255, 255, .22);
    border-radius: 1.25rem;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .1px;
    padding: 4px 10px;
}
.aside-promo-active__row--total {
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin-top: 4px;
    padding-top: 8px;
}
.aside-promo-active__row--total > span { font-size: 12px; }
.aside-promo-active__row--total > b {
    background: rgba(255, 255, 255, .35);
    font-size: 12px;
}
.aside-promo-active__period {
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .92);
    font-family: var(--font-family2);
    font-size: 11px;
    font-weight: 400;
    padding-top: 9px;
    text-align: center;
}
.aside-promo-active__period b { font-weight: 750; }
.aside-promo-active__end {
    align-items: center;
    background: rgba(255, 255, 255, .18);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--font-family2);
    font-size: 12px;
    height: 20px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background-color .15s ease, transform .15s ease;
    width: 20px;
}
.aside-promo-active__end:hover {
    background: rgba(255, 45, 85, .85);
    transform: rotate(90deg);
}
/* In active state, hide the CTA-state inner elements (just a safety net) */
.aside-promo--active .aside-promo__title,
.aside-promo--active .aside-promo__text,
.aside-promo--active .aside-promo__cta { display: none; }

/* Сайдбар впритул до лівого краю вікна (на мобілі сайдбар прихований — відступ контенту лишається) */
@media (min-width: 768px) {
    #app .container--big { padding-left: 0; }
    #app .main-inner { padding-top: 0; }
    /* sticky top:16px відштовхує сайдбар від верху — прибираємо, щоб був впритул */
    /* max-height:calc(100vh - 32px) + overflow:auto давали внутрішній скрол, щойно меню
       вище за вікно — знімаємо обмеження, меню росте на всю висоту, скролиться сторінка */
    #app .aside-menu { top: 0; max-height: none; overflow-y: visible; }
}

/* ===== Резерв ліда на 90 секунд у модалці підтвердження придбання ===== */
.cp-reserve { margin: 14px 0 4px; text-align: left; }
.cp-reserve__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cp-reserve__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: rgba(var(--bg-d), 1); }
.cp-reserve__time { font-size: 15px; font-weight: 800; color: rgba(var(--bg-d), 1); font-variant-numeric: tabular-nums; }
.cp-reserve__bar { height: 4px; border-radius: 2px; background: rgba(var(--bg-u), 1); overflow: hidden; }
.cp-reserve__bar i { display: block; height: 100%; width: 100%; background: rgba(var(--bg-d), 1); border-radius: 2px; transition: width 1s linear; }
.cp-reserve__hint { margin: 7px 0 0; font-size: 12px; line-height: 1.45; color: rgba(var(--cl-e), 1); }
.cp-reserve__rebook { margin-top: 6px; font-size: 12.5px; }
.is-reserve-expired .cp-reserve__label,
.is-reserve-expired .cp-reserve__time { color: #b33636; }
.is-reserve-expired .cp-reserve__bar i { background: #b33636; }
.funds-modal__body [data-cp-confirm][disabled] { opacity: .55; cursor: not-allowed; }
/* Стан «лід придбав інший спеціаліст» на картці списку */
.card-move-overlay--taken { box-shadow: inset 0 -3px 0 #6b7280; color: #6b7280; }
.cp-reserve__rebook[hidden] { display: none; }

/* ===== Мобільне меню: бургер відкриває сайдбар (body.menu-open ставить js/main.js) ===== */
@media (max-width: 767px) {
    body.menu-open { overflow: hidden; }
    body.menu-open::before { content: ""; position: fixed; inset: 0; background: rgba(6, 32, 44, .55); z-index: 998; }
    body.menu-open .aside-menu { display: block !important; position: fixed; top: 0; left: 0; bottom: 0;
        width: min(330px, 88vw); z-index: 999; overflow-y: auto; background: #000;
        padding: 18px 16px 24px; animation: asideSlideIn .22s ease; }
    body.menu-open .burger { position: relative; z-index: 1000; }
}
@keyframes asideSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }


/* ===== КАНОН УНІФІКАЦІЇ (пакет v139): спільні компоненти для всіх сторінок ===== */
.buy-btn:disabled { background: rgba(var(--bg-d), .32); cursor: not-allowed; }
.btn-secondary { align-items: center; background: #fff; border: 1px solid rgba(var(--bg-s), 1); border-radius: 3px; color: rgba(var(--cl-q), 1); cursor: pointer; display: inline-flex; font-family: var(--font-family2); font-size: 14px; font-weight: 700; gap: 8px; justify-content: center; letter-spacing: .2px; min-height: 48px; padding: 0 22px; text-transform: uppercase; transition: border-color .25s, color .25s; }
.btn-secondary:hover { border-color: rgba(var(--bg-d), 1); color: rgba(var(--bg-d), 1); }
.btn-secondary:disabled { border-color: rgba(var(--bg-s), 1); color: #ccc; cursor: not-allowed; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
@media (max-width: 640px) {
    .form-actions { flex-direction: column-reverse; }
    .form-actions .buy-btn, .form-actions .btn-secondary { width: 100%; }
}
.page-head { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; margin-bottom: 18px; }
.page-head .order-section__title { margin: 0; }
.page-search { flex: 0 1 340px; position: relative; }
.page-search__input { background: #fff; border: 1px solid rgba(var(--bg-s), 1); border-radius: 3px; color: rgba(var(--cl-q), 1); font-family: var(--font-family2); font-size: 14px; min-height: 44px; padding: 10px 46px 10px 14px; width: 100%; }
.page-search__input::placeholder { color: rgba(var(--cl-e), 1); }
.page-search__input:focus { border-color: rgba(var(--bg-d), 1); outline: none; }
.page-search__btn { align-items: center; background: none; border: 0; bottom: 0; color: rgba(var(--cl-e), 1); cursor: pointer; display: flex; justify-content: center; position: absolute; right: 0; top: 0; transition: color .25s; width: 44px; }
.page-search__btn:hover { color: rgba(var(--bg-d), 1); }
.form-label { color: rgba(var(--cl-e), 1); display: block; font-family: var(--font-family2); font-size: 11px; font-weight: 700; letter-spacing: .5px; margin-bottom: 8px; text-transform: uppercase; }
.empty-state { align-items: center; background: #fff; border-radius: 3px; box-shadow: 0 2px 11px rgba(6, 32, 44, .09); display: flex; flex-direction: column; gap: 18px; padding: 56px 24px 60px; text-align: center; }
.empty-state__icon { align-items: center; background: rgba(var(--bg-d), .08); border-radius: 50%; color: rgba(var(--bg-d), 1); display: flex; height: 64px; justify-content: center; width: 64px; }
.empty-state__title { color: rgba(var(--cl-q), 1); font-size: 15px; font-weight: 600; }
.empty-state__hint { color: rgba(var(--cl-e), 1); font-size: 13px; margin-top: -8px; }

/* Іконки в блоці «Контакти персонального менеджера»: підкладка біла — робимо іконку темною */
.aside-contacts__icon svg { color: rgba(var(--cl-q), 1); }
.aside-contacts__link:hover .aside-contacts__icon svg { color: rgba(var(--bg-d), 1); }

/* ===== Адаптивний топбар розділу «Ліди» =====
   Логіка: вкладки ніколи не переносяться — вони стають смугою з горизонтальним
   скролом; праві кнопки на вузьких екранах згортаються до іконок із бейджем;
   перемикач вигляду ховається там, де картки й так в одну колонку. */
.topbar { flex-wrap: nowrap; }
.topbar__tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); }
/* коли стрічка не скролиться — маска не потрібна */
.topbar__tabs:not([data-scrollable]) { -webkit-mask-image: none; mask-image: none; }
.topbar__tabs::-webkit-scrollbar { display: none; }
.topbar__tab-item { flex: 0 0 auto; }
.topbar__tab { white-space: nowrap; }
.topbar__spacer { display: none; }

/* межа між стрічкою вкладок і діями + натяк, що стрічка скролиться */
@media (max-width: 1180px) {
    .topbar { gap: 8px; padding: 8px 10px; }
    .topbar__tab { font-size: 13.5px; }
}

/* кнопки → компактні іконки з бейджем */
@media (max-width: 1024px) {
    .topbar__btn { gap: 0; padding: 0; width: 38px; height: 38px; justify-content: center; position: relative; }
    .topbar__btn > span:first-child { font-size: 0; gap: 0; }
    .topbar__btn > span:first-child .icon { font-size: initial; margin: 0; }
    .topbar__btn .topbar__count--badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
        padding: 0 5px; font-size: 10px; line-height: 18px; text-align: center; border-radius: 999px; }
}

/* перемикач вигляду зайвий на вузькому — картки в одну колонку */
@media (max-width: 860px) {
}

/* найвужче: усе лишається в ОДНОМУ рядку — стрічка вкладок звужується,
   кнопки-іконки притиснуті праворуч і не «висять» окремим поверхом */
@media (max-width: 600px) {
    .topbar { flex-wrap: nowrap; gap: 6px; padding: 7px 8px; }
    .topbar__tabs { gap: 12px; }
    .topbar__tab { font-size: 13px; gap: 5px; }
    .topbar__tab .topbar__count { font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 5px; }
    .topbar__btn { width: 34px; height: 34px; }
    .topbar__btn .topbar__count--badge { min-width: 16px; height: 16px; line-height: 16px; font-size: 9.5px; top: -5px; right: -5px; }
    /* роздільник, щоб кнопки візуально не злипались зі стрічкою */
    .topbar > .topbar__btn:first-of-type { margin-left: 8px; }
    .topbar > .topbar__btn:last-of-type { margin-right: 2px; }
}