/* Explain: Styles for UI components, including new styles for FaceCall. */
/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.7rem 1.35rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1.3;
    text-align: center;
}

.btn-neon {
    background: var(--neon-color);
    color: #06281A;
    box-shadow: 0 10px 24px rgba(61, 255, 136, 0.28);
}

.btn-neon:hover {
    background: #2EE878;
    transform: translateY(-1px);
}

.btn-primary-app {
    background: var(--primary-color);
    color: #ffffff;
}

.btn-primary-app:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-ghost-app {
    background: #ffffff;
    border-color: var(--border-color);
    color: var(--text-color);
}

.btn-ghost-app:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-light-outline {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.38);
    color: #ffffff;
}

.btn-light-outline:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #ffffff;
}

/* Header */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--neon-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: var(--primary-color);
    background: var(--primary-light);
}

.nav-link-mobile {
    display: block;
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
}

.nav-link-mobile:hover {
    background: var(--surface-alt);
}

.nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--text-color);
    cursor: pointer;
}

.mobile-menu {
    display: none;
    border-top: 1px solid var(--border-color);
    background: #ffffff;
}

.mobile-menu.is-open {
    display: block;
}

/* Cards and blocks */
.app-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.icon-tile--neon {
    background: rgba(61, 255, 136, 0.2);
    color: var(--neon-dark);
}

.badge-app {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-active {
    background: rgba(61, 255, 136, 0.22);
    color: var(--neon-dark);
}

.badge-draft {
    background: #EDF1F9;
    color: var(--text-muted);
}

.badge-done {
    background: rgba(30, 64, 175, 0.12);
    color: var(--primary-color);
}

.badge-scheduled {
    background: rgba(245, 158, 11, 0.18);
    color: #B45309;
}

.badge-soft {
    background: var(--surface-alt);
    color: var(--text-muted);
}

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.stat-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.stat-card__num {
    margin-top: 0.9rem;
    font-size: 1.85rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--primary-dark);
    line-height: 1.1;
}

.stat-card__label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.mini-stat {
    background: var(--surface-color);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}

.mini-stat dt {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.mini-stat dd {
    margin: 0.2rem 0 0;
    font-weight: 700;
}

/* Hero pieces */
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    background: rgba(61, 255, 136, 0.14);
    border: 1px solid rgba(61, 255, 136, 0.38);
    color: #B8FFD6;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.82);
}

.hero-stat i {
    color: var(--neon-color);
    font-size: 1.2rem;
}

.hero-stat span {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    line-height: 1.35;
}

.hero-stat strong {
    color: #ffffff;
    font-size: 0.95rem;
}

.hero-preview {
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .hero-preview {
        padding: 1.75rem;
    }
}

.hero-preview__card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 24px 60px rgba(4, 15, 35, 0.35);
    color: var(--text-color);
}

.hero-preview__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.hero-preview__row i {
    color: var(--success-color);
}

.progress-app {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--surface-alt);
    overflow: hidden;
}

.progress-app span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--neon-color));
}

/* Steps */
.step-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem 1.5rem;
    box-shadow: var(--shadow-card);
}

.step-card__num {
    position: absolute;
    inset-inline-start: 1.5rem;
    top: -0.85rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--primary-dark);
    color: var(--neon-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-heading);
}

/* CTA band */
.cta-band {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
    border-radius: var(--radius-xl);
    padding: 2.25rem;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    box-shadow: var(--shadow-lift);
}

@media (min-width: 768px) {
    .cta-band {
        flex-direction: row;
        align-items: center;
        padding: 3rem;
    }
}

/* Connection dashboard */
.conn-state {
    display: none;
}

.conn-state.is-active {
    display: block;
}

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.benefit-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
    color: var(--text-muted);
}

.benefit-list i {
    color: var(--success-color);
}

.avatar-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.1rem;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    cursor: pointer;
}

.form-error {
    display: none;
    color: var(--danger-color);
    font-size: 0.88rem;
    font-weight: 600;
}

.form-error.is-visible {
    display: block;
}

/* Groups */
.group-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all 0.25s ease;
}

.group-card:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-3px);
}

.group-card.is-selected {
    border-color: var(--neon-dark);
    box-shadow: 0 0 0 2px rgba(61, 255, 136, 0.35);
}

.group-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--surface-alt);
}

.group-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.group-card__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--neon-color);
    font-size: 2rem;
}

.group-card__cat {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: 0.75rem;
    background: rgba(255, 255, 255, 0.94);
    color: var(--primary-color);
}

.group-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.15rem;
}

.group-card__select {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.group-fav-btn {
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.94);
    color: #9AA7BD;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(11, 30, 61, 0.14);
}

.group-fav-btn:hover {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.group-fav-btn.is-on {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.group-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.group-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 0.2rem 0.62rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.filter-toggle.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.filter-toggle.is-active:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

/* Group activity */
.group-activity {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border-color);
}

.group-activity__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.group-activity__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.group-activity__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.group-activity__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
}

.group-activity__label {
    color: var(--text-muted);
}

.group-activity__value {
    font-weight: 700;
    color: var(--text-color);
}

.group-activity__empty {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.badge-fresh {
    background: rgba(14, 159, 91, 0.14);
    color: var(--success-color);
}

.badge-warn {
    background: rgba(245, 158, 11, 0.18);
    color: #B45309;
}

.badge-stale {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger-color);
}

.picker-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s ease;
}

.picker-row:hover {
    background: var(--surface-color);
}

/* Media upload + preview */
.media-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border: 1.5px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
}

.media-drop:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    color: var(--primary-color);
}

.media-drop i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.media-preview {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #0B1E3D;
}

.media-preview img,
.media-preview video {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: contain;
    background: #0B1E3D;
}

.campaign-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.9rem;
    margin-bottom: 1rem;
    background: var(--surface-alt);
}

