.cm-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(37, 150, 190, 0.14), transparent 24%),
        linear-gradient(180deg, #eef3f6 0%, #f7f8fa 28%, #f8fafc 100%);
    color: #15212b;
    font-family: 'DM Sans', sans-serif;
    padding-top: var(--navbar-height, 80px);
    padding-bottom: 56px;
}

.cm-hero {
    background:
        linear-gradient(135deg, rgba(17, 36, 48, 0.96) 0%, rgba(20, 51, 74, 0.98) 58%, rgba(26, 90, 120, 0.95) 100%);
    color: #fff;
    padding: 34px 24px 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cm-hero-inner {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.cm-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(37, 150, 190, 0.16);
    border: 1px solid rgba(71, 185, 229, 0.32);
    color: #6cd1f4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.cm-hero h1 {
    margin: 0 0 12px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3.7rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.cm-hero p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}

.cm-hero-search {
    position: relative;
    max-width: 540px;
    margin: 28px auto 0;
}

.cm-hero-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.95rem;
}

.cm-hero-search input {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    padding: 0 18px 0 44px;
    font-size: 0.96rem;
    outline: none;
}

.cm-hero-search input::placeholder {
    color: rgba(255, 255, 255, 0.44);
}

.cm-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.cm-stat {
    padding: 14px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cm-stat strong {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cm-stat span {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.62);
}

.cm-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.cm-filters {
    position: relative;
    top: auto;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #d9e2e8;
    border-radius: 20px;
    padding: 18px 16px;
    box-shadow: 0 10px 24px rgba(23, 42, 58, 0.06);
}

.cm-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cm-filters-head h2 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
}

.cm-clear-link {
    border: none;
    background: none;
    color: #2596be;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
}

.cm-filter-block + .cm-filter-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e6edf1;
}

.cm-filter-title {
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5d6b75;
}

.cm-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    color: #33424c;
    font-size: 0.9rem;
    cursor: pointer;
}

.cm-check input {
    accent-color: #2596be;
}

.cm-results {
    min-width: 0;
}

.cm-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.cm-toolbar-left {
    min-width: 0;
}

.cm-results-count {
    font-size: 1rem;
    font-weight: 700;
    color: #15212b;
}

.cm-active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cm-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf4f8;
    color: #466072;
    font-size: 0.78rem;
    font-weight: 600;
}

.cm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cm-sort {
    height: 38px;
    border-radius: 12px;
    border: 1px solid #d7e0e5;
    background: rgba(255, 255, 255, 0.9);
    padding: 0 14px;
    color: #304350;
    font-size: 0.88rem;
    outline: none;
}

.cm-view-toggle {
    display: inline-flex;
    border: 1px solid #d7e0e5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

.cm-view-btn {
    width: 40px;
    height: 38px;
    border: none;
    background: transparent;
    color: #657783;
    cursor: pointer;
}

.cm-view-btn.is-active {
    background: #16354a;
    color: #fff;
}

.cm-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cm-row-card,
.cm-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d9e3e8;
    box-shadow: 0 10px 22px rgba(22, 43, 59, 0.06);
}

.cm-row-card {
    border-radius: 22px;
    padding: 22px;
}

.cm-row-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.cm-company-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cm-company-line h3,
.cm-card-heading h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #12202a;
}

.cm-row-title-wrap p {
    margin: 10px 0 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #566873;
    max-width: 760px;
}

.cm-commission-box {
    min-width: 140px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f3f8fb;
    border: 1px solid #dfebf1;
    text-align: right;
}

.cm-commission-box span,
.cm-card-strip small {
    display: block;
    font-size: 0.72rem;
    color: #6d7f8c;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.cm-commission-box strong,
.cm-card-strip strong {
    display: block;
    margin-top: 6px;
    font-size: 1rem;
    color: #10202c;
}

.cm-chip-row,
.cm-card-tags,
.cm-card-meta,
.cm-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cm-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: #f4f7f9;
    border: 1px solid #e1e9ee;
    color: #4c6372;
    font-size: 0.8rem;
    font-weight: 600;
}

.cm-row-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
}

.cm-mini-stats {
    color: #60717d;
    font-size: 0.86rem;
}

.cm-mini-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cm-badge--featured {
    background: rgba(37, 150, 190, 0.14);
    color: #15759a;
}

.cm-badge--verified {
    background: rgba(38, 143, 82, 0.12);
    color: #1d8e55;
}

.cm-actions,
.cm-card-actions {
    display: flex;
    gap: 10px;
}

.cm-primary-btn,
.cm-secondary-btn {
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}

.cm-primary-btn {
    border: none;
    background: #2596be;
    color: #fff;
}

.cm-primary-btn:hover {
    background: #1c7ca0;
}

.cm-secondary-btn {
    border: 1px solid #d6e0e5;
    background: #fff;
    color: #2f4452;
}

.cm-secondary-btn--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.cm-secondary-btn:hover {
    background: #f7fafb;
}

.cm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.cm-card {
    border-radius: 22px;
    overflow: hidden;
}

.cm-card-cover {
    min-height: 150px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cm-card-cover-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
}

.cm-logo {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    color: #16354a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 800;
    white-space: pre-line;
    box-shadow: 0 10px 22px rgba(13, 24, 31, 0.18);
}

.cm-card-body {
    padding: 18px;
}

.cm-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.cm-rating {
    color: #596d7a;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.cm-card-tagline {
    margin: 10px 0 0;
    color: #576975;
    font-size: 0.92rem;
    line-height: 1.58;
    min-height: 66px;
}

.cm-card-meta {
    margin-top: 14px;
    color: #61737f;
    font-size: 0.82rem;
}

.cm-card-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.cm-card-strip > div {
    padding: 12px 13px;
    border-radius: 14px;
    background: #f2f7fa;
    border: 1px solid #dfebf0;
}

.cm-card-tags {
    margin-top: 14px;
}

.cm-card-actions {
    margin-top: 16px;
}

.cm-empty {
    padding: 72px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid #dae4ea;
    text-align: center;
}

.cm-empty-icon {
    font-size: 3rem;
    color: #8ea0ab;
    opacity: 0.56;
}

.cm-empty h3 {
    margin: 16px 0 8px;
    font-size: 1.2rem;
}

.cm-empty p {
    margin: 0;
    color: #667985;
}

@media (max-width: 1100px) {
    .cm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .cm-hero-stats,
    .cm-shell {
        grid-template-columns: 1fr;
    }

    .cm-filters {
        position: static;
    }
}

@media (max-width: 720px) {
    .cm-toolbar,
    .cm-row-top,
    .cm-row-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .cm-toolbar-right,
    .cm-actions,
    .cm-card-actions {
        width: 100%;
    }

    .cm-sort,
    .cm-primary-btn,
    .cm-secondary-btn {
        width: 100%;
    }

    .cm-grid {
        grid-template-columns: 1fr;
    }

    .cm-hero {
        padding-top: 24px;
    }

    .cm-shell {
        padding: 18px 14px;
    }

    .cm-row-card {
        padding: 18px;
    }
}

/* ── DB / live profile additions ── */
.cm-logo-img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.25);
}