.campaign-card__media img,
.campaign-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.groups-empty,
.campaigns-empty {
    display: none;
    margin-top: 1.5rem;
    text-align: center;
    padding: 2rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}

.groups-empty.is-visible,
.campaigns-empty.is-visible {
    display: block;
}

/* Campaigns */
.campaign-card {
    display: flex;
    flex-direction: column;
}

.campaign-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.campaign-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.15rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.icon-btn--danger:hover {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* Per-group publish results */
.group-result {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
}

.group-result--ok {
    border-color: rgba(14, 159, 91, 0.3);
}

.group-result--failed {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.045);
}

.group-result__info {
    flex: 1;
    min-width: 0;
}

.group-result__error {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--danger-color);
}

.group-result__retry {
    align-self: center;
}

.badge-failed {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger-color);
}

/* Tables and charts */
.table-app {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.table-app th {
    text-align: start;
    padding: 0.75rem 0.9rem;
    background: var(--surface-color);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.82rem;
}

.table-app td {
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.chart-box {
    position: relative;
    height: 20rem;
}

/* Modal */
.modal-app {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(11, 30, 61, 0.55);
    backdrop-filter: blur(3px);
}

.modal-app.is-open {
    display: flex;
}

.modal-panel {
    background: #ffffff;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75rem;
    box-shadow: var(--shadow-lift);
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    border: 1px solid var(--border-color);
    background: #ffffff;
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
}

.modal-close:hover {
    color: var(--text-color);
}

/* Pricing FAQ accordion */
.faq-item summary {
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Toasts */
.toast-stack {
    position: fixed;
    inset-inline-start: 1rem;
    bottom: 1rem;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: calc(100vw - 2rem);
}

.toast-app {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--primary-dark);
    color: #ffffff;
    padding: 0.8rem 1.1rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-lift);
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
}

.toast-app--ok {
    background: var(--success-color);
}

.toast-app--err {
    background: var(--danger-color);
}

/* Nav dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-dropdown__btn:hover,
.nav-dropdown.is-open .nav-dropdown__btn {
    color: var(--primary-color);
    background: var(--primary-light);
}

.nav-dropdown__menu {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    min-width: 13rem;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-lift);
    z-index: 60;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
    display: block;
}

.nav-dropdown__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-color);
    transition: background 0.2s ease;
}

.nav-dropdown__link:hover {
    background: var(--surface-alt);
    color: var(--primary-color);
}

/* WhatsApp accents */
.icon-tile--wa {
    background: rgba(37, 211, 102, 0.16);
    color: #128C4A;
}

.avatar-app--wa {
    background: #25D366;
    color: #06281A;
}

.btn-wa {
    background: #25D366;
    color: #06281A;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.28);
}

.btn-wa:hover {
    background: #1FB85A;
    transform: translateY(-1px);
}

/* Selects */
.select-app {
    display: inline-flex;
    align-items: center;
    min-width: 12rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
}

.select-app:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

/* Search bar */
.search-hero {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    padding: 0.35rem 1.15rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-hero:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.12);
}

.search-hero i {
    color: var(--primary-color);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.search-hero input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.6rem 0;
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--text-color);
    outline: none;
}

/* Header search */
.header-search {
    display: none;
    border-top: 1px solid var(--border-color);
    background: #ffffff;
}

.header-search.is-open {
    display: block;
}

.header-search__form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
}

.header-search__form > i {
    color: var(--primary-color);
    font-size: 1rem;
    flex-shrink: 0;
}

.header-search__input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font-body);
    color: var(--text-color);
    outline: none;
}

.header-search__input:focus {
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

/* Media library */
.media-lib__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-alt);
}

.media-lib__media img,
.media-lib__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text-muted);
    padding: 0.22rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.tag-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-filter:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.tag-filter.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.media-pick {
    display: block;
    width: 100%;
    padding: 0;
    text-align: start;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.media-pick:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card);
}

.media-pick.is-current {
    border-color: var(--neon-dark);
    box-shadow: 0 0 0 2px rgba(61, 255, 136, 0.35);
}

.media-pick__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-alt);
}

.media-pick__media img,
.media-pick__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Post templates */
.templates-box {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
}

.template-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
}

.template-row__body {
    flex: 1;
    min-width: 8rem;
}

.template-row__name {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
}

.template-row__excerpt {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Import groups */
.import-result {
    margin-top: 1.25rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
}

.import-result__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.import-result__title i {
    color: var(--primary-color);
}

.import-result__grid {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.import-stat {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: #ffffff;
}

.import-stat__num {
    font-size: 1.55rem;
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: 1.1;
    color: var(--text-color);
}

.import-stat__label {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.import-stat--ok .import-stat__num {
    color: var(--success-color);
}

.import-stat--skip .import-stat__num {
    color: var(--text-muted);
}

.import-result__note {
    margin-top: 0.85rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Campaign composer preview */
.preview-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
}

.post-mock {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-card);
}

.post-mock [hidden],
.wa-frame [hidden],
.tg-frame [hidden],
.ig-frame [hidden],
.tt-frame [hidden],
.yt-frame [hidden],
.pin-frame [hidden] {
    display: none !important;
}

.post-mock__head,
.wa-frame__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.post-mock__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: #1877F2;
    color: #ffffff;
    flex-shrink: 0;
}

.post-mock__avatar--wa {
    background: #25D366;
    color: #06281A;
}

.post-mock__avatar--tw {
    background: #1DA1F2;
    color: #ffffff;
}

.post-mock__avatar--li {
    background: #0A66C2;
    color: #ffffff;
}

.post-mock__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.post-mock__author {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
}

.post-mock__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.post-mock__text {
    margin-top: 0.85rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.post-mock__text.is-empty {
    color: var(--text-muted);
    font-style: italic;
}

.post-mock__media {
    margin: 0.85rem 0 0;
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--surface-alt);
}

.post-mock__media img,
.post-mock__media video {
    display: block;
    width: 100%;
    max-height: 17rem;
    object-fit: cover;
}

.post-mock__link {
    display: block;
    margin-top: 0.85rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--surface-color);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-color);
    overflow-wrap: anywhere;
}

.post-mock__bar {
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.post-mock__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.post-mock__actions span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.wa-frame {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #EFEAE2;
}

.wa-frame__head {
    padding: 0.7rem 0.9rem;
    background: #075E54;
    color: #ffffff;
}

.wa-frame__head .post-mock__author {
    color: #ffffff;
}

.wa-frame__head .post-mock__meta {
    color: rgba(255, 255, 255, 0.75);
}

.wa-frame__body {
    padding: 1rem;
    min-height: 12rem;
}

.wa-bubble {
    border-radius: 0.85rem;
    border-start-start-radius: 0.2rem;
    background: #DCF8C6;
    padding: 0.75rem 0.9rem;
    box-shadow: 0 1px 2px rgba(11, 30, 61, 0.12);
}

.wa-bubble .post-mock__media {
    background: rgba(0, 0, 0, 0.06);
}

.wa-bubble .post-mock__link {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(11, 30, 61, 0.12);
    color: #075E54;
}

.wa-bubble__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: #4A6E52;
}

/* Instagram feed preview */
.ig-frame {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ig-frame__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
}

.ig-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
    color: #ffffff;
    flex-shrink: 0;
}

.ig-media {
    margin: 0;
    aspect-ratio: 1 / 1;
    background: var(--surface-alt);
    overflow: hidden;
}

.ig-media img,
.ig-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ig-media--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.ig-media--empty i {
    font-size: 1.7rem;
    color: var(--border-color);
}

.ig-actions {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0.7rem 0.9rem 0;
    font-size: 1.25rem;
    color: var(--text-color);
}

.ig-caption {
    margin: 0;
    padding: 0.5rem 0.9rem 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ig-caption strong {
    font-weight: 700;
    margin-inline-end: 0.2rem;
}

.ig-caption .is-empty {
    color: var(--text-muted);
    font-style: italic;
}

.ig-link {
    display: block;
    margin: 0.6rem 0.9rem 0.9rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--surface-color);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color);
    overflow-wrap: anywhere;
}

/* TikTok vertical preview */
.tt-frame {
    position: relative;
    width: 100%;
    max-width: 17rem;
    margin-inline: auto;
    aspect-ratio: 9 / 16;
    background: #0B0B0B;
    border: 1px solid #1F1F1F;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tt-media {
    position: absolute;
    inset: 0;
    margin: 0;
    background: linear-gradient(160deg, #161616, #050505);
}

.tt-media img,
.tt-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tt-media--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

.tt-media--empty i {
    font-size: 1.7rem;
    color: rgba(255, 255, 255, 0.35);
}

.tt-actions {
    position: absolute;
    inset-inline-end: 0.7rem;
    bottom: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #ffffff;
    font-size: 1.45rem;
    text-align: center;
    z-index: 2;
}

.tt-overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2.75rem 0.9rem 0.9rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
    color: #ffffff;
    z-index: 1;
}

.tt-user {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.tt-caption {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tt-caption.is-empty {
    font-style: italic;
    color: rgba(255, 255, 255, 0.62);
}

.tt-link {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6EE7F5;
    overflow-wrap: anywhere;
}

/* Campaigns monthly schedule calendar */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}

.cal-weekdays span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.cal-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 5rem;
    padding: 0.4rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .cal-cell {
        min-height: 6.5rem;
        padding: 0.55rem;
    }
}

.cal-cell--muted {
    background: var(--surface-color);
}

.cal-cell--muted .cal-cell__day {
    opacity: 0.5;
}

.cal-cell--today {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.14);
}

.cal-cell__day {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-muted);
    line-height: 1;
}

.cal-cell--today .cal-cell__day {
    color: var(--primary-color);
}

.cal-chip {
    display: block;
    width: 100%;
    padding: 0.22rem 0.4rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: start;
    font-family: var(--font-body);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: transform 0.15s ease;
}

.cal-chip:hover {
    transform: translateY(-1px);
}

.cal-chip--draft {
    background: #EDF1F9;
    color: var(--text-muted);
}

.cal-chip--scheduled {
    background: rgba(245, 158, 11, 0.18);
    color: #B45309;
}

.cal-chip--published {
    background: rgba(61, 255, 136, 0.22);
    color: var(--neon-dark);
}

.cal-chip--done {
    background: rgba(30, 64, 175, 0.12);
    color: var(--primary-color);
}

.cal-chip--failed {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger-color);
}

.cal-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
}

.cal-group__body {
    flex: 1;
    min-width: 0;
}

/* Dashboard onboarding checklist */
.onboard-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
    transition: all 0.25s ease;
}

.onboard-step.is-current {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.12);
}

.onboard-step.is-done {
    background: var(--surface-color);
}

.onboard-step.is-done .onboard-step__tile {
    background: rgba(61, 255, 136, 0.2);
    color: var(--neon-dark);
}

.onboard-step__body {
    flex: 1;
    min-width: 10rem;
}

.onboard-step__title {
    display: block;
    font-weight: 700;
    color: var(--text-color);
}

.onboard-step.is-done .onboard-step__title {
    color: var(--text-muted);
}

.onboard-step__desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.onboard-step__status {
    flex-shrink: 0;
}

.onboard-step__cta {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .onboard-step__cta {
        width: 100%;
    }
}

/* Publishing log */
.log-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.log-entry--failed {
    border-color: rgba(220, 38, 38, 0.38);
    background: rgba(220, 38, 38, 0.04);
}

.log-entry__info {
    flex: 1;
    min-width: 12rem;
}

.log-entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.log-entry__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.log-entry__error {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--danger-color);
}

.log-entry__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

/* Post templates library */
.template-card {
    display: flex;
    flex-direction: column;
}

.template-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* Connected profiles */
.profile-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
    transition: all 0.25s ease;
}

.profile-card:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.profile-card.is-active {
    border-color: var(--neon-dark);
    box-shadow: 0 0 0 2px rgba(61, 255, 136, 0.3);
}

.profile-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-card__name {
    font-weight: 700;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card__meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card__facts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
}

.profile-card__fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.84rem;
}

.profile-card__fact dt {
    color: var(--text-muted);
}

.profile-card__fact dd {
    margin: 0;
    font-weight: 700;
    color: var(--text-color);
}

.profile-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Starter post templates pack */
.starter-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
    transition: all 0.25s ease;
}

.starter-card:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-3px);
}

.starter-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.starter-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.starter-tile--sale {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger-color);
}

.starter-tile--new {
    background: rgba(61, 255, 136, 0.2);
    color: var(--neon-dark);
}

.starter-tile--share {
    background: rgba(37, 211, 102, 0.16);
    color: #128C4A;
}

.starter-tile--notice {
    background: var(--primary-light);
    color: var(--primary-color);
}

/* Profile selector bar */
.profile-bar {
    display: none;
    border-top: 1px solid var(--border-color);
    background: var(--surface-color);
}

.profile-bar.is-open {
    display: block;
}

.profile-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.6rem;
}

.profile-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

.profile-bar__label i {
    color: var(--primary-color);
}

.profile-bar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.profile-bar__manage {
    flex-shrink: 0;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 14rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.profile-chip.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.profile-chip__dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--primary-color);
    flex-shrink: 0;
}

.profile-chip.is-active .profile-chip__dot {
    background: var(--neon-color);
}

.profile-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-chip--add {
    border-style: dashed;
    color: var(--text-muted);
}

/* Profile manager rows */
.profile-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: #ffffff;
}

.profile-row__body {
    flex: 1;
    min-width: 10rem;
}

.profile-row__name {
    display: block;
    font-weight: 700;
    color: var(--text-color);
}

.profile-row__meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.profile-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* Campaign daily limit notice */
.limit-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
}

.limit-notice[hidden] {
    display: none;
}

.limit-notice i {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.limit-notice--info {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.limit-notice--warn {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #B45309;
}

.limit-notice--danger {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: var(--danger-color);
}

/* Group link health check */
.group-card.has-link-issue {
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.22);
}

.link-check-ok {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(14, 159, 91, 0.35);
    border-radius: var(--radius-lg);
    background: rgba(14, 159, 91, 0.08);
}

.link-check-ok > i {
    margin-top: 0.15rem;
    color: var(--success-color);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.link-issue {
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: var(--radius-lg);
    background: rgba(220, 38, 38, 0.045);
}

.link-issue:last-child {
    margin-bottom: 0;
}

.link-issue__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.link-issue__name {
    font-weight: 700;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

/* Composer: add a new group inline */
.composer-add {
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
}

.composer-add[open] {
    background: #ffffff;
    border-style: solid;
}

.composer-add__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
    list-style: none;
}

.composer-add__summary::-webkit-details-marker {
    display: none;
}

.composer-add__chev {
    margin-inline-start: auto;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.composer-add[open] .composer-add__chev {
    transform: rotate(180deg);
}

.composer-add__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
}

.composer-platform {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.5rem;
}

.composer-platform__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
}

.composer-platform__btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.composer-platform__btn.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.picker-row.is-new {
    border-color: var(--neon-dark);
    background: rgba(61, 255, 136, 0.1);
}

.picker-row--friends {
    border-color: rgba(24, 119, 242, 0.4);
    background: rgba(24, 119, 242, 0.06);
}

/* Testimonials ratings */
.star-rate {
    color: #D5DCE8;
}

.star-rate.is-on {
    color: var(--warning-color);
}

/* Chatbot — "הרובוט היהודי" */
.chatbot {
    position: fixed;
    inset-inline-end: 1rem;
    bottom: 1rem;
    z-index: 55;
}

.chatbot-launcher {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.15rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: var(--shadow-lift);
    transition: transform 0.2s ease;
    animation: chatbotPulse 2.4s ease-out 3;
}

.chatbot-launcher:hover {
    transform: translateY(-2px);
}

.chatbot-launcher i {
    color: var(--neon-color);
    font-size: 1.15rem;
}

@keyframes chatbotPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(61, 255, 136, 0.45);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(61, 255, 136, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(61, 255, 136, 0);
    }
}

.chatbot-panel {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    inset-inline-end: 0;
    width: min(23rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 8rem));
    display: none;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}

.chatbot-panel.is-open {
    display: flex;
}

.chatbot-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: #ffffff;
}

.chatbot-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: rgba(61, 255, 136, 0.16);
    color: var(--neon-color);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.chatbot-head__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.chatbot-head__name {
    font-weight: 700;
    font-family: var(--font-heading);
}

.chatbot-head__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatbot-head__status i {
    color: var(--neon-color);
    font-size: 0.5rem;
    flex-shrink: 0;
}

.chatbot-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
}

.chatbot-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.chatbot-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem;
    background: var(--surface-color);
}

.chatbot-msg {
    display: flex;
}

.chatbot-msg--bot {
    justify-content: flex-start;
}

.chatbot-msg--user {
    justify-content: flex-end;
}

.chatbot-bubble {
    max-width: 85%;
    padding: 0.65rem 0.9rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.chatbot-msg--bot .chatbot-bubble {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-start-start-radius: 0.25rem;
    color: var(--text-color);
}

.chatbot-msg--user .chatbot-bubble {
    background: var(--primary-color);
    border-start-end-radius: 0.25rem;
    color: #ffffff;
}

.chatbot-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.chatbot-typing span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--text-muted);
    animation: chatbotBlink 1.2s infinite ease-in-out;
}

.chatbot-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.chatbot-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes chatbotBlink {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.chatbot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.65rem 1rem 0;
    background: var(--surface-color);
}

.chatbot-chip {
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--primary-color);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chatbot-chip:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.chatbot-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--border-color);
    background: #ffffff;
}

.chatbot-input-row input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-color);
    outline: none;
}

.chatbot-input-row input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.chatbot-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    border: none;
    background: var(--primary-color);
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
}

.chatbot-send:hover {
    background: var(--primary-hover);
}

.chatbot-send:disabled {
    opacity: 0.55;
    cursor: default;
}

.chatbot-contact-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--text-muted);
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.chatbot-contact-toggle:hover,
.chatbot-contact-toggle.is-open {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.chatbot-contact {
    display: none;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-color);
}

.chatbot-contact.is-open {
    display: grid;
}

.chatbot-contact input,
.chatbot-contact textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    padding: 0.55rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--text-color);
    background: #ffffff;
    outline: none;
}

.chatbot-contact input:focus,
.chatbot-contact textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.chatbot-contact textarea {
    resize: vertical;
    min-height: 3rem;
}

.chatbot-contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .chatbot-launcher__label {
        display: none;
    }

    .chatbot-launcher {
        padding: 0.9rem;
    }
}

/* Onboarding wizard */
.wizard-steps {
    display: grid;
    gap: 0.6rem;
}

@media (min-width: 768px) {
    .wizard-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .wizard-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.wizard-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
    transition: all 0.25s ease;
}

.wizard-step.is-current {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.12);
}

.wizard-step.is-done {
    background: var(--surface-color);
}

.wizard-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-weight: 700;
    flex-shrink: 0;
}

.wizard-step.is-current .wizard-step__num {
    background: var(--primary-color);
    color: #ffffff;
}

.wizard-step.is-done .wizard-step__num {
    background: rgba(61, 255, 136, 0.22);
    color: var(--neon-dark);
}

.wizard-step__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.wizard-step__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--text-color);
}

.wizard-step.is-done .wizard-step__title {
    color: var(--text-muted);
}

.wizard-step__desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.wizard-step__status {
    align-self: flex-start;
    margin-top: 0.35rem;
}

.wizard-panel {
    display: none;
}

.wizard-panel.is-active {
    display: block;
}

/* Campaign drafts list */
.draft-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: #ffffff;
}

.draft-row__body {
    flex: 1;
    min-width: 10rem;
}

.draft-row__name {
    display: block;
    font-weight: 700;
    color: var(--text-color);
}

.draft-row__excerpt {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Campaign composer editing banner + autosave note */
.composer-editing-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-lg);
    background: rgba(30, 64, 175, 0.08);
    border: 1px solid rgba(30, 64, 175, 0.28);
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.composer-editing-banner[hidden] {
    display: none;
}

.composer-editing-banner__btn {
    margin-inline-start: auto;
}

.composer-editing-banner__btn i {
    margin-inline-end: 0.3rem;
}

.composer-restored-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-radius: 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.composer-restored-note[hidden] {
    display: none;
}

.composer-restored-note i {
    color: var(--primary-color);
}

.composer-restored-note__btn {
    margin-inline-start: auto;
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.85rem;
    font-family: var(--font-body);
    cursor: pointer;
    text-decoration: underline;
}

/* AI post writer — "כתוב לי עם AI" */
.ai-writer {
    margin-top: 1rem;
}

.btn-ai {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.24);
}

.btn-ai:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(30, 64, 175, 0.3);
}

.btn-ai i {
    color: var(--neon-color);
}

.ai-writer__panel {
    margin-top: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
}

.ai-writer__panel[hidden] {
    display: none;
}

.ai-writer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.ai-writer__actions[hidden] {
    display: none;
}

/* Quick full-post generator */
.quick-post {
    margin-top: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
}

.quick-post__row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

@media (min-width: 640px) {
    .quick-post__row {
        flex-direction: row;
    }
}

/* Hashtag assistant */
.hashtag-panel {
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
}

.hashtag-panel[hidden] {
    display: none;
}

.hashtag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.hashtag-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hashtag-chip:hover {
    background: var(--primary-color);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Recurring campaigns */
.recur-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    padding: 1rem;
}

.recur-card__toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.recur-card__options {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}

.recur-card__options[hidden] {
    display: none;
}

.recur-card__hint {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.recur-card__hint i {
    margin-top: 0.15rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.recur-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--surface-color);
}

.recur-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.recur-block__next {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.recur-block__runs {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.recur-freq {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.recur-freq__pill {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-muted);
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
}

.recur-freq__pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.recur-freq__pill.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

/* Telegram accents */
.icon-tile--tg {
    background: rgba(34, 158, 217, 0.14);
    color: #1E88C7;
}

.avatar-app--tg {
    background: #229ED9;
    color: #ffffff;
}

.btn-tg {
    background: #229ED9;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(34, 158, 217, 0.28);
}

.btn-tg:hover {
    background: #1E88C7;
    transform: translateY(-1px);
}

.post-mock__avatar--tg {
    background: #229ED9;
    color: #ffffff;
}

.tg-frame {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #E7F3FA;
}

.tg-frame__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    background: #229ED9;
    color: #ffffff;
}

.tg-frame__head .post-mock__author {
    color: #ffffff;
}

.tg-frame__head .post-mock__meta {
    color: rgba(255, 255, 255, 0.78);
}

.tg-frame__body {
    padding: 1rem;
    min-height: 12rem;
}

.tg-bubble {
    border-radius: 0.85rem;
    border-start-start-radius: 0.2rem;
    background: #ffffff;
    padding: 0.8rem 0.95rem;
    box-shadow: 0 1px 3px rgba(11, 30, 61, 0.14);
}

.tg-bubble .post-mock__link {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--primary-color);
}

.tg-bubble__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Instagram accents */
.icon-tile--ig {
    background: rgba(225, 48, 108, 0.14);
    color: #C13584;
}

.avatar-app--ig {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
    color: #ffffff;
}

.btn-ig {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(221, 42, 123, 0.28);
}

.btn-ig:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* TikTok accents */
.icon-tile--tt {
    background: rgba(254, 44, 85, 0.12);
    color: #FE2C55;
}

.avatar-app--tt {
    background: #0B0B0B;
    color: #25F4EE;
}

.btn-tt {
    background: #0B0B0B;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(11, 11, 11, 0.28);
}

.btn-tt:hover {
    background: #1A1A1A;
    transform: translateY(-1px);
}

/* Twitter accents */
.icon-tile--tw {
    background: rgba(29, 161, 242, 0.14);
    color: #1A8CD8;
}

.avatar-app--tw {
    background: #1DA1F2;
    color: #ffffff;
}

.btn-tw {
    background: #1DA1F2;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(29, 161, 242, 0.28);
}

.btn-tw:hover {
    background: #1A8CD8;
    transform: translateY(-1px);
}

/* LinkedIn accents */
.icon-tile--li {
    background: rgba(10, 102, 194, 0.14);
    color: #0A66C2;
}

.avatar-app--li {
    background: #0A66C2;
    color: #ffffff;
}

.btn-li {
    background: #0A66C2;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(10, 102, 194, 0.28);
}

.btn-li:hover {
    background: #0958A8;
    transform: translateY(-1px);
}

/* CSV import — column mapping & preview */
.csv-import {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.csv-import__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.csv-import__title i {
    color: var(--primary-color);
}

.csv-import__map {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .csv-import__map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.csv-import__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.csv-import__field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
}

.csv-import__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.csv-import__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.csv-import__pill--ok {
    background: rgba(14, 159, 91, 0.14);
    color: var(--success-color);
}

.csv-import__pill--dup {
    background: rgba(245, 158, 11, 0.18);
    color: #B45309;
}

.csv-import__pill--bad {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger-color);
}

.csv-import__table {
    margin-top: 1rem;
    max-height: 20rem;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
}

.csv-import__cell-link {
    max-width: 16rem;
    word-break: break-all;
}

.csv-import__empty,
.csv-import__note {
    margin: 0;
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.csv-import__note {
    border-top: 1px solid var(--border-color);
}

.csv-import__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Bulk selection actions bar */
.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-lift);
}

.bulk-bar[hidden] {
    display: none;
}

.bulk-bar__count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-color);
}

.bulk-bar__count i {
    color: var(--primary-color);
}

.bulk-bar__count strong {
    font-family: var(--font-heading);
}

.bulk-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.bulk-tag-add {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bulk-tag-add input {
    width: 11rem;
    max-width: 100%;
}

.btn-danger-app {
    background: var(--danger-color);
    color: #ffffff;
}

.btn-danger-app:hover {
    background: #B91C1C;
    transform: translateY(-1px);
}

/* Smart posting-time suggestions */
.timing-window {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-card);
    transition: all 0.25s ease;
}

.timing-window:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.timing-window--best {
    border-color: var(--neon-dark);
    box-shadow: 0 0 0 2px rgba(61, 255, 136, 0.28);
}

.timing-window__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.timing-window__range {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.timing-window__bar {
    height: 0.45rem;
    border-radius: 999px;
    background: var(--surface-alt);
    overflow: hidden;
}

.timing-window__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--neon-color));
}

.timing-window__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Pending campaign approval */
.badge-pending {
    background: rgba(245, 158, 11, 0.16);
    color: #92400E;
}

.approval-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: var(--radius-lg);
    background: rgba(245, 158, 11, 0.1);
    box-shadow: var(--shadow-card);
}

.approval-bar[hidden] {
    display: none;
}

.approval-bar__info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.approval-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    background: rgba(245, 158, 11, 0.22);
    color: #B45309;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.approval-bar__title {
    display: block;
    font-weight: 700;
    color: var(--text-color);
    font-family: var(--font-heading);
}

.approval-bar__desc {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Live publishing progress */
.live-progress {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-lift);
}

.live-progress[hidden] {
    display: none;
}

.live-progress__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.live-progress__pulse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.85rem;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.live-progress__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.live-progress__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.live-progress__name {
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-progress__count {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary-dark);
    flex-shrink: 0;
}

.live-progress__bar {
    margin-top: 0.85rem;
}

.live-progress__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.live-progress__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.live-progress__stat strong {
    font-family: var(--font-heading);
    color: var(--text-color);
}

.live-progress__stat--ok i {
    color: var(--success-color);
}

.live-progress__stat--fail i {
    color: var(--danger-color);
}

/* Live log entries */
.log-entry--live {
    border-color: var(--primary-color);
    animation: logEntryIn 0.5s ease;
}

@keyframes logEntryIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* YouTube preview */
.yt-frame {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #ffffff;
}

.yt-media {
    margin: 0;
    aspect-ratio: 16 / 9;
    background: #0B0B0B;
    overflow: hidden;
}

.yt-media img,
.yt-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yt-media--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.yt-media--empty i {
    font-size: 1.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.yt-body {
    padding: 0.9rem;
}

.yt-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.yt-title.is-empty {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 600;
}

.yt-link {
    display: block;
    margin-top: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--surface-color);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color);
    overflow-wrap: anywhere;
}

.yt-channel {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.75rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.yt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: #FF0000;
    color: #ffffff;
    flex-shrink: 0;
}

/* Pinterest preview */
.pin-frame {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #ffffff;
}

.pin-media {
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--surface-alt);
    overflow: hidden;
}

.pin-media img,
.pin-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pin-media--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.pin-media--empty i {
    font-size: 1.7rem;
    color: var(--border-color);
}

.pin-body {
    padding: 0.9rem;
}

.pin-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.pin-desc {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pin-desc.is-empty {
    color: var(--text-muted);
    font-style: italic;
}

.pin-link {
    display: block;
    margin-top: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--surface-color);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color);
    overflow-wrap: anywhere;
}

/* Threads preview avatar */
.post-mock__avatar--th {
    background: #000000;
    color: #ffffff;
}

/* YouTube accents */
.icon-tile--yt {
    background: rgba(255, 0, 0, 0.1);
    color: #CC0000;
}

.avatar-app--yt {
    background: #FF0000;
    color: #ffffff;
}

.btn-yt {
    background: #FF0000;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(255, 0, 0, 0.26);
}

.btn-yt:hover {
    background: #E60000;
    transform: translateY(-1px);
}

/* Pinterest accents */
.icon-tile--pin {
    background: rgba(230, 0, 35, 0.1);
    color: #E60023;
}

.avatar-app--pin {
    background: #E60023;
    color: #ffffff;
}

.btn-pin {
    background: #E60023;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(230, 0, 35, 0.26);
}

.btn-pin:hover {
    background: #CC001F;
    transform: translateY(-1px);
}

/* Threads accents */
.icon-tile--th {
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
}

.avatar-app--th {
    background: #000000;
    color: #ffffff;
}

.btn-th {
    background: #000000;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.btn-th:hover {
    background: #1A1A1A;
    transform: translateY(-1px);
}

/* A/B post comparison — composer toggle */
.ab-test {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    padding: 1rem;
}

.ab-test__toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.ab-test__options {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}

.ab-test__options[hidden] {
    display: none;
}

.ab-test__hint {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.ab-test__hint i {
    margin-top: 0.15rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

/* A/B comparison results */
.ab-compare {
    display: grid;
    gap: 0.85rem;
}

@media (min-width: 640px) {
    .ab-compare {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ab-variant {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
}

.ab-variant--winner {
    border-color: var(--neon-dark);
    box-shadow: 0 0 0 2px rgba(61, 255, 136, 0.28);
}

.ab-variant__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ab-variant__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--primary-dark);
}

.ab-variant__num {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.1;
}

.ab-variant__text {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ab-variant__facts {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ab-variant__fact {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.ab-variant__fact i {
    color: var(--primary-color);
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.ab-recommend {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(61, 255, 136, 0.45);
    border-radius: var(--radius-lg);
    background: rgba(61, 255, 136, 0.1);
}

.ab-recommend[hidden] {
    display: none;
}

.ab-recommend i {
    margin-top: 0.15rem;
    color: var(--neon-dark);
    flex-shrink: 0;
}

.ab-recommend__text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Send for test to a single group */
.test-send {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
}

.test-result {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: #ffffff;
}

.test-result[hidden] {
    display: none;
}

.test-result--ok {
    border-color: rgba(14, 159, 91, 0.4);
    background: rgba(14, 159, 91, 0.08);
}

.test-result--fail {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.06);
}

.test-result__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    flex-shrink: 0;
    font-size: 1.05rem;
}

.test-result--ok .test-result__icon {
    background: rgba(14, 159, 91, 0.16);
    color: var(--success-color);
}

.test-result--fail .test-result__icon {
    background: rgba(220, 38, 38, 0.14);
    color: var(--danger-color);
}

.test-result__body {
    flex: 1;
    min-width: 10rem;
}

.test-result__title {
    display: block;
    font-weight: 700;
    color: var(--text-color);
}

.test-result__meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.btn.is-locked {
    opacity: 0.55;
    cursor: not-allowed;
}

/* AI per-platform post variants */
.ai-variants {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}

.ai-variant-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Floating Contact Bar */
.contact-bar-wrap {
    position: fixed;
    inset-inline-start: 1.25rem;
    bottom: 1.25rem;
    z-index: 55;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-bar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #ffffff;
    font-size: 1.5rem;
    border: none;
    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.35);
    cursor: pointer;
    transition: all 0.25s ease;
}

.contact-bar-toggle:hover {
    transform: translateY(-2px);
}

.contact-bar-toggle .fa-xmark { display: none; }
.contact-bar-wrap.is-open .contact-bar-toggle .fa-phone { display: none; }
.contact-bar-wrap.is-open .contact-bar-toggle .fa-xmark { display: block; }

.contact-bar-panel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-lift);
    transition: all 0.3s ease;
}

.cb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    background: transparent;
}

.cb-btn--wa {
    background: #25D366;
    color: #ffffff;
}
.cb-btn--wa:hover {
    background: #1FB85A;
    color: #ffffff;
}

.cb-btn--phone {
    background: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.cb-btn--phone:hover {
    background: var(--border-color);
}

.cb-btn--form {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #ffffff;
}
.cb-btn--form:hover {
    filter: brightness(1.1);
    color: #ffffff;
}

.cb-form-wrap {
    position: relative;
}

.cb-popup {
    position: absolute;
    bottom: calc(100% + 1rem);
    inset-inline-start: 0;
    width: min(20rem, calc(100vw - 2.5rem));
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    padding: 1.25rem;
    z-index: 10;
}

.cb-popup[hidden] {
    display: none;
}

.cb-popup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cb-popup__head span {
    font-weight: 700;
    color: var(--text-color);
}

.cb-popup__head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--surface-color);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cb-popup__head button:hover {
    background: var(--border-color);
    color: var(--text-color);
}

.cb-popup__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cb-popup__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1rem 0;
}

.cb-popup__success i {
    font-size: 2.5rem;
    color: var(--success-color);
}

.cb-popup__success p {
    font-weight: 700;
    color: var(--text-color);
}

@media (max-width: 768px) {
    .contact-bar-toggle {
        display: flex;
    }
    .contact-bar-panel {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius-lg);
        padding: 0.75rem;
        position: absolute;
        bottom: calc(100% + 1rem);
        inset-inline-start: 0;
        width: 14rem;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
    }
    .contact-bar-wrap.is-open .contact-bar-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .cb-btn {
        justify-content: flex-start;
    }
    .cb-popup {
        position: fixed;
        bottom: 5.5rem;
        inset-inline-start: 1.25rem;
        z-index: 60;
    }
}

/* Blog / knowledge center article */
.article-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-color);
}

.article-body > * + * {
    margin-top: 1.1rem;
}

.article-body h2 {
    margin-top: 2rem;
    font-size: 1.4rem;
    font-family: var(--font-heading);
    color: var(--primary-dark);
}

.article-body h3 {
    margin-top: 1.5rem;
    font-size: 1.15rem;
    font-family: var(--font-heading);
}

.article-body p {
    font-size: 1.05rem;
    line-height: 1.8;
}

.article-body ul,
.article-body ol {
    padding-inline-start: 1.4rem;
    margin-top: 1.1rem;
    list-style: disc;
}

.article-body ol {
    list-style: decimal;
}

.article-body li {
    margin-top: 0.5rem;
    line-height: 1.7;
}

.article-body strong {
    font-weight: 700;
    color: var(--primary-dark);
}

.article-body a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Newsletter signup (knowledge center) */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

@media (min-width: 640px) {
    .newsletter-form {
        flex-direction: row;
    }
}

.newsletter-form.is-hidden {
    display: none;
}

.newsletter-success {
    display: none;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(14, 159, 91, 0.35);
    border-radius: 1rem;
    background: rgba(14, 159, 91, 0.1);
    color: var(--success-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.newsletter-success.is-visible {
    display: flex;
}

.newsletter-success i {
    flex-shrink: 0;
}

/* First steps guide */
.first-step {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-card);
    transition: all 0.25s ease;
}

.first-step.is-current {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.12);
}

.first-step.is-done {
    background: var(--surface-color);
}

.first-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-weight: 700;
    flex-shrink: 0;
}

.first-step.is-current .first-step__num {
    background: var(--primary-color);
    color: #ffffff;
}

.first-step.is-done .first-step__num {
    background: rgba(61, 255, 136, 0.22);
    color: var(--neon-dark);
}

.first-step__body {
    flex: 1;
    min-width: 12rem;
}

.first-step__title {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-color);
}

.first-step.is-done .first-step__title {
    color: var(--text-muted);
}

.first-step__desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.first-step__points {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.first-step__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.first-step__points i {
    margin-top: 0.15rem;
    color: var(--success-color);
    flex-shrink: 0;
}

.first-step__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.first-step__status {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .first-step__actions {
        width: 100%;
    }
}

.icon-btn.is-on {
    border-color: var(--neon-dark);
    background: rgba(61, 255, 136, 0.14);
    color: var(--neon-dark);
}

.icon-btn.is-on:hover {
    border-color: var(--neon-dark);
    color: var(--neon-dark);
}

/* Share strip */
.share-strip {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.share-strip__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding-block: 1.35rem;
    text-align: center;
}

@media (min-width: 768px) {
    .share-strip__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: start;
    }
}

.share-strip__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.share-strip__label i {
    color: var(--neon-color);
}

.share-strip__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
    border-color: #ffffff;
}

.share-btn--fb:hover {
    background: #1877F2;
    border-color: #1877F2;
    color: #ffffff;
}

.share-btn--wa:hover {
    background: #25D366;
    border-color: #25D366;
    color: #06281A;
}

.share-btn--tg:hover {
    background: #229ED9;
    border-color: #229ED9;
    color: #ffffff;
}

.share-btn--tw:hover {
    background: #1DA1F2;
    border-color: #1DA1F2;
    color: #ffffff;
}

.share-btn--li:hover {
    background: #0A66C2;
    border-color: #0A66C2;
    color: #ffffff;
}

.share-btn--copy:hover,
.share-btn--copied {
    background: var(--neon-color);
    border-color: var(--neon-color);
    color: #06281A;
}

.share-btn[hidden] {
    display: none;
}

/* Businesses list ("העסקים שלנו") */
.biz-card.is-hidden {
    display: none;
}

/* Guides download gate */
.guide-download {
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: var(--neon-color);
    color: #06281A;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.guide-download:hover {
    background: #2EE878;
    transform: translateY(-1px);
}

.guide-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border: 1px dashed var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.guides-unlocked .guide-download {
    display: inline-flex;
}

.guides-unlocked .guide-locked {
    display: none;
}

/* Video media — play badge overlay and clip info line */
.campaign-card__media,
.media-lib__media,
.media-pick__media,
.media-preview {
    position: relative;
}

.media-play-badge {
    position: absolute;
    inset-inline-start: 0.6rem;
    bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(11, 30, 61, 0.72);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    pointer-events: none;
}

.media-play-badge i {
    color: var(--neon-color);
}

.media-info {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.9rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.media-info[hidden] {
    display: none;
}

.media-info i {
    color: var(--primary-color);
    flex-shrink: 0;
}

/* FaceCall accents */
.icon-tile--fc {
    background: rgba(124, 58, 237, 0.14);
    color: #6D28D9;
}

.avatar-app--fc {
    background: #7C3AED;
    color: #ffffff;
}

.btn-fc {
    background: #7C3AED;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.28);
}

.btn-fc:hover {
    background: #6D28D9;
    transform: translateY(-1px);
}