/* 
 * Custom Premium SaaS Redesign Styling System
 */

:root {
    --base-h: 172;                  /* Indigo Hue */
    --base-s: 75%;                  /* Indigo Saturation */
    --base-l: 59%;                  /* Indigo Lightness */

    --primary-color: #0F2E2B;       /* Indigo */
    --primary-dark: #0F2E2B;        /* Deep Indigo */
    --primary-light: #17b4a2;       /* Bright Indigo */
    --secondary-color: #0f172a;     /* Slate Dark */
    --accent-color: #f43f5e;        /* Rose / Pink */
    --text-main: #1e293b;           /* Slate 800 */
    --text-muted: #64748b;          /* Slate 500 */
    --text-light: #f8fafc;          /* Slate 50 */
    --bg-body: #f8fafc;
    --bg-card: #ffffff;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.08), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.12);
    --shadow-neon: 0 0 25px rgba(18, 140, 126, 0.15);

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 2rem;

    --font-heading: 'Poppins', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Base resets & typography */
body, body:not(.dashboard) {
    font-family: var(--font-body) !important;
    background: var(--bg-body) !important;
    background-image: none !important;
    background-attachment: scroll !important;
    color: var(--text-main) !important;
}

/* Custom premium buttons */
.btn-premium-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 20px -5px rgba(18, 140, 126, 0.3) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-premium-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: 0.75s;
    z-index: -1;
}

.btn-premium-primary:hover::after {
    left: 125%;
}

.btn-premium-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(18, 140, 126, 0.4) !important;
}

/* Chat Simulator Widget styles */
.chat-sim-widget {
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), 0 20px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
    width: 310px;
    position: absolute;
    bottom: -20px;
    right: -25px;
    z-index: 10;
    overflow: hidden;
    text-align: left;
}

.chat-sim-header {
    background: var(--secondary-color);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

.chat-sim-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.chat-sim-status {
    font-size: 0.725rem;
    color: #0a474c;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.chat-sim-body {
    background: #efeae2;
    padding: 16px;
    height: 230px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.chat-sim-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.825rem;
    line-height: 1.4;
    position: relative;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeBubble 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.chat-sim-bubble.user {
    background: #ffffff;
    color: var(--secondary-color);
    align-self: flex-start;
    border-top-left-radius: 0;
    animation-delay: 1.2s;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}

.chat-sim-bubble.bot {
    background: #d9fdd3;
    color: var(--secondary-color);
    align-self: flex-end;
    border-top-right-radius: 0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}

.chat-sim-bubble.bot-1 { animation-delay: 2.8s; }
.chat-sim-bubble.bot-2 { animation-delay: 4.8s; }

@keyframes fadeBubble {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.btn-premium-secondary {
    background: #ffffff !important;
    color: var(--secondary-color) !important;
    border: 1.5px solid rgba(226, 232, 240, 0.8) !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-premium-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* Hero Section */
.custom-hero {
    padding: 180px 0 100px;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.custom-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.custom-hero-text {
    flex: 1;
    max-width: 700px;
}

.custom-hero-badge {
    background: rgba(18, 140, 126, 0.08);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 16px;
    border-radius: 30px;
    display: inline-block;
    margin-bottom: 24px;
    border: 1px solid rgba(18, 140, 126, 0.15);
}

.custom-hero-h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.75rem;
    line-height: 1.15;
    color: var(--secondary-color);
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.custom-hero-h1 span {
    color: var(--primary-color) !important;
    background: none !important;
    -webkit-text-fill-color: var(--primary-color) !important;
}

.custom-hero-desc {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 35px;
}

.custom-hero-btns {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.custom-hero-trust {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.custom-trust-item {
    font-size: 0.875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.custom-trust-item i {
    color: var(--primary-color);
}

.custom-hero-img-wrap {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-hero-img {
    width: 100%;
    max-width: 540px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 6px solid #ffffff;
    transition: transform 0.5s ease;
}

.custom-hero-img-wrap:hover .custom-hero-img {
    transform: scale(1.02);
}

.custom-hero-float-card {
    position: absolute;
    bottom: 30px;
    left: 20px;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.custom-hero-float-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(18, 140, 126, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.custom-hero-float-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--secondary-color);
    line-height: 1.2;
}

.custom-hero-float-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 991px) {
    .custom-hero-inner {
        flex-direction: column;
        text-align: center;
    }
    .custom-hero-btns {
        justify-content: center;
    }
    .custom-hero-trust {
        justify-content: center;
    }
    .custom-hero-float-card {
        display: none;
    }
}

/* Stats bar */
.custom-stats {
    background: #ffffff;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    padding: 40px 0;
    box-shadow: var(--shadow-sm);
}

.custom-stats-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.custom-stat-item {
    text-align: center;
}

.custom-stat-num {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.custom-stat-label {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Sections General */
.custom-section {
    padding: 100px 0;
}

.custom-section-center {
    text-align: center;
    margin-bottom: 60px;
}

.custom-section-tag {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 12px;
}

.custom-section-h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.custom-section-h2 span {
    color: var(--primary-color) !important;
    background: none !important;
    -webkit-text-fill-color: var(--primary-color) !important;
}

.custom-section-sub {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Features Custom Grid */
.custom-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.custom-feat-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-md);
    padding: 35px 30px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.custom-feat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg), var(--shadow-neon);
    border-color: rgba(18, 140, 126, 0.15);
}

.custom-feat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.custom-feat-icon.blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.custom-feat-icon.rose { background: linear-gradient(135deg, #f43f5e, #be123c); }
.custom-feat-icon.indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.custom-feat-icon.emerald { background: linear-gradient(135deg, #0a474c, #047857); }
.custom-feat-icon.amber { background: linear-gradient(135deg, #f59e0b, #b45309); }
.custom-feat-icon.violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.custom-feat-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--secondary-color);
    margin-bottom: 12px;
}

.custom-feat-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Pricing Switch & Cards */
.custom-pricing-toggle {
    background: rgba(226, 232, 240, 0.5);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 50px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.custom-toggle-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 16px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s;
}

.custom-toggle-label.active {
    background: #ffffff;
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* Custom switch slider */
.custom-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

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

.custom-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 34px;
}

.custom-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .custom-switch-slider {
    background-color: var(--primary-color);
}

input:checked + .custom-switch-slider:before {
    transform: translateX(24px);
}

/* Pricing plans deck */
.custom-plan {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
}

.custom-plan:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(18, 140, 126, 0.15);
}

.custom-plan.featured {
    border: 2px solid var(--primary-color);
    box-shadow: 0 20px 45px -10px rgba(18, 140, 126, 0.25), 0 0 25px rgba(18, 140, 126, 0.1);
}

.custom-plan-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 30px;
}

.custom-plan-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.custom-plan-price {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 25px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.custom-plan-price span {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.custom-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
    flex-grow: 1;
}

.custom-plan-features li {
    padding: 10px 0;
    font-size: 0.95rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px dashed rgba(226, 232, 240, 0.6);
}

.custom-plan-features li:last-child {
    border-bottom: none;
}

.custom-plan-features li i.fa-check {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(18, 140, 126, 0.08) !important;
    border: 1px solid rgba(18, 140, 126, 0.15) !important;
    color: var(--primary-color) !important;
    border-radius: 50%;
    font-size: 10px !important;
    margin-right: 8px;
    flex-shrink: 0;
}

.custom-plan-features li i.fa-times {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border-radius: 50%;
    font-size: 9px !important;
    margin-right: 8px;
    flex-shrink: 0;
}

.custom-plan-cta {
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    transition: all 0.3s;
    border: none;
}

.custom-plan-cta-outline {
    background: #ffffff;
    color: var(--primary-color);
    border: 1.5px solid rgba(18, 140, 126, 0.2);
}

.custom-plan-cta-outline:hover {
    background: rgba(18, 140, 126, 0.05);
    border-color: var(--primary-color);
}

.custom-plan-cta-solid {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #ffffff;
    box-shadow: 0 10px 20px -5px rgba(18, 140, 126, 0.25);
}

.custom-plan-cta-solid:hover {
    box-shadow: 0 15px 25px -5px rgba(18, 140, 126, 0.35);
}

/* Custom Testimonials slider elements */
.custom-testi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 45px;
}

.custom-testi-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-lg);
    padding: 40px;
    margin: 15px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
}

.custom-testi-card:hover {
    box-shadow: var(--shadow-lg);
}

.custom-testi-quote {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-main);
    font-style: italic;
    margin-bottom: 25px;
}

.custom-testi-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.custom-testi-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(18, 140, 126, 0.15);
}

.custom-testi-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-testi-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--secondary-color);
    margin-bottom: 2px;
}

.custom-testi-role {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.custom-testi-rating {
    color: #fbbf24;
    font-size: 0.85rem;
    display: flex;
    gap: 3px;
    margin-top: 6px;
}

/* Custom premium footer */
.custom-footer {
    background-color: #ffffff;
    color: var(--text-muted);
    padding-top: 80px;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.custom-footer-logo {
    margin-bottom: 25px;
}

.custom-footer-desc {
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 25px;
    color: var(--text-muted);
}

.custom-footer-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 25px;
}

.custom-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-footer-links li {
    margin-bottom: 12px;
}

.custom-footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.custom-footer-links a:hover {
    color: var(--primary-color);
    padding-left: 4px;
}

.custom-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-footer-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.custom-footer-contact li i {
    color: var(--primary-color);
    font-size: 1.15rem;
}

.custom-footer-contact a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.custom-footer-contact a:hover {
    color: var(--primary-color);
}

.custom-footer-subscribe {
    margin-top: 25px;
}

.custom-footer-subscribe-title {
    color: var(--secondary-color);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.custom-footer-bottom {
    margin-top: 60px;
    padding: 30px 0;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--text-muted);
}

.custom-footer-socials {
    display: flex;
    gap: 12px;
}

.custom-footer-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(18, 140, 126, 0.05);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    text-decoration: none;
}

.custom-footer-socials a:hover {
    background: var(--primary-color);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Phone Simulator & Rich Template Classes */
.phone-simulator-frame {
    width: 330px;
    height: 570px;
    background: #efeae2;
    border-radius: 36px;
    border: 10px solid #0f172a;
    box-shadow: var(--shadow-xl), 0 25px 60px rgba(18, 140, 126, 0.15);
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    font-family: var(--font-body);
    flex-shrink: 0;
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 18px;
    background: #0f172a;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 30;
}

.rich-template-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 12px;
    max-width: 90%;
    align-self: flex-end;
    border: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    flex-direction: column;
}

.rich-template-header-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    background: #f1f5f9;
}

.rich-template-body {
    padding: 10px 12px;
    font-size: 0.8rem;
    color: var(--secondary-color);
    line-height: 1.4;
}

.rich-template-btn {
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    background: #ffffff;
    padding: 10px;
    font-size: 0.775rem;
    font-weight: 700;
    color: #0066cc;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}

.rich-template-btn:hover {
    background: #f8fafc;
}

.rich-template-btn i {
    margin-right: 5px;
}

.support-girl-graphic {
    animation: floatAndWave 3s ease-in-out infinite alternate;
    transform-origin: bottom center;
    flex-shrink: 0;
}

@keyframes floatAndWave {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-6px) rotate(0.8deg);
    }
    100% {
        transform: translateY(-12px) rotate(-0.8deg);
    }
}

@media (max-width: 991px) {
    .support-girl-graphic {
        display: none !important;
    }
}

.custom-step-number {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(18, 140, 126, 0.06);
    border: 1.5px solid rgba(18, 140, 126, 0.15);
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 10px rgba(18, 140, 126, 0.05);
    transition: all 0.3s;
}

.custom-feat-card:hover .custom-step-number {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(18, 140, 126, 0.25);
}


/* ============================================================
   MOBILE RESPONSIVE — ALL CUSTOM SECTIONS
   ============================================================ */

/* Tablet 768-991px */
@media (max-width: 991px) {
    /* Hero */
    .custom-hero {
        padding: 100px 0 60px !important;
    }
    .custom-hero-h1 {
        font-size: 2.1rem !important;
        letter-spacing: -0.5px !important;
    }
    .custom-hero-desc {
        font-size: 1.05rem !important;
    }
    .custom-hero-img-wrap {
        min-height: 400px !important;
    }

    /* Section headings */
    .custom-section-h2 {
        font-size: 2rem !important;
    }

    /* Features grid - 2 per row */
    .custom-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    /* Center last lone card when total is odd */
    .custom-features-grid .custom-feat-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
        width: 100%;
    }

    /* Stats */
    .custom-stats-inner {
        gap: 20px !important;
    }
    .custom-stat-num {
        font-size: 1.8rem !important;
    }

    /* Chatbot builder / comparison / ROI — general stacking */
    .custom-two-col {
        flex-direction: column !important;
    }
    .custom-two-col > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile 576-767px */
@media (max-width: 767px) {
    /* Hero */
    .custom-hero {
        padding: 80px 0 50px !important;
    }
    .custom-hero-h1 {
        font-size: 1.8rem !important;
        letter-spacing: 0 !important;
    }
    .custom-hero-desc {
        font-size: 0.97rem !important;
    }
    .custom-hero-btns {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .custom-hero-btns .btn {
        width: 100% !important;
        text-align: center !important;
    }
    .custom-hero-img-wrap {
        min-height: 320px !important;
    }
    .phone-simulator-frame {
        transform: scale(0.85) !important;
        transform-origin: top center !important;
    }

    /* Stats bar — wrap to 2 cols */
    .custom-stats-inner {
        justify-content: center !important;
        gap: 16px 30px !important;
    }
    .custom-stat-item {
        flex: 0 0 calc(50% - 15px) !important;
    }

    /* Section headings */
    .custom-section-h2 {
        font-size: 1.65rem !important;
    }
    .custom-section-sub {
        font-size: 0.95rem !important;
    }
    .custom-section {
        padding: 56px 0 !important;
    }

    /* Features grid — 1 per row */
    .custom-features-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .custom-feat-card {
        padding: 24px 20px !important;
    }

    /* How it works — steps stacked */
    .how-work-section .row {
        flex-direction: column !important;
    }
    .how-work-section .col-lg-3,
    .how-work-section [class*="col-lg"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .how-work-section .how-work-item {
        margin-bottom: 24px !important;
    }

    /* Pricing card */
    .pricing-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .pricing-card {
        padding: 28px 20px !important;
    }

    /* Testimonial card inner */
    .testimonials .row {
        padding: 0 8px !important;
    }

    /* FAQ tabs stacked */
    .faq-section .nav-pills {
        flex-direction: column !important;
    }
    .faq-section .nav-pills .nav-link {
        width: 100% !important;
        text-align: center !important;
    }

    /* CTA */
    .cta-section h2 {
        font-size: 1.5rem !important;
    }
    .cta-section p {
        font-size: 0.95rem !important;
    }

    /* Blog cards stacked */
    .blog .row > [class*="col"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Mobile app section */
    .customer-management-section .row,
    .app-download-section .row {
        flex-direction: column-reverse !important;
    }
    .customer-management-section [class*="col"],
    .app-download-section [class*="col"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }
    .customer-management-section .app-download__list {
        text-align: left !important;
        display: inline-block !important;
    }
    .app-download-section img,
    .customer-management-section img {
        max-width: 70% !important;
        margin: 0 auto 20px !important;
        display: block !important;
    }

    /* Footer */
    .footer-area .row > [class*="col"] {
        margin-bottom: 24px !important;
    }
    .footer-area .footer-widget {
        text-align: center !important;
    }
    .footer-area .footer-widget ul {
        list-style: none !important;
        padding-left: 0 !important;
    }
}

/* Small phones max 480px */
@media (max-width: 480px) {
    .custom-hero-h1 {
        font-size: 1.5rem !important;
    }
    .custom-hero {
        padding: 70px 0 40px !important;
    }
    .phone-simulator-frame {
        transform: scale(0.72) !important;
        transform-origin: top center !important;
    }
    .custom-hero-img-wrap {
        min-height: 260px !important;
    }
    .custom-section-h2 {
        font-size: 1.45rem !important;
    }
    .custom-stat-item {
        flex: 0 0 100% !important;
    }
    .pricing-card {
        padding: 20px 14px !important;
    }
    .cta-section {
        margin: 16px 8px !important;
        padding: 30px 16px !important;
    }
    /* Header login buttons shrink on tiny screens */
    .header .header-btn-grp .btn {
        padding: 6px 10px !important;
        font-size: 0.78rem !important;
    }
}

/* Prevent horizontal scroll globally */
body:not(.dashboard) {
    overflow-x: hidden !important;
}
.banner-section, .custom-hero, .custom-section,
.how-work-section, .feature-section, .pricing-section,
.testimonials, .customer-management-section, .faq-section,
.cta-section, .blog, .footer-area {
    overflow-x: hidden !important;
}

/* ============================================================
   COMPARISON TABLE — MOBILE FIX
   ============================================================ */
@media (max-width: 767px) {
    /* Comparison table - smaller padding */
    .table-responsive table thead th {
        padding: 14px 10px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }
    .table-responsive table tbody td {
        padding: 14px 10px !important;
        font-size: 0.82rem !important;
    }
    /* Hide "Other tools" column on very small screens - keep zupichat col */
    /* (we keep both but shrink them) */
    .table-responsive table thead th:nth-child(2),
    .table-responsive table tbody td:nth-child(2) {
        background: rgba(10,71,76,0.05) !important;
    }
}

@media (max-width: 480px) {
    .table-responsive table thead th {
        padding: 10px 8px !important;
        font-size: 0.75rem !important;
    }
    .table-responsive table tbody td {
        padding: 10px 8px !important;
        font-size: 0.75rem !important;
    }
    .table-responsive table thead th:first-child,
    .table-responsive table tbody td:first-child {
        max-width: 140px !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
}

/* ============================================================
   FLOW BUILDER CANVAS — MOBILE FIX
   ============================================================ */
@media (max-width: 991px) {
    /* Stack chatbot builder cols */
    .flow-builder-canvas {
        min-height: auto !important;
        padding: 28px 20px !important;
        gap: 16px !important;
    }

    /* Make flow nodes relative and full-width */
    .flow-node {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        position: relative !important;
    }

    /* Hide the absolute SVG connector line - doesn't work on mobile */
    .flow-builder-canvas svg {
        display: none !important;
    }

    /* Add a simple vertical connector between nodes */
    .flow-node + .flow-node::before {
        content: '';
        display: block;
        width: 2px;
        height: 24px;
        background: var(--primary-color, #0a474c);
        margin: -12px auto 12px;
        border-radius: 2px;
    }

    /* Hide right/left connector dots on nodes (the small circles) */
    .flow-node > div[style*="position: absolute"][style*="border-radius: 50%"] {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .flow-builder-canvas {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
    .flow-node {
        padding: 12px !important;
    }
    .flow-node div[style*="font-size: 0.8rem"] {
        font-size: 0.75rem !important;
    }
    /* Chatbot section col stacking */
    .chatbot-builder-section .col-lg-5,
    .chatbot-builder-section .col-lg-7 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ============================================================
   ROI CALCULATOR — MOBILE FIX
   ============================================================ */
@media (max-width: 767px) {
    /* ROI white card box */
    .col-lg-6 > div[style*="padding: 40px"] {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }
    /* ROI stat boxes font size */
    #hours-saved, #money-saved {
        font-size: 1.75rem !important;
    }
}

/* ============================================================
   INTEGRATIONS GRID — MOBILE FIX
   ============================================================ */
@media (max-width: 767px) {
    /* Integration cards 2 per row */
    .integrations-section .col-lg-3,
    section .row .col-lg-3.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Reduce card padding */
    .custom-feat-card[style*="padding: 40px"] {
        padding: 24px 16px !important;
    }
}

/* ============================================================
   FLOW BUILDER — STRONGER OVERRIDE (inline styles)
   ============================================================ */
@media (max-width: 991px) {
    /* Override inline width on flow nodes */
    .flow-builder-canvas .flow-node,
    div.flow-node {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        position: relative !important;
        z-index: 2 !important;
    }
    /* Hide SVG connector line */
    .flow-builder-canvas > svg,
    .flow-builder-canvas svg {
        display: none !important;
    }
    /* Hide small circle connector dots (absolute positioned) */
    .flow-node > div[style*="right: -8px"],
    .flow-node > div[style*="left: -8px"] {
        display: none !important;
    }
    /* Canvas itself */
    div.flow-builder-canvas {
        padding: 24px 16px !important;
        min-height: auto !important;
        gap: 16px !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    /* Add visual connector between nodes */
    .flow-builder-canvas .flow-node:not(:last-child)::after {
        content: '↓';
        display: block;
        text-align: center;
        color: var(--primary-color, #0a474c);
        font-size: 1.25rem;
        margin-top: 12px;
        font-weight: bold;
    }
}

/* ============================================================
   GENERAL MOBILE — white box sections with padding: 40px
   ============================================================ */
@media (max-width: 767px) {
    /* Any white box section with 40px padding */
    .custom-section .col-lg-6 > div,
    .custom-section .col-lg-5 > div,
    .custom-section .col-lg-7 > div {
        padding: 24px 16px !important;
    }
    /* Chatbot section text alignment */
    .custom-section .col-lg-5 .custom-section-sub {
        text-align: center !important;
    }
    .custom-section .col-lg-5 {
        text-align: center !important;
    }
    .custom-section .col-lg-5 .custom-plan-features li {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .custom-section .col-lg-5 .btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ============================================================
   COMPARISON SECTION — HIDE ON MOBILE
   ============================================================ */
@media (max-width: 767px) {
    .comparison-section {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════
   ZupiChat DASHBOARD SYSTEM — Wati/Interakt Premium
   Loaded via time()-versioned file = always fresh
   ══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --zc-green:       #0a474c;
    --zc-green-light: #e8faf4;
    --zc-green-mid:   #083c40;
    --zc-sidebar-w:   240px;
    --zc-topbar-h:    60px;
    --zc-text-dark:   #0f172a;
    --zc-text-mid:    #64748b;
    --zc-text-light:  #94a3b8;
    --zc-border:      #e2e8f0;
    --zc-bg:          #f1f5f9;
    --zc-white:       #ffffff;
}

/* ── Layout ── */
.zc-dashboard { display: flex !important; min-height: 100vh !important; background: #f1f5f9 !important; }
.zc-main { flex: 1 !important; margin-left: 240px !important; display: flex !important; flex-direction: column !important; min-height: 100vh !important; background: #f1f5f9 !important; transition: margin-left .25s !important; }

/* ══════════════════════════════════════════════════
   SIDEBAR — Premium Wati/Interakt Style
   ══════════════════════════════════════════════════ */
.zc-sidebar {
    width: 240px !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    background: #ffffff !important;
    border-right: 1.5px solid #e8edf3 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1000 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.06) !important;
}

/* Logo area */
.zc-sidebar-logo {
    height: 62px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1.5px solid #f0f4f8 !important;
    background: #fff !important;
    flex-shrink: 0 !important;
}
.zc-sidebar-logo img { height: 30px !important; width: auto !important; }
.zc-sidebar-close { background: none !important; border: none !important; color: #94a3b8 !important; font-size: 16px !important; cursor: pointer !important; padding: 4px !important; }

/* User card */
.zc-user-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    margin: 10px 10px 4px !important;
    background: linear-gradient(135deg, #eef5f5, #dbe9e9) !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(10,71,76,.18) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
.zc-user-card::before {
    content: '' !important;
    position: absolute !important;
    top: -12px !important; right: -12px !important;
    width: 50px !important; height: 50px !important;
    background: rgba(10,71,76,.08) !important;
    border-radius: 50% !important;
}
.zc-user-avatar {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important; object-fit: cover !important;
    border: 2px solid rgba(10,71,76,.3) !important;
    box-shadow: 0 2px 8px rgba(10,71,76,.2) !important;
    flex-shrink: 0 !important;
}
.zc-user-name { font-size: 12.5px !important; font-weight: 700 !important; color: #0f172a !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.zc-user-info { min-width: 0 !important; flex: 1 !important; }
.zc-plan-badge {
    display: inline-flex !important; align-items: center !important;
    font-size: 9.5px !important; font-weight: 800 !important;
    background: #0a474c !important; color: #fff !important;
    padding: 2px 8px !important; border-radius: 20px !important;
    margin-top: 3px !important; letter-spacing: .02em !important;
    text-transform: uppercase !important;
}
.zc-plan-badge.free { background: #cbd5e1 !important; color: #475569 !important; }

/* Nav scroll area */
.zc-nav {
    flex: 1 !important; overflow-y: auto !important;
    padding: 6px 10px 24px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #e2e8f0 transparent !important;
}
.zc-nav::-webkit-scrollbar { width: 3px !important; }
.zc-nav::-webkit-scrollbar-thumb { background: #e2e8f0 !important; border-radius: 3px !important; }

/* Section labels */
.zc-nav-section {
    font-size: 9.5px !important; font-weight: 800 !important;
    color: #b0bec5 !important;
    text-transform: uppercase !important; letter-spacing: .14em !important;
    padding: 16px 10px 5px !important; display: block !important;
    line-height: 1 !important; margin-top: 2px !important;
}

/* Nav items — base */
.zc-nav-item {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 8px 10px !important; border-radius: 9px !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: #1e293b !important; text-decoration: none !important;
    transition: all .18s cubic-bezier(.4,0,.2,1) !important; cursor: pointer !important;
    border: none !important; background: transparent !important;
    width: 100% !important; text-align: left !important;
    margin-bottom: 2px !important; line-height: 1.4 !important;
    position: relative !important;
}
.zc-nav-item:hover {
    background: #eef5f5 !important;
    color: #083c40 !important;
    text-decoration: none !important;
    transform: translateX(2px) !important;
}
.zc-nav-item:hover .zc-nav-icon { color: #0a474c !important; }

/* Active item — green left border + green tinted bg */
.zc-nav-item.active,
a.zc-nav-item.active {
    background: #e9f2f2 !important;
    color: #083c40 !important;
    font-weight: 700 !important;
    border-left: 3px solid #0a474c !important;
    padding-left: 7px !important;
}
.zc-nav-item.active .zc-nav-icon,
a.zc-nav-item.active .zc-nav-icon { color: #0a474c !important; }

/* Icons — colored by section context */
.zc-nav-icon {
    width: 28px !important; height: 28px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 7px !important; font-size: 12.5px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
    transition: all .15s !important;
}
.zc-nav-item:hover .zc-nav-icon {
    background: #d4e7e8 !important;
    color: #083c40 !important;
}
.zc-nav-item.active .zc-nav-icon,
a.zc-nav-item.active .zc-nav-icon {
    background: #c2dcdc !important;
    color: #083c40 !important;
}

/* Icon box colors per nav item (scoped to sidebar) */
/* Dashboard */
#zcSidebar a[href*="dashboard"] .zc-nav-icon { background: #eff6ff !important; color: #3b82f6 !important; }
/* Contacts */
#zcSidebar .fa-users ~ * , #zcSidebar button .fa-users { color: #8b5cf6 !important; }

/* Each icon item color-coded via icon class inside .zc-nav-icon */
#zcSidebar .zc-nav-icon .fa-border-all   { color: #3b82f6 !important; }
#zcSidebar .zc-nav-icon .fa-users        { color: #8b5cf6 !important; }
#zcSidebar .zc-nav-icon .fa-file-alt     { color: #f59e0b !important; }
#zcSidebar .zc-nav-icon .fa-bullhorn     { color: #ef4444 !important; }
#zcSidebar .zc-nav-icon .fa-robot        { color: #3b82f6 !important; }
#zcSidebar .zc-nav-icon .fa-link         { color: #06b6d4 !important; }
#zcSidebar .zc-nav-icon .fa-comment-dots { color: #0a474c !important; }
#zcSidebar .zc-nav-icon .fa-mouse-pointer{ color: #f97316 !important; }
#zcSidebar .zc-nav-icon .fa-list-check   { color: #6366f1 !important; }
#zcSidebar .zc-nav-icon .fa-inbox        { color: #0ea5e9 !important; }
#zcSidebar .zc-nav-icon .fa-user-circle  { color: #8b5cf6 !important; }
#zcSidebar .zc-nav-icon .fa-headset      { color: #083c40 !important; }
#zcSidebar .zc-nav-icon .fa-ticket-alt   { color: #f59e0b !important; }
#zcSidebar .zc-nav-icon .fa-chart-pie    { color: #ef4444 !important; }
#zcSidebar .zc-nav-icon .fa-columns      { color: #3b82f6 !important; }
#zcSidebar .zc-nav-icon .fa-tasks        { color: #0a474c !important; }
#zcSidebar .zc-nav-icon .fa-wallet       { color: #083c40 !important; }
#zcSidebar .zc-nav-icon .fa-arrow-up-from-bracket { color: #f97316 !important; }
#zcSidebar .zc-nav-icon .fa-receipt      { color: #6366f1 !important; }
#zcSidebar .zc-nav-icon .fa-gift         { color: #ec4899 !important; }
#zcSidebar .zc-nav-icon .fa-whatsapp     { color: #25d366 !important; }
#zcSidebar .zc-nav-icon .fa-crown        { color: #f59e0b !important; }
#zcSidebar .zc-nav-icon .fa-user-cog     { color: #64748b !important; }
#zcSidebar .zc-nav-icon .fa-sign-out-alt { color: #ef4444 !important; }

/* Icon background colors per icon type */
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-border-all)   { background: #eff6ff !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-users)        { background: #f5f3ff !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-file-alt)     { background: #fffbeb !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-bullhorn)     { background: #fef2f2 !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-robot)        { background: #eff6ff !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-link)         { background: #ecfeff !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-comment-dots) { background: #eef5f5 !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-mouse-pointer){ background: #fff7ed !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-list-check)   { background: #eef2ff !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-inbox)        { background: #f0f9ff !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-user-circle)  { background: #f5f3ff !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-headset)      { background: #eef5f5 !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-ticket-alt)   { background: #fffbeb !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-chart-pie)    { background: #fef2f2 !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-columns)      { background: #eff6ff !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-tasks)        { background: #eef5f5 !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-wallet)       { background: #eef5f5 !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-receipt)      { background: #eef2ff !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-gift)         { background: #fdf2f8 !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-whatsapp)     { background: #eef5f5 !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-crown)        { background: #fffbeb !important; }
#zcSidebar .zc-nav-item .zc-nav-icon:has(.fa-sign-out-alt) { background: #fef2f2 !important; }

.zc-nav-label { flex: 1 !important; }
.zc-chevron { font-size: 9px !important; color: #cbd5e1 !important; transition: transform .2s !important; flex-shrink: 0 !important; margin-left: auto !important; }

/* Nav groups */
.zc-nav-group { margin-bottom: 2px !important; }
.zc-nav-group.open > .zc-nav-item .zc-chevron { transform: rotate(90deg) !important; color: #0a474c !important; }
.zc-nav-group.open > .zc-nav-item {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* Children dropdown */
.zc-nav-children {
    display: none !important;
    padding: 3px 0 3px 14px !important;
    margin-left: 24px !important;
    border-left: 2px solid #c2dcdc !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}
.zc-nav-group.open .zc-nav-children { display: block !important; }

.zc-nav-child {
    display: flex !important; align-items: center !important; gap: 7px !important;
    padding: 6px 10px !important; border-radius: 7px !important;
    font-size: 12.5px !important; font-weight: 500 !important;
    color: #64748b !important; text-decoration: none !important;
    transition: all .12s !important; margin-bottom: 1px !important;
}
.zc-nav-child i { font-size: 7px !important; color: #cbd5e1 !important; flex-shrink: 0 !important; }
.zc-nav-child:hover { background: #eef5f5 !important; color: #083c40 !important; text-decoration: none !important; }
.zc-nav-child:hover i { color: #0a474c !important; }
.zc-nav-child.active { color: #083c40 !important; font-weight: 700 !important; }
.zc-nav-child.active i { color: #0a474c !important; }

/* Logout */
.zc-nav-item.zc-nav-logout { color: #94a3b8 !important; margin-top: 4px !important; }
.zc-nav-item.zc-nav-logout .zc-nav-icon { background: #fef2f2 !important; color: #fca5a5 !important; }
.zc-nav-item.zc-nav-logout:hover { background: #fff1f2 !important; color: #ef4444 !important; }
.zc-nav-item.zc-nav-logout:hover .zc-nav-icon { background: #fee2e2 !important; color: #ef4444 !important; }

/* ── Topbar ── */
.zc-topbar {
    height: 60px !important; background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; padding: 0 24px !important;
    position: sticky !important; top: 0 !important; z-index: 100 !important;
    flex-shrink: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}
.zc-topbar-left { display: flex !important; align-items: center !important; gap: 12px !important; }
.zc-topbar-right { display: flex !important; align-items: center !important; gap: 6px !important; }
.zc-page-title { font-size: 15px !important; font-weight: 700 !important; color: #0f172a !important; }
.zc-icon-btn {
    width: 36px !important; height: 36px !important; border-radius: 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: none !important; border: none !important; color: #64748b !important;
    font-size: 15px !important; cursor: pointer !important; text-decoration: none !important;
    transition: background .12s !important; position: relative !important;
}
.zc-icon-btn:hover { background: #f1f5f9 !important; color: #0f172a !important; }
.zc-notif-dot {
    width: 7px !important; height: 7px !important; border-radius: 50% !important;
    background: #ef4444 !important; position: absolute !important; top: 7px !important; right: 7px !important;
    border: 2px solid #fff !important;
}
.zc-user-btn {
    display: flex !important; align-items: center !important; gap: 8px !important;
    background: #f8fafc !important; border: 1px solid #e2e8f0 !important;
    border-radius: 40px !important; padding: 4px 12px 4px 4px !important; cursor: pointer !important;
}
.zc-user-thumb { width: 28px !important; height: 28px !important; border-radius: 50% !important; object-fit: cover !important; }
.zc-user-menu {
    display: none !important; position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important;
    background: #ffffff !important; border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important; padding: 6px !important; min-width: 200px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important; z-index: 9999 !important;
}
.zc-user-menu.show { display: block !important; }
.zc-user-menu-item {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 9px 12px !important; border-radius: 8px !important; font-size: 13px !important;
    font-weight: 500 !important; color: #0f172a !important; text-decoration: none !important;
    transition: background .1s !important;
}
.zc-user-menu-item:hover { background: #f8fafc !important; text-decoration: none !important; }
.zc-user-menu-item.text-danger { color: #ef4444 !important; }

/* ── Content ── */
.zc-content { padding: 24px !important; flex: 1 !important; background: #f1f5f9 !important; }

/* ── Widget Cards ── */
.zc-dashboard .dashboard-widget {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    transition: all .2s !important;
    cursor: pointer !important;
    text-decoration: none !important;
    height: 100% !important;
}
.zc-dashboard .dashboard-widget:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(10,71,76,.3) !important;
    text-decoration: none !important;
}
.zc-dashboard .dashboard-widget__icon,
.zc-dashboard .dashboard-widget .dashboard-widget__icon {
    width: 52px !important; height: 52px !important; border-radius: 14px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 22px !important; flex-shrink: 0 !important;
    background: linear-gradient(135deg,#e9f2f2,#d4e7e8) !important; color: #083c40 !important;
    box-shadow: 0 4px 12px rgba(8,60,64,.13) !important;
}
/* Widget icon: widget-two is the default fallback — must come FIRST so color-specific rules override it */
.zc-dashboard .dashboard-widget.widget-two .dashboard-widget__icon    { background: linear-gradient(135deg,#d4e7e8,#9bc0c2) !important; color: #083c40 !important; box-shadow: 0 4px 12px rgba(8,60,64,.18) !important; }
/* Color-specific gradient overrides — 4-class specificity, come AFTER widget-two so they win */
.zc-dashboard .dashboard-widget.widget-blue .dashboard-widget__icon   { background: linear-gradient(135deg,#dbeafe,#bfdbfe) !important; color: #2563eb !important; box-shadow: 0 4px 12px rgba(37,99,235,.18) !important; }
.zc-dashboard .dashboard-widget.widget-purple .dashboard-widget__icon { background: linear-gradient(135deg,#ede9fe,#ddd6fe) !important; color: #7c3aed !important; box-shadow: 0 4px 12px rgba(124,58,237,.18) !important; }
.zc-dashboard .dashboard-widget.widget-red .dashboard-widget__icon    { background: linear-gradient(135deg,#fee2e2,#fecaca) !important; color: #dc2626 !important; box-shadow: 0 4px 12px rgba(220,38,38,.18) !important; }
.zc-dashboard .dashboard-widget.widget-orange .dashboard-widget__icon { background: linear-gradient(135deg,#fed7aa,#fdba74) !important; color: #c2410c !important; box-shadow: 0 4px 12px rgba(194,65,12,.18) !important; }
.zc-dashboard .dashboard-widget.widget-yellow .dashboard-widget__icon { background: linear-gradient(135deg,#fef08a,#fde047) !important; color: #92400e !important; }
.zc-dashboard .dashboard-widget.widget-pink .dashboard-widget__icon   { background: linear-gradient(135deg,#fce7f3,#fbcfe8) !important; color: #be185d !important; box-shadow: 0 4px 12px rgba(190,24,93,.18) !important; }
.zc-dashboard .dashboard-widget.widget-teal .dashboard-widget__icon   { background: linear-gradient(135deg,#ccfbf1,#99f6e4) !important; color: #0f766e !important; box-shadow: 0 4px 12px rgba(15,118,110,.18) !important; }
.zc-dashboard .dashboard-widget.widget-indigo .dashboard-widget__icon { background: linear-gradient(135deg,#e0e7ff,#c7d2fe) !important; color: #4338ca !important; box-shadow: 0 4px 12px rgba(67,56,202,.18) !important; }
.zc-dashboard .dashboard-widget.widget-cyan .dashboard-widget__icon   { background: linear-gradient(135deg,#cffafe,#a5f3fc) !important; color: #0e7490 !important; box-shadow: 0 4px 12px rgba(14,116,144,.18) !important; }
.zc-dashboard .dashboard-widget.widget-green .dashboard-widget__icon  { background: linear-gradient(135deg,#d4e7e8,#9bc0c2) !important; color: #083c40 !important; box-shadow: 0 4px 12px rgba(8,60,64,.18) !important; }

/* Widget text/number */
.zc-dashboard .dashboard-widget__text { font-size: 11px !important; font-weight: 700 !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 5px !important; display: block !important; }
.zc-dashboard .dashboard-widget__number .text { font-size: 1.6rem !important; font-weight: 900 !important; color: #0f172a !important; line-height: 1.2 !important; display: block !important; }

/* ── Hide old elements inside new layout ── */
.zc-dashboard .sidebar-menu          { display: none !important; }
.zc-dashboard .dashboard__right      { padding-left: 0 !important; background: transparent !important; }
.zc-dashboard .dashboard__inner      { display: contents !important; }
.zc-dashboard .dashboard-header      { display: none !important; }
.zc-dashboard .dashboard-body        { padding: 0 !important; background: transparent !important; }
.zc-dashboard .body-overlay          { display: none !important; }
.zc-dashboard .sidebar-overlay       { display: none !important; }

/* ── Mobile ── */
.zc-sidebar-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.45) !important; z-index: 999 !important; display: none !important; }
.zc-sidebar-overlay.show { display: block !important; }
@media (max-width: 991px) {
    .zc-sidebar { transform: translateX(-100%) !important; box-shadow: none !important; }
    .zc-sidebar.mobile-open { transform: translateX(0) !important; box-shadow: 4px 0 20px rgba(0,0,0,.15) !important; }
    .zc-main { margin-left: 0 !important; }
    .zc-content { padding: 16px !important; }
    .zc-topbar { padding: 0 16px !important; }
}

/* ── CRM layout ── */
.crm-right { margin-left: 240px !important; background: #0c1222 !important; }
@media(max-width:991px){ .crm-right { margin-left: 0 !important; } }

/* ════════════════════════════════════════════════
   INNER PAGE PREMIUM STYLES — Wati/Interakt style
   All pages: Contacts, Campaigns, Templates, etc.
   ════════════════════════════════════════════════ */

/* ── Dashboard container wrapper ── */
.zc-content .dashboard-container {
    background: transparent !important;
    padding: 0 !important;
}

/* ── Container body ── */
.zc-content .dashboard-container__body {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}

/* ── Search / filter top bar ── */
.zc-content .body-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #fafbfc !important;
}
.zc-content .body-top__left,
.zc-content .body-top__right { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }

/* ── Search form ── */
.zc-content .search-form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.zc-content .search-form .form--control,
.zc-content .search-form input {
    padding: 8px 14px 8px 38px !important;
    border-radius: 9px !important;
    border: 1.5px solid #e2e8f0 !important;
    font-size: 0.84rem !important;
    min-width: 220px !important;
    background: #fff !important;
    color: #334155 !important;
    transition: border-color .2s !important;
}
.zc-content .search-form .form--control:focus,
.zc-content .search-form input:focus { border-color: #0a474c !important; box-shadow: 0 0 0 3px rgba(10,71,76,.1) !important; outline: none !important; }
.zc-content .search-form__icon { position: absolute !important; left: 11px !important; color: #94a3b8 !important; font-size: 0.85rem !important; }

/* ── Dashboard table (no extra wrapper needed) ── */
.zc-content .dashboard-table { overflow-x: auto !important; }

/* ── Pagination wrapper ── */
.zc-content .pagination-wrapper {
    padding: 14px 20px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    background: #fafbfc !important;
}

/* ── Page header (title + actions) ── */
.zc-content .container-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 18px 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.zc-content .container-top__title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -.01em !important;
}
.zc-content .container-top__desc {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
    margin: 3px 0 0 !important;
}
.zc-content .container-top__right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* ── Action Buttons ── */
.zc-content .btn--base,
.zc-content a.btn--base {
    background: linear-gradient(135deg, #0a474c, #0d5c62) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 9px 20px !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(10,71,76,.3) !important;
    transition: all .2s !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.zc-content .btn--base:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(10,71,76,.4) !important; color:#fff!important; }
.zc-content .btn--info {
    background: #eff6ff !important; color: #2563eb !important;
    border: 1px solid #bfdbfe !important; border-radius: 10px !important;
    padding: 9px 20px !important; font-size: 0.83rem !important; font-weight: 600 !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    transition: all .2s !important;
}
.zc-content .btn--info:hover { background: #dbeafe !important; }
.zc-content .btn--danger { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; border-radius: 10px !important; padding: 9px 18px !important; font-size: 0.83rem !important; font-weight: 600 !important; }
.zc-content .btn--warning { background: #fffbeb !important; color: #d97706 !important; border: 1px solid #fde68a !important; border-radius: 10px !important; padding: 9px 18px !important; font-size: 0.83rem !important; font-weight: 600 !important; }
.zc-content .btn-sm { padding: 6px 14px !important; font-size: 0.78rem !important; }

/* ── Filter / Search card ── */
.zc-content .select-group,
.zc-content .filter-form,
.zc-content .filter-area,
.zc-content [class*="filter-card"],
.zc-content .search-filter {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
}

/* ── Form controls ── */
.zc-content .form--control,
.zc-content .form-control,
.zc-content .form-select,
.zc-content .select2-selection,
.zc-content .select2-container .select2-selection--single {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
    background: #fff !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 40px !important;
    transition: border-color .2s !important;
}
.zc-content .form--control:focus,
.zc-content .form-control:focus,
.zc-content .form-select:focus {
    border-color: #0a474c !important;
    box-shadow: 0 0 0 3px rgba(10,71,76,.12) !important;
    outline: none !important;
}

/* ── Table wrapper card ── */
.zc-content .table-responsive,
.zc-content .table-wrapper,
.zc-content .card:has(table),
.zc-content > div > .card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    margin-bottom: 20px !important;
}

/* ── Tables ── */
.zc-content table,
.zc-content .table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: #fff !important;
}
.zc-content thead th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    white-space: nowrap !important;
    border-top: none !important;
}
.zc-content thead th:first-child { padding-left: 20px !important; }
.zc-content tbody td {
    padding: 13px 16px !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}
.zc-content tbody td:first-child { padding-left: 20px !important; }
.zc-content tbody tr:last-child td { border-bottom: none !important; }
.zc-content tbody tr:hover td { background: #f8fafc !important; }
.zc-content tbody tr:hover { background: #f8fafc !important; }

/* ── Status / Type Badges ── */
.zc-content .badge,
.zc-content [class*="badge--"],
.zc-content .custom--badge {
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.zc-content .badge--success,
.zc-content .badge.bg-success { background: #d4e7e8 !important; color: #083c40 !important; border: none !important; }
.zc-content .badge--danger,
.zc-content .badge.bg-danger  { background: #fee2e2 !important; color: #dc2626 !important; border: none !important; }
.zc-content .badge--warning,
.zc-content .badge.bg-warning { background: #fef3c7 !important; color: #d97706 !important; border: none !important; }
.zc-content .badge--info,
.zc-content .badge.bg-info    { background: #dbeafe !important; color: #2563eb !important; border: none !important; }
.zc-content .badge--primary   { background: #ede9fe !important; color: #7c3aed !important; border: none !important; }

/* ── Action icon buttons in table ── */
.zc-content .btn--icon,
.zc-content table .btn { border-radius: 8px !important; padding: 6px 10px !important; font-size: 0.8rem !important; }

/* ── Pagination ── */
.zc-content .pagination { gap: 4px !important; }
.zc-content .page-item .page-link {
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    padding: 7px 13px !important;
    transition: all .18s !important;
    background: #fff !important;
}
.zc-content .page-item.active .page-link {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    border-color: #0a474c !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(10,71,76,.3) !important;
}
.zc-content .page-item .page-link:hover { border-color: #0a474c !important; color: #0a474c !important; }

/* ── Card style for form pages ── */
.zc-content .card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
}
.zc-content .card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.9rem !important;
}
.zc-content .card-body { padding: 20px !important; }

/* ── Section titles inside content ── */
.zc-content h5,
.zc-content h6.section-title,
.zc-content .section-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 14px !important;
}

/* ── Inline search bar ── */
.zc-content .input-group {
    border-radius: 10px !important;
    overflow: visible !important; /* visible so country/select2 dropdowns aren't clipped */
    flex-wrap: nowrap !important;
}
.zc-content .input-group .form-control { border-radius: 10px 0 0 10px !important; }
.zc-content .input-group .btn { border-radius: 0 10px 10px 0 !important; }

/* ── input-group children must stay inline (theme .form--control{width:100%} breaks flex) ── */
.zc-content .input-group > .form--control,
.zc-content .input-group > .form-control,
.zc-content .input-group > .form-two,
.zc-content .input-group > input,
.zc-content .input-group > textarea {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
}
.zc-content .input-group > .input-group-text {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
}
/* country flag select2 sitting inside an input-group */
.zc-content .input-group .select2-container,
.zc-content .input-group > span.select2 {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 150px !important;
}
.zc-content .input-group.input-group .select2-container .select2-selection--single {
    border-radius: 10px 0 0 10px !important;
    border-right: 0 !important;
}
/* textarea needs real height (global min-height:40px is too short for messages) */
.zc-content textarea.form--control,
.zc-content textarea.form-two,
.zc-content textarea.form-control {
    min-height: 110px !important;
    height: auto !important;
    padding: 12px 16px !important;
    line-height: 1.5 !important;
}

/* ── Avatar / Initials in table ── */
.zc-content .contact-avatar,
.zc-content .user-avatar,
.zc-content .avatar {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg,#e9f2f2,#d4e7e8) !important;
    color: #083c40 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

/* ── Empty state ── */
.zc-content .empty-state,
.zc-content .no-data,
.zc-content td[colspan] { text-align: center !important; color: #94a3b8 !important; padding: 48px !important; }

/* ── Alert messages ── */
.zc-content .alert {
    border-radius: 12px !important;
    border: none !important;
    font-size: 0.85rem !important;
}
.zc-content .alert-success { background: #d4e7e8 !important; color: #065f46 !important; }
.zc-content .alert-danger  { background: #fee2e2 !important; color: #991b1b !important; }
.zc-content .alert-info    { background: #dbeafe !important; color: #1e40af !important; }
.zc-content .alert-warning { background: #fef3c7 !important; color: #92400e !important; }

/* ── Modal ── */
.modal-content {
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
}
.modal-header {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 18px 24px !important;
    border-radius: 18px 18px 0 0 !important;
}
.modal-title { font-weight: 700 !important; color: #0f172a !important; font-size: 1rem !important; }
.modal-body { padding: 20px 24px !important; }
.modal-footer { border-top: 1px solid #e2e8f0 !important; padding: 14px 24px !important; border-radius: 0 0 18px 18px !important; }

/* ── Select2 dropdown ── */
.select2-container--default .select2-selection--single {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    height: 40px !important;
    line-height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px !important; padding: 0 12px !important; font-size: 0.85rem !important; color: #334155 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-dropdown { border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,.1) !important; }
.select2-container--default .select2-results__option--highlighted { background: #e9f2f2 !important; color: #083c40 !important; }

/* ── Tabs ── */
.zc-content .nav-tabs { border-bottom: 2px solid #e2e8f0 !important; gap: 4px !important; }
.zc-content .nav-tabs .nav-link { border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 10px 18px !important; font-size: 0.85rem !important; font-weight: 600 !important; color: #64748b !important; margin-bottom: -2px !important; transition: all .18s !important; }
.zc-content .nav-tabs .nav-link.active { border-bottom-color: #0a474c !important; color: #0a474c !important; background: transparent !important; }
.zc-content .nav-tabs .nav-link:hover { color: #0a474c !important; }

/* ════════════════════════════════════════════════
   INBOX — Premium Chat UI (Wati style)
   ════════════════════════════════════════════════ */

/* Full area */
.zc-content .chatbox-area,
.chatbox-area {
    display: flex !important;
    height: calc(100vh - 72px) !important;
    background: #f1f5f9 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

/* Left conversation list panel */
.chatbox-area__left {
    width: 340px !important;
    min-width: 340px !important;
    background: #fff !important;
    border-right: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Search header */
.chatbox-wrapper__header {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #fff !important;
}
.chatbox-wrapper__header .search-form { position: relative !important; }
.chatbox-wrapper__header .form--control,
.chatbox-wrapper__header input {
    width: 100% !important;
    padding: 9px 14px 9px 36px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
    background: #f8fafc !important;
    color: #334155 !important;
    transition: border-color .2s !important;
}
.chatbox-wrapper__header .form--control:focus,
.chatbox-wrapper__header input:focus { border-color: #0a474c !important; background: #fff !important; outline: none !important; }
.chatbox-wrapper__header .search-form__icon { position: absolute !important; left: 11px !important; top: 50% !important; transform: translateY(-50%) !important; color: #94a3b8 !important; font-size: 0.83rem !important; }

/* Conversation list */
.chatbody { flex: 1 !important; overflow-y: auto !important; }
.chatbody::-webkit-scrollbar { width: 4px !important; }
.chatbody::-webkit-scrollbar-thumb { background: #e2e8f0 !important; border-radius: 4px !important; }

/* Each conversation item */
.chat-list__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid #f8fafc !important;
    cursor: pointer !important;
    transition: background .15s !important;
    text-decoration: none !important;
}
.chat-list__item:hover { background: #f8fafc !important; }
.chat-list__item.active { background: #e9f2f2 !important; border-left: 3px solid #0a474c !important; }

/* Avatar in list */
.chat-list__item .contact_thumb,
.chat-list__item .contact-thumb {
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-weight: 700 !important; font-size: 0.95rem !important;
    flex-shrink: 0 !important; color: #fff !important;
}
.contact_thumb.bg--success, .contact_thumb.bg--base { background: linear-gradient(135deg,#0a474c,#0d5c62) !important; }
.contact_thumb.bg--danger  { background: linear-gradient(135deg,#ef4444,#dc2626) !important; }
.contact_thumb.bg--warning { background: linear-gradient(135deg,#f59e0b,#d97706) !important; }
.contact_thumb.bg--info    { background: linear-gradient(135deg,#3b82f6,#2563eb) !important; }
.contact_thumb.bg--primary { background: linear-gradient(135deg,#8b5cf6,#7c3aed) !important; }

/* Conversation content */
.chat-list__content { flex: 1 !important; min-width: 0 !important; }
.chat-list__content .left { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.chat-list__content .name { font-size: 0.875rem !important; font-weight: 600 !important; color: #0f172a !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; }
.chat-list__content .last-message { font-size: 0.78rem !important; color: #94a3b8 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.chat-list__content .time { font-size: 0.72rem !important; color: #cbd5e1 !important; white-space: nowrap !important; }

/* Main chat area */
.chatbox-area__body:not(.d-none) {
    flex: 1 !important;
    display: flex !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
}
.chat-box {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-right: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
}

/* Chat header (active conversation) */
.chat-box__header {
    padding: 14px 20px !important;
    background: #fff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}
.chat-box__thumb img, .chat-box__thumb .contact-avatar {
    width: 40px !important; height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.chat-box__item .name { font-size: 0.9rem !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; }
.chat-box__item .username { font-size: 0.78rem !important; color: #94a3b8 !important; }

/* Message area */
.msg-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px 24px !important;
    background: #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.msg-body::-webkit-scrollbar { width: 4px !important; }
.msg-body::-webkit-scrollbar-thumb { background: #e2e8f0 !important; border-radius: 4px !important; }

/* Message bubbles */
.msg-body .msg { display: flex !important; gap: 10px !important; align-items: flex-end !important; }
.msg-body .msg.send { flex-direction: row-reverse !important; }
.msg-body .msg .msg-content { max-width: 72% !important; }
.msg-body .msg.recive .bubble,
.msg-body .msg.receive .bubble {
    background: #fff !important;
    color: #334155 !important;
    border-radius: 4px 16px 16px 16px !important;
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    border: 1px solid #f1f5f9 !important;
}
.msg-body .msg.send .bubble {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    border-radius: 16px 4px 16px 16px !important;
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 12px rgba(10,71,76,.25) !important;
}
.msg-time { font-size: 0.7rem !important; color: #94a3b8 !important; margin-top: 4px !important; }

/* Chat footer / input */
.chat-box__footer {
    padding: 14px 20px !important;
    background: #fff !important;
    border-top: 1px solid #e2e8f0 !important;
}
.chat-box__footer .type-massage,
.chat-box__footer .message-input-area {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
    transition: border-color .2s !important;
}
.chat-box__footer .type-massage:focus-within { border-color: #0a474c !important; box-shadow: 0 0 0 3px rgba(10,71,76,.1) !important; }
.chat-box__footer textarea, .chat-box__footer .msg-input { background: transparent !important; border: none !important; resize: none !important; font-size: 0.875rem !important; flex: 1 !important; color: #334155 !important; outline: none !important; }
.chat-box__footer .send-btn,
.chat-box__footer button[type="submit"] {
    width: 36px !important; height: 36px !important;
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    border: none !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #fff !important; cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(10,71,76,.3) !important;
    transition: transform .2s !important;
    flex-shrink: 0 !important;
}
.chat-box__footer .send-btn:hover { transform: scale(1.1) !important; }

/* Right contact details panel */
.body-right.contact__details {
    width: 280px !important;
    min-width: 280px !important;
    background: #fff !important;
    border-left: 1px solid #e2e8f0 !important;
    overflow-y: auto !important;
    padding: 20px !important;
}

/* Empty state */
.empty-conversation:not(.d-none) {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
}

/* ── Topbar breadcrumb tabs (if any) ── */
.zc-topbar-tabs { padding: 0 28px; border-bottom: 1px solid #e2e8f0; background: #fff; display: flex; gap: 0; }
.zc-topbar-tab { padding: 12px 18px; font-size: 0.83rem; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; cursor: pointer; transition: all .18s; text-decoration: none; }
.zc-topbar-tab.active, .zc-topbar-tab:hover { color: #0a474c; border-bottom-color: #0a474c; }

/* ════════════════════════════════════════════════
   PROFILE SETTINGS — form page
   ════════════════════════════════════════════════ */
.zc-content .profile-header {
    padding: 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #fafbfc !important;
}
.zc-content .profile-header__title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
}
.zc-content .profile-header__thumb {
    position: relative !important;
    display: inline-block !important;
}
.zc-content .profile-header__thumb img {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}
.zc-content .profile-header__thumb .edit {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 26px !important;
    height: 26px !important;
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(10,71,76,.4) !important;
}

.zc-content .profile-info {
    padding: 24px !important;
}

/* Form groups across all pages */
.zc-content .form-group {
    margin-bottom: 18px !important;
}
.zc-content .form-group label,
.zc-content .form-label {
    font-size: 12.8px !important;
    font-weight: 400 !important;
    color: #4d6d67 !important;
    margin-bottom: 6px !important;
    display: block !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.zc-content .form-group .form--control,
.zc-content .form-group .form-control,
.zc-content .form-group input,
.zc-content .form-group textarea,
.zc-content .form-group select {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 9px 14px !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
    background: #fff !important;
    width: 100% !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.zc-content .form-group .form--control:focus,
.zc-content .form-group .form-control:focus,
.zc-content .form-group input:focus,
.zc-content .form-group textarea:focus {
    border-color: #0a474c !important;
    box-shadow: 0 0 0 3px rgba(10,71,76,.12) !important;
    outline: none !important;
}

/* Submit button */
.zc-content button[type="submit"],
.zc-content input[type="submit"] {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 28px !important;
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(10,71,76,.35) !important;
    transition: all .2s !important;
}
.zc-content button[type="submit"]:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(10,71,76,.45) !important; }

/* ════════════════════════════════════════════════
   SUBSCRIPTION / PLAN PAGES
   ════════════════════════════════════════════════ */
.zc-content .pricing-card,
.zc-content .plan-card,
.zc-content .subscription-card {
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 28px 24px !important;
    transition: all .2s !important;
    position: relative !important;
    overflow: hidden !important;
}
.zc-content .pricing-card:hover,
.zc-content .plan-card:hover { border-color: #0a474c !important; box-shadow: 0 12px 40px rgba(10,71,76,.15) !important; transform: translateY(-2px) !important; }
.zc-content .pricing-card.active,
.zc-content .plan-card.current { border-color: #0a474c !important; }
.zc-content .pricing-card.active::before,
.zc-content .plan-card.current::before {
    content: 'Current Plan' !important;
    position: absolute !important; top: 14px !important; right: -28px !important;
    background: #0a474c !important; color: #fff !important;
    font-size: 0.72rem !important; font-weight: 700 !important;
    padding: 4px 36px !important; transform: rotate(45deg) !important;
}

/* ════════════════════════════════════════════════
   GENERAL — applies to remaining pages
   ════════════════════════════════════════════════ */

/* CRM Dashboard & Lead Pipeline use custom layouts */
.zc-content .kanban-board,
.zc-content .pipeline-board {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
}
.zc-content .kanban-col,
.zc-content .pipeline-col {
    min-width: 270px !important;
    background: #f1f5f9 !important;
    border-radius: 14px !important;
    padding: 14px !important;
}
.zc-content .kanban-col__header {
    font-size: 0.83rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.zc-content .kanban-card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
    cursor: grab !important;
    transition: box-shadow .18s !important;
}
.zc-content .kanban-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; }

/* WhatsApp Floater / Short Links / CTA URL pages */
.zc-content .floater-preview,
.zc-content .shortlink-card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}

/* Data-info blocks (key-value pairs) */
.zc-content .data-item,
.zc-content .info-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 0.85rem !important;
}
.zc-content .data-item__label,
.zc-content .info-label { color: #94a3b8 !important; font-weight: 500 !important; min-width: 120px !important; }
.zc-content .data-item__value,
.zc-content .info-value { color: #0f172a !important; font-weight: 600 !important; }

/* ════════════════════════════════════════════════
   PREMIUM DASHBOARD THEME v3 — All Pages Dynamic
   ════════════════════════════════════════════════ */

/* Page background */
.zc-content {
    background: linear-gradient(160deg,#f8fafc 0%,#f1f5f9 60%,#eef5f5 100%) !important;
    min-height: 100vh !important;
}

/* ── Container top header ── */
.zc-content .container-top {
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 18px 22px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    position: relative !important;
    overflow: hidden !important;
}
/* the animated teal→purple strip read as decoration, not product — gone */
.zc-content .container-top::before { content: none !important; animation: none !important; }
@keyframes zcGradientMove {
    0%{background-position:0%} 100%{background-position:200%}
}
.zc-content .container-top__title {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #1c1c1c !important;
    margin: 0 !important;
}
.zc-content .container-top__desc {
    font-size: 12.5px !important;
    color: #64748b !important;
    margin-top: 3px !important;
}

/* ── Dashboard body ── */
.zc-content .dashboard-container__body {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1.5px solid #e8edf3 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* ── Filter / body-top bar ── */
.zc-content .body-top {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e8edf3 !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.zc-content .search-form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.zc-content .search-form .form--control,
.zc-content .search-form input {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 8px 12px 8px 36px !important;
    font-size: 13px !important;
    background: #fff !important;
    min-width: 220px !important;
    color: #0f172a !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.zc-content .search-form .form--control:focus {
    border-color: #0a474c !important;
    box-shadow: 0 0 0 3px rgba(10,71,76,.12) !important;
}
.zc-content .select-group .form--control,
.zc-content .filter-form .form--control {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    background: #fff !important;
    color: #475569 !important;
    cursor: pointer !important;
}
.zc-content .select-group .form--control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
}

/* ── Table ── */
.zc-content .dashboard-table {
    padding: 0 !important;
}
.zc-content table.table {
    margin: 0 !important;
    border-collapse: collapse !important;
}
.zc-content table.table thead tr {
    background: #fff !important;
}
.zc-content table.table thead th {
    background: #fff !important;   /* bootstrap --bs-table-bg leaves a blue-grey band */
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #4a5350 !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid #eef1f1 !important;
    white-space: nowrap !important;
}
.zc-content table.table tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background .15s !important;
}
.zc-content table.table tbody tr:hover {
    background: #fafbfb !important;
}
.zc-content table.table tbody td {
    padding: 14px 18px !important;
    font-size: 13px !important;
    color: #334155 !important;
    vertical-align: middle !important;
}
.zc-content table.table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ── Status badges ── */
.zc-content .badge, .zc-content span.badge {
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
}
.zc-content .badge--success, .zc-content .badge.bg-success { background: #dbe9e9 !important; color: #0a474c !important; }
.zc-content .badge--warning, .zc-content .badge.bg-warning { background: #fef9c3 !important; color: #ca8a04 !important; }
.zc-content .badge--danger, .zc-content .badge.bg-danger { background: #fee2e2 !important; color: #dc2626 !important; }
.zc-content .badge--info, .zc-content .badge.bg-info { background: #e0f2fe !important; color: #0284c7 !important; }
.zc-content .badge--primary, .zc-content .badge.bg-primary { background: #ede9fe !important; color: #7c3aed !important; }

/* ── Action buttons in table ── */
.zc-content .btn--sm {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all .18s !important;
}
.zc-content .btn--base {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(10,71,76,.3) !important;
}
.zc-content .btn--base:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(10,71,76,.4) !important;
    color: #fff !important;
}
.zc-content .btn--danger { background: #fee2e2 !important; color: #dc2626 !important; border: 1px solid #fca5a5 !important; }
.zc-content .btn--danger:hover { background: #fca5a5 !important; }
.zc-content .btn--info { background: #e0f2fe !important; color: #0284c7 !important; border: 1px solid #7dd3fc !important; }

/* ── Empty state ── */
.zc-content .no-data-found,
.zc-content td.text-center[colspan] {
    text-align: center !important;
    padding: 48px 24px !important;
    color: #94a3b8 !important;
}
.zc-content .empty-text { font-size: 13px !important; color: #94a3b8 !important; }

/* ── Pagination ── */
.zc-content .pagination-wrapper {
    padding: 14px 18px !important;
    border-top: 1.5px solid #f1f5f9 !important;
    background: #f8fafc !important;
}
.zc-content .pagination .page-item .page-link {
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    transition: all .15s !important;
}
.zc-content .pagination .page-item.active .page-link {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    border-color: #0a474c !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(10,71,76,.3) !important;
}
.zc-content .pagination .page-item .page-link:hover {
    background: #eef5f5 !important;
    border-color: #0a474c !important;
    color: #0a474c !important;
}

/* ── Cards (campaign, contact etc) ── */
.zc-content .card {
    border: 1.5px solid #e8edf3 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    transition: box-shadow .2s, transform .2s !important;
    overflow: hidden !important;
}
.zc-content .card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
    transform: translateY(-2px) !important;
}
.zc-content .card-header {
    background: linear-gradient(135deg,#f8fafc,#f1f5f9) !important;
    border-bottom: 1.5px solid #e8edf3 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 14px 18px !important;
}

/* ── Form elements ── */
.zc-content .form--control,
.zc-content input.form-control,
.zc-content textarea.form-control,
.zc-content select.form-select {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #0f172a !important;
    background: #fff !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.zc-content .form--control:focus,
.zc-content input.form-control:focus,
.zc-content textarea.form-control:focus {
    border-color: #0a474c !important;
    box-shadow: 0 0 0 3px rgba(10,71,76,.1) !important;
    outline: none !important;
}
.zc-content label, .zc-content .form-label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 5px !important;
}

/* ── TopBar ── */
.zc-topbar {
    background: #fff !important;
    border-bottom: 1.5px solid #e8edf3 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.05) !important;
    padding: 0 24px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}
.zc-topbar .zc-page-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* ── Dashboard stat widgets ── */
.zc-content .dashboard-widget {
    background: #fff !important;
    border: 1.5px solid #e8edf3 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
    transition: all .2s !important;
    position: relative !important;
    overflow: hidden !important;
}
.zc-content .dashboard-widget::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg,#0a474c,#6366f1) !important;
    opacity: 0 !important;
    transition: opacity .2s !important;
}
.zc-content .dashboard-widget:hover::after { opacity: 1 !important; }
.zc-content .dashboard-widget:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.1) !important;
}

/* ── Section label / dividers ── */
.zc-content .section-title,
.zc-content h5.card-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* ── Select2 field chrome moved to the app-wide block at the end of this
      file (search "one box per field"); the old rules here forced a 44px
      box and a 10px-inset arrow that the global normalisation could not
      outrank without also beating the .body-top / .ccm-sec exceptions. ── */
.select2-container--open .select2-dropdown {
    border: 2px solid #d4e7e8 !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    box-shadow: 0 12px 36px rgba(8,60,64,.15), 0 2px 8px rgba(0,0,0,.08) !important;
    overflow: hidden !important;
}
.select2-search--dropdown {
    padding: 10px !important;
    background: #f0fdf8 !important;
    border-bottom: 1.5px solid #d4e7e8 !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #9bc0c2 !important;
    border-radius: 7px !important;
    padding: 7px 10px !important;
    font-size: .82rem !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
}
.select2-results__options {
    max-height: 230px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #0d5c62 #f0fdf8 !important;
}
.select2-results__options::-webkit-scrollbar { width: 5px !important; }
.select2-results__options::-webkit-scrollbar-track { background: #f0fdf8 !important; }
.select2-results__options::-webkit-scrollbar-thumb {
    background: #0d5c62 !important;
    border-radius: 4px !important;
}
.select2-results__option {
    padding: 9px 14px !important;
    font-size: .84rem !important;
    color: #374151 !important;
    border-bottom: 1px solid rgba(8,60,64,.05) !important;
}
.select2-results__option:last-child { border-bottom: none !important; }
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
    background: #eef5f5 !important;
    color: #083c40 !important;
    font-weight: 600 !important;
}
.select2-results__option[aria-selected=true] {
    background: #dbe9e9 !important;
    color: #083c40 !important;
    font-weight: 700 !important;
}

/* ── Template Preview Panel Overrides — last load wins ── */
.template-info-container__right {
    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
}
.template-info-container__right .preview-item {
    border: 2px solid #d4e7e8 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 8px 32px rgba(8,60,64,.12), 0 2px 8px rgba(0,0,0,.06) !important;
}
.template-info-container__right .preview-item__header {
    padding: 14px 20px !important;
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
}
.template-info-container__right .preview-item__title {
    color: #fff !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
.template-info-container__right .preview-item__content {
    background: linear-gradient(160deg,#f0fdf8,#e8fdf2) !important;
    padding: 24px 20px !important;
}
.template-info-container__right .preview-item__shape {
    display: none !important;
}
.template-info-container__right .preview-item__content .card-item {
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
    border: 1px solid rgba(8,60,64,.1) !important;
    overflow: hidden !important;
}
.template-info-container__right .preview-item__content .card-item__thumb {
    border-radius: 10px 10px 0 0 !important;
}
.button-preview .btn {
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 7px 12px !important;
    border: 1.5px solid #d4e7e8 !important;
    color: #083c40 !important;
    background: #eef5f5 !important;
    width: 100% !important;
}

/* ════════════════════════════════════════════════════════
   USER DASHBOARD — page-specific component polish (green+white)
   Covers: form pages, subscription, stat cards, pipeline,
   list-item cards, floater, table components.
   ════════════════════════════════════════════════════════ */

/* ── Form-page content wrapper → white card ── */
.zc-content .information-wrapper {
    background: #fff !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
}
.zc-content .information-wrapper .form-group { margin-bottom: 16px !important; }
.zc-content .label-two,
.zc-content .form--label {
    font-weight: 600 !important;
    color: #334155 !important;
    font-size: 0.82rem !important;
    margin-bottom: 6px !important;
}
.zc-content .form-two:focus { border-color: #0a474c !important; box-shadow: 0 0 0 3px rgba(10,71,76,.12) !important; }
/* input-group prefixes/addons */
.zc-content .input-group-text {
    background: #f0fdf8 !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #083c40 !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
}

/* ── Section dividers (auth-devider on template/form pages) ── */
.zc-content .auth-devider span,
.dashboard-container .auth-devider span {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 7px 20px !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 14px rgba(10,71,76,.25) !important;
}

/* ── Form switches ── */
.zc-content .form--switch .form-check-input:checked,
.zc-content .form-check-input:checked {
    background-color: #0a474c !important;
    border-color: #0a474c !important;
}

/* ── Toggle / pill tabs (custom--tab) ── */
.zc-content .custom--tab .nav-link,
.zc-content .nav-pills .nav-link {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    color: #64748b !important;
    padding: 9px 18px !important;
}
.zc-content .custom--tab .nav-link.active,
.zc-content .nav-pills .nav-link.active {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(10,71,76,.3) !important;
}

/* ── Stat / metric cards (CRM dashboard, referrals, generic) ── */
.zc-content .crm-stat-card,
.zc-content .rp-stat-card,
.zc-content .g-card,
.zc-content .stat-card,
.zc-content .dashboard-widget {
    background: #fff !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
    transition: transform .2s, box-shadow .2s !important;
}
.zc-content .crm-stat-card:hover,
.zc-content .rp-stat-card:hover,
.zc-content .g-card:hover,
.zc-content .stat-card:hover,
.zc-content .dashboard-widget:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(10,71,76,.12) !important;
    border-color: #9bc0c2 !important;
}

/* ── Subscription plan cards ── */
.zc-content .plan-wrapper { gap: 20px !important; }
.zc-content .active-card,
.zc-content .pricing-card,
.zc-content .plan-card {
    background: #fff !important;
    border: 2px solid #d4e7e8 !important;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: 0 6px 24px rgba(8,60,64,.08) !important;
    transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.zc-content .active-card {
    border: 0 !important;
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    color: #fff !important;
    box-shadow: 0 12px 36px rgba(8,60,64,.28) !important;
}
.zc-content .active-card * { color: #fff !important; }
.zc-content .active-card__badge {
    background: rgba(255,255,255,.2) !important;
    color: #fff !important;
    border-radius: 30px !important;
    padding: 5px 14px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}
.zc-content .active-card__title { font-size: 1.5rem !important; font-weight: 800 !important; }
.zc-content .pricing-card:hover,
.zc-content .plan-card:hover {
    transform: translateY(-4px) !important;
    border-color: #0a474c !important;
    box-shadow: 0 14px 36px rgba(10,71,76,.16) !important;
}

/* ── Pipeline lead cards (kanban) ── */
.zc-content .lead-card {
    background: #fff !important;
    border: 1px solid #e6f0eb !important;
    border-left: 3px solid #0a474c !important;
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    transition: transform .15s, box-shadow .15s !important;
}
.zc-content .lead-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(10,71,76,.14) !important;
}

/* ── List-item cards (interactive list, cta-url) ── */
.zc-content .row_wrapper .card-item,
.zc-content .card-item {
    background: #fff !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
    overflow: hidden !important;
    transition: transform .2s, box-shadow .2s !important;
}
.zc-content .row_wrapper .card-item:hover,
.zc-content .card-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 26px rgba(10,71,76,.12) !important;
    border-color: #9bc0c2 !important;
}

/* ── WhatsApp Floater header ── */
.zc-content .floater-header-top-wrapper {
    background: #fff !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
    margin-bottom: 18px !important;
}

/* ── Theme native table components (dashboard-table / task-table) ── */
.zc-content .dashboard-table,
.zc-content .task-table {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
.zc-content .dashboard-table__top {
    padding: 14px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
}
.zc-content .dashboard-table__title { font-weight: 700 !important; color: #0f172a !important; }

/* ── Definition / detail rows (details pages) ── */
.zc-content .list-group-item,
.zc-content .detail-row {
    border-color: #f1f5f9 !important;
    padding: 11px 16px !important;
    font-size: 0.85rem !important;
}

/* ── Sub-nav pill rows (already inline on some pages) → consistent ── */
.zc-content .body-top { margin-bottom: 16px !important; }

/* ── Remaining content wrappers (profile, plan details, notes, referral) ── */
.zc-content .profile-header,
.zc-content .profile-info,
.zc-content .profile-details,
.zc-content .plan-details,
.zc-content .note-wrapper,
.zc-content .rp-link-box,
.zc-content .message-preview-list {
    background: #fff !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 16px !important;
    padding: 22px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
    margin-bottom: 18px !important;
}
.zc-content .profile-header {
    background: linear-gradient(135deg,#f0fdf8,#ffffff 70%) !important;
    border: 1px solid #d4e7e8 !important;
}
.zc-content .profile-header__thumb img,
.zc-content .profile-header__thumb {
    border-radius: 50% !important;
    border: 3px solid #d4e7e8 !important;
}
.zc-content .profile-header__title { font-weight: 800 !important; color: #0f172a !important; }
/* plan detail rows */
.zc-content .plan-details__item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 0 !important;
    font-size: 0.85rem !important;
    color: #475569 !important;
}
.zc-content .plan-details__item i,
.zc-content .plan-details__item .las { color: #0a474c !important; }
/* profile inner tabs */
.zc-content .profile-details__tab .nav-link.active { color: #0a474c !important; border-bottom-color: #0a474c !important; }
/* referral link box */
.zc-content .rp-link-box {
    background: #f0fdf8 !important;
    border: 1.5px dashed #9bc0c2 !important;
}
.zc-content .rp-stat-num { color: #0f172a !important; font-weight: 800 !important; }
.zc-content .rp-stat-label { color: #94a3b8 !important; font-size: 0.78rem !important; }
/* note wrapper textarea/output */
.zc-content .note-wrapper__output { background: #f8fafc !important; border-radius: 10px !important; padding: 14px !important; }

/* ════════════════════════════════════════════════════════
   REUSABLE FORM SECTION CARDS (.zc-form-card)
   Bordered section boxes for form pages (CTA URL, etc.)
   ════════════════════════════════════════════════════════ */
.zc-content .zc-form-card {
    background: #fff !important;
    border: 2px solid #d4e7e8 !important;
    border-radius: 16px !important;
    overflow: visible !important; /* visible so select2/country dropdowns aren't clipped */
    margin-bottom: 18px !important;
    box-shadow: 0 4px 16px rgba(8,60,64,.06) !important;
    transition: border-color .2s, box-shadow .2s !important;
}
/* round the head's top corners since the card no longer clips */
.zc-content .zc-form-card__head { border-radius: 14px 14px 0 0 !important; }
.zc-content .zc-form-card:hover {
    border-color: #9bc0c2 !important;
    box-shadow: 0 8px 24px rgba(8,60,64,.1) !important;
}
.zc-content .zc-form-card__head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 18px !important;
    background: linear-gradient(135deg,#f0fdf8,#e9f2f2) !important;
    border-bottom: 1.5px solid #d4e7e8 !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #047857 !important;
}
.zc-content .zc-form-card__head i,
.zc-content .zc-form-card__head .las {
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    color: #fff !important;
    border-radius: 7px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}
.zc-content .zc-form-card__body {
    padding: 18px !important;
}
.zc-content .zc-form-card__body .form-group:last-child { margin-bottom: 0 !important; }
/* header-filed generated fields inside card */
.zc-content .zc-form-card__body .header-filed:empty { display: none !important; }
.zc-content .zc-form-card__body .header-filed .form-group { margin-top: 14px !important; margin-bottom: 0 !important; }

/* ── Section divider with action button (Interactive List etc.) ── */
.zc-content .zc-section-divider {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 8px 0 16px !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg,#f0fdf8,#ffffff 70%) !important;
    border: 1.5px solid #d4e7e8 !important;
    border-left: 4px solid #083c40 !important;
    border-radius: 12px !important;
    flex-wrap: wrap !important;
}
.zc-content .zc-section-divider > span {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: #047857 !important;
    letter-spacing: .5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.zc-content .zc-section-divider > span i { color: #0a474c !important; font-size: 1rem !important; }

/* ── List sections (.list--section) → green card w/ header strip ── */
.zc-content .section-block.list--section,
.zc-content .list--section {
    background: #fff !important;
    border: 2px solid #d4e7e8 !important;
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(8,60,64,.06) !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.zc-content .list--section:hover {
    border-color: #9bc0c2 !important;
    box-shadow: 0 8px 24px rgba(8,60,64,.1) !important;
}
.zc-content .list--section > .d-flex:first-child {
    background: linear-gradient(135deg,#f0fdf8,#e9f2f2) !important;
    border-bottom: 1.5px solid #d4e7e8 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
}
.zc-content .list--section > .d-flex:first-child h5 {
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #047857 !important;
    padding-left: 30px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.zc-content .list--section > .d-flex:first-child h5::before {
    content: '\f03a';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: #083c40; color: #fff;
    border-radius: 6px; font-size: 0.65rem;
}
.zc-content .list--section > .form-group { padding: 14px 16px 0 !important; margin: 0 !important; }
.zc-content .list--section > .rows-wrapper { margin: 14px 16px 16px !important; }

/* rows inner box */
.zc-content .list--section .rows-wrapper {
    background: #f8fafc !important;
    border: 1.5px dashed #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px !important;
}
.zc-content .list--section .rows-wrapper .text--bold { color: #334155 !important; font-weight: 700 !important; font-size: 0.85rem !important; }
.zc-content .list--section .add-row-button {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    border: 0 !important; border-radius: 7px !important;
    width: 30px; height: 30px; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
}
/* each row item */
.zc-content .custom-row-wrapper {
    background: #fff !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 10px !important;
    padding: 12px !important;
}
.zc-content .custom-row-wrapper .remove-attribute {
    background: #fef2f2 !important; color: #ef4444 !important;
    border: 1.5px solid #fecaca !important; border-radius: 7px !important;
    width: 38px; height: 38px; flex-shrink: 0; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.zc-content .custom-row-wrapper .remove-attribute:hover { background: #ef4444 !important; color: #fff !important; }
.zc-content .add-section-button {
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    border: 0 !important; border-radius: 9px !important; font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(8,60,64,.25) !important;
}

/* ════════════════════════════════════════════════════════
   INBOX COMPOSE FOOTER — WhatsApp-style glassmorphism
   ════════════════════════════════════════════════════════ */
.zc-content .chat-box__footer,
.chat-box__footer {
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border-top: 1px solid rgba(8,60,64,.12) !important;
    padding: 12px 16px !important;
}
.zc-content .chat-send-area,
.chat-send-area {
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
}
.chat-send-area .btn-group { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }

/* + media trigger — circular green */
.chat-box__footer .chat-media__btn {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    width: 46px !important; height: 46px !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(10,71,76,.32) !important;
    font-size: 18px !important;
    transition: transform .25s !important;
}
.chat-box__footer .chat-media__btn:hover { transform: rotate(135deg) scale(1.05) !important; }

/* image quick button — circular glass */
.chat-box__footer .btn-item.image-upload-btn {
    width: 46px !important; height: 46px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.7) !important;
    border: 1.5px solid rgba(8,60,64,.18) !important;
    color: #083c40 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 17px !important; cursor: pointer !important;
    transition: all .2s !important;
}
.chat-box__footer .btn-item.image-upload-btn:hover { background: #e9f2f2 !important; border-color: #0a474c !important; transform: translateY(-1px) !important; }

/* dropup menus — frosted glass */
.chat-box__footer .chat-media__list,
.chat-box__footer .chat-url__list,
.chat-box__footer .chat-list__wrapper {
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
    border: 1px solid rgba(8,60,64,.14) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.16), 0 4px 14px rgba(8,60,64,.1) !important;
}

/* menu rows */
.chat-box__footer .media-item,
.chat-box__footer .url-item {
    border-radius: 11px !important;
    padding: 9px 14px !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    gap: 12px !important;
    transition: background .15s, transform .15s !important;
}
.chat-box__footer .media-item:hover,
.chat-box__footer .url-item:hover {
    background: linear-gradient(135deg,#f0fdf8,#e9f2f2) !important;
    transform: translateX(3px) !important;
}
.chat-box__footer .media-item .icon,
.chat-box__footer .url-item .icon {
    width: 34px !important; height: 34px !important;
    border-radius: 10px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 15px !important; flex-shrink: 0 !important;
}
/* per-item icon tints (WhatsApp-style colourful) */
.chat-box__footer .interactive_list_btn .icon { background:#eef2ff !important; color:#6366f1 !important; }
.chat-box__footer .cta-url-btn .icon         { background:#ecfeff !important; color:#0891b2 !important; }
.chat-box__footer .media_selector .icon      { background:#fff7ed !important; color:#ea580c !important; }
.chat-box__footer .location-modal-btn .icon  { background:#fef2f2 !important; color:#ef4444 !important; }
.chat-box__footer .url-item .icon            { background:#e9f2f2 !important; color:#083c40 !important; }

/* input pill */
.chat-box__footer .input-area {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1.5px solid rgba(8,60,64,.16) !important;
    border-radius: 26px !important;
    padding: 4px 6px 4px 16px !important;
    transition: border-color .2s, box-shadow .2s !important;
    backdrop-filter: blur(8px) !important;
}
.chat-box__footer .input-area:focus-within {
    border-color: #0a474c !important;
    box-shadow: 0 0 0 4px rgba(10,71,76,.1) !important;
}
.chat-box__footer .input-area .input-group {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.zc-content .chat-box__footer .input-area textarea.message-input,
.chat-box__footer .input-area .message-input {
    background: transparent !important;
    border: none !important;
    resize: none !important;
    box-shadow: none !important;
    min-height: 38px !important;
    max-height: 120px !important;
    height: 38px !important;
    padding: 8px 4px !important;
    font-size: 0.9rem !important;
    color: #1f2937 !important;
    outline: none !important;
}
.chat-box__footer .emoji-icon {
    color: #94a3b8 !important;
    font-size: 1.3rem !important;
    display: inline-flex !important; align-items: center !important;
    cursor: pointer !important;
    transition: color .2s, transform .2s !important;
}
.chat-box__footer .emoji-icon:hover { color: #f59e0b !important; transform: scale(1.12) !important; }

/* send button — green circle */
.chat-box__footer .chating-btn {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important;
    border: none !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 4px 14px rgba(10,71,76,.35) !important;
    flex-shrink: 0 !important;
    transition: transform .2s, box-shadow .2s !important;
}
.chat-box__footer .chating-btn:hover { transform: scale(1.08) rotate(8deg) !important; box-shadow: 0 6px 20px rgba(10,71,76,.45) !important; }
.chat-box__footer .chating-btn svg { width: 20px !important; height: 20px !important; }

/* blocked message pill */
.chat-box__footer .blocked-message {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-radius: 30px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

/* send button — beat older .chat-box__footer button[type=submit] rule */
.zc-content .chat-box__footer .input-area button.chating-btn,
.chat-box__footer .input-area button.chating-btn {
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    box-shadow: 0 4px 14px rgba(10,71,76,.35) !important;
}

/* ════════════════════════════════════════════════════════
   INBOX — conversation list items + header button polish
   ════════════════════════════════════════════════════════ */
/* Uniform avatars (was random red/green/yellow → consistent green) */
.chatbox-area__left .chat-list__item .contact_thumb,
.chat-list__item .contact_thumb,
.chat-list__item .contact_thumb.bg--success,
.chat-list__item .contact_thumb.bg--info,
.chat-list__item .contact_thumb.bg--warning,
.chat-list__item .contact_thumb.bg--danger,
.chat-list__item .contact_thumb.bg--base {
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    color: #fff !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(8,60,64,.2) !important;
}
.chat-list__item .contact_thumb img { border-radius: 50% !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* Conversation list item boxes */
.chatbox-area__left .chat-list__item,
.chat-list__item {
    border-radius: 12px !important;
    margin: 2px 8px !important;
    padding: 11px 12px !important;
    border-bottom: none !important;
    gap: 12px !important;
}
.chatbox-area__left .chat-list__item:hover,
.chat-list__item:hover { background: #f0fdf8 !important; }
.chatbox-area__left .chat-list__item.active,
.chat-list__item.active {
    background: linear-gradient(135deg,#e9f2f2,#eef5f5) !important;
    border-left: none !important;
    box-shadow: inset 0 0 0 1.5px #9bc0c2 !important;
}
.chat-list__item .name { color: #0f172a !important; font-weight: 700 !important; font-size: 0.88rem !important; margin: 0 !important; }
.chat-list__item .last-message .text,
.chat-list__item .last-message-text { color: #64748b !important; font-size: 0.78rem !important; }
.chat-list__item .last-message .text--bold,
.chat-list__item .last-message-text.text--bold { color: #334155 !important; font-weight: 600 !important; }
.chat-list__item .time { color: #94a3b8 !important; font-size: 0.68rem !important; }
/* unread badge — green pill */
.chat-list__item .unseen-message .number {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    border-radius: 999px !important;
    min-width: 19px !important; height: 19px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 0.66rem !important; font-weight: 700 !important; padding: 0 5px !important;
    box-shadow: 0 2px 6px rgba(10,71,76,.3) !important;
}

/* Chat header "send template" button (was a full-green square icon) */
.chat-box__header .template_button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    background: #e9f2f2 !important;
    color: #083c40 !important;
    border: 1.5px solid #d4e7e8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    transition: all .2s !important;
}
.chat-box__header .template_button:hover {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(10,71,76,.32) !important;
}
.chat-box__header .template_button i { line-height: 1 !important; }

/* Contact-panel tabs (Details/Note) → segmented toggle (was full-green bar) */
.zc-content .profile-details__tab .custom--tab,
.profile-details__tab .nav-pills.custom--tab {
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 4px !important;
    gap: 4px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}
.zc-content .profile-details__tab .custom--tab .nav-link,
.profile-details__tab .custom--tab .nav-link {
    flex: 1 1 0 !important;
    text-align: center !important;
    border-radius: 9px !important;
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    background: transparent !important;
    color: #64748b !important;
    box-shadow: none !important;
}
.zc-content .profile-details__tab .custom--tab .nav-link.active,
.profile-details__tab .custom--tab .nav-link.active {
    background: #fff !important;
    color: #083c40 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
}

/* ════════════════════════════════════════════════════════
   INBOX MESSAGE BUBBLES — WhatsApp style (fix navy boxes)
   ════════════════════════════════════════════════════════ */
/* Sent (right) → WhatsApp green ; Received (left) → white */
.zc-content .single-message.message--right .message-content,
.single-message.message--right .message-content {
    background-color: #d9fdd3 !important;
    border-radius: 14px 14px 2px 14px !important;
    box-shadow: 0 1px 1.5px rgba(0,0,0,.12) !important;
}
.zc-content .single-message.message--left .message-content,
.single-message.message--left .message-content {
    background-color: #ffffff !important;
    border-radius: 14px 14px 14px 2px !important;
    box-shadow: 0 1px 1.5px rgba(0,0,0,.1) !important;
}
.single-message .message-content { padding: 8px 11px !important; }
/* readable dark text on light bubbles */
.zc-content .single-message .message-content,
.zc-content .single-message .message-text,
.zc-content .single-message .message-content p,
.zc-content .single-message .message-content .card-text,
.zc-content .single-message .message-content .card-title,
.single-message .message-content .message-text { color: #111b21 !important; }
.zc-content .single-message .message-time,
.zc-content .single-message .message-status,
.single-message .message-time { color: #667781 !important; font-size: 0.68rem !important; }
.single-message .message-content a { color: #027eb5 !important; text-decoration: none !important; }
.single-message .message-content a:hover { text-decoration: underline !important; }
/* inner cards (cta / interactive list / template / reply) inside bubbles */
.single-message .message-content .card.custom--card {
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.single-message.message--right .message-content .card.custom--card { background: rgba(255,255,255,.5) !important; }
.single-message .message-content .card .card-title,
.single-message .message-content .card .card-text { color: #111b21 !important; }
.single-message .message-content .card .text-muted { color: #667781 !important; }
/* message media images rounded */
.single-message .message-content img.card-img-top,
.single-message .message-content img { border-radius: 8px !important; }

/* ── 9+ unread badge — cleaner pill ── */
.chat-list__item .unseen-message .number {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 0.72rem !important;
    line-height: 20px !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════
   INBOX conversation list — UNIFORM item size + proper 9+ badge
   ════════════════════════════════════════════════════════ */
/* one-row layout, no wrapping */
.chatbox-area__left .chatbody .chat-list__content,
.chat-list__item .chat-list__content {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
}
.chat-list__item { min-height: 64px !important; align-items: center !important; }
.chat-list__item .left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
/* name + last message → single line ellipsis (stops tall items) */
.chat-list__item .name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
}
.chat-list__item .last-message,
.chat-list__item .last-message .text,
.chat-list__item .last-message-text,
.chat-list__item .last-message .last-message-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
}
/* right (time + badge) stays a compact column — override theme's ≤1399px full-width row */
.chatbox-area__left .chatbody .chat-list__content .right,
.chat-list__item .right {
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: auto !important;
    flex-shrink: 0 !important;
    gap: 5px !important;
}

/* 9+ badge — auto-width pill (theme forced fixed 16px). Beat .right .number specificity */
.chatbox-area__left .chatbody .chat-list__content .right .number,
.chat-list__item .unseen-message .number {
    width: auto !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(10,71,76,.3) !important;
}
.chat-list__item .unseen-message { width: auto !important; }

/* action button inside form-card head (e.g. "More Attribute") */
.zc-content .zc-form-card__head .zc-card-action {
    margin-left: auto !important;
    background: #fff !important;
    border: 1.5px solid #9bc0c2 !important;
    color: #083c40 !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all .2s !important;
}
.zc-content .zc-form-card__head .zc-card-action:hover {
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.zc-content .zc-form-card__head .zc-card-action i { background: none !important; color: inherit !important; width: auto !important; height: auto !important; }
/* the info icon in head shouldn't get the badge treatment */
.zc-content .zc-form-card__head .la-info-circle { background: none !important; color: #94a3b8 !important; width: auto !important; height: auto !important; }
/* custom attribute rows */
.zc-content .custom-attributes-wrapper .custom-attribute-wrapper {
    background: #f8fafc !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 10px !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
}
.zc-content .custom-attributes-wrapper .remove-attribute {
    background: #fef2f2 !important; color: #ef4444 !important;
    border: 1.5px solid #fecaca !important; border-radius: 8px !important;
}
.zc-content .custom-attributes-wrapper .remove-attribute:hover { background:#ef4444 !important; color:#fff !important; }

/* ════════════════════════════════════════════════════════
   ACCOUNT PAGES — top tab bar (profile_tab) → modern pill nav
   Shared by: WhatsApp Accounts, Webhook, Subscription,
   My Profile, 2FA, Change Password
   ════════════════════════════════════════════════════════ */
.profile-page-wrapper {
    background: #fff !important;
    padding: 8px 10px !important;
    border-bottom: none !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
    margin-bottom: 20px !important;
}
.profile-page-wrapper .profile-list {
    gap: 6px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.profile-page-wrapper .profile-list__link {
    padding: 9px 16px !important;
    border-radius: 10px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    gap: 8px !important;
    transition: all .2s !important;
    position: relative !important;
}
.profile-page-wrapper .profile-list__link:hover {
    background: #f0fdf8 !important;
    color: #083c40 !important;
}
.profile-page-wrapper .profile-list__link.active {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(10,71,76,.3) !important;
}
/* remove the old underline indicator (the "line") */
.profile-page-wrapper .profile-list__link.active::after,
.profile-page-wrapper .profile-list__link::after {
    display: none !important;
    content: none !important;
}
.profile-page-wrapper .profile-list__icon { font-size: 0.95rem !important; line-height: 1 !important; }
.profile-page-wrapper .profile-list__link:hover .profile-list__icon,
.profile-page-wrapper .profile-list__link.active .profile-list__icon { color: inherit !important; }

/* ════════════════════════════════════════════════════════
   SUBSCRIPTION — "MY ACTIVE PLAN" refined (was fully green)
   → white card with green accents
   ════════════════════════════════════════════════════════ */
.zc-content .active-card {
    background: #fff !important;
    border: 2px solid #d4e7e8 !important;
    border-radius: 18px !important;
    padding: 26px 24px 24px !important;
    box-shadow: 0 8px 30px rgba(8,60,64,.10) !important;
    color: #1f2937 !important;
    position: relative !important;
    overflow: hidden !important;
}
.zc-content .active-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 5px !important;
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
}
/* default all text dark */
.zc-content .active-card * { color: #1f2937 !important; }
/* badge — green pill */
.zc-content .active-card .active-card__badge {
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    color: #fff !important;
    border-radius: 30px !important;
    padding: 6px 16px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    display: inline-flex !important;
    box-shadow: 0 4px 12px rgba(8,60,64,.25) !important;
}
.zc-content .active-card .active-card__title { color: #0f172a !important; font-weight: 800 !important; font-size: 1.5rem !important; }
.zc-content .active-card .active-card__desc { color: #64748b !important; font-size: 0.85rem !important; }
.zc-content .active-card label { color: #64748b !important; font-size: 0.78rem !important; }
/* plan detail rows */
.zc-content .active-card .active-card__content { margin-top: 14px !important; }
.zc-content .active-card .text-list__item {
    display: flex !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 9px 0 !important;
    font-size: 0.85rem !important;
}
.zc-content .active-card .text-list__item:last-child { border-bottom: none !important; }
.zc-content .active-card .active-plan-title { color: #64748b !important; }
.zc-content .active-card .text--base { color: #083c40 !important; font-weight: 700 !important; }
/* renew button + footer */
.zc-content .active-card__bottom { margin-top: 16px !important; }
.zc-content .active-card .purchaseBtn,
.zc-content .active-card .btn--base {
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 18px rgba(8,60,64,.28) !important;
}
.zc-content .active-card .purchaseBtn *,
.zc-content .active-card .btn--base * { color: #fff !important; }
.zc-content .active-card .link,
.zc-content .active-card__bottom a { color: #083c40 !important; font-weight: 600 !important; }
/* auto-renewal switch on */
.zc-content .active-card .form-check-input:checked { background-color: #083c40 !important; border-color: #083c40 !important; }

/* Feature Remaining Information panel */
.zc-content .plan-wrapper__right {
    background: #fff !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.04) !important;
}
.zc-content .plan-wrapper__right .title { font-weight: 800 !important; color: #0f172a !important; }
.zc-content .plan-wrapper__desc { color: #94a3b8 !important; font-size: 0.82rem !important; }
.zc-content .plan-details__item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 11px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    color: #083c40 !important;
    font-size: 0.88rem !important;
}
.zc-content .plan-details__item .item-title { color: #64748b !important; font-weight: 500 !important; font-size: 0.82rem !important; }

/* ── My Profile — profile-info card with green head ── */
.zc-content .profile-info.zc-has-head {
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e6f0eb !important;
    border-radius: 16px !important;
}
.zc-content .profile-info.zc-has-head .zc-profile-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 18px !important;
    background: linear-gradient(135deg,#f0fdf8,#e9f2f2) !important;
    border-bottom: 1.5px solid #d4e7e8 !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #047857 !important;
}
.zc-content .profile-info.zc-has-head .zc-profile-head i {
    width: 26px !important; height: 26px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    color: #fff !important; border-radius: 7px !important; font-size: 0.85rem !important;
}
.zc-content .profile-info.zc-has-head > .row { padding: 18px !important; margin: 0 !important; }
.zc-content .profile-info.zc-has-head .form-group label { font-weight: 600 !important; color: #334155 !important; font-size: 0.82rem !important; }

/* My Profile — Profile Picture header card polish */
.zc-content .profile-header {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}
.zc-content .profile-header__title { font-size: 0.95rem !important; font-weight: 800 !important; }

/* ── Dropdown clipping fix: cards must not clip select2/country dropdowns ── */
.zc-content .carousel--card,
.zc-content .section-block.list--section,
.zc-content .list--section {
    overflow: visible !important;
}
.zc-content .carousel--card > .d-flex:first-child,
.zc-content .list--section > .d-flex:first-child {
    border-radius: 14px 14px 0 0 !important;
}
/* select2 dropdown: compact + always on top so it's clickable/scrollable */
.select2-container--open .select2-dropdown,
.select2-dropdown {
    z-index: 100000 !important;
}
.select2-results__options {
    max-height: 210px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.select2-results__option { pointer-events: auto !important; }

/* ════════════════════════════════════════════════════════
   CRM PAGES (Dashboard / Pipeline / Tasks) — light background
   to match the rest of the app (was dark navy)
   ════════════════════════════════════════════════════════ */
body:has(.crm-layout) {
    background: linear-gradient(135deg, #e9f6f0 0%, #f4faf7 45%, #eaf2fb 100%) !important;
}
.crm-layout,
.crm-right {
    background: linear-gradient(135deg, #e9f6f0 0%, #f4faf7 45%, #eaf2fb 100%) !important;
}
.crm-content,
.crm-main,
.crm-body {
    background: transparent !important;
}
.crm-topnav {
    background: linear-gradient(100deg, rgba(255,255,255,.82), rgba(240,251,247,.7)) !important;
}
/* any leftover dark content wrappers inside CRM */
.crm-content > div,
.crm-content .row {
    background: transparent !important;
}

/* ════════════════════════════════════════════════════════
   DEPOSIT PAGE — glassmorphism + green dynamic design
   ════════════════════════════════════════════════════════ */
.gateway-card {
    background: rgba(255,255,255,.7) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    border: 1px solid rgba(8,60,64,.12) !important;
    border-radius: 22px !important;
    padding: 28px !important;
    box-shadow: 0 18px 54px rgba(8,60,64,.10), 0 4px 16px rgba(0,0,0,.05) !important;
    position: relative !important;
    overflow: hidden !important;
}
.gateway-card::before {
    content: '' !important;
    position: absolute !important; top: 0; left: 0; right: 0; height: 5px !important;
    background: linear-gradient(135deg,#083c40,#0a474c,#0d5c62) !important;
}
.payment-card-title { font-size: 1.35rem !important; font-weight: 800 !important; color: #0f172a !important; margin-bottom: 8px !important; }

/* ── Payment method items ── */
.payment-item {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 12px !important;
    background: rgba(255,255,255,.6) !important;
    -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
    border: 1.5px solid #e6f0eb !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s !important;
}
.payment-item:hover { border-color: #9bc0c2 !important; background: #f0fdf8 !important; transform: translateX(3px) !important; }
.payment-item:has(.gateway-input:checked) {
    border-color: #083c40 !important;
    background: linear-gradient(135deg,#f0fdf8,#e9f2f2) !important;
    box-shadow: 0 6px 18px rgba(8,60,64,.16) !important;
}
.payment-item__info { display: flex !important; align-items: center !important; gap: 10px !important; }
.payment-item__check {
    width: 18px !important; height: 18px !important; border-radius: 50% !important;
    border: 2px solid #cbd5e1 !important; display: inline-block !important; position: relative !important;
    flex-shrink: 0 !important; transition: all .2s !important;
}
.payment-item:has(.gateway-input:checked) .payment-item__check { border-color: #083c40 !important; background: #083c40 !important; }
.payment-item:has(.gateway-input:checked) .payment-item__check::after {
    content: '' !important; position: absolute !important; inset: 4px !important; background: #fff !important; border-radius: 50% !important;
}
.payment-item__name { font-weight: 600 !important; color: #334155 !important; font-size: .88rem !important; }
.payment-item__thumb { display: flex !important; align-items: center !important; }
.payment-item__thumb-img { max-height: 30px !important; max-width: 84px !important; object-fit: contain !important; }

/* show all button */
.more-gateway-option {
    width: 100% !important; background: #eef5f5 !important; border: 1.5px dashed #9bc0c2 !important;
    color: #083c40 !important; border-radius: 12px !important; padding: 11px !important;
    font-weight: 600 !important; font-size: .85rem !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    transition: all .2s !important;
}
.more-gateway-option:hover { background: #dbe9e9 !important; }
.payment-system-list.is-scrollable { max-height: 420px !important; overflow-y: auto !important; padding-right: 4px !important; }

/* ── Right summary panel (glass) ── */
.col-lg-6 > .payment-system-list.p-3 {
    background: rgba(255,255,255,.55) !important;
    -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(8,60,64,.1) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.deposit-info { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.deposit-info .text { color: #475569 !important; font-size: .86rem !important; }
.deposit-info__title .text { color: #64748b !important; }
.deposit-info hr, .gateway-card hr { border-color: rgba(8,60,64,.12) !important; opacity: 1 !important; }

/* amount input pill */
.deposit-info__input-group {
    border: 1.5px solid #d4e7e8 !important; border-radius: 12px !important; overflow: hidden !important;
    background: #fff !important; transition: border-color .2s, box-shadow .2s !important;
}
.deposit-info__input-group:focus-within { border-color: #083c40 !important; box-shadow: 0 0 0 3px rgba(8,60,64,.1) !important; }
.deposit-info__input-group-text { background: #e9f2f2 !important; color: #083c40 !important; font-weight: 800 !important; border: none !important; }
.deposit-info__input .amount, input.amount {
    border: none !important; box-shadow: none !important; font-size: 1.25rem !important; font-weight: 700 !important; color: #0f172a !important;
}
.gateway-limit { color: #083c40 !important; font-weight: 600 !important; }

/* total highlight */
.deposit-info.total-amount {
    background: linear-gradient(135deg,#f0fdf8,#e9f2f2) !important;
    border: 1px solid #d4e7e8 !important; border-radius: 12px !important;
    padding: 13px 15px !important; margin-top: 10px !important;
}
.deposit-info.total-amount .text { color: #334155 !important; font-weight: 700 !important; }
.final-amount { color: #083c40 !important; font-weight: 800 !important; font-size: 1.1rem !important; }
.gateway-conversion .text, .conversion-currency .text { color: #64748b !important; font-size: .82rem !important; }
.rate, .in-currency { color: #083c40 !important; font-weight: 700 !important; }

/* confirm button */
.deposit-form .btn--base {
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    border: 0 !important; border-radius: 12px !important; padding: 13px !important;
    font-weight: 700 !important; font-size: .92rem !important;
    box-shadow: 0 8px 22px rgba(8,60,64,.3) !important;
    transition: transform .2s, box-shadow .2s, opacity .2s !important;
}
.deposit-form .btn--base:not(:disabled):hover { transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(8,60,64,.4) !important; }
.deposit-form .btn--base:disabled { opacity: .45 !important; cursor: not-allowed !important; }

/* footer note */
.info-text .text { color: #94a3b8 !important; font-size: .8rem !important; text-align: center !important; line-height: 1.6 !important; }

/* Withdraw page — same gateway-card design as deposit (shares classes) */
.withdraw-form .btn--base {
    background: linear-gradient(135deg,#083c40,#0a474c) !important;
    border: 0 !important; border-radius: 12px !important; padding: 13px !important;
    font-weight: 700 !important; font-size: .92rem !important;
    box-shadow: 0 8px 22px rgba(8,60,64,.3) !important;
    transition: transform .2s, box-shadow .2s, opacity .2s !important;
}
.withdraw-form .btn--base:not(:disabled):hover { transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(8,60,64,.4) !important; }
.withdraw-form .btn--base:disabled { opacity: .45 !important; cursor: not-allowed !important; }

/* ════════════════════════════════════════════════════════
   SIDEBAR — floating glass pop-up style (desktop)
   ════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .zc-sidebar {
        width: 232px !important;
        top: 14px !important;
        left: 14px !important;
        bottom: 14px !important;
        height: auto !important;
        background: rgba(255,255,255,.62) !important;
        -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
        backdrop-filter: blur(26px) saturate(175%) !important;
        border: 1px solid rgba(255,255,255,.75) !important;
        border-right: 1px solid rgba(255,255,255,.75) !important;
        border-radius: 22px !important;
        box-shadow: 0 22px 55px rgba(15,23,42,.16), 0 8px 22px rgba(8,60,64,.08) !important;
        overflow: hidden !important;
    }
    /* content clears the floating sidebar */
    .zc-main,
    .zc-content > .crm-layout .crm-right,
    .crm-right {
        margin-left: 262px !important;
    }
    /* inner areas transparent so the glass shows through */
    .zc-sidebar-logo {
        background: transparent !important;
        border-bottom: 1px solid rgba(8,60,64,.12) !important;
    }
    .zc-sidebar .zc-nav,
    .zc-sidebar .zc-nav-scroll,
    .zc-sidebar > div {
        background: transparent !important;
    }
    /* nav scroll area */
    .zc-sidebar .zc-nav-scroll::-webkit-scrollbar { width: 4px !important; }
    .zc-sidebar .zc-nav-scroll::-webkit-scrollbar-thumb { background: rgba(8,60,64,.25) !important; border-radius: 4px !important; }
    /* active item — green glass pill */
    .zc-sidebar .zc-nav-link.active,
    .zc-sidebar a.active {
        background: linear-gradient(135deg, rgba(10,71,76,.16), rgba(8,60,64,.12)) !important;
        box-shadow: inset 0 0 0 1px rgba(8,60,64,.2) !important;
    }
    /* hover */
    .zc-sidebar .zc-nav-link:hover,
    .zc-sidebar a:hover { background: rgba(255,255,255,.5) !important; }
    /* user chip at bottom — glass */
    .zc-sidebar .zc-user,
    .zc-sidebar .zc-sidebar-footer {
        background: rgba(255,255,255,.4) !important;
        backdrop-filter: blur(8px) !important;
        border-top: 1px solid rgba(8,60,64,.1) !important;
    }
}

/* ════════════════════════════════════════════════════════
   SIDEBAR glass pop-up — correct target #zcSidebar (id)
   ════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    #zcSidebar {
        width: 234px !important;
        position: fixed !important;
        top: 14px !important;
        left: 14px !important;
        bottom: 14px !important;
        height: auto !important;
        background: rgba(255,255,255,.6) !important;
        -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
        backdrop-filter: blur(26px) saturate(180%) !important;
        border: 1px solid rgba(255,255,255,.8) !important;
        border-radius: 22px !important;
        box-shadow: 0 24px 60px rgba(15,23,42,.18), 0 8px 22px rgba(8,60,64,.10) !important;
        overflow: hidden !important;
        z-index: 1000 !important;
    }
    /* inner containers transparent so the frosted glass shows through */
    #zcSidebar > div,
    #zcSidebar > nav,
    #zcSidebar .zc-nav-group {
        background: transparent !important;
    }
    /* logo divider subtle */
    #zcSidebar > div:first-child { border-bottom: 1px solid rgba(8,60,64,.12) !important; }
    /* nav scroll thumb green */
    #zcSidebar nav::-webkit-scrollbar,
    #zcSidebar > div::-webkit-scrollbar { width: 4px !important; }
    #zcSidebar nav::-webkit-scrollbar-thumb,
    #zcSidebar > div::-webkit-scrollbar-thumb { background: rgba(8,60,64,.3) !important; border-radius: 4px !important; }
    /* content clears the floating sidebar */
    .zc-main,
    .crm-right {
        margin-left: 262px !important;
    }
}

/* ════════════════════════════════════════════════════════
   SIDEBAR sub-menu items (.zc-nav-child) — consistent green
   (override inline purple/yellow/red/blue colors)
   ════════════════════════════════════════════════════════ */
#zcSidebar .zc-nav-children {
    border-left: 1.5px solid rgba(8,60,64,.22) !important;
    margin-left: 26px !important;
    padding: 3px 0 3px 12px !important;
}
#zcSidebar .zc-nav-child {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    padding: 7px 11px !important;
    margin-bottom: 2px !important;
    transition: background .15s, color .15s !important;
}
#zcSidebar .zc-nav-child i.fa-circle-dot,
#zcSidebar .zc-nav-child .fa-circle-dot {
    color: #cbd5e1 !important;
    font-size: 6px !important;
    transition: color .15s !important;
}
#zcSidebar .zc-nav-child:hover {
    background: rgba(10,71,76,.1) !important;
    color: #083c40 !important;
}
#zcSidebar .zc-nav-child:hover i.fa-circle-dot,
#zcSidebar .zc-nav-child:hover .fa-circle-dot { color: #0a474c !important; }
#zcSidebar .zc-nav-child.active {
    background: linear-gradient(135deg, rgba(10,71,76,.18), rgba(8,60,64,.12)) !important;
    color: #083c40 !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px rgba(8,60,64,.2) !important;
}
#zcSidebar .zc-nav-child.active i.fa-circle-dot,
#zcSidebar .zc-nav-child.active .fa-circle-dot { color: #083c40 !important; }
/* active group header text → green (was purple/yellow/red/blue) */
#zcSidebar .zc-nav-group button span { color: #1f2937 !important; }

/* ════════════════════════════════════════════════════════
   FLOW BUILDER — glass toolbar buttons (undo/redo/save/tidy/...)
   ════════════════════════════════════════════════════════ */
.flow_top_button_wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}
.flow_top_button_wrapper .top_btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.62) !important;
    -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
    backdrop-filter: blur(16px) saturate(170%) !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.14), 0 2px 8px rgba(8,60,64,.08) !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s, color .2s !important;
    padding: 0 !important;
}
.flow_top_button_wrapper .top_btn:hover {
    background: linear-gradient(135deg,#0a474c,#0d5c62) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 14px 34px rgba(10,71,76,.38), 0 4px 10px rgba(0,0,0,.1) !important;
}
.flow_top_button_wrapper .top_btn:active {
    transform: translateY(0) scale(.97) !important;
}
.flow_top_button_wrapper .top_btn i { line-height: 1 !important; }

/* xyflow Controls + MiniMap — glass to match */
.react-flow__controls {
    background: rgba(255,255,255,.7) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.12) !important;
    overflow: hidden !important;
}
.react-flow__controls-button {
    background: transparent !important;
    border-bottom: 1px solid rgba(8,60,64,.1) !important;
    color: #475569 !important;
    transition: background .15s, color .15s !important;
}
.react-flow__controls-button:hover {
    background: rgba(10,71,76,.12) !important;
    color: #083c40 !important;
}
.react-flow__minimap {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.12) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.6) !important;
}

/* ============================================================
   FLOW BUILDER — {{variable}} AUTOCOMPLETE POPUP
   ============================================================ */
.zc-var-pop {
    min-width: 180px;
    max-width: 240px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(10,71,76,.25);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15,23,42,.22), 0 2px 8px rgba(10,71,76,.12);
    padding: 5px;
    overflow: hidden;
    animation: zcVarPop .12s ease;
}
@keyframes zcVarPop { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } }
.zc-var-pop__head {
    font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #94a3b8; padding: 5px 8px 6px; display: flex; align-items: center; gap: 5px;
}
.zc-var-pop__head i { color: #0a474c; font-size: 12px; }
.zc-var-pop__item {
    width: 100%; text-align: left; border: none; background: transparent;
    padding: 7px 9px; border-radius: 8px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: #0f172a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    display: block; transition: background .12s, color .12s;
}
.zc-var-pop__item:hover, .zc-var-pop__item.is-active {
    background: linear-gradient(135deg,#0a474c,#0d5c62);
    color: #fff;
}
.zc-var-pop__item.is-active .zc-var-pop__brace,
.zc-var-pop__item:hover .zc-var-pop__brace { color: rgba(255,255,255,.7); }
.zc-var-pop__brace { color: #0a474c; opacity: .8; }
.zc-var-pop__foot {
    font-size: 9.5px; color: #b6c2cf; padding: 6px 8px 4px; text-align: center;
    border-top: 1px solid rgba(15,23,42,.05); margin-top: 3px;
}

/* ============================================================
   GLASSY ICONS — sidebar + premium module icons (fresh, smooth)
   ============================================================ */
/* Sidebar nav icons → glassy 3D with sheen (keeps each icon's colour glow) */
#zcSidebar span[style*="width:36px;height:36px"]{
    position:relative; overflow:hidden; isolation:isolate;
    transition:transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease;
}
#zcSidebar span[style*="width:36px;height:36px"]::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
    background:linear-gradient(155deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,0) 60%);
}
#zcSidebar span[style*="width:36px;height:36px"]::after{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -4px 9px rgba(0,0,0,.16);
}
#zcSidebar span[style*="width:36px;height:36px"] > *{ position:relative; z-index:2; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.22)); }
#zcSidebar a:hover span[style*="width:36px;height:36px"],
#zcSidebar button:hover span[style*="width:36px;height:36px"]{ transform:translateY(-1px) scale(1.07); }

/* Premium module icons → extra-fresh, vibrant & glassy once unlocked */
.zc-prem-grid:not(.is-locked) .zc-prem-ico{ filter:saturate(1.15) brightness(1.03); transition:filter .5s ease; }
.zc-prem-grid:not(.is-locked) .zc-prem-card:hover .zc-prem-ico{ filter:saturate(1.25) brightness(1.06); }

/* ============================================================
   SIDEBAR NAV — per-icon-colour glass hover + sliding sheen
   ============================================================ */
#zcSidebar .zc-nav-glass{ position:relative; overflow:hidden; z-index:0;
    transition:background .22s ease, box-shadow .22s ease, transform .16s cubic-bezier(.34,1.4,.64,1); }
#zcSidebar .zc-nav-glass::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; z-index:0; pointer-events:none;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); transition:left .6s ease; }
#zcSidebar .zc-nav-glass:hover::after{ left:135%; }
#zcSidebar .zc-nav-glass:hover{
    background:color-mix(in srgb, var(--ico,#0a474c) 14%, transparent) !important;
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ico,#0a474c) 32%, transparent),
               0 5px 16px color-mix(in srgb, var(--ico,#0a474c) 24%, transparent);
    transform:translateX(2px);
}
#zcSidebar .zc-nav-glass:hover > span[style*="flex:1"]{ color:color-mix(in srgb, var(--ico,#0a474c) 78%, #0f172a) !important; font-weight:700; }
#zcSidebar .zc-nav-glass:hover span[style*="width:36px;height:36px"]{ transform:translateY(-1px) scale(1.08); }
#zcSidebar .zc-nav-glass > *{ position:relative; z-index:1; }

/* ============================================================
   SIDEBAR PROFILE CARD — dynamic glassmorphism
   ============================================================ */
#zcSidebar .zc-user-card{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(255,255,255,.74) 0%, rgba(236,253,245,.5) 100%) !important;
    backdrop-filter:blur(14px) saturate(170%); -webkit-backdrop-filter:blur(14px) saturate(170%);
    border:1px solid rgba(255,255,255,.65) !important;
    box-shadow:0 8px 22px rgba(10,71,76,.16), inset 0 1px 0 rgba(255,255,255,.85) !important;
    transition:transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease;
}
/* slow auto-sliding glass sheen (dynamic) */
#zcSidebar .zc-user-card::after{
    content:""; position:absolute; top:0; left:-130%; width:48%; height:100%; z-index:1; pointer-events:none;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    transform:skewX(-18deg); animation:zcUserSheen 5s ease-in-out infinite;
}
@keyframes zcUserSheen{ 0%{left:-130%} 55%{left:150%} 100%{left:150%} }
#zcSidebar .zc-user-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(10,71,76,.26), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
#zcSidebar .zc-user-card > *{ position:relative; z-index:2; }
#zcSidebar .zc-user-card img{
    border:2px solid rgba(255,255,255,.8) !important;
    box-shadow:0 3px 12px rgba(10,71,76,.35), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* ============================================================
   SIDEBAR SURFACE — glossy white + subtle slow green light
   ============================================================ */
#zcSidebar{
    background:
        radial-gradient(440px 320px at 50% -8%, rgba(10,71,76,.07), transparent 62%),
        radial-gradient(360px 280px at -12% 106%, rgba(10,71,76,.06), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f7fdfb 55%, #eefaf5 100%) !important;
    border-right:1.5px solid rgba(10,71,76,.15) !important;
}
/* soft green light that drifts slowly (subtle, dynamic) */
#zcSidebar::before{
    content:""; position:absolute; left:50%; top:22%; width:240px; height:240px; margin-left:-120px;
    background:radial-gradient(circle, rgba(10,71,76,.12) 0%, rgba(10,71,76,0) 70%);
    filter:blur(24px); border-radius:50%; pointer-events:none; z-index:0;
    animation:zcSideGlow 9s ease-in-out infinite;
}
@keyframes zcSideGlow{ 0%,100%{ top:18%; opacity:.5 } 50%{ top:62%; opacity:.85 } }
/* keep all sidebar content above the glow */
#zcSidebar > *{ position:relative; z-index:1; }

/* ============================================================
   GLOBAL GLOSSY LAYER — applies to every dashboard page
   ============================================================ */
/* Glossy page surface + subtle green light */
.zc-main, .zc-content{
    background:
        radial-gradient(640px 440px at 82% 2%, rgba(10,71,76,.055), transparent 60%),
        radial-gradient(560px 460px at 6% 100%, rgba(10,71,76,.045), transparent 60%),
        linear-gradient(165deg, #f8fbfa 0%, #f1f6f4 55%, #edf5f0 100%) !important;
    background-attachment: fixed !important;
}

/* Cards / panels → glossy glass with smooth hover lift */
.zc-content .zc-form-card,
.zc-content .card,
.zc-content .dashboard-container__body > .card,
.zc-content .zc-glass-panel{
    background:linear-gradient(160deg, #ffffff 0%, #fcfffe 100%) !important;
    border:1px solid rgba(15,23,42,.06) !important;
    box-shadow:0 6px 22px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.85) !important;
    border-radius:16px !important;
    transition:box-shadow .24s ease, transform .24s cubic-bezier(.34,1.3,.64,1) !important;
}
.zc-content .zc-form-card:hover,
.zc-content .card:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 16px 38px rgba(10,71,76,.11), inset 0 1px 0 rgba(255,255,255,.95) !important;
    border-color:rgba(10,71,76,.22) !important;
}

/* Buttons → smooth + glossy lift (colour untouched) */
.zc-content .btn{ transition:all .2s cubic-bezier(.34,1.4,.64,1) !important; position:relative; overflow:hidden; }
.zc-content .btn:hover{ transform:translateY(-2px) !important; }
.zc-content .btn--base, .zc-content .btn--primary, .zc-content .btn--success{
    box-shadow:0 5px 16px rgba(10,71,76,.32), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.zc-content .btn--base:hover, .zc-content .btn--primary:hover{
    box-shadow:0 10px 26px rgba(10,71,76,.42), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* Inputs → smooth green focus glow */
.zc-content .form-control, .zc-content .form--control, .zc-content .form-select, .zc-content input, .zc-content textarea{
    transition:border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.zc-content .form-control:focus, .zc-content .form--control:focus, .zc-content .form-select:focus,
.zc-content input:focus, .zc-content textarea:focus{
    border-color:#0a474c !important; box-shadow:0 0 0 3px rgba(10,71,76,.14) !important; background:#fff !important;
}

/* Tables → glossy header + smooth row hover */
.zc-content thead th{ background:linear-gradient(180deg,#f8fbfa,#eef5f1) !important; transition:background .2s; }
.zc-content tbody tr{ transition:background .16s ease, box-shadow .16s ease !important; }
.zc-content tbody tr:hover{ background:rgba(10,71,76,.04) !important; }

/* Dashboard stat widgets → glossy cards + glassy icon boxes */
.zc-content .dashboard-widget{
    background:linear-gradient(160deg,#ffffff 0%,#fcfffe 100%) !important;
    border:1px solid rgba(15,23,42,.06) !important;
    box-shadow:0 6px 20px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.85) !important;
    border-radius:16px !important;
    transition:transform .24s cubic-bezier(.34,1.3,.64,1), box-shadow .24s ease !important;
}
.zc-content .dashboard-widget:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 36px rgba(10,71,76,.12), inset 0 1px 0 rgba(255,255,255,.95) !important; border-color:rgba(10,71,76,.2) !important; }
.zc-content .dashboard-widget__icon-box{ position:relative; overflow:hidden; }
.zc-content .dashboard-widget__icon-box::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,.14) 42%, transparent 60%); }
.zc-content .dashboard-widget__icon-box::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 7px rgba(0,0,0,.14); }
.zc-content .dashboard-widget__icon-box > *{ position:relative; z-index:2; }

/* Dashboard widget gloss — exact-selector override (beats earlier .zc-dashboard rule) */
.zc-dashboard .dashboard-widget{
    border-radius:16px !important;
    background:linear-gradient(160deg,#ffffff 0%,#fcfffe 100%) !important;
    box-shadow:0 6px 20px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.85) !important;
    transition:transform .24s cubic-bezier(.34,1.3,.64,1), box-shadow .24s ease !important;
}
.zc-dashboard .dashboard-widget:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 36px rgba(10,71,76,.12), inset 0 1px 0 rgba(255,255,255,.95) !important; }

/* Dashboard widget gloss — high-specificity override (beats .dashboard.zc-dashboard rule) */
.dashboard.zc-dashboard .zc-content .dashboard-widget{
    border-radius:16px !important;
    background:linear-gradient(160deg,#ffffff 0%,#fcfffe 100%) !important;
    box-shadow:0 6px 20px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.85) !important;
    transition:transform .24s cubic-bezier(.34,1.3,.64,1), box-shadow .24s ease !important;
}
.dashboard.zc-dashboard .zc-content .dashboard-widget:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 36px rgba(10,71,76,.12), inset 0 1px 0 rgba(255,255,255,.95) !important; }

/* ============================================================
   DASHBOARD / TOPBAR — true glass boxes + glassy icons
   ============================================================ */
/* Top bar (every page) → frosted glass */
.zc-dashboard .zc-topbar{
    background:linear-gradient(135deg, rgba(255,255,255,.72), rgba(240,253,247,.55)) !important;
    backdrop-filter:blur(16px) saturate(165%) !important; -webkit-backdrop-filter:blur(16px) saturate(165%) !important;
    border-bottom:1px solid rgba(10,71,76,.15) !important;
    box-shadow:0 4px 20px rgba(15,23,42,.05) !important;
}

/* Stat widget boxes → translucent frosted glass + sliding sheen */
.dashboard.zc-dashboard .zc-content .dashboard-widget{
    position:relative; overflow:hidden; border-radius:18px !important;
    background:linear-gradient(160deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.6) 100%) !important;
    backdrop-filter:blur(12px) saturate(150%) !important; -webkit-backdrop-filter:blur(12px) saturate(150%) !important;
    border:1px solid rgba(255,255,255,.7) !important;
    box-shadow:0 8px 26px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.9) !important;
    transition:transform .26s cubic-bezier(.34,1.3,.64,1), box-shadow .26s ease !important;
}
.dashboard.zc-dashboard .zc-content .dashboard-widget:hover{
    transform:translateY(-4px) !important;
    box-shadow:0 18px 42px rgba(10,71,76,.15), inset 0 1px 0 rgba(255,255,255,.95) !important;
    border-color:rgba(10,71,76,.28) !important;
}
.dashboard.zc-dashboard .zc-content .dashboard-widget::after{
    content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; z-index:0; pointer-events:none;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-18deg); transition:left .6s ease;
}
.dashboard.zc-dashboard .zc-content .dashboard-widget:hover::after{ left:140%; }
.dashboard.zc-dashboard .zc-content .dashboard-widget > *{ position:relative; z-index:1; }

/* Stat icon squares → glassy sheen + 3D (keeps the colour) */
.dashboard.zc-dashboard .zc-content .dashboard-widget__icon{
    position:relative; overflow:hidden; border-radius:14px !important;
    box-shadow:0 7px 18px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -4px 9px rgba(0,0,0,.15) !important;
    transition:transform .26s cubic-bezier(.34,1.4,.64,1) !important;
}
.dashboard.zc-dashboard .zc-content .dashboard-widget__icon::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
    background:linear-gradient(155deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.16) 42%, transparent 60%);
}
.dashboard.zc-dashboard .zc-content .dashboard-widget__icon > *,
.dashboard.zc-dashboard .zc-content .dashboard-widget__icon svg,
.dashboard.zc-dashboard .zc-content .dashboard-widget__icon i{ position:relative; z-index:2; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.dashboard.zc-dashboard .zc-content .dashboard-widget:hover .dashboard-widget__icon{ transform:scale(1.08) rotate(-3deg); }

/* Make the glass boxes clearly visible (stronger border + shadow, less transparent) */
.dashboard.zc-dashboard .zc-content .dashboard-widget{
    background:linear-gradient(160deg, rgba(255,255,255,.9) 0%, rgba(247,255,251,.74) 100%) !important;
    border:1px solid rgba(10,71,76,.2) !important;
    box-shadow:0 10px 30px rgba(15,23,42,.10), 0 2px 6px rgba(10,71,76,.06), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.dashboard.zc-dashboard .zc-content .dashboard-widget:hover{
    box-shadow:0 20px 44px rgba(10,71,76,.18), inset 0 1px 0 rgba(255,255,255,1) !important;
    border-color:rgba(10,71,76,.35) !important;
}

/* Slightly richer page surface so the frosted-glass cards actually read as glass */
.zc-main, .zc-content{
    background:
        radial-gradient(720px 520px at 86% -2%, rgba(10,71,76,.11), transparent 55%),
        radial-gradient(620px 520px at 4% 102%, rgba(99,102,241,.07), transparent 55%),
        linear-gradient(160deg, #eef5f2 0%, #e8f1ee 50%, #e5f1eb 100%) !important;
    background-attachment: fixed !important;
}

/* ============================================================
   DASHBOARD — header line + Latest Transaction/Contact → glass
   ============================================================ */
.dashboard.zc-dashboard .zc-content .dashboard-body__top{
    background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(240,253,247,.62)) !important;
    backdrop-filter:blur(14px) saturate(160%) !important; -webkit-backdrop-filter:blur(14px) saturate(160%) !important;
    border:1px solid rgba(10,71,76,.18) !important;
    border-radius:16px !important;
    padding:16px 22px !important;
    box-shadow:0 8px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
    margin-bottom:20px !important;
}
.dashboard.zc-dashboard .zc-content .transaction-table-inner{
    position:relative; overflow:hidden;
    background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(247,255,251,.74)) !important;
    backdrop-filter:blur(12px) saturate(150%) !important; -webkit-backdrop-filter:blur(12px) saturate(150%) !important;
    border:1px solid rgba(10,71,76,.18) !important;
    border-radius:18px !important;
    padding:20px 22px !important;
    box-shadow:0 10px 30px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
    transition:transform .26s cubic-bezier(.34,1.3,.64,1), box-shadow .26s ease !important;
}
.dashboard.zc-dashboard .zc-content .transaction-table-inner:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 18px 42px rgba(10,71,76,.14), inset 0 1px 0 rgba(255,255,255,1) !important;
    border-color:rgba(10,71,76,.3) !important;
}
.dashboard.zc-dashboard .zc-content .transaction-table-inner h6{ font-weight:800 !important; color:#0f172a !important; margin-bottom:12px !important; }

/* Latest Contact panel (col-lg-6 with a direct h6, no inner wrapper) → glass card */
.dashboard.zc-dashboard .zc-content .row.gy-4 > .col-lg-6:has(> h6){
    position:relative; overflow:hidden;
    background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(247,255,251,.74)) !important;
    backdrop-filter:blur(12px) saturate(150%) !important; -webkit-backdrop-filter:blur(12px) saturate(150%) !important;
    border:1px solid rgba(10,71,76,.18) !important;
    border-radius:18px !important;
    padding:20px 22px !important;
    box-shadow:0 10px 30px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
    transition:transform .26s cubic-bezier(.34,1.3,.64,1), box-shadow .26s ease !important;
}
.dashboard.zc-dashboard .zc-content .row.gy-4 > .col-lg-6:has(> h6):hover{
    transform:translateY(-3px) !important; box-shadow:0 18px 42px rgba(10,71,76,.14), inset 0 1px 0 rgba(255,255,255,1) !important; border-color:rgba(10,71,76,.3) !important;
}
.dashboard.zc-dashboard .zc-content .row.gy-4 > .col-lg-6:has(> h6) > h6{ font-weight:800 !important; color:#0f172a !important; margin-bottom:12px !important; }

/* ============================================================
   DASHBOARD — dynamic motion (topbar sheen + box inner life)
   ============================================================ */
/* Topbar → continuous sliding sheen + glassy hover icons */
.zc-dashboard .zc-topbar{ position:relative; overflow:hidden; }
.zc-dashboard .zc-topbar::after{ content:""; position:absolute; top:0; left:-130%; width:38%; height:100%; z-index:0; pointer-events:none;
    background:linear-gradient(120deg, transparent, rgba(10,71,76,.13), transparent); transform:skewX(-18deg); animation:zcBarSheen 7s ease-in-out infinite; }
@keyframes zcBarSheen{ 0%{left:-130%} 55%{left:150%} 100%{left:150%} }
.zc-dashboard .zc-topbar > *{ position:relative; z-index:1; }
.zc-dashboard .zc-topbar .zc-icon-btn, .zc-dashboard .zc-topbar .zc-user-btn{ transition:all .18s cubic-bezier(.34,1.4,.64,1) !important; }
.zc-dashboard .zc-topbar .zc-icon-btn:hover{ background:rgba(10,71,76,.12) !important; color:#0a474c !important; transform:translateY(-1px) scale(1.06); }
.zc-dashboard .zc-topbar .zc-user-btn:hover{ transform:translateY(-1px) scale(1.02); }

/* Stat icons → gentle continuous float (calm life) */
@keyframes zcIcoFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.dashboard.zc-dashboard .zc-content .dashboard-widget__icon{ animation:zcIcoFloat 4s ease-in-out infinite; }
.dashboard.zc-dashboard .zc-content .dashboard-widget:hover .dashboard-widget__icon{ animation:none; transform:scale(1.1) rotate(-4deg); }

/* Latest Transaction / Contact panels → hover sheen sweep + row hover */
.dashboard.zc-dashboard .zc-content .transaction-table-inner::after,
.dashboard.zc-dashboard .zc-content .row.gy-4 > .col-lg-6:has(> h6)::after{
    content:""; position:absolute; top:0; left:-130%; width:45%; height:100%; z-index:0; pointer-events:none;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-18deg); transition:left .65s ease; }
.dashboard.zc-dashboard .zc-content .transaction-table-inner:hover::after,
.dashboard.zc-dashboard .zc-content .row.gy-4 > .col-lg-6:has(> h6):hover::after{ left:155%; }
.dashboard.zc-dashboard .zc-content .transaction-table-inner > *,
.dashboard.zc-dashboard .zc-content .row.gy-4 > .col-lg-6:has(> h6) > *{ position:relative; z-index:1; }
.dashboard.zc-dashboard .zc-content .dashboard-table tbody tr{ transition:background .18s ease, transform .18s ease !important; }
.dashboard.zc-dashboard .zc-content .dashboard-table tbody tr:hover{ background:rgba(10,71,76,.06) !important; }
.dashboard.zc-dashboard .zc-content .dashboard-table tbody tr:hover td:first-child{ transform:translateX(3px); }


/* ════════════════════════════════════════════════════════════
   ZUPI INBOX v3 — AiSensy-style Live Chat (2026-08-12)
   Appended last so it wins every tie against the sections above.
   Source of truth; the blade no longer carries inbox styles.
   ════════════════════════════════════════════════════════════ */
        :root {
            --zi-green: #00a884;
            --zi-green-deep: #008069;
            --zi-badge: #25d366;
            --zi-ink: #111b21;
            --zi-mut: #667781;
            --zi-line: #e9edef;
            --zi-panel: #f0f2f5;
            --zi-chat-bg: #e5ddd5;
            --zi-out: #d9fdd3;
            --zi-shadow: 0 1px .5px rgba(11, 20, 26, .13);
        }

        /* ── Frame: full-bleed under the 60px topbar ─────────────── */
        .zc-dashboard .zc-content:has(.chatbox-area) { padding: 0 !important; }
        .zc-dashboard .chatbox-area {
            display: flex !important;
            height: calc(100vh - 60px) !important;
            background: #fff !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            overflow: hidden !important;
        }
        .chatbox-area .text--base { color: var(--zi-green) !important; }

        /* App screen — marketing widgets don't belong over the inbox */
        body:has(.chatbox-area) #zc-wa-btn,
        body:has(.chatbox-area) #zc-toast,
        body:has(.chatbox-area) .zpw-nudge { display: none !important; }

        /* ── Pane 1 · conversation list ──────────────────────────── */
        .zc-dashboard .chatbox-area__left {
            width: 380px !important;
            min-width: 380px !important;
            background: #fff !important;
            border-right: 1px solid var(--zi-line) !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
        }
        .chatbox-area__left .chatbox-wrapper { display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden !important; }

        .zc-dashboard .chatbox-wrapper__header {
            padding: 10px 12px 8px !important;
            background: #fff !important;
            border-bottom: 1px solid var(--zi-panel) !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
        }
        .chatbox-wrapper__header .search-form { position: relative !important; margin: 0 !important; }
        .zc-dashboard .chatbox-wrapper__header .search-form input {
            width: 100% !important;
            background: var(--zi-panel) !important;
            border: 1px solid transparent !important;
            border-radius: 8px !important;
            padding: 8.5px 12px 8.5px 38px !important;
            font-size: 13.5px !important;
            color: #3b4a54 !important;
            box-shadow: none !important;
            transition: background .15s, border-color .15s !important;
        }
        .chatbox-wrapper__header .search-form input::placeholder { color: #8696a0 !important; }
        .zc-dashboard .chatbox-wrapper__header .search-form input:focus {
            background: #fff !important;
            border-color: var(--zi-green) !important;
            outline: none !important;
        }
        .chatbox-wrapper__header .search-form__icon {
            position: absolute !important; left: 13px !important; top: 50% !important;
            transform: translateY(-50%) !important;
            color: #667781 !important; font-size: 13px !important;
        }

        /* filter chips */
        .chatbox-wrapper__tab { overflow-x: auto !important; scrollbar-width: none !important; margin: 0 !important; }
        .chatbox-wrapper__tab::-webkit-scrollbar { display: none !important; }
        .zc-dashboard #chat-filters {
            display: flex !important; flex-wrap: nowrap !important; gap: 6px !important;
            border: none !important; margin: 0 !important; padding: 0 !important;
        }
        .zc-dashboard #chat-filters .nav-item { margin: 0 !important; }
        .zc-dashboard #chat-filters .nav-link {
            background: var(--zi-panel) !important;
            color: #54656f !important;
            border: none !important;
            border-radius: 999px !important;
            padding: 5px 14px !important;
            font-size: 12.5px !important;
            font-weight: 600 !important;
            line-height: 1.4 !important;
            white-space: nowrap !important;
            transition: background .15s, color .15s !important;
        }
        .zc-dashboard #chat-filters .nav-link:hover { background: #e4e8eb !important; color: var(--zi-ink) !important; }
        .zc-dashboard #chat-filters .nav-link.active {
            background: var(--zi-green) !important;
            color: #fff !important;
            box-shadow: 0 2px 8px rgba(0, 168, 132, .35) !important;
        }

        /* list scroller (JS pagination listens on .chat-list) */
        .zc-dashboard .chatbody { flex: 1 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
        .zc-dashboard .chatbody .chat-list { flex: 1 1 auto !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: #c5cdd4 transparent !important; }
        .chatbody .chat-list::-webkit-scrollbar { width: 5px !important; }
        .chatbody .chat-list::-webkit-scrollbar-thumb { background: #c5cdd4 !important; border-radius: 4px !important; }

        /* row */
        .zc-dashboard .chat-list__item {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            padding: 11px 14px !important;
            border-bottom: 1px solid #f5f6f6 !important;
            border-left: 3px solid transparent !important;
            background: #fff !important;
            cursor: pointer !important;
            text-decoration: none !important;
            transition: background .12s !important;
        }
        .zc-dashboard .chat-list__item:hover { background: #f5f6f6 !important; }
        .zc-dashboard .chat-list__item.active {
            background: #e9f2f2 !important;
            border-left-color: var(--zi-green) !important;
        }
        .zc-dashboard .chat-list__item .contact_thumb {
            width: 46px !important; height: 46px !important;
            border-radius: 50% !important;
            display: flex !important; align-items: center !important; justify-content: center !important;
            font-size: 15px !important; font-weight: 700 !important; color: #fff !important;
            flex-shrink: 0 !important; overflow: hidden !important;
        }
        .chat-list__item .contact_thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; }
        .zc-dashboard .chat-list__content { flex: 1 !important; min-width: 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; }
        .chat-list__content .left { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
        .zc-dashboard .chat-list__content .name {
            font-size: 14.5px !important; font-weight: 600 !important; color: var(--zi-ink) !important;
            margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        }
        .zc-dashboard .chat-list__content .last-message,
        .zc-dashboard .chat-list__content .last-message .text,
        .zc-dashboard .chat-list__content .last-message .last-message-text {
            font-size: 13px !important; color: var(--zi-mut) !important; margin: 0 !important;
            white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
            max-width: 210px !important;
        }
        .chat-list__content .last-message .text--bold { font-weight: 700 !important; color: #3b4a54 !important; }
        .zc-dashboard .chat-list__content .right {
            display: flex !important; flex-direction: column !important;
            align-items: flex-end !important; gap: 5px !important; flex-shrink: 0 !important;
        }
        .zc-dashboard .chat-list__content .right .time { font-size: 11px !important; color: #8696a0 !important; margin: 0 !important; white-space: nowrap !important; }
        .zc-dashboard .chat-list__item:has(.unseen-message .number) .time { color: #1fa855 !important; font-weight: 700 !important; }
        .zc-dashboard .chat-list__item:has(.unseen-message .number) .name { font-weight: 700 !important; }
        .zc-dashboard .unseen-message .number {
            min-width: 20px !important; height: 20px !important;
            background: var(--zi-badge) !important; color: #fff !important;
            border-radius: 999px !important;
            font-size: 11px !important; font-weight: 700 !important;
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
            padding: 0 6px !important; line-height: 1 !important;
        }
        .chat-list .empty-message { padding: 40px 20px !important; }
        .chat-list .empty-message img { max-width: 170px !important; opacity: .85 !important; }

        /* ── Pane 2 · thread ─────────────────────────────────────── */
        /* display comes from a :not(.d-none) variant so bootstrap's d-none keeps working */
        .zc-dashboard .chatbox-area__body { flex: 1 !important; overflow: hidden !important; background: transparent !important; }
        .zc-dashboard .chatbox-area__body:not(.d-none) { display: flex !important; }
        .zc-dashboard .chat-box {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            position: relative !important;
            background: var(--zi-chat-bg) !important;
            border-right: 1px solid var(--zi-line) !important;
            overflow: hidden !important;
            min-width: 0 !important;
        }
        /* Tiled doodle reads like WhatsApp; the stretched <img> version washed out */
        .zc-dashboard .chat-box__shape { display: none !important; }
        .zc-dashboard .chat-box::before {
            content: '' !important;
            position: absolute !important; inset: 0 !important; z-index: 0 !important;
            background: url('../images/chat-bg.png') repeat !important;
            background-size: 615px auto !important;
            opacity: .4 !important;
            pointer-events: none !important;
        }

        .zc-dashboard .chat-box__header {
            position: relative !important; z-index: 2 !important;
            display: flex !important; align-items: center !important; justify-content: space-between !important;
            padding: 9px 16px !important;
            background: #fff !important;
            border-bottom: 1px solid var(--zi-line) !important;
            box-shadow: none !important;
        }
        .chat-box__header .chat-box__item { display: flex !important; align-items: center !important; gap: 12px !important; }
        .zc-dashboard .chat-box__thumb img.avatar { width: 40px !important; height: 40px !important; border-radius: 50% !important; object-fit: cover !important; }
        .zc-dashboard .chat-box__content .name { font-size: 15px !important; font-weight: 600 !important; color: var(--zi-ink) !important; margin: 0 !important; line-height: 1.3 !important; }
        .zc-dashboard .chat-box__content .contact__mobile { font-size: 12.5px !important; color: var(--zi-mut) !important; margin: 0 !important; line-height: 1.3 !important; }
        .zc-dashboard .template_button {
            width: 38px !important; height: 38px !important; border-radius: 10px !important;
            background: rgba(0, 168, 132, .12) !important;
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
            transition: background .15s !important;
        }
        .zc-dashboard .template_button:hover { background: rgba(0, 168, 132, .22) !important; }
        .zc-dashboard .template_button i { color: var(--zi-green-deep) !important; font-size: 20px !important; }

        /* messages */
        .zc-dashboard .msg-body {
            position: relative !important; z-index: 1 !important;
            flex: 1 !important; overflow-y: auto !important;
            display: flex !important; flex-direction: column !important;
            padding: 14px 7% 18px !important;
            scrollbar-width: thin !important; scrollbar-color: rgba(11, 20, 26, .2) transparent !important;
        }
        .msg-body::-webkit-scrollbar { width: 6px !important; }
        .msg-body::-webkit-scrollbar-thumb { background: rgba(11, 20, 26, .2) !important; border-radius: 4px !important; }

        .zi-day-chip { align-self: center !important; margin: 12px 0 10px !important; }
        .zi-day-chip span {
            background: #fff; color: #54656f;
            font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
            padding: 5px 12px; border-radius: 8px;
            box-shadow: var(--zi-shadow);
        }

        .zc-dashboard .msg-body .single-message {
            position: relative !important;
            max-width: 62% !important;
            width: fit-content !important;
            background: #fff !important;
            border-radius: 8px !important;
            padding: 6px 9px 4px !important;
            margin: 1px 0 !important;
            box-shadow: var(--zi-shadow) !important;
            align-self: flex-start !important;
        }
        .zc-dashboard .msg-body .single-message.message--left { border-top-left-radius: 0 !important; }
        .zc-dashboard .msg-body .single-message.message--left::before {
            content: '' !important; position: absolute !important; top: 0 !important; left: -8px !important;
            border-style: solid !important; border-width: 0 8px 13px 0 !important;
            border-color: transparent #fff transparent transparent !important;
        }
        .zc-dashboard .msg-body .single-message.message--right {
            background: var(--zi-out) !important;
            align-self: flex-end !important;
            margin-left: auto !important;
            border-top-right-radius: 0 !important;
            border-top-left-radius: 8px !important;
        }
        .zc-dashboard .msg-body .single-message.message--right::before {
            content: '' !important; position: absolute !important; top: 0 !important; right: -8px !important; left: auto !important;
            border-style: solid !important; border-width: 0 0 13px 8px !important;
            border-color: transparent transparent transparent var(--zi-out) !important;
        }
        .zc-dashboard .single-message .message-content { background: transparent !important; padding: 0 !important; box-shadow: none !important; }
        .zc-dashboard .single-message .message-text {
            font-size: 14.2px !important; line-height: 1.42 !important; color: var(--zi-ink) !important;
            margin: 0 !important; word-break: break-word !important;
        }
        .single-message .message-text a { color: #027eb5 !important; text-decoration: underline !important; }
        .zc-dashboard .single-message .message-image { max-width: 280px !important; width: 100% !important; border-radius: 6px !important; margin-top: 4px !important; }
        .zc-dashboard .single-message > .d-flex {
            margin-top: 2px !important; gap: 6px !important;
            justify-content: flex-end !important; align-items: center !important;
        }
        .zc-dashboard .single-message .message-time { font-size: 10.8px !important; color: var(--zi-mut) !important; line-height: 1 !important; }
        .zc-dashboard .single-message .message-status i { font-size: 15px !important; line-height: 1 !important; vertical-align: middle !important; }
        .zc-dashboard .single-message .message-status .text--secondary { color: #8696a0 !important; }
        .zc-dashboard .single-message .message-status .text--success { color: #53bdeb !important; }
        .single-message .card.custom--card { background: transparent !important; }

        /* composer */
        .zc-dashboard .chat-box__footer {
            position: relative !important; z-index: 2 !important;
            background: var(--zi-panel) !important;
            border-top: 1px solid var(--zi-line) !important;
            padding: 7px 14px 9px !important;
        }
        .zc-dashboard .chat-send-area { display: flex !important; align-items: flex-end !important; gap: 4px !important; }
        .zc-dashboard .chat-send-area .btn-group { display: flex !important; align-items: center !important; gap: 0 !important; }
        .zc-dashboard .chat-media__btn,
        .zc-dashboard .image-upload-btn,
        .zc-dashboard .emoji-icon {
            width: 40px !important; height: 40px !important;
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
            background: transparent !important; border: none !important; border-radius: 50% !important;
            color: #54656f !important; font-size: 21px !important;
            cursor: pointer !important; margin: 0 !important;
            transition: background .15s, color .15s !important;
        }
        .zc-dashboard .chat-media__btn:hover,
        .zc-dashboard .image-upload-btn:hover,
        .zc-dashboard .emoji-icon:hover { background: rgba(11, 20, 26, .07) !important; color: var(--zi-green-deep) !important; }
        .chat-send-area .input-area { flex: 1 !important; display: flex !important; align-items: flex-end !important; gap: 4px !important; }
        .chat-send-area .input-group { flex: 1 !important; }
        .zc-dashboard .chat-send-area textarea.message-input {
            width: 100% !important;
            background: #fff !important;
            border: none !important;
            border-radius: 10px !important;
            padding: 10px 14px !important;
            font-size: 14.5px !important;
            color: var(--zi-ink) !important;
            line-height: 1.4 !important;
            min-height: 42px !important;
            max-height: 120px !important;
            resize: none !important;
            box-shadow: none !important;
        }
        .chat-send-area textarea.message-input::placeholder { color: #8696a0 !important; }
        .chat-send-area textarea.message-input:focus { outline: none !important; border: none !important; box-shadow: none !important; }
        .zc-dashboard .chating-btn {
            width: 44px !important; height: 44px !important; flex-shrink: 0 !important;
            min-width: 44px !important; max-width: 44px !important; padding: 0 !important;
            border: none !important; border-radius: 50% !important;
            background: var(--zi-green) !important; color: #fff !important;
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
            transition: background .15s, transform .1s !important;
            box-shadow: 0 2px 8px rgba(0, 168, 132, .4) !important;
        }
        .zc-dashboard .chating-btn:hover { background: var(--zi-green-deep) !important; }
        .zc-dashboard .chating-btn:active { transform: scale(.94) !important; }
        .chating-btn svg { width: 20px !important; height: 20px !important; }

        /* attach popovers — visual skin only, theme JS owns positioning */
        .chat-media__list, .chat-url__list, .chat-list__wrapper {
            background: #fff !important;
            border: 1px solid var(--zi-line) !important;
            border-radius: 14px !important;
            box-shadow: 0 8px 28px rgba(11, 20, 26, .18) !important;
            padding: 6px !important;
        }
        .chat-media__list .media-item, .chat-url__list .url-item, .chat-list__wrapper .url-item {
            display: flex !important; align-items: center !important; gap: 10px !important;
            padding: 9px 12px !important; border-radius: 9px !important;
            font-size: 13.5px !important; font-weight: 500 !important; color: var(--zi-ink) !important;
            cursor: pointer !important; margin: 0 !important;
            transition: background .12s !important;
        }
        .chat-media__list .media-item:hover, .chat-url__list .url-item:hover, .chat-list__wrapper .url-item:hover { background: #f5f6f6 !important; }
        .chat-media__list .media-item .icon, .chat-url__list .url-item .icon, .chat-list__wrapper .url-item .icon {
            width: 34px !important; height: 34px !important; border-radius: 9px !important;
            background: #e7f8f2 !important; color: var(--zi-green-deep) !important;
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
            font-size: 15px !important; flex-shrink: 0 !important;
        }

        .blocked-message { background: #fff !important; }

        /* ── Pane 3 · contact panel ──────────────────────────────── */
        .zc-dashboard .body-right.contact__details {
            width: 340px !important; min-width: 340px !important;
            height: 100% !important;
            background: #fff !important;
            border: none !important;
            border-radius: 0 !important;
            margin: 0 !important;
            box-shadow: none !important;
            overflow-y: auto !important;
            padding: 0 !important;
            scrollbar-width: thin !important; scrollbar-color: #c5cdd4 transparent !important;
        }
        .zc-dashboard .contact__details .profile-details {
            background: transparent !important; border: none !important; border-radius: 0 !important;
            box-shadow: none !important; margin: 0 !important; padding: 0 !important;
        }
        .body-right__top-btn {
            display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 16px !important;
            padding: 13px 16px !important;
            border-bottom: 1px solid var(--zi-panel) !important;
        }
        .body-right__top-btn a, .body-right__top-btn button {
            font-size: 13px !important; font-weight: 600 !important;
            display: inline-flex !important; align-items: center !important; gap: 5px !important;
            background: none !important; border: none !important;
        }
        .profile-details__top { text-align: center !important; padding: 24px 16px 16px !important; }
        .zc-dashboard .profile-thumb img {
            width: 88px !important; height: 88px !important; border-radius: 50% !important;
            object-fit: cover !important;
            box-shadow: 0 2px 12px rgba(11, 20, 26, .14) !important;
        }
        .zc-dashboard .profile-name { font-size: 16.5px !important; font-weight: 700 !important; color: var(--zi-ink) !important; margin-top: 12px !important; }
        .profile-details__top .link { color: var(--zi-green-deep) !important; font-weight: 600 !important; text-decoration: none !important; }

        .zc-dashboard #pills-tabtwo {
            display: flex !important; gap: 0 !important; margin: 0 16px !important;
            border-bottom: 1px solid var(--zi-line) !important;
        }
        .zc-dashboard #pills-tabtwo .nav-item { flex: 1 !important; }
        .zc-dashboard #pills-tabtwo .nav-link {
            width: 100% !important;
            background: none !important; border: none !important; border-radius: 0 !important;
            border-bottom: 2px solid transparent !important;
            color: var(--zi-mut) !important; font-size: 13px !important; font-weight: 700 !important;
            padding: 10px 0 !important; text-align: center !important;
        }
        .zc-dashboard #pills-tabtwo .nav-link.active {
            color: var(--zi-green) !important;
            border-bottom-color: var(--zi-green) !important;
            background: none !important; box-shadow: none !important;
        }
        .details-content { padding: 16px !important; }
        .zc-dashboard .details-content__text { font-size: 13px !important; margin-bottom: 11px !important; color: var(--zi-ink) !important; }
        .zc-dashboard .details-content__text .title { color: var(--zi-mut) !important; font-weight: 500 !important; }
        .details-content__tag { margin-top: 14px !important; }
        .details-content__tag .tag-title, .details-content__status .status-title {
            font-size: 11.5px !important; font-weight: 700 !important; color: var(--zi-mut) !important;
            text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 8px !important;
        }
        .zc-dashboard .tag-list { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; }
        .zc-dashboard .tag-list__link {
            background: #e7f8f2 !important; color: var(--zi-green-deep) !important;
            font-size: 12px !important; font-weight: 600 !important;
            padding: 4px 10px !important; border-radius: 6px !important; text-decoration: none !important;
            display: inline-block !important;
        }
        .details-content__status { margin-top: 16px !important; }
        .zc-dashboard .details-content__status select {
            width: 100% !important;
            border: 1.5px solid var(--zi-line) !important; border-radius: 10px !important;
            padding: 9px 12px !important; font-size: 13.5px !important; color: var(--zi-ink) !important;
            background-color: #fff !important;
        }
        .details-content__status select:focus { border-color: var(--zi-green) !important; outline: none !important; box-shadow: none !important; }

        .note-wrapper { padding: 16px !important; }
        .note-wrapper textarea { border: 1.5px solid var(--zi-line) !important; border-radius: 10px !important; font-size: 13.5px !important; min-height: 90px !important; }
        .note-wrapper textarea:focus { border-color: var(--zi-green) !important; box-shadow: none !important; }
        .note-wrapper__btn { margin-top: 10px !important; text-align: right !important; }
        .note-wrapper__btn .btn--base { background: var(--zi-green) !important; border: none !important; border-radius: 9px !important; font-size: 13px !important; font-weight: 700 !important; padding: 8px 20px !important; color: #fff !important; }
        .note-wrapper__output .output {
            display: flex !important; justify-content: space-between !important; gap: 8px !important;
            background: #f8fafb !important; border: 1px solid var(--zi-panel) !important;
            border-radius: 10px !important; padding: 10px 12px !important; margin-top: 10px !important;
        }
        .note-wrapper__output .output .text { font-size: 13px !important; color: var(--zi-ink) !important; margin: 0 !important; }
        .note-wrapper__output .output .date { font-size: 11px !important; color: var(--zi-mut) !important; }

        /* ── Empty state (no conversation selected) ──────────────── */
        .zc-dashboard .empty-conversation {
            flex: 1 !important;
            width: auto !important;
            align-items: center !important; justify-content: center !important;
            background: var(--zi-panel) !important;
            border-left: none !important;
        }
        .zc-dashboard .empty-conversation:not(.d-none) { display: flex !important; }
        .zi-empty-inner { text-align: center; max-width: 420px; padding: 24px; }
        .zc-dashboard .empty-conversation img { max-width: 240px !important; opacity: .95 !important; }
        .zi-empty-title { font-size: 22px; font-weight: 600; color: #41525d; margin: 18px 0 6px; }
        .zi-empty-sub { font-size: 13.5px; color: var(--zi-mut); line-height: 1.55; margin: 0; }

        /* ── Responsive ──────────────────────────────────────────── */
        @media (max-width: 1500px) {
            .zc-dashboard .body-right.contact__details { width: 300px !important; min-width: 300px !important; }
            .zc-dashboard .msg-body { padding: 14px 5% 18px !important; }
            .zc-dashboard .chatbox-area__left { width: 340px !important; min-width: 340px !important; }
        }
        @media (max-width: 1199px) {
            .zc-dashboard .body-right.contact__details { display: none !important; }
        }
        @media (max-width: 991px) {
            .zc-dashboard .chatbox-area { height: calc(100vh - 60px) !important; }
            .zc-dashboard .chatbox-area__left { width: 320px !important; min-width: 320px !important; }
            .zc-dashboard .msg-body { padding: 12px 16px !important; }
            .zc-dashboard .msg-body .single-message { max-width: 78% !important; }
        }
        @media (max-width: 767px) {
            .zc-dashboard .chatbox-area__left { width: 100% !important; min-width: 0 !important; border-right: none !important; }
            .zc-dashboard .chatbox-area:has(.chatbox-area__body:not(.d-none)) .chatbox-area__left { display: none !important; }
            .zc-dashboard .chatbox-area:has(.chatbox-area__body.d-none) .empty-conversation { display: none !important; }
            .zi-back {
                width: 36px !important; height: 36px !important;
                display: inline-flex !important; align-items: center !important; justify-content: center !important;
                background: transparent !important; border: none !important; border-radius: 50% !important;
                color: #54656f !important; font-size: 18px !important; margin-right: 2px !important;
            }
        }
        @media (min-width: 768px) {
            .zi-back { display: none !important; }
        }
/* ── v3.1 cascade winners — outrank the old inbox polish above ── */

/* Varied flat avatar colors (AiSensy-style), not uniform teal gradient */
.zc-dashboard .chat-list__item .contact_thumb,
.zc-dashboard .chatbox-area__left .chat-list__item .contact_thumb {
    width: 46px !important; height: 46px !important;
    box-shadow: none !important;
    font-size: 15px !important;
}
.zc-dashboard .chat-list__item .contact_thumb.bg--success,
.zc-dashboard .chat-list__item .contact_thumb.bg--base { background: #00a884 !important; }
.zc-dashboard .chat-list__item .contact_thumb.bg--info { background: #3b82f6 !important; }
.zc-dashboard .chat-list__item .contact_thumb.bg--warning { background: #f59e0b !important; }
.zc-dashboard .chat-list__item .contact_thumb.bg--danger { background: #ef4444 !important; }

/* Rows: flat edge-to-edge list, not floating rounded boxes */
.zc-dashboard .chatbox-area__left .chat-list__item {
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-height: 68px !important;
}

/* Unread badge: WhatsApp green pill */
.zc-dashboard .chatbox-area__left .chatbody .chat-list__content .right .number,
.zc-dashboard .chat-list__item .unseen-message .number {
    background: #25d366 !important;
    box-shadow: none !important;
}

/* Send button: flat WA green circle (beats the old gradient rule) */
.zc-dashboard .chat-box__footer .input-area button.chating-btn {
    width: 44px !important; height: 44px !important;
    min-width: 44px !important; max-width: 44px !important; padding: 0 !important;
    border-radius: 50% !important;
    background: #00a884 !important;
    box-shadow: 0 2px 8px rgba(0, 168, 132, .4) !important;
}
.zc-dashboard .chat-box__footer .input-area button.chating-btn:hover { background: #008069 !important; }

/* ── v3.2 — kill theme height caps so both panes fill to the bottom ── */
/* main.css:8539 hard-caps the list at 650px; flex fills the pane instead */
.zc-dashboard .chatbox-area__left .chatbody .chat-list {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}
.zc-dashboard .chatbox-area__left .chatbody,
.zc-dashboard .chatbox-area__left .chatbox-wrapper { min-height: 0 !important; }
/* main.css:8922 sizes the thread for the old fixed layout */
.zc-dashboard .chatbox-area__body .chat-box {
    min-height: 0 !important;
    width: auto !important;
}


/* ════════════════════════════════════════════════════════════════
   ZUPI UI CONSISTENCY PASS (2026-08-12)
   The dashboard shell + list/table/form/button/badge components are
   already themed above. This closes the last universal gaps so every
   screen's dialogs, cards and empty states match the AiSensy look:
     1. Modals (every create/edit/action dialog across the app)
     2. .custom--card panels
     3. Empty-state ("no data") rows
   Scoped to .zc-dashboard so marketing pages are untouched. Modals
   stay inside .zc-dashboard in the DOM (Bootstrap only portals the
   backdrop), so this reaches them.
   ════════════════════════════════════════════════════════════════ */

/* ── Modals ─────────────────────────────────────────────────────── */
.zc-dashboard .modal-content,
.zc-dashboard .custom--modal .modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .28) !important;
    overflow: hidden !important;
    background: #fff !important;
}
.zc-dashboard .modal-header {
    padding: 18px 22px !important;
    border-bottom: 1px solid #eef2f6 !important;
    background: #fff !important;
    align-items: flex-start !important;
}
.zc-dashboard .modal-header .modal-title,
.zc-dashboard .modal-title {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
}
.zc-dashboard .modal-header .modal-subtitle {
    font-size: 0.82rem !important;
    color: #64748b !important;
    margin: 2px 0 0 !important;
}
.zc-dashboard .modal-body { padding: 20px 22px !important; }
.zc-dashboard .modal-footer {
    padding: 14px 22px !important;
    border-top: 1px solid #eef2f6 !important;
    gap: 8px !important;
}
/* Close button: soft circular hover, green-neutral */
.zc-dashboard .modal-header .btn-close,
.zc-dashboard .modal .btn-close {
    opacity: .6 !important;
    border-radius: 50% !important;
    padding: 8px !important;
    transition: background .15s, opacity .15s !important;
}
.zc-dashboard .modal-header .btn-close:hover,
.zc-dashboard .modal .btn-close:hover {
    opacity: 1 !important;
    background: #f1f5f9 !important;
}
/* Some templates use a custom close icon/element */
.zc-dashboard .modal .close-icon,
.zc-dashboard .modal .modal-close {
    width: 34px !important; height: 34px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important; color: #64748b !important; cursor: pointer !important;
    transition: background .15s, color .15s !important;
}
.zc-dashboard .modal .close-icon:hover,
.zc-dashboard .modal .modal-close:hover { background: #f1f5f9 !important; color: #0f172a !important; }
/* Backdrop (portaled to body) — a touch deeper + blur for the premium feel */
.modal-backdrop.show { background: rgba(15, 23, 42, .55) !important; opacity: 1 !important; }

/* Dialog width breathing room on large screens */
@media (min-width: 576px) {
    .zc-dashboard .modal-dialog { margin-top: 5vh !important; margin-bottom: 5vh !important; }
}

/* ── .custom--card panels ───────────────────────────────────────── */
.zc-dashboard .custom--card {
    background: #fff !important;
    border: 1px solid #e9edf3 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05) !important;
    overflow: hidden !important;
}
.zc-dashboard .custom--card .card-header {
    background: #fff !important;
    border-bottom: 1px solid #eef2f6 !important;
    padding: 16px 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.zc-dashboard .custom--card .card-body { padding: 20px !important; }

/* ── Empty-state ("no data") rows ───────────────────────────────── */
.zc-dashboard .empty-message-row td { border-bottom: none !important; }
.zc-dashboard .empty-message-row img.empty-message,
.zc-dashboard img.empty-message {
    max-width: 130px !important;
    width: 100% !important;
    height: auto !important;
    opacity: .9 !important;
    margin-bottom: 6px !important;
}
.zc-dashboard .empty-message-row .d-block:not(.fs-13) {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
}
.zc-dashboard .empty-message-row .fs-13 { color: #94a3b8 !important; }

/* ── Small consistency touches ──────────────────────────────────── */
/* Secondary/white buttons in dialogs: match the redesign's neutral pill */
.zc-dashboard .modal .btn--white,
.zc-dashboard .btn--white {
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: border-color .15s, background .15s !important;
}
.zc-dashboard .modal .btn--white:hover,
.zc-dashboard .btn--white:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; }


/* ══════════════════════════════════════════════════════════════════
   Marketing / decorative widgets OFF inside the logged-in app (2026-08-17)
   These are guest-facing conversion + landing-page eye-candy that have no
   business in the dashboard: the WhatsApp sales FAB, the "someone signed up"
   social-proof toast, the exit-intent "Book a demo" popup, the promo/announce
   bar, the scroll-reading progress bar, the WA-CTA nudge card, and the ambient
   floating orbs + full-page film-grain overlay.
   Scoped to body:has(.zc-sidebar) — the rail is present on every logged-in
   layout (master AND crm.blade), and never on the guest marketing pages, so
   those keep all the widgets. !important beats the JS inline `display:flex`
   the popups set when they fire. The premium-hub unlock JS/CSS is left fully
   intact — only the widgets are hidden.
   ══════════════════════════════════════════════════════════════════ */
body:has(.zc-sidebar) #zc-wa-btn,
body:has(.zc-sidebar) #zc-toast,
body:has(.zc-sidebar) #zc-demo-overlay,
body:has(.zc-sidebar) #zc-announce-bar,
body:has(.zc-sidebar) #zc-progress-bar,
body:has(.zc-sidebar) .zpw-nudge,
body:has(.zc-sidebar) .zpa-aurora,
body:has(.zc-sidebar) .zpa-orb,
body:has(.zc-sidebar) .zpa-grain {
    display: none !important;
}


/* ════════════════════════════════════════════════════════════════
   AiSensy inbox theme DITTO (2026-08-18)
   AiSensy's chat header is the SAME dark-teal bar as the sidebar
   (#0a474c) with white content — not a white bar. Thread is a warm
   beige doodle. Appended last so it wins over the INBOX v3 block above.
   ════════════════════════════════════════════════════════════════ */

/* ── Chat header: dark-teal bar, white content (AiSensy) ── */
.zc-dashboard .chat-box__header{
    background:#0a474c !important;
    border-bottom:1px solid #0a474c !important;
}
.zc-dashboard .chat-box__content .name{ color:#fff !important; }
.zc-dashboard .chat-box__content .contact__mobile{ color:rgba(255,255,255,.72) !important; }
/* header action pills (whatsapp-call / phone-call / template-envelope) → translucent white on teal */
.zc-dashboard .chat-box__header .template_button{ background:rgba(255,255,255,.14) !important; }
.zc-dashboard .chat-box__header .template_button:hover{ background:rgba(255,255,255,.26) !important; }
.zc-dashboard .chat-box__header .template_button i{ color:#fff !important; }
.zc-dashboard .chat-box__header .contact__wa-call,
.zc-dashboard .chat-box__header .contact__phone-call{
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.28) !important;
    box-shadow:none !important;
    color:#fff !important;
}
.zc-dashboard .chat-box__header .contact__wa-call:hover,
.zc-dashboard .chat-box__header .contact__phone-call:hover{ background:rgba(255,255,255,.26) !important; }
.zc-dashboard .chat-box__header .contact__wa-call i,
.zc-dashboard .chat-box__header .contact__phone-call i{ color:#fff !important; }

/* ── Thread: warmer AiSensy beige + more visible doodle ── */
.zc-dashboard .chat-box{ background:#e9e1d3 !important; }
.zc-dashboard .chat-box::before{ opacity:.55 !important; background-size:560px auto !important; }

/* system/date chip a touch more AiSensy (soft white pill) */
.zc-dashboard .zi-day-chip span{ background:#fff !important; color:#54656f !important; box-shadow:0 1px 2px rgba(11,20,26,.12) !important; }


/* ════════════════════════════════════════════════════════════════
   AiSensy "Chat Profile" — right panel (2026-08-18)
   avatar+number header · mint details box · collapsible <details>
   section cards · red Block button. Renders inside .contact__details.
   ════════════════════════════════════════════════════════════════ */
.zc-dashboard .body-right.contact__details{ background:#f7f9f9 !important; padding:0 !important; }
.zc-dashboard .zi-cp{ padding:0 14px 18px !important; }

.zc-dashboard .zi-cp-edit{ display:flex !important; justify-content:flex-end !important; gap:14px !important; padding:11px 2px 4px !important; }
.zc-dashboard .zi-cp-edit a{ font-size:13px !important; font-weight:600 !important; color:#12a093 !important; display:inline-flex !important; align-items:center !important; gap:4px !important; text-decoration:none !important; }

.zc-dashboard .zi-cp-head{ text-align:center !important; padding:6px 0 16px !important; }
.zc-dashboard .zi-cp-avatar img{ width:72px !important; height:72px !important; border-radius:50% !important; object-fit:cover !important; box-shadow:0 2px 10px rgba(10,71,76,.16) !important; }
.zc-dashboard .zi-cp-name{ font-size:19px !important; font-weight:700 !important; color:#16211f !important; margin:12px 0 2px !important; }
.zc-dashboard .zi-cp-phone{ font-size:14px !important; font-weight:600 !important; color:#0a474c !important; margin:0 !important; }

/* mint details box */
.zc-dashboard .zi-cp-box{ background:#eef4f3 !important; border-radius:14px !important; padding:13px 16px !important; margin-bottom:14px !important; }
.zc-dashboard .zi-cp-row{ display:flex !important; justify-content:space-between !important; gap:12px !important; padding:5px 0 !important; font-size:13.5px !important; }
.zc-dashboard .zi-cp-row span{ color:#6b7d7a !important; flex-shrink:0 !important; }
.zc-dashboard .zi-cp-row b{ color:#1f2f2c !important; font-weight:600 !important; text-align:right !important; word-break:break-word !important; }

/* collapsible section cards (native <details>) */
.zc-dashboard .zi-cp-card{ background:#fff !important; border:1px solid #e7ecea !important; border-radius:12px !important; margin-bottom:10px !important; overflow:hidden !important; }
.zc-dashboard .zi-cp-card summary{ list-style:none !important; cursor:pointer !important; padding:14px 16px !important; font-size:15px !important; font-weight:600 !important; color:#26332f !important; display:flex !important; align-items:center !important; justify-content:space-between !important; }
.zc-dashboard .zi-cp-card summary::-webkit-details-marker{ display:none !important; }
.zc-dashboard .zi-cp-card summary::after{ content:'' !important; width:9px !important; height:9px !important; border-right:2px solid #9aa8a5 !important; border-bottom:2px solid #9aa8a5 !important; transform:rotate(45deg) !important; transition:transform .2s !important; margin-top:-3px !important; flex-shrink:0 !important; }
.zc-dashboard .zi-cp-card[open] summary::after{ transform:rotate(-135deg) !important; margin-top:2px !important; }
.zc-dashboard .zi-cp-card-body{ padding:2px 16px 16px !important; }

/* tags */
.zc-dashboard .zi-cp .tag-list{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; padding:0 !important; margin:0 !important; list-style:none !important; }
.zc-dashboard .zi-cp .tag-list__link{ background:#e7f8f2 !important; color:#0c8a7e !important; font-size:12px !important; font-weight:600 !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; }
.zc-dashboard .zi-cp-empty{ color:#94a3b8 !important; font-size:13px !important; list-style:none !important; }

/* status select */
.zc-dashboard .zi-cp .statusForm select{ width:100% !important; border:1.5px solid #e7ecea !important; border-radius:10px !important; padding:9px 12px !important; font-size:13.5px !important; color:#1f2f2c !important; background-color:#fff !important; }
.zc-dashboard .zi-cp .statusForm select:focus{ border-color:#12a093 !important; outline:none !important; box-shadow:none !important; }

/* notes */
.zc-dashboard .zi-cp .note-wrapper textarea{ width:100% !important; border:1.5px solid #e7ecea !important; border-radius:10px !important; font-size:13.5px !important; min-height:78px !important; padding:9px 12px !important; }
.zc-dashboard .zi-cp .note-wrapper textarea:focus{ border-color:#12a093 !important; outline:none !important; box-shadow:none !important; }
.zc-dashboard .zi-cp .note-wrapper__btn{ text-align:right !important; margin-top:8px !important; }
.zc-dashboard .zi-cp .note-wrapper__btn .btn--base{ background:#0a474c !important; border:none !important; border-radius:9px !important; font-size:13px !important; font-weight:700 !important; padding:7px 18px !important; color:#fff !important; }
.zc-dashboard .zi-cp .note-wrapper__output .output{ display:flex !important; justify-content:space-between !important; gap:8px !important; background:#f7f9f9 !important; border:1px solid #eef2f1 !important; border-radius:10px !important; padding:9px 11px !important; margin-top:9px !important; }
.zc-dashboard .zi-cp .note-wrapper__output .text{ font-size:13px !important; color:#1f2f2c !important; margin:0 !important; }
.zc-dashboard .zi-cp .note-wrapper__output .date{ font-size:11px !important; color:#94a3b8 !important; }

/* block */
.zc-dashboard .zi-cp-block{ padding:8px 2px 0 !important; text-align:center !important; }
.zc-dashboard .zi-cp-block-btn{ background:none !important; border:none !important; color:#e5397d !important; font-size:14px !important; font-weight:600 !important; display:inline-flex !important; align-items:center !important; gap:7px !important; cursor:pointer !important; padding:8px !important; }
.zc-dashboard .zi-cp-block-btn i{ color:#e5397d !important; font-size:16px !important; }

/* thread doodle: warmer beige + more visible pattern (AiSensy) */
.zc-dashboard .chat-box{ background:#e7dfd1 !important; }
.zc-dashboard .chat-box::before{ opacity:.8 !important; background-size:520px auto !important; }

/* .msg-body was painting an opaque #f1f5f9 over the beige doodle — let it show */
.zc-dashboard .msg-body{ background:transparent !important; }


/* ════════════════════════════════════════════════════════════════════════
   AiSensy inbox — PIXEL DITTO (2026-08-18)
   Every value below was read off live AiSensy with getComputedStyle:
     thread bg      rgb(245,239,223) #F5EFDF
     bubble bg      rgb(251,249,243) #FBF9F3   ← cream, NOT green
     bubble radius  22px, padding 8px 16px, shadow none
     sender name    #0a474c 14px/600 · link #1C8F73 · caption #a9a9a9 14px/500
     system chip    bg #FBF9F3, radius 6px, 12px, pad 3.6px 9.6px
     timestamp      10px, OUTSIDE the bubble (below-right)
     list row       h 60px, bg #fff, border-bottom .667px #F2F2F2
   Key structural trick: ZupiChat renders the time INSIDE .single-message.
   Moving the bubble skin from .single-message onto .message-content leaves the
   time row outside the coloured box — exactly AiSensy's layout, no blade edit.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Thread surface ── */
.zc-dashboard .chat-box{ background:#F5EFDF !important; }
.zc-dashboard .chat-box::before{ opacity:.5 !important; background-size:480px auto !important; }
.zc-dashboard .msg-body{ background:transparent !important; padding:14px 5% 18px !important; }

/* ── Bubble: wrapper goes transparent, skin moves to .message-content ── */
.zc-dashboard .msg-body .single-message,
.zc-dashboard .msg-body .single-message.message--left,
.zc-dashboard .msg-body .single-message.message--right{
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 0 10px !important;
    max-width:min(66%, 430px) !important;
    width:fit-content !important;
}
/* AiSensy has no bubble tails — kill the WhatsApp ones */
.zc-dashboard .msg-body .single-message::before,
.zc-dashboard .msg-body .single-message.message--left::before,
.zc-dashboard .msg-body .single-message.message--right::before{ content:none !important; display:none !important; }

.zc-dashboard .msg-body .single-message .message-content{
    background:#FBF9F3 !important;
    border-radius:22px !important;
    padding:8px 16px !important;
    box-shadow:none !important;
    display:block !important;
}
/* incoming reads slightly lighter so the two sides stay distinguishable */
.zc-dashboard .msg-body .single-message.message--left .message-content{ background:#ffffff !important; }
.zc-dashboard .msg-body .single-message.message--right{ margin-left:auto !important; }
.zc-dashboard .msg-body .single-message.message--left{ margin-right:auto !important; }

/* ── Text inside the bubble ── */
.zc-dashboard .msg-body .single-message .message-text{
    font-size:14px !important; line-height:1.55 !important; color:#0a474c !important;
    margin:0 !important; word-break:break-word !important;
}
.zc-dashboard .msg-body .single-message .message-text a{ color:#1C8F73 !important; text-decoration:none !important; }
.zc-dashboard .msg-body .single-message .message-text a:hover{ text-decoration:underline !important; }

/* ── Time + ticks: outside the bubble, below-right (AiSensy) ── */
.zc-dashboard .msg-body .single-message > .d-flex{
    justify-content:flex-end !important;
    gap:5px !important;
    padding:4px 6px 0 !important;
    margin:0 !important;
}
.zc-dashboard .msg-body .single-message.message--left > .d-flex{ justify-content:flex-start !important; }
.zc-dashboard .msg-body .single-message .message-time{ font-size:10px !important; color:#5b6b68 !important; line-height:1.2 !important; }
.zc-dashboard .msg-body .single-message .message-status i{ font-size:13px !important; }
.zc-dashboard .msg-body .single-message .message-status .text--success{ color:#1C8F73 !important; }

/* ── Date separator: AiSensy's flat chip ── */
.zc-dashboard .zi-day-chip{ margin:14px 0 12px !important; }
.zc-dashboard .zi-day-chip span{
    background:#FBF9F3 !important; color:#000 !important;
    font-size:12px !important; font-weight:400 !important; letter-spacing:0 !important;
    text-transform:none !important;
    padding:3.6px 9.6px !important; border-radius:6px !important; box-shadow:none !important;
}

/* ── Conversation list rows: 60px, hairline #F2F2F2 ── */
.zc-dashboard .chat-list__item{
    min-height:60px !important;
    padding:9px 14px !important;
    border-bottom:1px solid #F2F2F2 !important;
    background:#fff !important;
}
.zc-dashboard .chat-list__item .contact_thumb,
.zc-dashboard .chatbox-area__left .chat-list__item .contact_thumb{
    width:38px !important; height:38px !important; min-width:38px !important; font-size:14px !important;
}
.zc-dashboard .chat-list__content .name{ font-size:14px !important; }
.zc-dashboard .chat-list__content .last-message,
.zc-dashboard .chat-list__content .last-message .text,
.zc-dashboard .chat-list__content .last-message .last-message-text{ font-size:12.5px !important; }
.zc-dashboard .chat-list__item.active{ background:#e9f2f2 !important; }

/* row height 60px — beat the (0,3,0) rule above; + per-message sender circle */
.zc-dashboard .chatbox-area__left .chat-list__item{ min-height:60px !important; }
.zc-dashboard .chat-box::before{ opacity:.62 !important; }
.zc-dashboard .msg-body .single-message.message--right{ position:relative !important; margin-right:48px !important; }
.zc-dashboard .msg-body .single-message .zi-msg-av{
    position:absolute !important; right:-48px !important; top:0 !important;
    width:40px !important; height:40px !important; border-radius:50% !important;
    background:#0a474c !important; color:#fff !important;
    font-size:15px !important; font-weight:600 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
}


/* ════════════════════════════════════════════════════════════════
   SIDEBAR RAIL (zcv3) — moved here from sidebar-v2.blade.php (2026-08-18)
   FOUC FIX: these rules used to live in an inline <style> INSIDE the body,
   AFTER the <aside> markup. The head already sets .zc-sidebar{width:240px}
   (this file line ~1525 + master.blade.php push), so every page load painted
   a 240px sidebar first and then snapped it to 70px — a visible "sidebar
   badhta hai" flash on Dashboard/Inbox. Living here (render-blocking head CSS)
   it applies before first paint. Keep rail CSS in THIS file, not the blade.
   ════════════════════════════════════════════════════════════════ */
/* ── Rail shell ──────────────────────────────────────────────
   custom-redesign.css turns .zc-sidebar into a 232px floating glass panel and
   pushes content to margin-left:262px, both with !important. The id selector and
   the html body prefix are what out-specify that without editing the v1 stylesheet. */
html body #zcSidebar.zcv3{
    width:78px!important;top:0!important;left:0!important;bottom:0!important;height:100vh!important;
    border:none!important;border-radius:0!important;box-shadow:2px 0 14px rgba(4,28,31,.18)!important;
    background:#0a474c!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;z-index:1000!important;
}
/* custom-redesign.css paints a 240px rgba(10,71,76,.12) radial glow via #zcSidebar::before,
   built for the white v1 sidebar. On a dark rail it reads as a green wash — kill it. */
html body #zcSidebar.zcv3::before,
html body #zcSidebar.zcv3::after{content:none!important;display:none!important;background:none!important;}

html body .zc-main,
html body .crm-right{margin-left:78px!important;}

html body #zcSidebar.zcv3 .zcv3-logo{height:58px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.13);}
html body #zcSidebar.zcv3 .zcv3-logo img{width:32px;height:32px;object-fit:contain;}
html body #zcSidebar.zcv3 .zcv3-logo img.wordmark{width:64px;height:auto;filter:brightness(0) invert(1);}

html body #zcSidebar.zcv3 .zcv3-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0 10px;scrollbar-width:none;}
html body #zcSidebar.zcv3 .zcv3-nav::-webkit-scrollbar{width:0;}
html body #zcSidebar.zcv3 .zcv3-foot{flex-shrink:0;padding:6px 0 8px;border-top:1px solid rgba(255,255,255,.13);}

/* ── Rail item: icon over label ── */
html body #zcSidebar.zcv3 .zcv3-item{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    width:100%;padding:7px 2px;background:none!important;border:none;cursor:pointer;text-decoration:none!important;
    color:rgba(255,255,255,.78)!important;transition:color .15s;
}
html body #zcSidebar.zcv3 .zcv3-item:hover{color:#fff!important;background:none!important;}
/* custom.css sets `body:not(.dashboard) p, body:not(.dashboard) span {color:#4b5563!important}`.
   Pages on crm.blade.php don't carry the .dashboard body class, so every rail label — a span —
   turned grey on a teal rail. These re-assert inherit at higher specificity. */
html body #zcSidebar.zcv3 .zcv3-item .zcv3-lb,
html body #zcSidebar.zcv3 .zcv3-item .zcv3-ic,
html body #zcSidebar.zcv3 .zcv3-item .zcv3-ic i{color:inherit!important;}
html body .zcv3-fly .zcv3-fly-b a span:not(.zcv3-pro),
html body .zcv3-pal .zcv3-pal-row span:not(.zcv3-pro):not(.g){color:inherit!important;}
html body .zcv3-fly .zcv3-pro,
html body .zcv3-pal .zcv3-pro{color:#92400e!important;}
html body .zcv3-pal .zcv3-pal-row .g{color:#94a3b8!important;}
html body #zcSidebar.zcv3 .zcv3-ic{
    width:36px;height:30px;display:flex;align-items:center;justify-content:center;
    border-radius:9px;font-size:16px;transition:background .15s;
}
html body #zcSidebar.zcv3 .zcv3-item:hover .zcv3-ic{background:rgba(255,255,255,.16);}
html body #zcSidebar.zcv3 .zcv3-lb{
    font-size:9.5px;font-weight:600;letter-spacing:.01em;line-height:1.15;text-align:center;
    max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* active: white pill behind the icon + rail marker on the left edge */
html body #zcSidebar.zcv3 .zcv3-item.active{color:#fff!important;}
/* !important here because the color:inherit rule below (which rescues labels from custom.css)
   would otherwise pull white down into the icon and hide it against the white pill. */
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic{background:#fff!important;}
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic,
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic i{color:#0a474c!important;}
html body #zcSidebar.zcv3 .zcv3-item.active::before{
    content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:#fff;
}
html body #zcSidebar.zcv3 .zcv3-search{margin:8px 0 2px;}
html body #zcSidebar.zcv3 .zcv3-search .zcv3-ic{background:rgba(255,255,255,.13);}

html body #zcSidebar.zcv3 .zcv3-dot{
    position:absolute;top:-3px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
    background:#ff4d4f;color:#fff;font-size:9.5px;font-weight:700;font-style:normal;
    display:flex;align-items:center;justify-content:center;border:1.5px solid #0a474c;
}
html body #zcSidebar.zcv3 .zcv3-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.5);}
html body #zcSidebar.zcv3 .zcv3-avatar-btn{padding-top:9px;}

/* ── Flyout ── */
.zcv3-fly{
    position:fixed;z-index:2600;min-width:210px;max-width:250px;display:none;
    background:#fff;border-radius:12px;box-shadow:0 14px 44px rgba(15,23,42,.2),0 2px 8px rgba(15,23,42,.08);
    border:1px solid #e8edf3;overflow:hidden;
}
.zcv3-fly.open{display:block;}
.zcv3-fly-h{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8;padding:11px 14px 5px;}
.zcv3-fly-b{padding:0 6px 6px;max-height:70vh;overflow-y:auto;}
.zcv3-fly-b a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:13px;color:#334155!important;text-decoration:none!important;}
.zcv3-fly-b a:hover{background:#e9f2f2;color:#083c40!important;}
.zcv3-fly-b a.on{background:#e9f2f2;color:#083c40!important;font-weight:700;}
.zcv3-pro{font-size:8.5px;font-weight:800;letter-spacing:.04em;color:#92400e;background:#fef3c7;border:1px solid #fde68a;padding:1px 5px;border-radius:4px;margin-left:auto;}

/* ── Palette ── */
.zcv3-pal-wrap{display:none;position:fixed;inset:0;background:rgba(10,71,76,.45);z-index:3000;padding-top:12vh;}
.zcv3-pal-wrap.open{display:block;}
.zcv3-pal{max-width:520px;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.3);overflow:hidden;}
.zcv3-pal-in{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid #f1f5f9;color:#94a3b8;}
.zcv3-pal-in input{flex:1;border:none;outline:none;font-size:14.5px;color:#0f172a;background:none;}
.zcv3-pal-in kbd{font-family:inherit;font-size:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:4px;padding:1px 5px;color:#94a3b8;}
.zcv3-pal-list{max-height:56vh;overflow-y:auto;padding:6px;}
.zcv3-pal-row{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;font-size:13px;color:#334155;text-decoration:none!important;cursor:pointer;}
.zcv3-pal-row:hover,.zcv3-pal-row.sel{background:#e9f2f2;color:#083c40!important;}
.zcv3-pal-row .g{font-size:11px;color:#94a3b8;margin-left:auto;}
.zcv3-pal-empty{padding:22px;text-align:center;color:#94a3b8;font-size:13px;}

@media(max-width:991px){
    html body #zcSidebar.zcv3{transform:translateX(-100%)!important;}
    html body #zcSidebar.zcv3.mobile-open{transform:translateX(0)!important;}
    html body .zc-main,html body .crm-right{margin-left:0!important;}
}

/* ══════════════════════════════════════════════════════════════════
   AiSensy-match rail skin (2026-08-17, v2 — dark teal)
   DARK-teal rail · wider · larger borderless icons · active = white
   circle behind the icon + white label + left marker (like AiSensy "Flows").
   ⚠ Teal values ESTIMATED from screenshot (Chrome not connected to inspect
   live AiSensy). Tweak --zc-teal-a/-b for an exact match.
   ══════════════════════════════════════════════════════════════════ */
html body #zcSidebar.zcv3{
    --zc-teal-a:#0d3b40; --zc-teal-b:#0d3b40; /* exact AiSensy: rgb(13,59,64) */
    width:74px!important;
    background:var(--zc-teal-a)!important;
    box-shadow:2px 0 12px rgba(4,30,33,.16)!important;
}
html body .zc-main,
html body .crm-right{margin-left:74px!important;}

html body #zcSidebar.zcv3 .zcv3-logo{height:56px!important;border-bottom-color:rgba(255,255,255,.16)!important;}
html body #zcSidebar.zcv3 .zcv3-nav{padding:6px 0 10px!important;}

/* rail item — icon over label, compact */
html body #zcSidebar.zcv3 .zcv3-item{padding:8px 4px!important;gap:5px!important;color:rgba(255,255,255,.88)!important;}
html body #zcSidebar.zcv3 .zcv3-item:hover{color:#fff!important;}

/* icons — thin-line SVG (Feather/Lucide), borderless at rest */
html body #zcSidebar.zcv3 .zcv3-ic{width:auto!important;height:auto!important;min-width:26px!important;font-size:18px!important;background:none!important;border-radius:11px!important;color:inherit!important;}
html body #zcSidebar.zcv3 .zcv3-ic .zcv3-svg{width:21px!important;height:21px!important;display:block!important;stroke-width:1.7!important;}
html body #zcSidebar.zcv3 .zcv3-item:hover .zcv3-ic{background:none!important;}
html body #zcSidebar.zcv3 .zcv3-lb{font-size:10px!important;font-weight:600!important;max-width:66px!important;}

/* active — white circle behind the ICON only; label stays white; left-edge marker (AiSensy) */
html body #zcSidebar.zcv3 .zcv3-item.active{
    background:none!important;margin:0!important;width:100%!important;box-shadow:none!important;color:#fff!important;
}
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic{
    background:#fff!important;width:38px!important;min-width:38px!important;height:38px!important;border-radius:50%!important;
    box-shadow:0 4px 12px rgba(0,0,0,.16)!important;color:var(--zc-teal-a)!important;
}
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic i,
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic .zcv3-svg{color:var(--zc-teal-a)!important;stroke:var(--zc-teal-a)!important;}
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-lb{color:#fff!important;font-weight:700!important;}
html body #zcSidebar.zcv3 .zcv3-item.active::before{
    display:block!important;content:""!important;position:absolute!important;left:0!important;top:8px!important;bottom:8px!important;
    width:3px!important;border-radius:0 3px 3px 0!important;background:#fff!important;
}

/* search chip · unread dot · avatar tuned to the new teal */
html body #zcSidebar.zcv3 .zcv3-search .zcv3-ic{background:rgba(255,255,255,.16)!important;border-radius:10px!important;height:24px!important;width:auto!important;padding:0 8px!important;}
html body #zcSidebar.zcv3 .zcv3-dot{border-color:var(--zc-teal-b)!important;}
html body #zcSidebar.zcv3 .zcv3-avatar{width:27px!important;height:27px!important;}
.zcv3-pal-wrap{background:rgba(8,58,54,.5)!important;}

/* ══ Flyout → docked full-height panel that PUSHES content (AiSensy) ══
   Was a floating popup overlapping the page. Now a full-height white column
   flush to the 74px rail; when open it shifts the content right (no overlap). */
html body .zcv3-fly{
    left:74px!important; top:0!important; bottom:0!important; height:100vh!important;
    min-width:288px!important; max-width:288px!important; width:288px!important;
    background:#fff!important; border:none!important; border-right:1px solid #e7ecf1!important; border-radius:0!important;
    box-shadow:12px 0 30px rgba(13,59,64,.07)!important;
    display:block!important;
    transform:translateX(-14px)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important;
    transition:transform .2s cubic-bezier(.32,.72,0,1), opacity .2s ease, visibility .2s!important;
}
html body .zcv3-fly.open{ transform:translateX(0)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; }
html body .zcv3-fly .zcv3-fly-h{
    font-size:17px!important; font-weight:800!important; letter-spacing:0!important; text-transform:none!important;
    color:#0f172a!important; padding:22px 20px 14px!important; border-bottom:1px solid #f0f4f8!important;
}
html body .zcv3-fly .zcv3-fly-b{ padding:12px 12px 16px!important; max-height:calc(100vh - 68px)!important; }
html body .zcv3-fly .zcv3-fly-b a{ padding:11px 14px!important; border-radius:11px!important; font-size:14px!important; gap:12px!important; margin-bottom:2px!important; }
html body .zcv3-fly .zcv3-fly-b a:hover{ background:#f1f5f9!important; color:#0f172a!important; }
html body .zcv3-fly .zcv3-fly-b a.on{ background:#e7f5f1!important; color:#0c7d72!important; }
html body .zcv3-fly .zcv3-fly-b a.on span:not(.zcv3-pro){ color:#0c7d72!important; }

/* PUSH content when the panel is open — 74 rail + 288 panel = 362 */
html body .zc-main, html body .crm-right{ transition:margin-left .2s cubic-bezier(.32,.72,0,1)!important; }
html body.zc-fly-open .zc-main, html body.zc-fly-open .crm-right{ margin-left:362px!important; }

/* mobile: rail slides away, panel becomes an edge drawer, no content push */
@media(max-width:991px){
    html body .zc-main,html body .crm-right{margin-left:0!important;}
    html body .zcv3-fly{ left:0!important; width:86%!important; min-width:0!important; max-width:320px!important; }
    html body.zc-fly-open .zc-main, html body.zc-fly-open .crm-right{ margin-left:0!important; }
}

/* ── Restore AiSensy DevTools-exact rail values (user's own inspect: .jss5782
      background:#0a474c; width:70px · .jss5785 icon 30×30 50% · icon #fbfbfb).
      A parallel edit had reverted these to 74px/#0d3b40. Panel push math
      follows the rail: 70 rail + 288 panel = 358. ── */
html body #zcSidebar.zcv3{ --zc-teal-a:#0a474c; --zc-teal-b:#0a474c; width:70px!important; }
html body .zc-main,
html body .crm-right{ margin-left:70px!important; }
html body.zc-fly-open .zc-main,
html body.zc-fly-open .crm-right{ margin-left:358px!important; }
html body #zcSidebar.zcv3 .zcv3-ic{ width:30px!important; min-width:30px!important; height:30px!important; border-radius:50%!important; color:#fbfbfb!important; }
html body #zcSidebar.zcv3 .zcv3-ic .zcv3-svg{ width:20px!important; height:20px!important; }
html body #zcSidebar.zcv3 .zcv3-item{ color:#fbfbfb!important; }
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic{ width:30px!important; min-width:30px!important; height:30px!important; }
@media(max-width:991px){
    html body .zc-main,html body .crm-right{ margin-left:0!important; }
    html body.zc-fly-open .zc-main,html body.zc-fly-open .crm-right{ margin-left:0!important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR RAIL — AiSensy DITTO (2026-08-18)
   Every value below was MEASURED from live app.aisensy.com via devtools,
   not eyeballed. Appended last so it wins over the rail block above.
     rail   70px · bg #0a474c (rgb 10,71,76) · no shadow
     row    54px tall · margin 2px 0 · padding 6px 0 4px
     icon   20x20 (in a 30px box so the active circle never shifts the row)
     label  10px / 400 / line-height 14.3px / #fbfbfb
     active 30px white circle behind the icon · NO shadow · NO left marker
     panel  offset 70px · width 281px · rows 40px/radius 5px · active #ebf5f3
   ══════════════════════════════════════════════════════════════════════════ */
html body #zcSidebar.zcv3{ width:70px!important; box-shadow:none!important; }
html body .zc-main,
html body .crm-right{ margin-left:70px!important; }

html body #zcSidebar.zcv3 .zcv3-logo{ height:54px!important; border-bottom:none!important; }
html body #zcSidebar.zcv3 .zcv3-logo img{ width:44px!important; height:44px!important; }
html body #zcSidebar.zcv3 .zcv3-nav{ padding:0!important; }

html body #zcSidebar.zcv3 .zcv3-item{
    padding:6px 0 4px!important; margin:2px 0!important; gap:0!important;
    min-height:54px!important; justify-content:flex-start!important; color:#fbfbfb!important;
}
html body #zcSidebar.zcv3 .zcv3-ic{
    width:30px!important; min-width:30px!important; height:30px!important;
    border-radius:50%!important; font-size:19px!important; background:none!important;
}
html body #zcSidebar.zcv3 .zcv3-ic .zcv3-svg{ width:20px!important; height:20px!important; display:block!important; stroke-width:1.5!important; }
html body #zcSidebar.zcv3 .zcv3-item:hover .zcv3-ic{ background:rgba(255,255,255,.10)!important; }
html body #zcSidebar.zcv3 .zcv3-lb{ font-size:10px!important; font-weight:400!important; line-height:14.3px!important; max-width:66px!important; }

html body #zcSidebar.zcv3 .zcv3-item.active{ margin:2px 0!important; box-shadow:none!important; }
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic{
    background:#fff!important; width:30px!important; min-width:30px!important; height:30px!important;
    border-radius:50%!important; box-shadow:none!important; color:#0a474c!important;
}
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic i,
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-ic .zcv3-svg{ color:#0a474c!important; stroke:#0a474c!important; }
html body #zcSidebar.zcv3 .zcv3-item.active .zcv3-lb{ color:#fff!important; font-weight:400!important; }
html body #zcSidebar.zcv3 .zcv3-item.active::before{ display:none!important; }

/* secondary panel — AiSensy: 281px white column, flush at the 70px rail */
html body .zcv3-fly{
    left:70px!important; min-width:281px!important; max-width:281px!important; width:281px!important;
    border-right:.67px solid #f0f0f0!important; box-shadow:none!important;
}
html body .zcv3-fly .zcv3-fly-h{
    font-size:20px!important; font-weight:400!important; text-transform:none!important; letter-spacing:0!important;
    color:#000!important; padding:16px 16px 12px!important; border-bottom:none!important;
}
html body .zcv3-fly .zcv3-fly-b{ padding:0 16px 16px!important; max-height:calc(100vh - 60px)!important; }
html body .zcv3-fly .zcv3-fly-b a{
    min-height:40px!important; padding:10px!important; border-radius:5px!important;
    font-size:14px!important; font-weight:400!important; gap:10px!important; margin:3px 0!important; color:#141414!important;
}
html body .zcv3-fly .zcv3-fly-b a:hover{ background:#f5f7f7!important; color:#0a474c!important; }
html body .zcv3-fly .zcv3-fly-b a.on{ background:#ebf5f3!important; color:#0a474c!important; font-weight:400!important; }
html body .zcv3-fly .zcv3-fly-b a.on span:not(.zcv3-pro){ color:#0a474c!important; }
/* content push = 70 rail + 281 panel */
html body.zc-fly-open .zc-main,
html body.zc-fly-open .crm-right{ margin-left:351px!important; }
@media(max-width:991px){
    html body .zc-main, html body .crm-right{ margin-left:0!important; }
    html body .zcv3-fly{ left:0!important; width:86%!important; min-width:0!important; max-width:320px!important; }
    html body.zc-fly-open .zc-main, html body.zc-fly-open .crm-right{ margin-left:0!important; }
}
/* search chip: same 30px circle as every other rail icon */
html body #zcSidebar.zcv3 .zcv3-search .zcv3-ic{ width:30px!important; min-width:30px!important; height:30px!important; border-radius:50%!important; padding:0!important; background:rgba(255,255,255,.14)!important; }


/* ════════════════════════════════════════════════════════════════════════
   AiSensy CONVERSATION LIST — pixel ditto (2026-08-18, live-inspected)
     row            h 60px · bg #fff · border-bottom .667px #F2F2F2 · flex/center
     row selected   bg #F5F5F5   ← plain grey, NOT mint
     avatar         40px circle · bg #F5EFDF (thread beige) · letter 20px/400,
                    colour varies per contact (mostly near-black, one accent)
     name           14px / 400 / #000
     preview        12px / 600 / #808080  (Roboto)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Row ── */
.zc-dashboard .chatbox-area__left .chat-list__item,
.zc-dashboard .chat-list__item{
    min-height:60px !important;
    padding:0 14px !important;
    gap:12px !important;
    background:#fff !important;
    border-bottom:.667px solid #F2F2F2 !important;
    border-left:none !important;
    align-items:center !important;
}
.zc-dashboard .chat-list__item:hover{ background:#FAFAFA !important; }
.zc-dashboard .chat-list__item.active{
    background:#F5F5F5 !important;
    border-left:none !important;
}

/* ── Avatar: cream disc, coloured initial (AiSensy inverts the usual scheme) ── */
.zc-dashboard .chat-list__item .contact_thumb,
.zc-dashboard .chatbox-area__left .chat-list__item .contact_thumb,
.zc-dashboard .chat-list__item .contact_thumb.bg--success,
.zc-dashboard .chat-list__item .contact_thumb.bg--info,
.zc-dashboard .chat-list__item .contact_thumb.bg--warning,
.zc-dashboard .chat-list__item .contact_thumb.bg--danger,
.zc-dashboard .chat-list__item .contact_thumb.bg--base{
    width:40px !important; height:40px !important; min-width:40px !important;
    background:#F5EFDF !important;
    border-radius:50% !important;
    font-size:20px !important; font-weight:400 !important;
    box-shadow:none !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
}
/* the initial's colour is what varies between contacts */
.zc-dashboard .chat-list__item .contact_thumb.bg--success{ color:#0a474c !important; }
.zc-dashboard .chat-list__item .contact_thumb.bg--info   { color:#1a1a1a !important; }
.zc-dashboard .chat-list__item .contact_thumb.bg--warning{ color:#c2410c !important; }
.zc-dashboard .chat-list__item .contact_thumb.bg--danger { color:#FF2A13 !important; }
.zc-dashboard .chat-list__item .contact_thumb.bg--base   { color:#1a1a1a !important; }
/* photo avatars still fill the disc */
.zc-dashboard .chat-list__item .contact_thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important; }

/* ── Name + preview ── */
.zc-dashboard .chat-list__content .name{
    font-size:14px !important; font-weight:400 !important; color:#000 !important; line-height:1.35 !important;
}
.zc-dashboard .chat-list__content .last-message,
.zc-dashboard .chat-list__content .last-message .text,
.zc-dashboard .chat-list__content .last-message .last-message-text{
    font-size:12px !important; font-weight:600 !important; color:#808080 !important; line-height:1.3 !important;
}
/* unread stays visually louder — AiSensy's sample had no unread rows to copy */
.zc-dashboard .chat-list__item:has(.unseen-message .number) .name{ font-weight:600 !important; }
.zc-dashboard .chat-list__item:has(.unseen-message .number) .last-message .last-message-text{ color:#3b4a54 !important; }

/* ── Right column (time + unread pill) kept subtle ── */
.zc-dashboard .chat-list__content .right .time{ font-size:11px !important; color:#9aa0a6 !important; font-weight:400 !important; }
.zc-dashboard .chat-list__item:has(.unseen-message .number) .time{ color:#1fa855 !important; font-weight:600 !important; }

/* The .open state lost its !important when the rail CSS was moved out of the
   blade, so the closed base (translateX(-14px)/hidden) kept winning. Restore it. */
html body .zcv3-fly.open{
    transform:translateX(0)!important; opacity:1!important;
    visibility:visible!important; pointer-events:auto!important; display:block!important;
}

/* AiSensy's conversation list has no time/date column — hide ours to match.
   (JS still updates .last-message-at on pusher events; it's just not shown.)
   The unread pill stays: it's a functional signal AiSensy's sample lacked. */
.zc-dashboard .chat-list__content .right .time,
.zc-dashboard .chat-list__content .right .last-message-at{ display:none !important; }
.zc-dashboard .chat-list__content .right{ justify-content:center !important; gap:0 !important; }
/* row content 20px + 10px padding x2 = exactly AiSensy's 40px */
html body .zcv3-fly .zcv3-fly-b a{ line-height:20px!important; }

/* ── AiSensy SEARCH BAR (live-inspected): pill bg #F0F0F0, radius 8px, h 34px,
      pad 2px 6px 2px 15px · input 14px #4A4A4A Roboto · magnifier on the RIGHT,
      15px, dark teal #0a474c (ZupiChat had a grey icon on the left). ── */
.zc-dashboard .chatbox-wrapper__header .search-form{
    background:#F0F0F0 !important;
    border-radius:8px !important;
    height:34px !important;
    padding:2px 6px 2px 15px !important;
    display:flex !important; align-items:center !important;
}
.zc-dashboard .chatbox-wrapper__header .search-form .form--control,
.zc-dashboard .chatbox-wrapper__header .search-form input{
    flex:1 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    height:30px !important;
    font-size:14px !important;
    color:#4A4A4A !important;
    box-shadow:none !important;
}
.zc-dashboard .chatbox-wrapper__header .search-form input:focus{
    background:transparent !important; border:none !important; box-shadow:none !important; outline:none !important;
}
.zc-dashboard .chatbox-wrapper__header .search-form input::placeholder{ color:#4A4A4A !important; opacity:1 !important; }
/* magnifier: right side, no absolute-left positioning */
.zc-dashboard .chatbox-wrapper__header .search-form__icon{
    position:static !important; left:auto !important; right:auto !important; transform:none !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:27px !important; flex-shrink:0 !important;
    color:#0a474c !important; font-size:15px !important;
}
.zc-dashboard .chatbox-wrapper__header .search-form__icon i{ color:#0a474c !important; font-size:15px !important; }

/* ══ Inbox = full-height Live Chat (AiSensy) — no app topbar above it ══
   AiSensy's Live Chat has no page-title/user bar at all: the whole viewport
   goes to the chat, and the account menu lives at the bottom of the rail
   (ours does too — .zcv3-avatar-btn). That 60px "Manage Inbox" bar was just
   eating chat height, so it's hidden on the inbox screen only. */
html body.dashboard .zc-main:has(.chatbox-area) .zc-topbar{ display:none!important; }
html body.dashboard .zc-dashboard:has(.chatbox-area) .chatbox-area{ height:100vh!important; }

/* ══ No app topbar anywhere — page title moved into the content (AiSensy) ══
   The 60px bar with the page name + bell/help/account dropdown is gone from
   master.blade.php. Everything it held is reachable from the rail: avatar →
   Profile/Logout, Billing → Subscription, Number → WhatsApp account, Help →
   tickets. Page title now renders at the top of .zc-content. */
html body .zc-content .zc-page-head{ margin:0 0 16px!important; }
html body .zc-content .zc-page-h1{
    font-size:20px!important; font-weight:400!important; color:#000!important;
    margin:0!important; letter-spacing:normal!important; line-height:1.235!important;
}
/* 52 screens already print their own title (.container-top__title) and the inbox
   is a full-bleed chat — don't double up on either. */
html body .zc-content:has(.container-top__title) .zc-page-head,
html body .zc-content:has(.chatbox-area) .zc-page-head{ display:none!important; }

/* the rail slides away under 992px, so keep a way to open it (was in the topbar) */
html body .zc-mobile-menu{
    position:fixed!important; top:10px!important; left:10px!important; z-index:1100!important;
    width:38px!important; height:38px!important; border:none!important; border-radius:10px!important;
    background:#0a474c!important; color:#fff!important; font-size:16px!important;
    align-items:center!important; justify-content:center!important;
    box-shadow:0 4px 12px rgba(11,44,48,.28)!important; cursor:pointer!important;
}
/* only below 992px — bootstrap's .d-lg-none hides it above, and this rule must
   NOT out-specify that, so the display lives inside the media query. */
@media(max-width:991px){ html body .zc-mobile-menu{ display:inline-flex!important; } }
@media(max-width:991px){
    /* clear the floating button on normal pages… */
    html body .zc-content:not(:has(.chatbox-area)){ padding-top:58px!important; }
    /* …and keep it off the inbox search field */
    html body .zc-dashboard .chatbox-area .chatbox-wrapper__header{ padding-left:56px!important; }
}

/* ── Filter chips in AiSensy's design language ───────────────────────────
   AiSensy has no chips row at all — it uses a filter_list icon that opens an
   "Add filter" query-builder. ZupiChat's 4 statuses are better served by
   one-click chips, so the chips stay; they now use AiSensy's own tokens:
   pill grey #F0F0F0 + text #4A4A4A + 8px radius (same as the search pill),
   selected = brand dark teal #0a474c. ── */
.zc-dashboard #chat-filters{ gap:6px !important; padding:0 !important; }
.zc-dashboard #chat-filters .nav-link{
    background:#F0F0F0 !important;
    color:#4A4A4A !important;
    border:none !important;
    border-radius:8px !important;
    padding:5px 12px !important;
    font-size:13px !important;
    font-weight:500 !important;
    line-height:1.45 !important;
    box-shadow:none !important;
    transition:background .15s, color .15s !important;
}
.zc-dashboard #chat-filters .nav-link:hover{ background:#E6E6E6 !important; color:#0a474c !important; }
.zc-dashboard #chat-filters .nav-link.active{
    background:#0a474c !important;
    color:#fff !important;
    box-shadow:none !important;
}


/* ══════════════════════════════════════════════════════════════════
   AiSensy shape/type match (2026-08-17) — measured live from
   app.aisensy.com dashboard:
     font    : system stack (AiSensy uses -apple-system/Roboto, not Inter)
     buttons : radius 6px
     cards   : radius 8px + shadow 0 0 11px #e6e6e6, no border
     inputs  : radius 8px, 14px text, ~33-38px tall
   Scoped to the app shell so marketing pages keep their own look.
   ══════════════════════════════════════════════════════════════════ */
body:has(.zc-sidebar),
body:has(.zc-sidebar) .zc-content,
body:has(.zc-sidebar) .zc-content button,
body:has(.zc-sidebar) .zc-content input,
body:has(.zc-sidebar) .zc-content select,
body:has(.zc-sidebar) .zc-content textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* buttons — 6px like AiSensy (was pill-ish) */
body:has(.zc-sidebar) .zc-content .btn,
body:has(.zc-sidebar) .zc-content .btn--base,
body:has(.zc-sidebar) .zc-content .btn--white,
body:has(.zc-sidebar) .zc-content .add-btn,
body:has(.zc-sidebar) .zc-content [class*="-btn"]:not(.zcv3-item):not(.chating-btn):not(.chat-media__btn),
body:has(.zc-sidebar) .zc-content [class*="-tab"] {
    border-radius: 6px !important;
}

/* cards / panels — 8px + AiSensy's soft grey shadow, no hard border */
body:has(.zc-sidebar) .zc-content .dashboard-container,
body:has(.zc-sidebar) .zc-content .custom--card,
body:has(.zc-sidebar) .zc-content .card,
body:has(.zc-sidebar) .zc-content .dashboard-widget,
body:has(.zc-sidebar) .zc-content [class*="-tablewrap"],
/* "-panel" is a substring match, so it also hit panel *children* like
   .zc-pay-panel__h and gave heading rows their own card shadow — the
   :not() keeps it to the panel itself */
body:has(.zc-sidebar) .zc-content [class*="-panel"]:not([class*="-panel__"]):not([class*="-panel-"]) {
    border-radius: 8px !important;
    box-shadow: 0 0 11px #e6e6e6 !important;
    border: none !important;
}

/* inputs — 8px, 14px text */
body:has(.zc-sidebar) .zc-content .form--control,
body:has(.zc-sidebar) .zc-content input[type="text"],
body:has(.zc-sidebar) .zc-content input[type="search"],
body:has(.zc-sidebar) .zc-content input[type="email"],
body:has(.zc-sidebar) .zc-content input[type="number"],
body:has(.zc-sidebar) .zc-content select,
body:has(.zc-sidebar) .zc-content textarea {
    border-radius: 8px !important;
    font-size: 14px !important;
}


/* ── AiSensy-style dashboard: status strip + account rail (2026-08-17) ── */
.zc-dstrip{display:flex;align-items:center;gap:34px;flex-wrap:wrap;background:#fff;border-radius:8px;
    box-shadow:0 0 11px #e6e6e6;padding:16px 22px;margin-bottom:18px;}
.zc-dstrip__item{display:flex;flex-direction:column;gap:5px;}
.zc-dstrip__label{font-size:11.5px;color:#6b7684;font-weight:500;letter-spacing:.01em;}
.zc-dstrip__value{font-size:15px;font-weight:700;color:#0f172a;}
.zc-dstrip__pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
    padding:3px 11px;border-radius:5px;width:fit-content;}
.zc-dstrip__pill.is-live{background:#e6f4ea;color:#116b3a;}
.zc-dstrip__pill.is-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#1aa053;}
.zc-dstrip__pill.is-off{background:#fdeaea;color:#a52222;}
.zc-dstrip__actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.zc-dstrip__actions .btn{font-size:13px;padding:7px 14px;}

/* main column: keep 4-up stat cards readable inside the narrower column */
@media (min-width:1400px){
    .zc-dash-main .row > [class*="col-xxl-3"]{flex:0 0 auto;width:33.3333%;}
}
.zc-dash-side{display:flex;flex-direction:column;gap:14px;}
.zc-side-card{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:16px 18px;}
.zc-side-card__head{font-size:11.5px;font-weight:700;color:#6b7684;text-transform:uppercase;
    letter-spacing:.07em;margin-bottom:11px;}
.zc-side-profile{display:flex;align-items:center;gap:11px;}
.zc-side-profile__avatar{width:40px;height:40px;border-radius:50%;background:#e9f2f2;color:#0a474c;
    display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.zc-side-profile__name{font-size:14.5px;font-weight:700;color:#0f172a;line-height:1.3;}
.zc-side-profile__num{font-size:12.5px;color:#6b7684;}
.zc-side-link{display:block;margin-top:10px;font-size:12.5px;color:#0a474c;word-break:break-all;text-decoration:none;}
.zc-side-link:hover{text-decoration:underline;}
.zc-side-plan{font-size:19px;font-weight:800;color:#0a474c;}
.zc-side-amount{font-size:19px;font-weight:800;color:#0f172a;}
.zc-side-muted{font-size:12px;color:#6b7684;margin-top:3px;}
@media (max-width:1399px){ .zc-dash-side{flex-direction:row;flex-wrap:wrap;} .zc-dash-side .zc-side-card{flex:1 1 260px;} }


/* ══════════════════════════════════════════════════════════════════
   AiSensy list-screen headers (2026-08-17)
   Several screens shipped a decorative "hero" banner above the table:
   gradient glass panel + coloured icon tile + an infinite sweeping
   sheen, plus a second copy of the page title. AiSensy uses a plain
   row — title left, primary button right. This flattens them all.
   ══════════════════════════════════════════════════════════════════ */
.zc-content .zc-at-head, .zc-content .zc-cl-head, .zc-content .zc-cmp-head,
.zc-content .zc-ct-head, .zc-content .zc-em-head, .zc-content .zc-fb-head,
.zc-content .zc-has-head, .zc-content .zc-ls-head, .zc-content .zc-pm-head,
.zc-content .zc-tg-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    overflow: visible !important;
    animation: none !important;
}
/* kill the sweeping highlight */
.zc-content .zc-at-head::after,  .zc-content .zc-cl-head::after,
.zc-content .zc-cmp-head::after, .zc-content .zc-ct-head::after,
.zc-content .zc-em-head::after,  .zc-content .zc-fb-head::after,
.zc-content .zc-has-head::after, .zc-content .zc-ls-head::after,
.zc-content .zc-pm-head::after,  .zc-content .zc-tg-head::after,
.zc-content [class*="-btn--primary"]::after {
    content: none !important;
    animation: none !important;
    background: none !important;
}
/* drop the coloured icon tile + the subtitle line */
.zc-content .zc-cl-ico, .zc-content .zc-cmp-ico, .zc-content .zc-ct-ico,
.zc-content .zc-em-ico, .zc-content .zc-fl-ico, .zc-content .zc-ls-ico,
.zc-content .zc-pm-ico, .zc-content .zc-sl-ico, .zc-content .zc-tg-ico {
    display: none !important;
}
.zc-content [class*="-head__l"] > p { display: none !important; }
/* one title, AiSensy size */
.zc-content [class*="-head__l"] > h5 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 !important;
}
/* these screens print their own title, so hide the layout's H1 copy */
.zc-content:has(.zc-at-head), .zc-content:has(.zc-cl-head), .zc-content:has(.zc-cmp-head),
.zc-content:has(.zc-ct-head), .zc-content:has(.zc-em-head), .zc-content:has(.zc-fb-head),
.zc-content:has(.zc-has-head), .zc-content:has(.zc-ls-head), .zc-content:has(.zc-pm-head),
.zc-content:has(.zc-tg-head) { }
.zc-content:has(.zc-at-head) .zc-page-head, .zc-content:has(.zc-cl-head) .zc-page-head,
.zc-content:has(.zc-cmp-head) .zc-page-head, .zc-content:has(.zc-ct-head) .zc-page-head,
.zc-content:has(.zc-em-head) .zc-page-head, .zc-content:has(.zc-fb-head) .zc-page-head,
.zc-content:has(.zc-has-head) .zc-page-head, .zc-content:has(.zc-ls-head) .zc-page-head,
.zc-content:has(.zc-pm-head) .zc-page-head, .zc-content:has(.zc-tg-head) .zc-page-head {
    display: none !important;
}


/* ── Remaining decorative leftovers (2026-08-17, pass 2) ──────────────
   .zc-addct-head is the last full hero banner (Add Contact) → flatten it
   like the others. The rest are legitimate UI (tab pills, stat pills,
   info banners, the premium hero) — those keep their shape, but lose the
   infinite sweeping "sheen" animation and the heavy glass blur, which is
   what makes them look unlike AiSensy.
   ─────────────────────────────────────────────────────────────────── */
.zc-content .zc-addct-head {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 12px !important; flex-wrap: wrap !important;
    background: none !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    padding: 0 !important; margin: 0 0 16px !important; animation: none !important;
}
.zc-content .zc-addct-head::after { content: none !important; animation: none !important; }
.zc-content .zc-addct-head > p { display: none !important; }
.zc-content:has(.zc-addct-head) .zc-page-head { display: none !important; }

/* stop every remaining sweeping highlight + glass blur */
.zc-content .at-info-banner::after, .zc-content .tc-info-banner::after,
.zc-content .zc-ai-alert::after,   .zc-content .zc-ilc-alert::after,
.zc-content .zc-ai-tab::after,     .zc-content .zc-at-tab::after,
.zc-content .zc-cl-tab::after,     .zc-content .zc-ct-tab::after,
.zc-content .zc-ls-tab::after,     .zc-content .zc-tg-tab::after,
.zc-content .zc-ct-stat::after,    .zc-content .zc-pm-stat::after,
.zc-content .zc-prem-hero::after,  .zc-content .zc-unlock-banner::after,
.zc-content .custom-plan::after,   .zc-content .sheen::after,
.zc-content .sheen {
    animation: none !important;
    content: none !important;
}
.zc-content .at-info-banner, .zc-content .tc-info-banner,
.zc-content .zc-ai-alert,   .zc-content .zc-ilc-alert,
.zc-content .zc-ct-stat,    .zc-content .zc-pm-stat,
.zc-content .zc-prem-hero,  .zc-content .zc-unlock-banner {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* Meta quality-rating pills (dashboard status strip) */
.zc-dstrip__pill.zc-q-green{background:#e6f4ea;color:#116b3a;}
.zc-dstrip__pill.zc-q-green::before{content:"";width:7px;height:7px;border-radius:50%;background:#1aa053;}
.zc-dstrip__pill.zc-q-yellow{background:#fdf4e3;color:#8a5a00;}
.zc-dstrip__pill.zc-q-red{background:#fdeaea;color:#a52222;}
.zc-dstrip__pill.zc-q-unknown{background:#eef1f4;color:#5b6672;}

/* PRO tag on a top-level rail item (paid module, still gated for customers) */
html body #zcSidebar.zcv3 .zcv3-item{position:relative;}
html body #zcSidebar.zcv3 .zcv3-pro-rail{
    position:absolute;top:4px;right:6px;font-style:normal;font-size:7.5px;font-weight:800;
    letter-spacing:.04em;line-height:1;padding:2px 4px;border-radius:3px;
    background:#fde68a;color:#7c4a03;
}

/* ── Ads Manager sections (Setup / Leads / Audiences / Events) ── */
.zc-ads-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.zc-ads-top__r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.zc-ads-credit{font-size:13px;color:#3b4a54;display:inline-flex;align-items:center;gap:6px;}
.zc-ads-banner{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:18px 20px;margin-bottom:16px;}
.zc-ads-banner__head h6{font-size:15px;font-weight:700;color:#0f172a;margin:0 0 4px;}
.zc-ads-banner__head p{font-size:13px;color:#6b7684;margin:0 0 14px;max-width:760px;}
.zc-ads-steps{display:flex;gap:28px;flex-wrap:wrap;}
.zc-ads-step{display:flex;align-items:center;gap:9px;}
.zc-ads-step__dot{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    background:#fde68a;color:#7c4a03;font-size:12px;font-weight:800;flex-shrink:0;}
.zc-ads-step.is-done .zc-ads-step__dot{background:#e6f4ea;color:#116b3a;}
.zc-ads-step__txt{display:flex;flex-direction:column;}
.zc-ads-step__k{font-size:10.5px;font-weight:700;color:#8a93a0;letter-spacing:.05em;text-transform:uppercase;}
.zc-ads-step__v{font-size:13px;font-weight:600;color:#0f172a;}
.zc-ads-rows{padding:0!important;}
.zc-ads-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
    padding:20px 22px;border-bottom:1px solid #eef2f6;}
.zc-ads-row:last-child{border-bottom:none;}
.zc-ads-row__l{flex:1 1 380px;}
.zc-ads-row__l h6{font-size:14.5px;font-weight:700;color:#0f172a;margin:0 0 3px;}
.zc-ads-row__l p{font-size:12.8px;color:#6b7684;margin:0;max-width:620px;}
.zc-ads-row__r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 1 460px;}
.zc-ads-row__r .form--control{max-width:210px;}
.zc-ads-note{margin-top:8px!important;font-size:12px!important;color:#7c4a03!important;background:#fffbeb;
    border:1px solid #fde68a;border-radius:8px;padding:8px 10px;}
.zc-ads-ok{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#116b3a;}
.zc-ads-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#3b4a54;}
.zc-ads-num{font-size:14px;font-weight:700;color:#0f172a;}
.zc-ads-pill{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:5px;}
.zc-ads-pill.ok{background:#e6f4ea;color:#116b3a;}
.zc-ads-pill.warn{background:#fdeaea;color:#a52222;}
.zc-ads-muted{font-size:12.5px;color:#8a93a0;}
.zc-ads-hint{font-size:12.5px;color:#6b7684;display:flex;align-items:center;gap:6px;margin-bottom:12px;}
.zc-ads-kpi{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:16px 18px;display:flex;flex-direction:column;gap:4px;}
.zc-ads-kpi span{font-size:11.5px;font-weight:700;color:#6b7684;text-transform:uppercase;letter-spacing:.06em;}
.zc-ads-kpi strong{font-size:22px;font-weight:800;color:#0f172a;}

/* Ad composer */
.zc-ads-sec{font-size:12px;font-weight:800;color:#6b7684;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;}
.zc-ads-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:20px;}
.zc-ads-warn{background:#fffbeb;border:1px solid #fde68a;color:#7c4a03;border-radius:8px;padding:11px 14px;
    font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.zc-ads-warn a{color:#7c4a03;font-weight:700;text-decoration:underline;}
.zc-adprev{border:1px solid #eef2f6;border-radius:10px;overflow:hidden;}
.zc-adprev__top{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;}
.zc-adprev__page{font-size:13px;font-weight:700;color:#0f172a;}
.zc-adprev__spon{font-size:11px;color:#8a93a0;}
.zc-adprev__body{font-size:13px;color:#3b4a54;padding:0 12px 10px;margin:0;}
.zc-adprev__img{height:150px;background:#eef2f6;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:34px;}
.zc-adprev__img img{width:100%;height:100%;object-fit:cover;}
.zc-adprev__foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 12px;background:#f8fafb;}
.zc-adprev__foot span{font-size:12.5px;color:#3b4a54;}
.zc-adprev__cta{display:inline-flex;align-items:center;gap:5px;color:#0a474c;font-weight:700;}

/* ── Ad composer, self-contained (does not rely on .dashboard-container padding) ── */
.zc-adc{max-width:1180px;}
.zc-adc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.zc-adc-fb{display:flex;align-items:center;gap:14px;background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;
    padding:14px 18px;margin-bottom:16px;border-left:3px solid #1877f2;}
.zc-adc-fb.is-on{border-left-color:#1aa053;}
.zc-adc-fb__ico{width:40px;height:40px;border-radius:10px;background:#eaf2fe;color:#1877f2;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:24px;}
.zc-adc-fb.is-on .zc-adc-fb__ico{background:#e6f4ea;color:#1aa053;}
.zc-adc-fb__txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:200px;}
.zc-adc-fb__txt strong{font-size:14.5px;color:#0f172a;}
.zc-adc-fb__txt span{font-size:12.5px;color:#6b7684;}
.zc-adc-fb__act{display:flex;gap:8px;flex-wrap:wrap;}
.zc-adc-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;}
@media(max-width:1099px){.zc-adc-grid{grid-template-columns:minmax(0,1fr);} }
.zc-adc-side{position:sticky;top:16px;}
.zc-adc-card{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;margin-bottom:16px;overflow:hidden;}
.zc-adc-card__h{font-size:12px;font-weight:800;color:#6b7684;text-transform:uppercase;letter-spacing:.06em;
    padding:14px 18px;border-bottom:1px solid #eef2f6;background:#fbfcfd;}
.zc-adc-card__b{padding:18px;}
.zc-adc-f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.zc-adc-f:last-child{margin-bottom:0;}
.zc-adc-f label{font-size:12.5px;font-weight:600;color:#3b4a54;}
.zc-adc-f label i{color:#dc2626;font-style:normal;}
.zc-adc-f input,.zc-adc-f select,.zc-adc-f textarea{
    width:100%;border:1px solid #dfe5ea;border-radius:8px;padding:9px 12px;font-size:14px;color:#0f172a;background:#fff;}
.zc-adc-f input:focus,.zc-adc-f select:focus,.zc-adc-f textarea:focus{outline:none;border-color:#0a474c;box-shadow:0 0 0 3px rgba(10,71,76,.08);}
.zc-adc-f textarea{resize:vertical;}
.zc-adc-f2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.zc-adc-f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px;}
@media(max-width:700px){.zc-adc-f2,.zc-adc-f3{grid-template-columns:1fr;} }
.zc-adc-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:22px;}
.zc-adc-note{font-size:12px;color:#6b7684;margin:10px 0 0;}

/* ══════════════════════════════════════════════════════════════════
   New Template Message — matched to AiSensy's create-template screen
   (measured live: label 16px/400, helper 12px #6e6e6e/17.16px,
    submit #0a474c r6 14px/500, chips 1px rgba(0,0,0,.23) r6 h36,
    PREMIUM pill #6b4eff r12 12px/600)
   ══════════════════════════════════════════════════════════════════ */
.zc-content .tpl{max-width:none;}
.zc-content .tpl-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding-bottom:14px;border-bottom:1px solid #eef2f6;margin-bottom:22px;}
.zc-content .tpl-top__l{display:flex;align-items:center;gap:10px;}
.zc-content .tpl-back{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    color:#3b4a54;font-size:18px;text-decoration:none;}
.zc-content .tpl-back:hover{background:#eef2f6;}
.zc-content .tpl-top__r{display:flex;align-items:center;gap:10px;}
.zc-content .tpl-acct-label{font-size:12px;color:#6e6e6e;}
.zc-content .tpl-top__r .form--control,.zc-content .tpl-top__r .select2-container{min-width:230px;}

.zc-content .tpl-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;}
@media(max-width:1099px){.zc-content .tpl-grid{grid-template-columns:minmax(0,1fr);} }

.zc-content .tpl-field{margin-bottom:26px;}
.zc-content .tpl-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;}
@media(max-width:760px){.zc-content .tpl-row2{grid-template-columns:1fr;} }
.zc-content .tpl-label{display:block;font-size:16px;font-weight:400;color:#000;margin:0 0 6px;}
.zc-content .tpl-help{font-size:12px;line-height:17.2px;color:#6e6e6e;margin:0 0 10px;}
.zc-content .tpl-opt{color:#9aa5b1;font-size:13px;margin-left:4px;}
.zc-content .tpl-prem{display:inline-block;background:#6b4eff;color:#fff;font-size:12px;font-weight:600;
    border-radius:12px;padding:2px 10px;margin-left:8px;vertical-align:middle;}

/* inputs — AiSensy uses a quiet filled row, not a boxed control */
.zc-content .tpl-field .form--control,
.zc-content .tpl-field textarea,
.zc-content .tpl-field select{
    width:100%!important;background:#f7f8f9!important;border:none!important;border-bottom:1px solid #dfe3e8!important;
    border-radius:4px 4px 0 0!important;font-size:14px!important;color:#111!important;padding:10px 12px!important;
    box-shadow:none!important;}
.zc-content .tpl-field textarea{min-height:96px!important;resize:vertical;}
.zc-content .tpl-field .form--control:focus,
.zc-content .tpl-field textarea:focus,
.zc-content .tpl-field select:focus{border-bottom-color:#0a474c!important;background:#f2f5f5!important;}
.zc-content .tpl-count{text-align:right;font-size:12px;color:#8a93a0;margin-top:6px;}

/* TTL row */
.zc-content .tpl-ttl{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.zc-content .tpl-switch{width:34px;height:18px;border-radius:20px;background:#d7dde3;position:relative;flex-shrink:0;margin-top:4px;
    cursor:not-allowed;opacity:.75;}
.zc-content .tpl-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;}

/* interactive actions */
.zc-content .tpl-radios{display:flex;gap:26px;flex-wrap:wrap;margin:4px 0 16px;}
.zc-content .tpl-radio{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#3b4a54;cursor:pointer;}
.zc-content .tpl-radio input{accent-color:#0a474c;width:16px;height:16px;}
.zc-content .tpl-chips{display:flex;gap:10px;flex-wrap:wrap;}
.zc-content .tpl-chips.is-empty{display:none;}
.zc-content .tpl-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:5px 15px;font-size:14px;
    color:#4a4a4a;background:transparent;border:1px solid rgba(0,0,0,.23);border-radius:6px;}
.zc-content .tpl-chip:hover{background:#f5f7f8;border-color:rgba(0,0,0,.4);}
.zc-content .tpl-chip b{font-size:12px;font-weight:700;background:#eef1f4;color:#6e6e6e;border-radius:10px;padding:1px 7px;}

.zc-content .tpl-submit{background:#0a474c;color:#fff;border:none;border-radius:6px;padding:8px 16px;height:41px;
    font-size:14px;font-weight:500;min-width:79px;}
.zc-content .tpl-submit:hover{background:#083c40;color:#fff;}

/* preview column */
.zc-content .tpl-prev-title{font-size:16px;color:#000;margin-bottom:6px;}
.zc-content .tpl-prev-wrap{position:relative;padding-left:18px;margin-top:18px;}
.zc-content .tpl-prev-wa{position:absolute;left:-10px;top:-14px;width:30px;height:30px;border-radius:50%;background:#25d366;
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;}
.zc-content .tpl-prev-card{background:#fff;border:1px solid #e6e9ec;border-radius:10px;padding:12px;
    box-shadow:0 1px 4px rgba(15,23,42,.06);}
.zc-content .tpl-prev-card .card-item__thumb{border-radius:8px;overflow:hidden;background:#f1f4f6;}
.zc-content .tpl-prev-card .card-item__thumb img{width:100%;height:auto;display:block;}
.zc-content .tpl-prev-card .card-item__title{font-size:14px;font-weight:700;color:#111;margin:10px 0 4px;}
.zc-content .tpl-prev-card .card-item__desc{font-size:13.5px;color:#3b4a54;margin:0 0 6px;white-space:pre-wrap;}
.zc-content .tpl-prev-card .footer_text{font-size:12px;color:#8a93a0;}
.zc-content .tpl-disc{font-size:11.5px;line-height:1.5;color:#9aa5b1;margin-top:14px;}

/* ── Billing & Usage (AiSensy-style) ─────────────────────────────── */
.zc-bill{display:flex;flex-direction:column;gap:16px;max-width:1240px;}
.zc-bill-lbl{font-size:11.5px;font-weight:700;color:#6b7684;text-transform:uppercase;letter-spacing:.06em;display:block;}
.zc-bill-card{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:18px 20px;}
.zc-bill-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.zc-bill-card__head.bt{border-top:1px solid #eef2f6;margin-top:16px;padding-top:14px;}
.zc-bill-card__act{display:flex;gap:6px;flex-wrap:wrap;}

.zc-bill-launch{display:grid;grid-template-columns:280px minmax(0,1fr);gap:0;background:#fff;border-radius:8px;
    box-shadow:0 0 11px #e6e6e6;overflow:hidden;}
.zc-bill-guide{background:#eef6f3;padding:20px;display:flex;flex-direction:column;gap:7px;}
.zc-bill-guide__k{font-size:10.5px;font-weight:800;color:#4d6d67;text-transform:uppercase;letter-spacing:.07em;}
.zc-bill-guide h6{font-size:18px;font-weight:800;color:#0f172a;margin:0;}
.zc-bill-guide p{font-size:13px;color:#4d6d67;margin:0;}
.zc-bill-guide a{font-size:13px;font-weight:600;color:#0a474c;text-decoration:none;margin-top:4px;}
.zc-bill-guide a:hover{text-decoration:underline;}
.zc-bill-actions{padding:20px 22px;}
.zc-bill-actions__h{font-size:17px;font-weight:800;color:#0f172a;margin:0 0 14px;}
.zc-bill-actions__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.zc-bill-act{display:flex;gap:12px;align-items:flex-start;border:1px solid #eef2f6;border-radius:8px;
    padding:14px 16px;text-decoration:none!important;transition:border-color .15s,box-shadow .15s;}
.zc-bill-act:hover{border-color:#c9dbd8;box-shadow:0 2px 10px rgba(10,71,76,.07);}
.zc-bill-act__i{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    font-size:19px;flex-shrink:0;}
.zc-bill-act__i.i-green{background:#e6f4ea;color:#116b3a;}
.zc-bill-act__i.i-blue{background:#e8f1fe;color:#1877f2;}
.zc-bill-act__i.i-violet{background:#efe9fd;color:#6d3fd4;}
.zc-bill-act__i.i-amber{background:#fff4e0;color:#a86b00;}
.zc-bill-act__t{display:flex;flex-direction:column;gap:2px;}
.zc-bill-act__t strong{font-size:14px;color:#0f172a;font-weight:700;}
.zc-bill-act__t em{font-size:12.5px;color:#6b7684;font-style:normal;}

.zc-bill-plan{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:20px 22px;
    display:grid;grid-template-columns:220px minmax(0,1fr) 160px;align-items:center;gap:16px;}
.zc-bill-plan__name{display:block;font-size:22px;font-weight:800;color:#0f172a;margin-top:4px;}
.zc-bill-plan__mid{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;}
.zc-bill-plan__mid p{font-size:13px;color:#6b7684;margin:0;}
.zc-bill-renew{font-size:12.5px;color:#8a93a0;text-align:right;}

.zc-bill-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.zc-bill-meter{height:5px;border-radius:4px;background:#e9eef0;margin:10px 0 5px;overflow:hidden;}
.zc-bill-meter span{display:block;height:100%;width:100%;background:#0a474c;border-radius:4px;}
.zc-bill-meter__ends{display:flex;justify-content:space-between;font-size:11.5px;color:#8a93a0;}
.zc-bill-lbl.mt{margin-top:18px;}
.zc-bill-credit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;}
.zc-bill-credit strong{font-size:23px;font-weight:800;color:#0f172a;}
.zc-bill-pm{font-size:13px;color:#3b4a54;margin:10px 0 0;}
.zc-bill-pm--none{color:#8a93a0;}

.zc-bill-usage__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.zc-bill-usage__h{font-size:16px;font-weight:800;color:#0a474c;margin:0;}
.zc-bill-range{display:flex;gap:6px;flex-wrap:wrap;}
.zc-bill-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:#eef2f6;
    border:1px solid #eef2f6;border-radius:8px;overflow:hidden;margin-bottom:18px;}
.zc-bill-stat{background:#fff;padding:13px 15px;display:flex;flex-direction:column;gap:3px;}
.zc-bill-stat span{font-size:11.5px;color:#6b7684;font-weight:600;}
.zc-bill-stat strong{font-size:19px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums;}

.zc-bill-chart svg{width:100%;height:220px;display:block;}
.zc-bill-grid{stroke:#eef2f6;stroke-width:1;}
.zc-bill-area{stroke:none;}
.zc-bill-area.a-sent{fill:rgba(10,71,76,.14);}
.zc-bill-area.a-recv{fill:rgba(232,152,58,.16);}
.zc-bill-line{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;}
.zc-bill-line.l-sent{stroke:#0a474c;}
.zc-bill-line.l-recv{stroke:#e8983a;}
.zc-bill-xaxis{display:flex;justify-content:space-between;font-size:11.5px;color:#8a93a0;margin-top:6px;}
.zc-bill-legend{display:flex;align-items:center;gap:16px;margin-top:10px;font-size:12.5px;color:#4d6d67;flex-wrap:wrap;}
.zc-bill-legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;}
.zc-bill-legend .d-sent{background:#0a474c;}
.zc-bill-legend .d-recv{background:#e8983a;}
.zc-bill-peak{margin-left:auto;color:#8a93a0;}

.zc-bill-danger__h{display:block;font-size:14px;font-weight:800;color:#c0392b;margin-bottom:8px;}
.zc-bill-danger__box{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.zc-bill-danger__box strong{font-size:14.5px;color:#0f172a;}
.zc-bill-danger__box p{font-size:12.5px;color:#6b7684;margin:2px 0 0;}
.zc-bill-danger__btn{color:#c0392b!important;border-color:#f0c8c2!important;}

@media(max-width:1100px){
    .zc-bill-launch{grid-template-columns:1fr;}
    .zc-bill-plan{grid-template-columns:1fr;text-align:left;}
    .zc-bill-plan__mid{align-items:flex-start;text-align:left;}
    .zc-bill-renew{text-align:left;}
    .zc-bill-two{grid-template-columns:1fr;}
}
@media(max-width:700px){ .zc-bill-actions__grid{grid-template-columns:1fr;} }


/* ══════════════════════════════════════════════════════════════════
   Team Members (AiSensy-style) — user/agent/list.blade.php
   Quick guide + launch shortcuts + quota bar + member cards.
   Self-contained: does not depend on .dashboard-container padding.
   ══════════════════════════════════════════════════════════════════ */
.zc-tm { max-width: 1240px; }
.zc-tm-head { margin-bottom: 16px; }

/* top: guide + launch */
.zc-tm-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 991px) { .zc-tm-top { grid-template-columns: minmax(0, 1fr); } }

.zc-tm-guide {
    background: #eaf6f0; border: 1px solid #d3e9de; border-radius: 8px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.zc-tm-guide__k { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #4a7a68; }
.zc-tm-guide h6 { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0; }
.zc-tm-guide p { font-size: 13px; color: #4a6a5f; margin: 0; line-height: 1.55; }
.zc-tm-guide a { font-size: 13px; font-weight: 700; color: #0a474c; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.zc-tm-guide a:hover { text-decoration: underline; }

.zc-tm-launch { background: #fff; border-radius: 8px; box-shadow: 0 0 11px #e6e6e6; padding: 18px 20px; }
.zc-tm-launch__h { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 14px; }
.zc-tm-launch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 767px) { .zc-tm-launch__grid { grid-template-columns: 1fr; } }

.zc-tm-card {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border: 1px solid #eef2f6; border-radius: 8px; background: #fff; text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.zc-tm-card:hover { border-color: #cfe3e1; box-shadow: 0 4px 14px rgba(10, 71, 76, .08); transform: translateY(-1px); }
.zc-tm-card__ic {
    width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.zc-tm-card__ic.ic-send { background: #e7f3ee; color: #0a7d5a; }
.zc-tm-card__ic.ic-ads  { background: #eaf1fe; color: #1d5fd0; }
.zc-tm-card__ic.ic-flow { background: #fdf0e7; color: #b7601c; }
.zc-tm-card__ic.ic-ai   { background: #f0ecfd; color: #6338c4; }
.zc-tm-card__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zc-tm-card__t strong { font-size: 14px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.zc-tm-card__t span { font-size: 12.5px; color: #6b7684; line-height: 1.5; }
.zc-tm-badge { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.zc-tm-badge.new { background: #e6f4ea; color: #116b3a; }
.zc-tm-badge.ai  { background: #f0ecfd; color: #6338c4; }

/* quota */
.zc-tm-quota {
    background: #fff; border-radius: 8px; box-shadow: 0 0 11px #e6e6e6; padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.zc-tm-quota__l { display: flex; align-items: center; gap: 14px; }
.zc-tm-quota__ic {
    width: 46px; height: 46px; border-radius: 12px; background: #e9f2f2; color: #0a474c;
    display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
}
.zc-tm-quota__k { display: block; font-size: 12px; font-weight: 700; color: #6b7684; text-transform: uppercase; letter-spacing: .06em; }
.zc-tm-quota__v { display: block; font-size: 20px; font-weight: 800; color: #0f172a; }
.zc-tm-quota__v em { font-style: normal; font-size: 12.5px; font-weight: 500; color: #6b7684; margin-left: 4px; }
.zc-tm-bar { display: block; width: 190px; height: 5px; border-radius: 3px; background: #e9edf1; margin-top: 6px; overflow: hidden; }
.zc-tm-bar i { display: block; height: 100%; background: #0a474c; }
.zc-tm-quota__r { display: flex; gap: 8px; flex-wrap: wrap; }

/* toolbar */
.zc-tm-bar2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.zc-tm-bar2__k { font-size: 13px; color: #6b7684; }
.zc-tm-bar2__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zc-tm-search { position: relative; }
.zc-tm-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #8a93a0; font-size: 15px; }
.zc-tm-search input {
    border: 1px solid #dfe5ea; border-radius: 8px; padding: 8px 12px 8px 33px; font-size: 13.5px;
    min-width: 240px; color: #0f172a; background: #fff;
}
.zc-tm-search input:focus { outline: none; border-color: #0a474c; box-shadow: 0 0 0 3px rgba(10, 71, 76, .08); }

/* member cards */
.zc-tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.zc-tm-member { background: #fff; border-radius: 8px; box-shadow: 0 0 11px #e6e6e6; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.zc-tm-member.is-owner { border: 1px solid #d3e9de; }
.zc-tm-member__top { display: flex; align-items: center; gap: 11px; }
.zc-tm-av {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
    display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: #fff;
}
.zc-tm-av.av-1 { background: #0a7d5a; } .zc-tm-av.av-2 { background: #1d5fd0; }
.zc-tm-av.av-3 { background: #b7601c; } .zc-tm-av.av-4 { background: #6338c4; }
.zc-tm-av.av-5 { background: #c0392b; }
.zc-tm-member__name { font-size: 15px; font-weight: 700; color: #0f172a; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-tm-member__act { display: flex; gap: 4px; }
.zc-tm-member__act a {
    width: 30px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    color: #6b7684; background: #f4f7f8; text-decoration: none; font-size: 15px;
}
.zc-tm-member__act a:hover { background: #e9f2f2; color: #0a474c; }
.zc-tm-member__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0; }
.zc-tm-member__meta div { min-width: 0; }
.zc-tm-member__meta dt { font-size: 11px; color: #8a93a0; margin-bottom: 2px; }
.zc-tm-member__meta dd { margin: 0; font-size: 13px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-tm-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.zc-tm-dot.on { background: #1aa053; } .zc-tm-dot.off { background: #c0392b; }
.zc-tm-member__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border-top: 1px solid #eef2f6; padding-top: 11px; margin-top: auto; }
.zc-tm-role { font-size: 12.5px; font-weight: 600; color: #6b7684; }
.zc-tm-role.owner { color: #0a474c; font-weight: 700; }
.zc-tm-del { background: none; border: none; color: #c0392b; font-size: 16px; cursor: pointer; padding: 4px; border-radius: 6px; }
.zc-tm-del:hover { background: #fdecea; }

.zc-tm-empty {
    grid-column: 1 / -1; background: #fff; border-radius: 8px; box-shadow: 0 0 11px #e6e6e6;
    padding: 42px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.zc-tm-empty i { font-size: 40px; color: #b9c6c4; }
.zc-tm-empty strong { font-size: 16px; color: #0f172a; }
.zc-tm-empty span { font-size: 13.5px; color: #6b7684; max-width: 420px; margin-bottom: 6px; }

/* ══════════════════════════════════════════════════════════════════
   Campaigns — matched to AiSensy (Launch btn #0a474c r6 14px/500,
   active tab #0a474c with 2px underline, quiet meta strip in header)
   ══════════════════════════════════════════════════════════════════ */
.zc-content .cmp{max-width:none;}
.zc-content .cmp-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    padding-bottom:14px;border-bottom:1px solid #eef2f6;margin-bottom:20px;}
.zc-content .cmp-meta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.zc-content .cmp-meta__i{display:flex;align-items:center;gap:8px;}
.zc-content .cmp-meta__k{font-size:12.5px;color:#6e6e6e;}
.zc-content .cmp-meta__v{font-size:14px;font-weight:600;color:#0f172a;}
.zc-content .cmp-pill{font-size:12px;font-weight:700;border-radius:20px;padding:3px 12px;}
.zc-content .cmp-pill--green{background:#e6f4ea;color:#116b3a;}
.zc-content .cmp-pill--yellow{background:#fdf4e3;color:#8a5a00;}
.zc-content .cmp-pill--red{background:#fdeaea;color:#a52222;}
.zc-content .cmp-launch{display:inline-flex;align-items:center;gap:7px;background:#0a474c;color:#fff!important;
    border-radius:6px;padding:6px 16px;height:37px;font-size:14px;font-weight:500;text-decoration:none!important;}
.zc-content .cmp-launch:hover{background:#083c40;}

.zc-content .cmp-hero{display:grid;grid-template-columns:270px minmax(0,1fr);gap:0;background:#fff;border-radius:10px;
    box-shadow:0 0 11px #e6e6e6;overflow:hidden;margin-bottom:22px;}
@media(max-width:900px){.zc-content .cmp-hero{grid-template-columns:1fr;} }
.zc-content .cmp-guide{background:#f2f9f5;padding:20px;border-right:1px solid #eaf2ee;display:flex;flex-direction:column;gap:6px;}
.zc-content .cmp-guide__k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3f7d63;}
.zc-content .cmp-guide h6{font-size:16px;font-weight:700;color:#123f31;margin:2px 0 0;}
.zc-content .cmp-guide p{font-size:12.5px;color:#5b6b66;margin:0;}
.zc-content .cmp-guide a{font-size:12.5px;font-weight:600;color:#0a474c;margin-top:6px;text-decoration:none;}
.zc-content .cmp-guide a:hover{text-decoration:underline;}
.zc-content .cmp-launchers{padding:20px 22px;}
.zc-content .cmp-launchers__h{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:14px;}
.zc-content .cmp-launch-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:1100px){.zc-content .cmp-launch-grid{grid-template-columns:1fr;} }
.zc-content .cmp-lcard{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:2px 12px;
    border:1px solid #eef2f6;border-radius:8px;padding:14px;text-decoration:none!important;transition:border-color .15s,background .15s;}
.zc-content .cmp-lcard:hover{border-color:#cfe0dc;background:#fbfdfc;}
.zc-content .cmp-lcard__ic{grid-row:1/3;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
    justify-content:center;font-size:18px;}
.zc-content .cmp-lcard__ic--violet{background:#f0edff;color:#6b4eff;}
.zc-content .cmp-lcard__ic--green{background:#e7f6ee;color:#0a8f63;}
.zc-content .cmp-lcard__ic--blue{background:#eaf2fe;color:#1877f2;}
.zc-content .cmp-lcard__ic--amber{background:#fff5e5;color:#b26a00;}
.zc-content .cmp-lcard__t{font-size:14px;font-weight:600;color:#0f172a;display:flex;align-items:center;gap:7px;}
.zc-content .cmp-lcard__d{font-size:12.5px;color:#6e7c86;}
.zc-content .cmp-badge{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.04em;border-radius:4px;padding:2px 5px;}
.zc-content .cmp-badge--ai{background:#f0edff;color:#6b4eff;}
.zc-content .cmp-badge--new{background:#e7f6ee;color:#0a8f63;}

.zc-content .cmp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.zc-content .cmp-search{position:relative;flex:1 1 320px;max-width:560px;margin:0;}
.zc-content .cmp-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#8a93a0;font-size:15px;}
.zc-content .cmp-search input{width:100%;border:1px solid #e6e9ec;background:#f7f8f9;border-radius:8px;
    padding:10px 14px 10px 38px;font-size:14px;color:#0f172a;}
.zc-content .cmp-search input:focus{outline:none;border-color:#0a474c;background:#fff;}
.zc-content .cmp-refresh{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:#3b4a54;text-decoration:none;}
.zc-content .cmp-refresh:hover{color:#0a474c;}

.zc-content .cmp-tabsrow{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
    border-bottom:2px solid #f0f0f0;margin:10px 0 16px;}
.zc-content .cmp-tabs{display:flex;gap:6px;}
.zc-content .cmp-tab{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;font-size:14px;font-weight:500;
    color:#6e7c86;text-decoration:none!important;border-bottom:2px solid transparent;margin-bottom:-2px;}
.zc-content .cmp-tab:hover{color:#0a474c;}
.zc-content .cmp-tab.active{color:#0a474c;border-bottom-color:#0a474c;}
.zc-content .cmp-tab b{font-size:11.5px;font-weight:700;background:#eef1f4;color:#6e6e6e;border-radius:10px;padding:1px 7px;}
.zc-content .cmp-tab.active b{background:#e6f0ef;color:#0a474c;}
.zc-content .cmp-reports{display:flex;gap:8px;padding-bottom:8px;}
.zc-content .cmp-report{display:inline-flex;align-items:center;gap:6px;background:#0a474c;color:#fff!important;
    border-radius:6px;padding:7px 13px;font-size:12.5px;font-weight:500;text-decoration:none!important;}
.zc-content .cmp-report:hover{background:#083c40;}
.zc-content .cmp-report--sm{background:transparent;color:#0a474c!important;border:1px solid #d8e2e0;padding:5px 11px;}
.zc-content .cmp-report--sm:hover{background:#f2f7f6;}

.zc-content .cmp-tablewrap{background:#fff;border-radius:10px;box-shadow:0 0 11px #e6e6e6;overflow:hidden;}
.zc-content .cmp-name{font-size:14px;font-weight:600;color:#0f172a;}
.zc-content .cmp-sub{font-size:12px;color:#8a93a0;}
.zc-content .cmp-num{font-variant-numeric:tabular-nums;font-weight:600;}

/* ── Billing ditto pass: filters, metric grid, multi-series chart, cancel ── */
.zc-bill-chip{font-size:8.5px;font-weight:800;letter-spacing:.05em;background:#e6f4ea;color:#116b3a;
    padding:2px 5px;border-radius:3px;margin-left:5px;vertical-align:middle;}
.zc-bill-chip.chip-ai{background:#efe9fd;color:#6d3fd4;}
.zc-bill-plan__name small{font-size:12.5px;font-weight:600;color:#8a93a0;margin-left:4px;}
.zc-bill-meter{position:relative;}
.zc-bill-meter__inf{position:absolute;right:-2px;top:-9px;font-style:normal;font-size:15px;color:#8a93a0;
    background:#fff;padding:0 3px;line-height:1;}
.zc-bill-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#3b4a54;
    border:1px solid #dfe5ea;border-radius:6px;padding:6px 10px;background:#fff;}

.zc-bill-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 18px;}
.zc-bill-sel{border:1px solid #dfe5ea;border-radius:8px;padding:8px 12px;font-size:13.5px;color:#0f172a;
    background:#fff;min-width:150px;}
.zc-bill-sel--right{margin-left:auto;min-width:120px;}
.zc-bill-date{display:inline-flex;align-items:center;gap:7px;border:1px solid #dfe5ea;border-radius:8px;
    padding:7px 11px;background:#fff;color:#6b7684;font-size:13.5px;}
.zc-bill-date input{border:none;outline:none;font-size:13.5px;color:#0f172a;background:none;font-family:inherit;}

.zc-bill-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 14px;margin-bottom:26px;}
.zc-bill-metric{display:flex;flex-direction:column;gap:3px;}
.zc-bill-metric span{font-size:11.5px;color:#6b7684;font-weight:600;}
.zc-bill-metric strong{font-size:14.5px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums;}
@media(max-width:1100px){.zc-bill-metrics{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:640px){.zc-bill-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}}

.zc-bill-chart svg{width:100%;height:260px;display:block;overflow:visible;}
.zc-bill-ytick{font-size:11px;fill:#8a93a0;font-family:inherit;}
.zc-bill-a{stroke:none;}
.zc-bill-a.a-sc{fill:rgba(124,179,66,.28);}
.zc-bill-a.a-uc{fill:rgba(251,140,0,.26);}
.zc-bill-a.a-mc{fill:rgba(142,99,201,.20);}
.zc-bill-l{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;}
.zc-bill-l.l-sc{stroke:#7cb342;}
.zc-bill-l.l-uc{stroke:#fb8c00;}
.zc-bill-l.l-mc{stroke:#8e63c9;}
.zc-bill-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:12px;color:#4d6d67;}
.zc-bill-legend span{display:inline-flex;align-items:center;}
.zc-bill-legend .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;}

.zc-bill-cancel{text-align:center;padding:22px;}
.zc-bill-cancel h6{font-size:16px;font-weight:700;color:#0a474c;margin:0 0 14px;text-align:left;}
.zc-bill-cancel p{font-size:13px;color:#6b7684;margin:0 0 12px;}
.zc-bill-cancel__btn{display:inline-block;border:1px solid #e8b4ad;color:#c0392b;background:#fff;
    border-radius:8px;padding:9px 26px;font-size:13.5px;font-weight:600;text-decoration:none;}
.zc-bill-cancel__btn:hover{background:#fdf3f2;color:#a5281b;}

/* Billing: fill the content area like AiSensy (was capped at 1240px), and keep
   the billing-address card on the left half exactly as their layout does. */
.zc-bill{max-width:none!important;}
.zc-bill-addr{width:calc(50% - 8px);}
@media(max-width:1100px){ .zc-bill-addr{width:100%;} }


/* ══════════════════════════════════════════════════════════════════
   Team Members v2 — matched to AiSensy's page
   Full-bleed white title bar, one card for guide+launch, wide content,
   cream avatars with a coloured initial, member cards with a pill +
   two icon actions, and a role/delete footer.
   Overrides the v1 block above.
   ══════════════════════════════════════════════════════════════════ */
.zc-content:has(.zc-tm) { padding: 0 !important; background: #f5f6f7 !important; }
.zc-tm { max-width: none; }

/* white title bar across the whole content area */
.zc-tm-titlebar {
    background: #fff; border-bottom: 1px solid #ececec;
    padding: 18px 28px; margin: 0;
}
.zc-tm-titlebar .container-top__title {
    font-size: 20px !important; font-weight: 600 !important; color: #1c1c1c !important; margin: 0 !important;
}
.zc-tm-body { padding: 22px 28px 40px; max-width: 1720px; margin: 0 auto; }

/* guide + launch share one white card */
.zc-tm-panel {
    background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9;
    display: grid; grid-template-columns: 292px minmax(0, 1fr); overflow: hidden; margin-bottom: 20px;
}
@media (max-width: 1099px) { .zc-tm-panel { grid-template-columns: minmax(0, 1fr); } }

.zc-tm-guide {
    background: #f1f9f4; padding: 24px 26px; display: flex; flex-direction: column; gap: 9px;
}
.zc-tm-guide__k { font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: #6b7f74; }
.zc-tm-guide h6 { font-size: 21px; font-weight: 700; color: #1c1c1c; margin: 0; }
.zc-tm-guide p { font-size: 13.5px; color: #5c6b64; margin: 0; line-height: 1.6; }
.zc-tm-guide a {
    font-size: 13.5px; font-weight: 600; color: #0a474c; text-decoration: none;
    display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 4px;
}
.zc-tm-guide a:hover { text-decoration: underline; }

.zc-tm-launch { padding: 24px 26px; }
.zc-tm-launch__h { font-size: 21px; font-weight: 700; color: #1c1c1c; margin: 0 0 18px; }
.zc-tm-launch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .zc-tm-launch__grid { grid-template-columns: 1fr; } }

.zc-tm-card {
    display: flex; align-items: flex-start; gap: 14px; padding: 17px 18px;
    border: 1px solid #ededed; border-radius: 8px; background: #fff; text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.zc-tm-card:hover { border-color: #d8e4e2; box-shadow: 0 3px 12px rgba(10, 71, 76, .07); }
.zc-tm-card__ic {
    width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.zc-tm-card__ic.ic-send { background: #e9f6ef; color: #17a06a; }
.zc-tm-card__ic.ic-ads  { background: #eaf1fe; color: #2563eb; }
.zc-tm-card__ic.ic-lead { background: #eef7ee; color: #2e9e4f; }
.zc-tm-card__ic.ic-ai   { background: #f1ecfd; color: #7c3aed; }
.zc-tm-card__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zc-tm-card__t strong { font-size: 15px; font-weight: 600; color: #1c1c1c; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zc-tm-card__t span { font-size: 13px; color: #6d7a76; line-height: 1.5; }
.zc-tm-badge { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
.zc-tm-badge.new { background: #e4f6ea; color: #17804a; }
.zc-tm-badge.ai  { background: #f1ecfd; color: #7c3aed; }

/* quota */
.zc-tm-quota {
    background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9; padding: 26px 30px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.zc-tm-quota__l { display: flex; align-items: center; gap: 22px; }
.zc-tm-quota__art {
    width: 82px; height: 82px; border-radius: 16px; background: #eef4fb; color: #2f6fb5;
    display: flex; align-items: center; justify-content: center; font-size: 40px; flex-shrink: 0;
}
.zc-tm-quota__k { display: block; font-size: 15px; color: #4a5350; margin-bottom: 4px; }
.zc-tm-quota__v { display: block; font-size: 27px; font-weight: 700; color: #1c1c1c; line-height: 1.1; }
.zc-tm-quota__v em { font-style: normal; font-size: 14px; font-weight: 400; color: #6d7a76; margin-left: 6px; }
.zc-tm-quota__r { display: flex; gap: 10px; flex-wrap: wrap; }

/* buttons */
.zc-tm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 7px;
    text-decoration: none !important; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.zc-tm-btn.primary { background: #0a474c; color: #fff !important; }
.zc-tm-btn.primary:hover { background: #083a3e; }
.zc-tm-btn.ghost { background: #fff; color: #1c1c1c !important; border-color: #d9dedd; }
.zc-tm-btn.ghost:hover { background: #f6f8f8; }

/* toolbar */
.zc-tm-bar2 { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.zc-tm-bar2__k { font-size: 14px; color: #6d7a76; }
.zc-tm-bar2__r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zc-tm-search { position: relative; }
.zc-tm-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #98a3a0; font-size: 16px; }
.zc-tm-search input {
    border: 1px solid #e2e6e5; border-radius: 7px; padding: 10px 14px 10px 37px; font-size: 14px;
    min-width: 260px; color: #1c1c1c; background: #fff;
}
.zc-tm-search input:focus { outline: none; border-color: #0a474c; box-shadow: 0 0 0 3px rgba(10, 71, 76, .08); }

/* member cards */
.zc-tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 18px; }
@media (max-width: 900px) { .zc-tm-grid { grid-template-columns: minmax(0, 1fr); } }
.zc-tm-member {
    position: relative; background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9;
    padding: 24px 26px 18px; display: flex; flex-direction: column; gap: 20px; min-height: 214px;
}
.zc-tm-member__act { position: absolute; top: 16px; right: 18px; display: flex; align-items: center; gap: 10px; }
.zc-tm-pro {
    display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #8b5cf6, #6d3bea);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px;
}
.zc-tm-pro i { font-size: 12px; }
.zc-tm-member__act a { color: #7b8785; font-size: 17px; text-decoration: none; line-height: 1; }
.zc-tm-member__act a:hover { color: #0a474c; }

.zc-tm-member__top { display: flex; align-items: center; gap: 14px; }
.zc-tm-av {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    background: #f7f2e6; font-size: 23px; font-weight: 700;
}
.zc-tm-av.lt-1 { color: #17a06a; } .zc-tm-av.lt-2 { color: #7c3aed; }
.zc-tm-av.lt-3 { color: #c2410c; } .zc-tm-av.lt-4 { color: #2563eb; }
.zc-tm-av.lt-5 { color: #be123c; }
.zc-tm-member__name {
    font-size: 17px; font-weight: 500; color: #1f2d3d; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.zc-tm-member__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 0; }
.zc-tm-member__meta div { min-width: 0; }
.zc-tm-member__meta dt { font-size: 12.5px; color: #8a9491; margin-bottom: 5px; }
.zc-tm-member__meta dd { margin: 0; font-size: 14px; color: #1f2d3d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zc-tm-member__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.zc-tm-role { font-size: 14px; color: #4a5350; }
.zc-tm-role.owner { color: #0a474c; font-weight: 600; }
.zc-tm-del { background: none; border: none; color: #e53935; font-size: 18px; cursor: pointer; padding: 2px 4px; line-height: 1; }
.zc-tm-del:hover { color: #b71c1c; }

/* v1 leftovers that v2 must reset (v1 uppercased these labels) */
.zc-tm-quota__k { text-transform: none !important; letter-spacing: normal !important; font-weight: 400 !important; }
.zc-tm-bar2__k { text-transform: none !important; letter-spacing: normal !important; }

/* ── Type weight pass: AiSensy uses sentence-case labels at normal weight,
      not uppercase bold. Applies to the cards added for billing, the dashboard
      rail, the ad composer and the ads KPIs. Table headers keep their own style,
      which AiSensy also uses. ── */
.zc-bill-lbl{
    text-transform:none!important;
    letter-spacing:0!important;
    font-size:13.5px!important;
    font-weight:400!important;
    color:#3b4a54!important;
}
.zc-bill-plan .zc-bill-lbl,
.zc-bill-card__head.bt .zc-bill-lbl{font-size:12.5px!important;color:#6b7684!important;}
.zc-bill-plan__name{font-weight:500!important;font-size:21px!important;}
.zc-bill-plan__name small{font-weight:400!important;}
.zc-bill-credit strong{font-weight:500!important;font-size:22px!important;}
.zc-bill-metric span{font-weight:400!important;color:#6b7684!important;}
.zc-bill-metric strong{font-weight:400!important;color:#0f172a!important;font-size:14px!important;}
.zc-bill-usage__h{font-weight:500!important;}
.zc-bill-actions__h{font-weight:600!important;}
.zc-bill-act__t strong{font-weight:600!important;}
.zc-bill-guide h6{font-weight:600!important;}
.zc-bill-pm{font-weight:400!important;}
.zc-bill-danger__h{font-weight:500!important;}
.zc-bill-cancel h6{font-weight:500!important;}

/* dashboard account rail + ads cards: same treatment */
.zc-side-card__head,
.zc-ads-kpi span,
.zc-adc-card__h,
.zc-dstrip__label,
.zc-hs-count{
    text-transform:none!important;
    letter-spacing:0!important;
    font-weight:500!important;
    font-size:13px!important;
    color:#6b7684!important;
}
.zc-side-amount,.zc-side-plan,.zc-ads-kpi strong{font-weight:500!important;}
.zc-dstrip__value{font-weight:500!important;}

/* ── AI Agent setup card (AiSensy "Set up your AI Agent") ── */
.zc-ag-wrap{display:flex;justify-content:center;padding:8px 0 40px;}
.zc-ag-card{width:100%;max-width:500px;background:#fff;border-radius:10px;
    box-shadow:0 1px 3px rgba(15,23,42,.06),0 12px 34px -18px rgba(15,23,42,.28);overflow:hidden;}
.zc-ag-bar{display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1px solid #eef2f6;}
.zc-ag-bar__ico{width:26px;height:26px;border-radius:7px;background:#0a474c;color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.zc-ag-bar__t{font-size:14.5px;font-weight:700;color:#0f172a;}
.zc-ag-live{margin-left:auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:5px;}
.zc-ag-live.on{background:#e6f4ea;color:#116b3a;}
.zc-ag-live.off{background:#f1f5f9;color:#64748b;}
.zc-ag-body{padding:26px 30px 0;}
.zc-ag-hero{text-align:center;margin-bottom:26px;}
.zc-ag-hero__ico{width:46px;height:46px;border-radius:10px;background:#e9f2f2;color:#0a474c;
    display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;}
.zc-ag-hero h2{font-size:19px;font-weight:700;color:#0f172a;margin:0 0 7px;letter-spacing:-.01em;}
.zc-ag-hero p{font-size:13px;color:#6b7684;margin:0;line-height:1.5;}
.zc-ag-f{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.zc-ag-f label{font-size:12.5px;font-weight:600;color:#0f172a;}
.zc-ag-f label i{color:#dc2626;font-style:normal;}
.zc-ag-f input,.zc-ag-f select,.zc-ag-f textarea{
    width:100%;border:1px solid #dfe5ea;border-radius:8px;padding:9px 12px;font-size:14px;
    color:#0f172a;background:#fff;font-family:inherit;}
.zc-ag-f input::placeholder,.zc-ag-f textarea::placeholder{color:#9aa5b1;}
.zc-ag-f input:focus,.zc-ag-f select:focus,.zc-ag-f textarea:focus{
    outline:none;border-color:#0a474c;box-shadow:0 0 0 3px rgba(10,71,76,.08);}
.zc-ag-f textarea{resize:vertical;}
.zc-ag-f small{font-size:11.5px;color:#8a93a0;}
.zc-ag-f2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@media(max-width:560px){.zc-ag-f2{grid-template-columns:1fr;}.zc-ag-body{padding:22px 18px 0;}}
.zc-ag-adv{border-top:1px solid #eef2f6;padding-top:14px;margin-bottom:6px;}
.zc-ag-adv summary{font-size:12.5px;font-weight:700;color:#0a474c;cursor:pointer;margin-bottom:14px;
    list-style:none;display:flex;align-items:center;gap:6px;}
.zc-ag-adv summary::-webkit-details-marker{display:none;}
.zc-ag-adv summary::before{content:"▸";transition:transform .15s;display:inline-block;}
.zc-ag-adv[open] summary::before{transform:rotate(90deg);}
.zc-ag-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;padding-top:6px;}
.zc-ag-toggle input{display:none;}
.zc-ag-toggle span{width:38px;height:21px;border-radius:12px;background:#cbd5e1;position:relative;
    transition:background .15s;flex-shrink:0;}
.zc-ag-toggle span::after{content:"";position:absolute;top:2.5px;left:3px;width:16px;height:16px;
    border-radius:50%;background:#fff;transition:transform .15s;}
.zc-ag-toggle input:checked + span{background:#0a474c;}
.zc-ag-toggle input:checked + span::after{transform:translateX(16px);}
.zc-ag-toggle em{font-style:normal;font-size:12.5px;color:#6b7684;}
.zc-ag-foot{border-top:1px solid #eef2f6;padding:14px 0 18px;display:flex;justify-content:flex-end;margin-top:8px;}
.zc-ag-foot .btn{font-size:13.5px;padding:9px 18px;}

/* ── Create Campaign — AiSensy 3-step builder ── */
.zc-content .ccm{max-width:none;}
.zc-content .ccm-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #eef2f6;margin-bottom:18px;}
.zc-content .ccm-back{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    color:#3b4a54;font-size:18px;text-decoration:none;}
.zc-content .ccm-back:hover{background:#eef2f6;}
.zc-content .ccm-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    background:#fff;border-radius:10px;box-shadow:0 0 11px #e6e6e6;padding:16px 22px;margin-bottom:18px;}
.zc-content .ccm-meta__i{display:flex;align-items:center;gap:10px;}
.zc-content .ccm-meta__k{font-size:12.5px;color:#6e6e6e;}
.zc-content .ccm-meta__v{font-size:14.5px;font-weight:600;color:#0f172a;}

.zc-content .ccm-card{background:#fff;border-radius:10px;box-shadow:0 0 11px #e6e6e6;padding:26px 26px 30px;}
.zc-content .ccm-steps{display:flex;align-items:flex-start;justify-content:space-between;gap:0;list-style:none;
    margin:0 0 30px;padding:0 6%;counter-reset:s;}
.zc-content .ccm-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;
    cursor:pointer;font-size:13px;color:#8a93a0;}
.zc-content .ccm-steps li::before{content:"";position:absolute;top:5px;left:50%;width:100%;height:2px;background:#eceff1;z-index:0;}
.zc-content .ccm-steps li:last-child::before{display:none;}
.zc-content .ccm-dot{width:12px;height:12px;border-radius:50%;background:#d7dde3;position:relative;z-index:1;}
.zc-content .ccm-steps li.is-active{color:#0a474c;font-weight:600;}
.zc-content .ccm-steps li.is-active .ccm-dot{background:#0a474c;box-shadow:0 0 0 4px rgba(10,71,76,.14);}
.zc-content .ccm-slabel{white-space:nowrap;}

.zc-content .ccm-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;}
@media(max-width:1099px){.zc-content .ccm-grid{grid-template-columns:minmax(0,1fr);} }
.zc-content .ccm-sec{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid #f1f4f6;}
.zc-content .ccm-sec:last-of-type{border-bottom:none;margin-bottom:0;}
.zc-content .ccm-sec__h{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:16px;}
.zc-content .ccm-f{margin-bottom:22px;}
.zc-content .ccm-f:last-child{margin-bottom:0;}
.zc-content .ccm-label{display:block;font-size:16px;font-weight:400;color:#000;margin:0 0 4px;}
.zc-content .ccm-help{font-size:12px;line-height:17.2px;color:#6e6e6e;margin:0 0 10px;}
.zc-content .ccm-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:760px){.zc-content .ccm-two{grid-template-columns:1fr;} }
.zc-content .ccm-sec .form--control,
.zc-content .ccm-sec .select2-selection{background:#f7f8f9!important;border:none!important;border-bottom:1px solid #dfe3e8!important;
    border-radius:4px 4px 0 0!important;font-size:14px!important;min-height:42px;}
.zc-content .ccm-sec .form--control:focus{border-bottom-color:#0a474c!important;background:#f2f5f5!important;}

.zc-content .ccm-audience{border:1px dashed #dfe3e8;border-radius:8px;padding:26px;text-align:center;background:#fbfcfd;}
.zc-content .ccm-audience__empty strong{display:block;font-size:14px;color:#6e7c86;font-weight:600;}
.zc-content .ccm-audience__empty span{font-size:12.5px;color:#9aa5b1;}
.zc-content .ccm-audience__on{font-size:14px;color:#0f172a;}
.zc-content .ccm-audience__on b{font-size:20px;font-weight:800;color:#0a474c;margin-right:5px;}
.zc-content .ccm-audience__on span{display:block;font-size:12.5px;color:#6e7c86;margin-top:5px;}

.zc-content .ccm-submit{background:#0a474c;color:#fff;border:none;border-radius:6px;padding:9px 20px;height:41px;
    font-size:14px;font-weight:500;}
.zc-content .ccm-submit:hover{background:#083c40;color:#fff;}

.zc-content .ccm-prev-title{font-size:16px;color:#000;margin-bottom:4px;}
.zc-content .ccm-prev-wrap{position:relative;padding-left:18px;margin-top:16px;}
.zc-content .ccm-prev-wa{position:absolute;left:-10px;top:-14px;width:30px;height:30px;border-radius:50%;background:#25d366;
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;}
.zc-content .ccm-prev-card{background:#fff;border:1px solid #e6e9ec;border-radius:10px;padding:12px;
    box-shadow:0 1px 4px rgba(15,23,42,.06);}
.zc-content .ccm-prev-card .card-item__thumb{border-radius:8px;overflow:hidden;background:#f1f4f6;}
.zc-content .ccm-prev-card .card-item__thumb img{width:100%;height:auto;display:block;}
.zc-content .ccm-prev-card .card-item__title{font-size:14px;font-weight:700;color:#111;margin:10px 0 4px;}
.zc-content .ccm-prev-card .card-item__desc{font-size:13.5px;color:#3b4a54;margin:0 0 6px;white-space:pre-wrap;}
.zc-content .ccm-prev-card .footer_text{font-size:12px;color:#8a93a0;}

/* ── WhatsApp Payments: setup messages + settings ── */
.zc-wap{display:flex;flex-direction:column;gap:16px;}
.zc-wap-banner{display:flex;align-items:center;gap:14px;background:#eaf7ee;border:1px solid #cfe9d8;
    border-radius:8px;padding:14px 18px;}
.zc-wap-banner__ico{width:40px;height:40px;border-radius:50%;background:#116b3a;color:#fff;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:14px;}
.zc-wap-banner strong{font-size:14px;font-weight:600;color:#116b3a;display:block;}
.zc-wap-banner strong span{color:#0f172a;font-weight:400;}
.zc-wap-banner p{font-size:12.8px;color:#4d6d67;margin:2px 0 0;}
.zc-wap-top{display:grid;grid-template-columns:300px minmax(0,1fr);background:#fff;border-radius:8px;
    box-shadow:0 0 11px #e6e6e6;overflow:hidden;}
.zc-wap-guide{background:#eef6f3;padding:20px;display:flex;flex-direction:column;gap:7px;}
.zc-wap-guide__k{font-size:10.5px;font-weight:700;color:#4d6d67;text-transform:uppercase;letter-spacing:.07em;}
.zc-wap-guide h6{font-size:18px;font-weight:600;color:#0f172a;margin:0;}
.zc-wap-guide p{font-size:12.8px;color:#4d6d67;margin:0;}
.zc-wap-guide a{font-size:13px;font-weight:500;color:#0a474c;text-decoration:none;margin-top:2px;}
.zc-wap-guide a:hover{text-decoration:underline;}
.zc-wap-actions{padding:20px 22px;}
.zc-wap-actions__h{font-size:17px;font-weight:600;color:#0f172a;margin:0 0 14px;}
.zc-wap-actions__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.zc-wap-tabs{display:flex;align-items:center;gap:22px;border-bottom:1px solid #e6ebee;padding:0 4px;}
.zc-wap-tab{font-size:14px;color:#6b7684;text-decoration:none!important;padding:12px 2px;border-bottom:2px solid transparent;}
.zc-wap-tab.on{color:#0a474c;border-bottom-color:#0a474c;font-weight:600;}
.zc-wap-new{margin-left:auto;}
.zc-wap-panel{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:6px 0;}
.zc-wap-empty{color:#8a93a0!important;padding:44px 0!important;font-size:13.5px;}
.zc-wap-check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#3b4a54;}
.zc-wap-settings{display:flex;flex-direction:column;}
@media(max-width:1100px){.zc-wap-top{grid-template-columns:1fr;} .zc-wap-actions__grid{grid-template-columns:1fr;}}


/* ══════════════════════════════════════════════════════════════════
   Contacts — matched to AiSensy's Contacts page
   White title bar with live number health, guide + "do next" panel,
   toolbar, and a plain data table with a count footer.
   ══════════════════════════════════════════════════════════════════ */
.zc-content:has(.zc-ct2) { padding: 0 !important; background: #f5f6f7 !important; }
.zc-ct2 { max-width: none; }

.zc-ct2-titlebar {
    background: #fff; border-bottom: 1px solid #ececec; padding: 16px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.zc-ct2-titlebar .container-top__title { font-size: 20px !important; font-weight: 600 !important; color: #1c1c1c !important; margin: 0 !important; }
.zc-ct2-stat { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.zc-ct2-stat__i { display: inline-flex; align-items: center; gap: 8px; }
.zc-ct2-stat__i .k { font-size: 12.5px; color: #7b8785; }
.zc-ct2-stat__i .v { font-size: 13.5px; color: #1f2d3d; }
.zc-ct2-stat__i .v.strong { font-size: 15px; font-weight: 700; }
.zc-ct2-pill { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 20px; color: #fff; }
.zc-ct2-pill.q-green { background: #22c07a; }
.zc-ct2-pill.q-yellow { background: #e0a325; }
.zc-ct2-pill.q-red { background: #e05252; }

.zc-ct2-body { padding: 20px 28px 40px; max-width: 1720px; margin: 0 auto; }

/* guide + do-next */
.zc-ct2-panel {
    background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9;
    display: grid; grid-template-columns: 268px minmax(0, 1fr); overflow: hidden; margin-bottom: 18px;
}
@media (max-width: 1099px) { .zc-ct2-panel { grid-template-columns: minmax(0, 1fr); } }
.zc-ct2-guide { background: #f1f9f4; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.zc-ct2-guide__k { font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: #6b7f74; }
.zc-ct2-guide h6 { font-size: 20px; font-weight: 700; color: #1c1c1c; margin: 0; line-height: 1.25; }
.zc-ct2-guide p { font-size: 13px; color: #5c6b64; margin: 0 0 4px; line-height: 1.55; }
.zc-ct2-guide a { font-size: 13px; font-weight: 600; color: #0a474c; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.zc-ct2-guide a:hover { text-decoration: underline; }

.zc-ct2-launch { padding: 22px 24px; }
.zc-ct2-launch__h { font-size: 20px; font-weight: 700; color: #1c1c1c; margin: 0 0 16px; }
.zc-ct2-launch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 900px) { .zc-ct2-launch__grid { grid-template-columns: 1fr; } }
.zc-ct2-card {
    display: flex; align-items: flex-start; gap: 13px; padding: 16px 17px;
    border: 1px solid #ededed; border-radius: 8px; background: #fff; text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.zc-ct2-card:hover { border-color: #d8e4e2; box-shadow: 0 3px 12px rgba(10, 71, 76, .07); }
.zc-ct2-card__ic { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.zc-ct2-card__ic.ic-send { background: #e9f6ef; color: #17a06a; }
.zc-ct2-card__ic.ic-ai   { background: #f1ecfd; color: #7c3aed; }
.zc-ct2-card__ic.ic-ads  { background: #eaf1fe; color: #2563eb; }
.zc-ct2-card__ic.ic-lead { background: #eef7ee; color: #2e9e4f; }
.zc-ct2-card__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zc-ct2-card__t strong { font-size: 14.5px; font-weight: 600; color: #1c1c1c; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zc-ct2-card__t span { font-size: 12.5px; color: #6d7a76; line-height: 1.5; }
.zc-ct2-badge { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
.zc-ct2-badge.pop { background: #e4f6ea; color: #17804a; }
.zc-ct2-badge.new { background: #fdf0e3; color: #b5651d; }
.zc-ct2-badge.ai  { background: #f1ecfd; color: #7c3aed; }

/* toolbar */
.zc-ct2-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.zc-ct2-tools__l { display: flex; align-items: center; gap: 12px; }
.zc-ct2-tools__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zc-ct2-search { position: relative; }
.zc-ct2-search input {
    border: 1px solid #e2e6e5; border-radius: 7px; padding: 9px 34px 9px 14px; font-size: 13.5px;
    min-width: 260px; color: #1c1c1c; background: #fff;
}
.zc-ct2-search input:focus { outline: none; border-color: #0a474c; box-shadow: 0 0 0 3px rgba(10, 71, 76, .08); }
.zc-ct2-search i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #98a3a0; font-size: 16px; }
.zc-ct2-filter { position: relative; }
.zc-ct2-fbtn { background: none; border: none; color: #4a5350; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 4px; }
.zc-ct2-fbtn:hover { color: #0a474c; }
.zc-ct2-fmenu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 210px; max-height: 300px; overflow: auto;
    background: #fff; border: 1px solid #e6eaea; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 6px;
}
.zc-ct2-fmenu.open { display: block; }
.zc-ct2-fmenu a { display: block; padding: 8px 11px; border-radius: 6px; font-size: 13.5px; color: #1f2d3d; text-decoration: none; }
.zc-ct2-fmenu a:hover { background: #f2f6f6; }
.zc-ct2-fmenu a.on { background: #e9f2f2; color: #0a474c; font-weight: 600; }
.zc-ct2-btn {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500;
    padding: 8px 14px; border-radius: 7px; text-decoration: none !important; cursor: pointer;
    background: #fff; color: #1f2d3d !important; border: 1px solid #dee3e2;
}
.zc-ct2-btn:hover { background: #f6f8f8; border-color: #cdd6d5; }

/* table */
.zc-ct2-tablecard { background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9; overflow: hidden; }
.zc-ct2-scroll { overflow-x: auto; }
.zc-ct2-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.zc-ct2-table thead th {
    text-align: left; padding: 14px 18px; font-size: 13px; font-weight: 500; color: #4a5350;
    border-bottom: 1px solid #eef1f1; white-space: nowrap; background: #fff;
}
.zc-ct2-table tbody td { padding: 13px 18px; border-bottom: 1px solid #f3f5f5; color: #1f2d3d; vertical-align: middle; white-space: nowrap; }
.zc-ct2-table tbody tr:last-child td { border-bottom: none; }
.zc-ct2-table tbody tr:hover td { background: #fafbfb; }
.zc-ct2-table .nm { font-weight: 500; }
.zc-ct2-table .mono { font-variant-numeric: tabular-nums; }
.zc-ct2-table .mut { color: #9aa4a2; }
.zc-ct2-table .ta-r { text-align: right; }
.zc-ct2-tag { display: inline-block; background: #eef4f3; color: #35544f; font-size: 12px; padding: 2px 9px; border-radius: 20px; margin-right: 4px; }
.zc-ct2-stage { display: inline-flex; align-items: center; gap: 6px; background: #f2f4f5; color: #47555f; font-size: 12px; padding: 3px 11px; border-radius: 20px; }
.zc-ct2-stage i { width: 6px; height: 6px; border-radius: 50%; background: #8b98a5; display: inline-block; }
.zc-ct2-state { font-size: 13px; color: #1f2d3d; }
.zc-ct2-state.block { color: #c0392b; }
.zc-ct2-act { display: inline-flex; gap: 10px; justify-content: flex-end; }
.zc-ct2-act a { color: #7b8785; font-size: 16px; text-decoration: none; }
.zc-ct2-act a:hover { color: #0a474c; }

.zc-ct2-foot {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    padding: 14px 18px; border-top: 1px solid #eef1f1; font-size: 13px; color: #4a5350;
}
.zc-ct2-foot .pagination { margin: 0 !important; }
.zc-ct2-empty { padding: 46px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; white-space: normal; }
.zc-ct2-empty i { font-size: 38px; color: #b9c6c4; }
.zc-ct2-empty strong { font-size: 15.5px; color: #1f2d3d; }
.zc-ct2-empty span { font-size: 13px; color: #6d7a76; }

/* footer already prints the range, so drop the paginator's duplicate sentence */
.zc-ct2-foot p, .zc-ct2-foot .pagination-wrapper > span:first-child { display: none !important; }
.zc-ct2-foot .pagination { gap: 4px !important; }

/* checkbox row: theme stretches inputs to 100%, which pushed the label to the far edge */
.zc-wap-check{display:inline-flex!important;width:auto!important;align-items:center;gap:8px;font-weight:400!important;}
.zc-wap-check input[type="checkbox"]{width:16px!important;height:16px!important;flex:0 0 16px!important;margin:0!important;}

/* AI Agent card — tightened to AiSensy's proportions (card must fit the viewport) */
.zc-ag-body{padding:22px 26px 0;}
.zc-ag-hero{margin-bottom:20px;}
.zc-ag-hero__ico{width:42px;height:42px;font-size:21px;margin-bottom:11px;}
.zc-ag-hero h2{font-size:18px;margin-bottom:6px;}
.zc-ag-hero p{font-size:12.5px;}
.zc-ag-f{margin-bottom:14px;gap:5px;}
.zc-ag-f input,.zc-ag-f select{padding:8px 12px;font-size:13.5px;}
.zc-ag-f textarea{padding:8px 12px;font-size:13.5px;}
.zc-ag-f label{font-size:12px;}
.zc-ag-f small{font-size:11px;}
.zc-ag-adv{padding-top:12px;}
.zc-ag-adv summary{margin-bottom:0;}
.zc-ag-adv[open] summary{margin-bottom:12px;}
.zc-ag-foot{padding:12px 0 16px;margin-top:6px;}

/* App Store (Integrations) - measured off AiSensy: an 83.33% centred column with
   40px padding, three columns on 24px gutters, a 72px logo tile, a 16/700 name
   and a 14/400 #6e6e6e description clamped to two lines. */
.zc-int{width:83.3333%;margin:0 auto;padding-top:8px;}
.zc-int-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
@media(max-width:1200px){.zc-int{width:100%;}.zc-int-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.zc-int-grid{grid-template-columns:1fr;}}
.zc-int-card{display:flex;flex-direction:column;background:#fff;border:1px solid #f0f0f0;
    border-radius:12px;padding:28px 24px;text-decoration:none!important;
    transition:border-color .15s ease,box-shadow .15s ease;}
.zc-int-card:hover{border-color:#d7e3e1;box-shadow:0 4px 16px rgba(10,71,76,.07);}
.zc-int-card__ico{width:72px;height:72px;border-radius:16px;display:flex;align-items:center;
    justify-content:center;font-size:36px;margin-bottom:16px;flex:none;}
/* real product marks carry their own shape and colour, so no tint behind them */
.zc-int-card__ico:has(img){background:none;}
.zc-int-card__ico img{width:72px;height:72px;display:block;}
.zc-int-card__ico.tone-green{background:#e6f4ea;color:#116b3a;}
.zc-int-card__ico.tone-blue{background:#e8f1fe;color:#1877f2;}
.zc-int-card__ico.tone-violet{background:#efe9fd;color:#6d3fd4;}
.zc-int-card__ico.tone-amber{background:#fff4e0;color:#a86b00;}
.zc-int-card__ico.tone-teal{background:#e0f2f1;color:#0a474c;}
.zc-int-card__ico.tone-slate{background:#eef1f4;color:#48606d;}
.zc-int-card__t{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.zc-int-card__t strong{font-size:16px;font-weight:700;color:#000;line-height:1.235;letter-spacing:.0073em;}
.zc-int-card p{font-size:14px;font-weight:400;color:#6e6e6e;line-height:21px;margin:0;
    letter-spacing:.0094em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.zc-int-chip{font-size:12px;font-weight:400;background:#f3f0c5;color:#cc3d00;border-radius:8px;
    padding:4px 6px;line-height:1;margin-left:5px;}
.zc-int-chip.chip-on{background:#e6f4ea;color:#116b3a;}
.zc-int-chip.chip-pro{background:#fde68a;color:#7c4a03;}
.zc-int-empty{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:56px 20px;text-align:center;}
.zc-int-empty i{font-size:38px;color:#c3cdd4;}
.zc-int-empty h6{font-size:16px;font-weight:700;color:#000;margin:10px 0 6px;}
.zc-int-empty p{font-size:14px;color:#6e6e6e;margin:0 0 16px;}

/* Page-title row can now carry a right-aligned action, the way AiSensy puts
   "List your App" on the same line as the page name. */
html body .zc-content .zc-page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.zc-page-btn{background:#0a474c;color:#fff!important;font-size:13px;font-weight:500;border-radius:6px;
    padding:4px 10px;line-height:21px;text-decoration:none!important;display:inline-flex;align-items:center;
    gap:6px;white-space:nowrap;flex:none;}
.zc-page-btn:hover{background:#08383c;color:#fff!important;}


/* ══════════════════════════════════════════════════════════════════
   Flows section (Flow Builder + Connect Catalogue) — AiSensy layout
   ══════════════════════════════════════════════════════════════════ */
.zc-content:has(.zc-fl2) { padding: 0 !important; background: #f5f6f7 !important; }
.zc-fl2 { max-width: none; }
.zc-fl2-titlebar {
    background: #fff; border-bottom: 1px solid #ececec; padding: 16px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.zc-fl2-titlebar .container-top__title { font-size: 20px !important; font-weight: 600 !important; color: #1c1c1c !important; margin: 0 !important; }
.zc-fl2-body { padding: 20px 28px 40px; max-width: 1720px; margin: 0 auto; }

/* guide + launch */
.zc-fl2-panel {
    background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9;
    display: grid; grid-template-columns: 268px minmax(0, 1fr); overflow: hidden; margin-bottom: 18px;
}
@media (max-width: 1099px) { .zc-fl2-panel { grid-template-columns: minmax(0, 1fr); } }
.zc-fl2-guide { background: #f1f9f4; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.zc-fl2-guide__k { font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: #6b7f74; }
.zc-fl2-guide h6 { font-size: 20px; font-weight: 700; color: #1c1c1c; margin: 0; line-height: 1.25; }
.zc-fl2-guide p { font-size: 13px; color: #5c6b64; margin: 0 0 4px; line-height: 1.55; }
.zc-fl2-guide a { font-size: 13px; font-weight: 600; color: #0a474c; text-decoration: none; display: flex; align-items: flex-start; gap: 6px; }
.zc-fl2-guide a:hover { text-decoration: underline; }
.zc-fl2-launch { padding: 22px 24px; }
.zc-fl2-launch__h { font-size: 20px; font-weight: 700; color: #1c1c1c; margin: 0 0 16px; }
.zc-fl2-launch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 900px) { .zc-fl2-launch__grid { grid-template-columns: 1fr; } }
.zc-fl2-card {
    display: flex; align-items: flex-start; gap: 13px; padding: 16px 17px;
    border: 1px solid #ededed; border-radius: 8px; background: #fff; text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.zc-fl2-card:hover { border-color: #d8e4e2; box-shadow: 0 3px 12px rgba(10, 71, 76, .07); }
.zc-fl2-card__ic { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.zc-fl2-card__ic.ic-send { background: #e9f6ef; color: #17a06a; }
.zc-fl2-card__ic.ic-ai   { background: #f1ecfd; color: #7c3aed; }
.zc-fl2-card__ic.ic-ads  { background: #eaf1fe; color: #2563eb; }
.zc-fl2-card__ic.ic-lead { background: #eef7ee; color: #2e9e4f; }
.zc-fl2-card__ic.ic-flow { background: #fdf0e7; color: #b7601c; }
.zc-fl2-card__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zc-fl2-card__t strong { font-size: 14.5px; font-weight: 600; color: #1c1c1c; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zc-fl2-card__t span { font-size: 12.5px; color: #6d7a76; line-height: 1.5; }
.zc-fl2-badge { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
.zc-fl2-badge.new { background: #fdf0e3; color: #b5651d; }
.zc-fl2-badge.ai  { background: #f1ecfd; color: #7c3aed; }

/* setting rows (Connect Catalogue) */
.zc-fl2-rows { background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9; overflow: hidden; }
.zc-fl2-row {
    display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
    padding: 26px 30px; border-bottom: 1px solid #eef1f1;
}
.zc-fl2-row__l { flex: 1 1 380px; }
.zc-fl2-row__l h6 { font-size: 15.5px; font-weight: 600; color: #1c1c1c; margin: 0 0 4px; }
.zc-fl2-row__l p { font-size: 13px; color: #6d7a76; margin: 0; }
.zc-fl2-row__r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.zc-fl2-status { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: #1aa053; }
.zc-fl2-status.ok { color: #0a7d5a; }
.zc-fl2-btn {
    display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
    padding: 9px 20px; border-radius: 7px; text-decoration: none !important; cursor: pointer;
    background: #fff; color: #1aa053 !important; border: 1px solid #bfe3cf;
}
.zc-fl2-btn:hover { background: #f2fbf6; }
.zc-fl2-btn.primary { background: #0a474c; color: #fff !important; border-color: #0a474c; }
.zc-fl2-btn.primary:hover { background: #083a3e; }
.zc-fl2-select { border: 1px solid #d6dedd; border-radius: 7px; padding: 11px 14px; min-width: 300px; font-size: 14px; color: #1f2d3d; background: #fff; }
.zc-fl2-select:disabled { background: #f7f9f9; color: #9aa4a2; }
.zc-fl2-save { padding: 20px 30px; display: flex; justify-content: flex-end; }

/* toggle */
.zc-fl2-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.zc-fl2-toggle input { opacity: 0; width: 0; height: 0; }
.zc-fl2-toggle span { position: absolute; inset: 0; background: #cfd6d5; border-radius: 20px; cursor: pointer; transition: background .18s; }
.zc-fl2-toggle span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; }
.zc-fl2-toggle input:checked + span { background: #17a06a; }
.zc-fl2-toggle input:checked + span::before { transform: translateX(20px); }

/* WhatsApp business-profile preview */
.zc-fl2-preview { width: 230px; border-radius: 8px; overflow: hidden; background: #0f7a63; color: #fff; }
.zc-fl2-preview__bar { display: flex; justify-content: space-between; padding: 6px 10px 2px; font-size: 10px; opacity: .9; }
.zc-fl2-preview__row { display: flex; align-items: center; gap: 8px; padding: 6px 10px 12px; }
.zc-fl2-preview__av { width: 22px; height: 22px; border-radius: 50%; background: #ffd48a; color: #7a4a10; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.zc-fl2-preview__nm { flex: 1; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.zc-fl2-preview__nm i { color: #7fe3b4; font-size: 12px; }
.zc-fl2-preview__ic { display: flex; gap: 7px; font-size: 13px; opacity: .95; }

/* list */
.zc-fl2-tools { margin-bottom: 14px; }
.zc-fl2-search { position: relative; display: inline-block; }
.zc-fl2-search input { border: 1px solid #e2e6e5; border-radius: 7px; padding: 9px 34px 9px 14px; font-size: 13.5px; min-width: 260px; background: #fff; color: #1c1c1c; }
.zc-fl2-search input:focus { outline: none; border-color: #0a474c; box-shadow: 0 0 0 3px rgba(10, 71, 76, .08); }
.zc-fl2-search i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #98a3a0; font-size: 16px; }
.zc-fl2-tablecard { background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9; overflow: hidden; }
.zc-fl2-scroll { overflow-x: auto; }
.zc-fl2-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.zc-fl2-table thead th { text-align: left; padding: 14px 18px; font-size: 13px; font-weight: 500; color: #4a5350; border-bottom: 1px solid #eef1f1; white-space: nowrap; }
.zc-fl2-table tbody td { padding: 13px 18px; border-bottom: 1px solid #f3f5f5; color: #1f2d3d; vertical-align: middle; }
.zc-fl2-table tbody tr:last-child td { border-bottom: none; }
.zc-fl2-table tbody tr:hover td { background: #fafbfb; }
.zc-fl2-table .nm { font-weight: 500; }
.zc-fl2-table .ta-r { text-align: right; }
.zc-fl2-act { display: inline-flex; gap: 12px; justify-content: flex-end; align-items: center; }
.zc-fl2-act a, .zc-fl2-act button { color: #7b8785; font-size: 16px; background: none; border: none; cursor: pointer; text-decoration: none; padding: 0; }
.zc-fl2-act a:hover { color: #0a474c; }
.zc-fl2-act button:hover { color: #c0392b; }
.zc-fl2-foot { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 18px; border-top: 1px solid #eef1f1; font-size: 13px; color: #4a5350; }
.zc-fl2-foot p { display: none !important; }
.zc-fl2-empty { padding: 46px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.zc-fl2-empty i { font-size: 38px; color: #b9c6c4; }
.zc-fl2-empty strong { font-size: 15.5px; color: #1f2d3d; }
.zc-fl2-empty span { font-size: 13px; color: #6d7a76; margin-bottom: 6px; }

/* highlighted sub-nav item ("Try the new AI Agent") */
html body .zcv3-fly .zcv3-fly-b a.hl {
    background: #eaf7f0; border: 1px solid #cbe8da; color: #0a474c !important; font-weight: 600; margin-bottom: 6px;
}
html body .zcv3-fly .zcv3-fly-b a.hl span { color: #0a474c !important; }
html body .zcv3-fly .zcv3-fly-b a.hl::before { content: "\f890"; font-family: "Line Awesome Free"; font-weight: 900; margin-right: 7px; color: #d99a2b; }

/* Sub-panel rows can carry a 20px outline icon, as AiSensy's Integrations panel does. */
.zcv3-fly-b a .zcv3-fly-ic{font-size:20px;line-height:1;flex:none;margin-right:2px;}
/* 40px inset inside the 83.33% column - what puts AiSensy's cards at 568px wide. */
.zc-int{padding:40px;}

.zc-page-btn{line-height:23px;}
.zc-int-card{color:inherit;}


/* ══════════════════════════════════════════════════════════════════
   List toolbar filter control (.body-top) — one box, not three
   .select-group here wraps a single select; the generic filter-card
   styling wrapped it in a card and knocked the select2 arrow out of
   line, so it is reset to a plain inline label + control pair.
   ══════════════════════════════════════════════════════════════════ */
.zc-content .body-top.body-top .select-group,
.zc-content .body-top.body-top .filter-form,
.zc-content .body-top.body-top form.select-group.filter-form {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.zc-content .body-top__right { gap: 10px !important; align-items: center !important; }
.zc-content .body-top__right .text {
    font-size: 13px !important; font-weight: 500 !important;
    color: #4a5350 !important; white-space: nowrap !important;
}

/* select2 single: container, box, text and arrow all on the same 38px */
.zc-content .body-top.body-top .select2-container { height: 38px !important; min-width: 200px !important; }
.zc-content .body-top.body-top .select2-container .select2-selection,
.zc-content .body-top.body-top .select2-container .select2-selection--single {
    height: 38px !important; min-height: 38px !important;
    border: 1px solid #e2e8f0 !important; border-radius: 7px !important;
    background: #fff !important; padding: 0 !important; box-shadow: none !important;
}
.zc-content .body-top.body-top .select2-container .select2-selection__rendered {
    height: 38px !important; line-height: 38px !important;
    padding: 0 34px 0 12px !important; margin: 0 !important;
    border: none !important; border-radius: 0 !important; background: transparent !important;
    font-size: 13px !important; color: #1f2d3d !important;
}
.zc-content .body-top.body-top .select2-container .select2-selection__arrow {
    height: 38px !important; width: 30px !important;
    top: 0 !important; right: 0 !important; bottom: auto !important;
    transform: none !important; -webkit-transform: none !important;
}
.zc-content .body-top.body-top .select2-container--open .select2-selection,
.zc-content .body-top.body-top .select2-container--open .select2-selection--single {
    border-color: #0a474c !important; box-shadow: 0 0 0 3px rgba(10,71,76,.1) !important;
}
/* plain <select> when select2 has not initialised */
.zc-content .body-top.body-top .select-group select,
.zc-content .body-top.body-top .select-group .form--control {
    height: 38px !important; min-height: 38px !important;
    padding: 0 12px !important; border: 1px solid #e2e8f0 !important;
    border-radius: 7px !important; font-size: 13px !important;
    background: #fff !important; color: #1f2d3d !important;
}
@media (max-width: 575px) {
    .zc-content .body-top.body-top .select2-container { width: 100% !important; min-width: 0 !important; }
    .zc-content .body-top.body-top .select-group { width: 100% !important; }
}

/* ── Template Messages (AiSensy-style: guide + launch cards + tabs + library) ── */
.zc-tpl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.zc-tpl-head__r{display:flex;gap:8px;flex-wrap:wrap;}
.zc-tpl-top{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;margin-bottom:18px;align-items:start;}
@media(max-width:1099px){.zc-tpl-top{grid-template-columns:minmax(0,1fr);}}
.zc-tpl-guide{background:#f0f7f4;border:1px solid #dcece5;border-radius:8px;padding:16px 18px;}
.zc-tpl-guide__k{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5d8577;}
.zc-tpl-guide h6{font-size:16px;font-weight:700;color:#0f172a;margin:6px 0 8px;}
.zc-tpl-guide p{font-size:12.5px;color:#5f7d73;margin:0 0 12px;line-height:1.55;}
.zc-tpl-guide ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.zc-tpl-guide a{font-size:12.5px;color:#0a474c;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.zc-tpl-guide a:hover{text-decoration:underline;}
.zc-tpl-guide a i{font-size:12px;opacity:.7;}
.zc-tpl-launch{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:18px 20px;}
.zc-tpl-launch h6{font-size:15.5px;font-weight:700;color:#0f172a;margin:0 0 14px;}
.zc-tpl-launch__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:760px){.zc-tpl-launch__grid{grid-template-columns:1fr;}}
.zc-tpl-lc{display:flex;gap:12px;align-items:flex-start;border:1px solid #e9edf3;border-radius:8px;padding:13px 14px;
    text-decoration:none;transition:border-color .15s,box-shadow .15s;background:#fff;}
.zc-tpl-lc:hover{border-color:#c8d8d6;box-shadow:0 2px 10px rgba(15,23,42,.06);text-decoration:none;}
.zc-tpl-lc__ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    font-size:18px;flex-shrink:0;}
.zc-tpl-lc__ico.ico-teal{background:#e6f0ef;color:#0a474c;}
.zc-tpl-lc__ico.ico-violet{background:#ede9fe;color:#6d43c8;}
.zc-tpl-lc__ico.ico-blue{background:#e8f1fe;color:#1877f2;}
.zc-tpl-lc__ico.ico-amber{background:#fef3c7;color:#92600e;}
.zc-tpl-lc strong{display:block;font-size:13.5px;color:#0f172a;margin-bottom:2px;}
.zc-tpl-lc span{display:block;font-size:12px;color:#6b7684;line-height:1.45;}
.zc-tpl-tag{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:4px;
    background:#e8f1fe;color:#1877f2;margin-left:5px;vertical-align:middle;}
.zc-tpl-tag.ai{background:#f3e8ff;color:#7c3aed;}
.zc-tpl-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.zc-tpl-bar .search-form{max-width:320px;flex:1 1 240px;}
.zc-tpl-tabs{display:flex;gap:4px;flex-wrap:wrap;}
.zc-tpl-tab{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#5f6b76;
    padding:7px 12px;border-radius:7px;text-decoration:none;border:1px solid transparent;}
.zc-tpl-tab:hover{background:#f1f5f5;color:#0f172a;text-decoration:none;}
.zc-tpl-tab.on{background:#0a474c;color:#fff;}
.zc-tpl-tab em{font-style:normal;font-size:11px;background:rgba(0,0,0,.08);padding:1px 6px;border-radius:20px;}
.zc-tpl-tab.on em{background:rgba(255,255,255,.2);}
.zc-tpl-hint{font-size:12.5px;color:#6b7684;display:flex;align-items:center;gap:6px;margin:0 0 14px;}
.zc-tpl-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.zc-tpl-card{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:16px 17px;display:flex;flex-direction:column;gap:10px;}
.zc-tpl-card__h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.zc-tpl-card__h strong{font-size:14px;color:#0f172a;}
.zc-tpl-badge{font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:4px;}
.zc-tpl-badge.ut{background:#e6f0ef;color:#0a474c;}
.zc-tpl-badge.mk{background:#fef3c7;color:#92600e;}
.zc-tpl-card__b{font-size:12.5px;color:#3b4a54;line-height:1.55;margin:0;flex:1;
    background:#f7faf9;border-radius:8px;padding:11px 12px;}
.zc-tpl-card__f{font-size:11px;color:#9aa5b1;}

/* ── History: conversation archive (AiSensy 3-pane) ── */
.zc-main:has(.zc-hist) .zc-topbar{display:none;}
.zc-dashboard:has(.zc-hist) .zc-content{padding:0!important;}
.zc-hist{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;height:100vh;background:#fff;}
@media(max-width:1199px){.zc-hist{grid-template-columns:300px minmax(0,1fr);} .zc-hist-profile{display:none;}}
@media(max-width:767px){.zc-hist{grid-template-columns:minmax(0,1fr);} .zc-hist-list{display:none;}}

.zc-hist-list{border-right:1px solid #e9edef;display:flex;flex-direction:column;min-height:0;background:#fff;}
.zc-hist-search{position:relative;padding:12px 14px;border-bottom:1px solid #f0f3f4;display:flex;align-items:center;}
.zc-hist-search i.la-search{position:absolute;left:26px;color:#8696a0;font-size:15px;}
.zc-hist-search input{width:100%;border:1px solid transparent;background:#f0f2f5;border-radius:8px;
    padding:8px 30px 8px 34px;font-size:13.5px;color:#3b4a54;}
.zc-hist-search input:focus{outline:none;background:#fff;border-color:#0a474c;}
.zc-hist-clear{position:absolute;right:26px;color:#8696a0;}
.zc-hist-rows{flex:1;overflow-y:auto;min-height:0;}
.zc-hist-row{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid #f5f6f6;
    text-decoration:none;border-left:3px solid transparent;}
.zc-hist-row:hover{background:#f5f6f6;text-decoration:none;}
.zc-hist-row.on{background:#e9f7f1;border-left-color:#0a474c;}
.zc-hist-row .contact_thumb{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;}
.zc-hist-row .contact_thumb img{width:100%;height:100%;object-fit:cover;}
.zc-hist-row__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.zc-hist-row__n{font-size:13.5px;font-weight:600;color:#111b21;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zc-hist-row__p{font-size:12px;color:#667781;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zc-hist-row__d{font-size:11px;color:#8696a0;white-space:nowrap;flex-shrink:0;}
.zc-hist-empty-list{padding:40px 20px;text-align:center;color:#8696a0;display:flex;flex-direction:column;gap:8px;}
.zc-hist-empty-list i{font-size:30px;}
.zc-hist-foot{border-top:1px solid #f0f3f4;padding:9px 14px;display:flex;align-items:center;
    justify-content:space-between;font-size:12px;color:#667781;}
.zc-hist-foot__p{display:flex;gap:10px;}
.zc-hist-foot__p a{color:#0a474c;}
.zc-hist-foot__p .is-off{color:#cbd5e1;}

.zc-hist-thread{display:flex;flex-direction:column;min-width:0;min-height:0;
    background:#e5ddd5 url('../images/chat-bg.png') repeat;background-size:615px auto;}
.zc-hist-thread__h{display:flex;align-items:center;gap:11px;padding:10px 16px;background:#0a474c;color:#fff;}
.zc-hist-thread__h .contact_thumb{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;}
.zc-hist-thread__h > div{flex:1;min-width:0;display:flex;flex-direction:column;}
.zc-hist-thread__n{font-size:14.5px;font-weight:600;}
.zc-hist-thread__s{font-size:11.5px;opacity:.75;}
.zc-hist-msgs{flex:1;overflow-y:auto;min-height:0;padding:16px 7%;display:flex;flex-direction:column;}
.zc-hist-day{align-self:center;margin:10px 0;}
.zc-hist-day span{background:#fff;color:#54656f;font-size:11.5px;font-weight:600;padding:4px 11px;
    border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);}
.zc-hist-b{max-width:62%;width:fit-content;background:#fff;border-radius:8px;padding:6px 9px 4px;margin:1px 0;
    box-shadow:0 1px .5px rgba(11,20,26,.13);align-self:flex-start;}
.zc-hist-b.out{background:#d9fdd3;align-self:flex-end;}
.zc-hist-b p{font-size:14px;line-height:1.42;color:#111b21;margin:0;word-break:break-word;}
.zc-hist-b__meta{display:block;font-size:12px;color:#54656f;margin-bottom:3px;}
.zc-hist-b__t{display:block;text-align:right;font-size:10.8px;color:#667781;margin-top:2px;}

.zc-hist-blank{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;}
.zc-hist-blank__t{font-size:17px;color:#41525d;margin:0;}
.zc-hist-blank__links{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;}
.zc-hist-blank__links a{font-size:13px;color:#0a474c;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.zc-hist-blank__links a:hover{text-decoration:underline;}

.zc-hist-profile{border-left:1px solid #e9edef;background:#fff;display:flex;flex-direction:column;min-height:0;}
.zc-hist-profile__h{background:#0a474c;color:#fff;font-size:14px;font-weight:600;padding:13px 16px;text-align:center;}
.zc-hist-profile__b{padding:20px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;overflow-y:auto;}
.zc-hist-profile__av .contact_thumb{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:26px;font-weight:700;color:#fff;overflow:hidden;margin-bottom:6px;}
.zc-hist-profile__av .contact_thumb img{width:100%;height:100%;object-fit:cover;}
.zc-hist-profile__n{font-size:15.5px;font-weight:700;color:#111b21;}
.zc-hist-profile__m{font-size:13px;color:#0a474c;font-weight:600;margin-bottom:10px;}
.zc-hist-kv{width:100%;margin:0 0 14px;display:flex;flex-direction:column;gap:9px;}
.zc-hist-kv div{display:flex;justify-content:space-between;gap:10px;}
.zc-hist-kv dt{font-size:12px;color:#667781;margin:0;}
.zc-hist-kv dd{font-size:12.5px;color:#111b21;margin:0;font-weight:600;}
.zc-hist-tags{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin-bottom:14px;}
.zc-hist-tags span{background:#e6f0ef;color:#0a474c;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px;}
.zc-hist-profile__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;color:#8696a0;font-size:12.5px;padding:20px;text-align:center;}
.zc-hist-profile__empty i{font-size:34px;}

/* History: own the viewport like the inbox does — no page title bar above it */
html body .zc-content:has(.zc-hist) .zc-page-head{display:none!important;}
html body .zc-dashboard .zc-content:has(.zc-hist){padding:0!important;}
.zc-hist{height:100vh;overflow:hidden;}
.zc-hist-thread{position:relative;background:#efeae2;}
.zc-hist-thread::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:url('../images/chat-bg.png') repeat;background-size:615px auto;opacity:.4;}
.zc-hist-thread > *{position:relative;z-index:1;}

/* the avatar is a <div> too — keep it out of the "stretch to fill" rule */
.zc-hist-thread__h > .contact_thumb{flex:0 0 38px!important;width:38px!important;}
.zc-hist-thread__h > div:not(.contact_thumb){flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.zc-hist-thread__h .btn{flex:0 0 auto;}
.zc-hist-profile__av .contact_thumb{flex:0 0 74px!important;width:74px!important;}
.zc-hist-rows::-webkit-scrollbar{width:6px;}
.zc-hist-rows::-webkit-scrollbar-thumb{background:#d3dae0;border-radius:3px;}
.zc-hist-rows::-webkit-scrollbar-track{background:transparent;}
.zc-hist-msgs::-webkit-scrollbar{width:6px;}
.zc-hist-msgs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px;}
.zc-hist-msgs::-webkit-scrollbar-track{background:transparent;}

/* Mobile: one pane at a time — list until a chat is picked, then the thread */
@media(max-width:767px){
  .zc-hist-list{display:flex;}
  .zc-hist:not(.has-active) .zc-hist-thread{display:none;}
  .zc-hist.has-active .zc-hist-list{display:none;}
  .zc-hist.has-active .zc-hist-thread{display:flex;}
  .zc-hist-back{display:inline-flex!important;}
}
.zc-hist-back{display:none;align-items:center;justify-content:center;width:30px;height:30px;
    color:#fff;font-size:19px;flex:0 0 30px;margin-left:-4px;}
.zc-hist-back:hover{color:#fff;}

/* ══════════════════════════════════════════════════════════════════
   Shared page shell — the same guide + launch + panel layout the
   WA Payments and Billing screens use, under generic names so any
   section can reach for it. Flat surfaces, teal accents, no
   gradients and no motion: AiSensy's pages sit still.
   ══════════════════════════════════════════════════════════════════ */
.zc-pg{display:flex;flex-direction:column;gap:16px;}
.zc-pg-top{display:grid;grid-template-columns:300px minmax(0,1fr);background:#fff;border-radius:8px;
    box-shadow:0 0 11px #e6e6e6;overflow:hidden;}
.zc-pg-guide{background:#eef6f3;padding:20px;display:flex;flex-direction:column;gap:7px;}
.zc-pg-guide__k{font-size:10.5px;font-weight:700;color:#4d6d67;text-transform:uppercase;letter-spacing:.07em;}
.zc-pg-guide h6{font-size:18px;font-weight:600;color:#0f172a;margin:0;}
.zc-pg-guide p{font-size:12.8px;color:#4d6d67;margin:0;}
.zc-pg-guide a{font-size:13px;font-weight:500;color:#0a474c;text-decoration:none;margin-top:2px;}
.zc-pg-guide a:hover{text-decoration:underline;}
.zc-pg-actions{padding:20px 22px;}
.zc-pg-actions__h{font-size:17px;font-weight:600;color:#0f172a;margin:0 0 14px;}
.zc-pg-actions__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:1100px){.zc-pg-top{grid-template-columns:1fr;}.zc-pg-actions__grid{grid-template-columns:1fr;}}

.zc-pg-panel{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;}
.zc-pg-panel__h{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid #eef1f4;
    font-size:15px;font-weight:600;color:#0f172a;}
.zc-pg-panel__h .r{margin-left:auto;display:flex;gap:8px;align-items:center;}
.zc-pg-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.zc-pg-bar .sp{margin-left:auto;}
.zc-pg-search{position:relative;min-width:280px;}
.zc-pg-search input{width:100%;border:1px solid #e6ebee;border-radius:8px;padding:9px 14px 9px 36px;
    font-size:13.5px;background:#fff;color:#3b4a54;}
.zc-pg-search input:focus{outline:none;border-color:#0a474c;}
.zc-pg-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8a93a0;font-size:17px;}
.zc-pg-empty{text-align:center;padding:56px 20px;}
.zc-pg-empty i{font-size:38px;color:#c3cdd4;}
.zc-pg-empty h6{font-size:16px;font-weight:600;color:#0f172a;margin:12px 0 4px;}
.zc-pg-empty p{font-size:13.5px;color:#6b7684;margin:0 0 16px;}

.zc-pg-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.zc-pg-kpi{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:16px 18px;
    display:flex;align-items:center;gap:13px;}
.zc-pg-kpi b{font-size:22px;font-weight:600;color:#0f172a;line-height:1.25;display:block;}
.zc-pg-kpi span{font-size:12.5px;color:#6b7684;}
.zc-pg-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:19px;flex:none;}
.zc-tone-green{background:#e6f4ea;color:#116b3a;}
.zc-tone-blue{background:#e8f1fe;color:#1877f2;}
.zc-tone-violet{background:#efe9fd;color:#6d3fd4;}
.zc-tone-amber{background:#fff4e0;color:#a86b00;}
.zc-tone-teal{background:#e0f2f1;color:#0a474c;}
.zc-tone-slate{background:#eef1f4;color:#48606d;}

.zc-pg-chip{font-size:11.5px;font-weight:400;padding:3px 9px;border-radius:20px;display:inline-block;}
.zc-pg-chip.ok{background:#e6f4ea;color:#116b3a;}
.zc-pg-chip.off{background:#fdeaea;color:#a52222;}
.zc-pg-chip.warn{background:#fff4e0;color:#a86b00;}

.zc-pg-link{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;
    box-shadow:0 0 11px #e6e6e6;padding:10px 14px;}
.zc-pg-link .lead{color:#0a474c;font-size:18px;}
.zc-pg-link input{border:0;background:transparent;font-size:13.3px;color:#3b4a54;flex:1;outline:none;min-width:0;}

.zc-pg-cell{display:flex;align-items:center;gap:11px;}
.zc-pg-thumb{width:38px;height:38px;border-radius:8px;background:#eef1f4;color:#48606d;flex:none;
    display:inline-flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;}
.zc-pg-thumb img{width:100%;height:100%;object-fit:cover;}
.zc-pg-cell strong{font-size:13.8px;font-weight:600;color:#0f172a;display:block;}
.zc-pg-cell em{font-size:12px;color:#8a93a0;font-style:normal;}

/* ── Welcome message: the card AiSensy shows in Live Chat Settings —
   toggle on the header, the real message rendered as a WhatsApp bubble ── */
.zc-wm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:16px;}
@media(max-width:900px){.zc-wm-grid{grid-template-columns:1fr;}}
.zc-wm{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;padding:20px 22px;
    display:flex;flex-direction:column;}
.zc-wm__h{display:flex;align-items:flex-start;gap:12px;}
.zc-wm__h strong{font-size:15px;font-weight:600;color:#0f172a;display:block;}
.zc-wm__h em{font-size:12.8px;color:#6b7684;font-style:normal;}
.zc-wm__h .sw{margin-left:auto;flex:none;}
.zc-wm-prev{margin-top:16px;background:#eae6df;border-radius:8px;padding:20px 18px;
    display:flex;justify-content:center;}
.zc-wm-bub{background:#fff;border-radius:8px;padding:12px 14px;max-width:340px;font-size:13.5px;
    color:#111b21;line-height:1.55;position:relative;box-shadow:0 1px 1px rgba(11,20,26,.13);}
.zc-wm-bub .wa{position:absolute;left:-10px;top:-10px;width:22px;height:22px;border-radius:50%;
    background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;}
.zc-wm__f{margin-top:14px;display:flex;align-items:center;gap:10px;}
.zc-wm__f .zc-pg-chip{margin-left:auto;}

/* ── Automation templates: flat card, numbered teal steps, no motion ── */
.zc-tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:16px;}
@media(max-width:900px){.zc-tpl-grid{grid-template-columns:1fr;}}
.zc-tpl{background:#fff;border-radius:8px;box-shadow:0 0 11px #e6e6e6;display:flex;flex-direction:column;}
.zc-tpl__h{display:flex;gap:13px;padding:20px 22px 14px;}
.zc-tpl__k{font-size:10.5px;font-weight:700;color:#4d6d67;text-transform:uppercase;letter-spacing:.07em;}
.zc-tpl__h strong{font-size:16px;font-weight:600;color:#0f172a;display:block;margin-top:3px;}
.zc-tpl__d{font-size:13px;color:#6b7684;padding:0 22px 14px;margin:0;line-height:1.6;}
.zc-tpl-steps{border-top:1px solid #eef1f4;padding:4px 22px;}
.zc-tpl-step{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f4f6f8;}
.zc-tpl-step:last-child{border-bottom:0;}
.zc-tpl-step__i{width:30px;height:30px;border-radius:50%;background:#e0f2f1;color:#0a474c;flex:none;
    display:flex;align-items:center;justify-content:center;font-size:14px;}
.zc-tpl-step strong{font-size:13.5px;font-weight:600;color:#0f172a;display:block;}
.zc-tpl-step em{font-size:12.3px;color:#6b7684;font-style:normal;}
.zc-tpl-step b{margin-left:auto;font-size:11.5px;color:#b9c1c8;font-weight:400;flex:none;}
.zc-tpl__f{margin-top:auto;display:flex;align-items:center;gap:16px;padding:14px 22px;border-top:1px solid #eef1f4;}
.zc-tpl__f span{font-size:12.5px;color:#6b7684;display:inline-flex;align-items:center;gap:6px;}
.zc-tpl__f form{margin-left:auto;margin-bottom:0;}

/* ── Plain overlay modal (used where a fetch-driven dialog already exists) ── */
.zc-md{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9999;
    align-items:center;justify-content:center;padding:24px;}
.zc-md__c{background:#fff;border-radius:8px;width:100%;max-width:460px;box-shadow:0 18px 48px rgba(15,23,42,.22);}
.zc-md__h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #eef1f4;
    font-size:15px;font-weight:600;color:#0f172a;}
.zc-md__x{margin-left:auto;width:30px;height:30px;border-radius:6px;background:#f2f5f6;border:0;
    color:#6b7684;cursor:pointer;font-size:15px;}
.zc-md__b{padding:18px 20px;}
.zc-md__b label{font-size:12.8px;color:#4d6d67;display:block;margin-bottom:5px;}
.zc-md-inp{width:100%;border:1px solid #e6ebee;border-radius:8px;padding:9px 13px;font-size:13.5px;
    color:#3b4a54;background:#fff;margin-bottom:13px;}
.zc-md-inp:focus{outline:none;border-color:#0a474c;}
.zc-md-row{display:flex;gap:11px;}
.zc-md-row>div{flex:1;}

/* The module walkthrough tab: keep it, but as a quiet teal tab like the
   one AiSensy parks on the right edge — not a pink gradient slab. */
.zcg-tab{background:#0a474c!important;background-image:none!important;font-weight:500!important;
    font-size:12px!important;letter-spacing:normal!important;border-radius:8px 0 0 8px!important;
    box-shadow:0 2px 10px rgba(10,71,76,.22)!important;padding:14px 9px!important;}
.zcg-tab:hover{padding-right:12px!important;box-shadow:0 3px 14px rgba(10,71,76,.3)!important;}
.zcg-top{background:#0a474c!important;background-image:none!important;}
.zcg-top h6{font-weight:600!important;}


/* ══════════════════════════════════════════════════════════════════
   Create Campaign - control + preview structure
   main.css paints .select2-selection__rendered as its own bordered box
   (white bg + 1px #c1c9d0 + radius 8), so with the container and the
   selection also carrying chrome every select rendered as three nested
   boxes with the arrow pinned to the outermost one - which is why the
   arrow floated outside the visible field. Here the rendered span goes
   back to being only a text layer and the whole control sits on one
   42px band that matches the filled .form--control beside it.
   ══════════════════════════════════════════════════════════════════ */
.zc-content .ccm-sec.ccm-sec .select2-container {
    width: 100% !important; height: auto !important; min-height: 42px !important;
    display: block !important; border: none !important; border-radius: 0 !important;
    /* select2 keeps an empty inline .dropdown-wrapper here; its line box added
       5px under the field, which threw off select2 own dropdown positioning.
       The dropdown renders inside that wrapper, so line-height is restored
       there rather than the wrapper being hidden. */
    line-height: 0 !important;
}
.zc-content .ccm-sec.ccm-sec .select2-container > .selection { display: block !important; }
/* the empty inline-block wrapper still sat on the baseline, leaving a 7px
   dead strip under every select; top-aligning it removes that strip */
.zc-content .ccm-sec.ccm-sec .select2-container > .dropdown-wrapper { vertical-align: top !important; }
.zc-content .ccm-sec.ccm-sec .select2-container .select2-dropdown { line-height: normal !important; }
.zc-content .ccm-sec.ccm-sec .select2-container .select2-selection--single {
    height: 42px !important; min-height: 42px !important; padding: 0 !important;
    display: block !important; background: #f7f8f9 !important;
    border: none !important; border-bottom: 1px solid #dfe3e8 !important;
    border-radius: 4px 4px 0 0 !important; box-shadow: none !important;
}
.zc-content .ccm-sec.ccm-sec .select2-container .select2-selection--single .select2-selection__rendered {
    height: 42px !important; line-height: 42px !important;
    padding: 0 40px 0 14px !important; margin: 0 !important;
    border: none !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 400 !important; color: #0f172a !important;
}
.zc-content .ccm-sec.ccm-sec .select2-container .select2-selection__arrow {
    height: 42px !important; width: 36px !important;
    top: 0 !important; right: 0 !important; bottom: auto !important;
    transform: none !important; -webkit-transform: none !important;
}

/* multi-select (contact list / tags) on the same band, chips inside */
.zc-content .ccm-sec.ccm-sec .select2-container .select2-selection--multiple {
    min-height: 42px !important; height: auto !important; padding: 4px 12px !important;
    background: #f7f8f9 !important; border: none !important;
    border-bottom: 1px solid #dfe3e8 !important; border-radius: 4px 4px 0 0 !important;
    box-shadow: none !important; display: flex !important; align-items: center !important;
    flex-wrap: wrap !important; gap: 6px !important;
}
.zc-content .ccm-sec.ccm-sec .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 6px !important; width: auto !important; max-width: 100% !important;
    min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    line-height: normal !important; border: none !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
}
.zc-content .ccm-sec.ccm-sec .select2-selection--multiple .select2-search--inline {
    flex: 1 1 90px !important; min-width: 90px !important; display: block !important;
}
.zc-content .ccm-sec.ccm-sec .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
}
.zc-content .ccm-sec.ccm-sec .select2-selection__choice {
    background: #e8f0ef !important; border: 1px solid #cfe0de !important;
    border-radius: 5px !important; color: #0a474c !important;
    font-size: 12.5px !important; padding: 3px 8px !important; margin: 3px 0 !important;
}
.zc-content .ccm-sec.ccm-sec .select2-selection__choice__remove { color: #0a474c !important; margin-right: 5px !important; }
.zc-content .ccm-sec.ccm-sec .select2-search--inline { margin: 0 !important; }
.zc-content .ccm-sec.ccm-sec .select2-search--inline .select2-search__field {
    margin: 0 !important; height: 34px !important; line-height: 34px !important;
    font-size: 14px !important; border: none !important; background: transparent !important;
}
.zc-content .ccm-sec.ccm-sec .select2-container--open .select2-selection--single,
.zc-content .ccm-sec.ccm-sec .select2-container--open .select2-selection--multiple,
.zc-content .ccm-sec.ccm-sec .select2-container--focus .select2-selection--multiple {
    background: #f2f5f5 !important; border-bottom-color: #0a474c !important; border-top: none !important;
    border-left: none !important; border-right: none !important;
}

/* .ccm-two is a CSS grid; the leftover Bootstrap col classes halved a cell */
.zc-content .ccm-two > .ccm-f {
    width: auto !important; max-width: none !important; flex: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
}

.zc-content .ccm-submit { margin-top: 6px; }

/* ── Template preview: avatar + bubble, both inside the column ──
   .ccm-prev-wa was absolutely positioned at left:-10px/top:-14px, so the
   green badge hung outside the panel. It is a normal flex avatar now. */
.zc-content .ccm-preview {
    position: sticky; top: 16px;
    background: #fafbfc; border: 1px solid #eef1f3; border-radius: 10px; padding: 16px;
}
.zc-content .ccm-preview .ccm-help { margin-bottom: 0; }
.zc-content .ccm-prev-wrap {
    position: relative; display: flex; align-items: flex-start; gap: 9px;
    padding-left: 0; margin-top: 14px;
}
.zc-content .ccm-prev-wa {
    position: static; width: 28px; height: 28px; border-radius: 50%;
    background: #25d366; color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 17px; flex-shrink: 0;
}
.zc-content .ccm-prev-card {
    flex: 1 1 auto; min-width: 0; max-width: 100%;
    border-top-left-radius: 3px; overflow: hidden;
}
/* .card-item carries its own border + bootstrap col padding, which drew a
   second box inside the bubble and pushed the text against its edge */
.zc-content .ccm-prev-card .card-item {
    border: none !important; background: transparent !important; box-shadow: none !important;
    border-radius: 0 !important; padding: 0 !important; margin: 0 !important; width: 100% !important;
    max-width: 100% !important; flex: none !important;
}
.zc-content .ccm-prev-card .card-item__title,
.zc-content .ccm-prev-card .card-item__desc,
.zc-content .ccm-prev-card .footer_text { overflow-wrap: anywhere; }
.zc-content .ccm-prev-card .card-item__thumb:empty { display: none; }
.zc-content .ccm-prev-card .button-preview .btn,
.zc-content .ccm-prev-card .button-preview a { max-width: 100%; overflow-wrap: anywhere; }

/* Page title takes the slack so several actions stay grouped on the right. */
html body .zc-content .zc-page-h1{flex:1 1 auto;min-width:0;}
.zc-page-btn.ghost{background:#fff;color:#0a474c!important;border:1px solid #d5dde0;}
.zc-page-btn.ghost:hover{background:#f2f5f6;color:#0a474c!important;}

/* Modal field labels: sentence case, matching every other form in the app. */
html body .label-two{text-transform:none!important;font-weight:400!important;font-size:12.8px!important;
    color:#4d6d67!important;letter-spacing:normal!important;}

/* select2 single-select: the stock height clips the selected text inside modals. */
.select2-container--default .select2-selection--single{height:auto!important;min-height:42px;
    display:flex!important;align-items:center;border:1px solid #e6ebee!important;border-radius:8px!important;}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.5!important;
    padding-left:13px!important;padding-right:28px!important;color:#3b4a54!important;font-size:13.5px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%!important;top:0!important;}
.select2-container--default .select2-selection--single .select2-selection__arrow b{top:50%!important;}

/* ══ Ads Manager — measured off AiSensy's own Ads Manager ══
   rail sub-nav item 248x40 r5 #ebf5f3 active · hero #02545a r8 p24/32
   cards r16 1px #ececec · tiles r12 p16 1px #e6e6e6 · chips 10/700 r10
   content bg #f7f7f7 · th 12/600 #6e6e6e · KPI cell white r12 */
html body .zc-content:has(.zc-am) .zc-page-head{display:none!important;}
html body .zc-dashboard .zc-content:has(.zc-am){padding:0!important;background:#f7f7f7!important;}

.zc-am-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:12px 24px;background:#fff;border-bottom:1px solid #ececec;position:sticky;top:0;z-index:6;}
.zc-am-bar__t{font-size:17px;font-weight:600;color:#1f2d3d;margin:0;}
.zc-am-bar__r{display:flex;align-items:center;gap:10px;}
.zc-am-credit{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#4a4a4a;}
.zc-am-credit i{font-size:16px;color:#0a474c;}

.zc-am-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;
    padding:7px 14px;border-radius:6px;border:1px solid transparent;text-decoration:none;line-height:1.2;}
.zc-am-btn i{font-size:15px;}
.zc-am-btn--ghost{background:#fff;border-color:#dcdcdc;color:#4a4a4a;}
.zc-am-btn--ghost:hover{background:#f5f5f5;color:#0a474c;text-decoration:none;}
.zc-am-btn--solid{background:#0a474c;color:#fff;}
.zc-am-btn--solid:hover{background:#08383c;color:#fff;text-decoration:none;}
.zc-am-btn.is-off{background:#f0f0f0!important;border-color:#e6e6e6!important;color:#b0b0b0!important;
    pointer-events:none;cursor:default;}

.zc-am{padding:20px 24px 40px;background:#f7f7f7;min-height:calc(100vh - 57px);}

/* ── dark connect banner ── */
.zc-am-hero{position:relative;overflow:hidden;background:#02545a;border-radius:8px;
    padding:24px 32px;box-shadow:0 0 11px #e6e6e6;color:#fff;margin-bottom:20px;}
.zc-am-hero__coin,.zc-am-hero__gift{position:absolute;font-size:42px;opacity:.9;line-height:1;}
.zc-am-hero__coin{left:24px;top:56px;}
.zc-am-hero__gift{right:36px;top:44px;font-size:56px;}
.zc-am-hero__h{font-size:19px;font-weight:700;margin:0 0 14px;padding-left:52px;color:#fff;}
.zc-am-hero__h span{color:#ffd166;}
.zc-am-hero__box{background:rgba(255,255,255,.08);border-radius:8px;padding:14px 18px;
    margin:0 200px 18px 52px;}
.zc-am-hero__box strong{display:block;font-size:14.5px;font-weight:600;margin-bottom:4px;}
.zc-am-hero__box p{font-size:12px;line-height:1.5;opacity:.82;margin:0 0 8px;}
.zc-am-hero__links{display:flex;flex-wrap:wrap;gap:26px;}
.zc-am-hero__links a{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:12.5px;text-decoration:none;}
.zc-am-hero__links a:hover{color:#ffd166;text-decoration:none;}

.zc-am-steps{list-style:none;display:flex;align-items:flex-start;gap:0;margin:0 0 14px;padding:0 0 0 52px;}
.zc-am-steps li{position:relative;flex:0 0 auto;min-width:170px;padding-right:36px;
    display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 8px;}
.zc-am-steps li:not(:last-child)::after{content:'';position:absolute;left:34px;right:12px;top:11px;
    height:1px;background:rgba(255,255,255,.35);}
.zc-am-steps__n{grid-row:1/2;width:22px;height:22px;border-radius:50%;background:#f0a202;color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;z-index:1;}
.zc-am-steps li.is-done .zc-am-steps__n{background:#25d366;}
.zc-am-steps__k{grid-row:2/3;grid-column:1/3;font-size:9.5px;letter-spacing:.4px;opacity:.85;margin-top:8px;text-transform:uppercase;}
.zc-am-steps__k em{font-style:normal;color:#f0a202;font-weight:700;}
.zc-am-steps li.is-done .zc-am-steps__k em{color:#25d366;}
.zc-am-steps__l{grid-row:3/4;grid-column:1/3;font-size:11.5px;font-weight:600;margin-top:2px;}
.zc-am-steps__prize .zc-am-steps__n{background:transparent;font-size:20px;}
.zc-am-hero__foot{display:flex;align-items:center;gap:7px;font-size:12px;margin:0;padding-left:52px;opacity:.9;}
.zc-am-hero__foot a{color:#ffd166;text-decoration:underline;}

/* ── tabs ── */
.zc-am-tabs{display:flex;gap:26px;border-bottom:1px solid #e6e6e6;margin-bottom:16px;background:transparent;}
.zc-am-tabs a{font-size:14px;font-weight:500;color:#8a8a8a;text-decoration:none;padding:10px 2px;
    border-bottom:2px solid transparent;}
.zc-am-tabs a:hover{color:#0a474c;text-decoration:none;}
.zc-am-tabs a.on{color:#0a474c;border-bottom-color:#0a474c;}

.zc-am-gate{display:block;text-align:center;font-size:14px;font-weight:500;color:#0a474c;
    text-decoration:none;padding:10px 0 18px;}
.zc-am-gate:hover{text-decoration:underline;color:#0a474c;}

/* ── toolbars ── */
.zc-am-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.zc-am-tools--2{margin-bottom:16px;}
.zc-am-tools__r{display:flex;align-items:center;gap:10px;}
.zc-am-search{position:relative;display:flex;align-items:center;flex:0 0 340px;max-width:100%;}
.zc-am-search--wide{flex:0 0 100%;margin-bottom:14px;}
.zc-am-search i{position:absolute;left:12px;color:#9aa5ab;font-size:15px;}
.zc-am-search input{width:100%;height:38px;border:1px solid #e0e0e0;background:#fff;border-radius:6px;
    padding:0 12px 0 34px;font-size:13px;color:#3b4a54;}
.zc-am-search input:focus{outline:none;border-color:#0a474c;}
.zc-am-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.zc-am-sel{height:38px;border:1px solid #e0e0e0;background:#fff;border-radius:6px;padding:0 30px 0 12px;
    font-size:13px;color:#4a4a4a;min-width:150px;}
.zc-am-sel:focus{outline:none;border-color:#0a474c;}
.zc-am-range{display:inline-flex;align-items:center;gap:7px;height:38px;border:1px solid #e0e0e0;
    background:#fff;border-radius:6px;padding:0 14px;font-size:12.5px;color:#4a4a4a;}
.zc-am-range i{font-size:15px;color:#0a474c;}

.zc-am-seg{display:inline-flex;background:#eef1f2;border-radius:8px;padding:3px;gap:2px;}
.zc-am-seg a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:#6e7c85;
    padding:6px 16px;border-radius:6px;text-decoration:none;}
.zc-am-seg a:hover{color:#0a474c;text-decoration:none;}
.zc-am-seg a.on{background:#fff;color:#0a474c;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.zc-am-seg a em{font-style:normal;font-size:11px;font-weight:700;background:#e0e6e8;color:#0a474c;
    border-radius:9px;padding:1px 6px;}
.zc-am-seg a.on em{background:#e6f0ef;}

/* ── KPI strip ── */
.zc-am-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:16px;}
.zc-am-kpis--3{grid-template-columns:repeat(3,1fr);}
.zc-am-kpi{background:#fff;border-radius:12px;padding:19px 13px 19px 24px;border:1px solid #ececec;
    display:flex;flex-direction:column;gap:12px;min-width:0;}
.zc-am-kpi__l{font-size:12px;color:#5c6b73;display:inline-flex;align-items:center;gap:5px;}
.zc-am-kpi__l i{font-size:13px;color:#b3bec4;cursor:help;}
.zc-am-kpi__v{font-size:22px;font-weight:700;color:#1f2d3d;line-height:1;}
.zc-am-kpi__v.is-na{color:#c3cbd0;font-weight:500;}

/* ── quick guide card ── */
.zc-am-guide{display:grid;grid-template-columns:300px minmax(0,1fr);background:#fff;border:1px solid #ececec;
    border-radius:16px;overflow:hidden;margin-bottom:22px;}
.zc-am-guide__l{padding:24px;border-right:1px solid #ececec;
    background:linear-gradient(rgba(37,211,102,.08) 0%,rgba(37,211,102,.02) 100%);}
.zc-am-guide__k{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
    color:#0a474c;margin-bottom:10px;}
.zc-am-guide__l h3{font-size:20px;font-weight:600;color:#4a4a4a;line-height:1.3;margin:0 0 12px;}
.zc-am-guide__l p{font-size:12.5px;line-height:1.55;color:#7b868c;margin:0 0 14px;}
.zc-am-guide__l a{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#4a4a4a;
    text-decoration:none;margin-bottom:6px;}
.zc-am-guide__l a:hover{color:#0a474c;text-decoration:none;}
.zc-am-guide__l a i{font-size:13px;}
.zc-am-guide__r{padding:24px;}
.zc-am-guide__r h3{font-size:20px;font-weight:700;color:#4a4a4a;margin:0 0 16px;}
.zc-am-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.zc-am-tile{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid #e6e6e6;
    border-radius:12px;padding:16px;text-decoration:none;min-height:78px;}
.zc-am-tile:hover{border-color:#0a474c;text-decoration:none;}
.zc-am-tile.is-rec{border-color:rgba(37,211,102,.35);
    background:linear-gradient(rgba(37,211,102,.06) 0%,rgba(37,211,102,.02) 100%);}
.zc-am-tile__i{flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
    justify-content:center;font-size:17px;background:rgba(37,211,102,.14);color:#0a7c43;}
.zc-am-tile__i.i-violet{background:#efe9ff;color:#6b3fd4;}
.zc-am-tile__i.i-rose{background:#ffe9ee;color:#d43f63;}
.zc-am-tile__i.i-blue{background:#e6f1ff;color:#2b6cd4;}
.zc-am-tile strong{display:block;font-size:13.5px;font-weight:600;color:#1f2d3d;margin-bottom:3px;}
.zc-am-tile span{display:block;font-size:12px;line-height:1.5;color:#7b868c;}
.zc-am-chip{font-style:normal;font-size:10px;font-weight:700;background:rgba(37,211,102,.15);color:#0a7c43;
    border-radius:10px;padding:2px 8px;margin-left:6px;vertical-align:middle;letter-spacing:.2px;}

/* ── tables ── */
.zc-am-tablewrap{background:#fff;border:1px solid #ececec;border-radius:12px;overflow-x:auto;}
.zc-am-table{width:100%;border-collapse:collapse;min-width:100%;}
.zc-am-table th{font-size:12px;font-weight:600;color:#6e6e6e;text-align:left;padding:16px 14px;
    background:#fff;border-bottom:1px solid #ececec;white-space:nowrap;}
.zc-am-table td{font-size:12.5px;color:#3b4a54;padding:14px;border-bottom:1px solid #f4f4f4;
    vertical-align:middle;white-space:nowrap;}
.zc-am-table tbody tr:last-child td{border-bottom:none;}
.zc-am-table tbody tr:hover{background:#fafbfb;}
.zc-am-nm{font-weight:600;color:#1f2d3d;}
.zc-am-sub{display:block;font-size:11.5px;color:#8a949a;}
.zc-am-clid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#8a949a;
    max-width:340px;overflow:hidden;text-overflow:ellipsis;}
.zc-am-who{display:flex;align-items:center;gap:10px;}
.zc-am-who .contact_thumb{flex:0 0 34px!important;width:34px!important;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;overflow:hidden;}
.zc-am-who .contact_thumb img{width:100%;height:100%;object-fit:cover;}
.zc-am-acts{display:inline-flex;gap:4px;}
.zc-am-acts a,.zc-am-acts button{width:28px;height:28px;border-radius:6px;border:1px solid #e6e6e6;
    background:#fff;color:#6e7c85;display:inline-flex;align-items:center;justify-content:center;font-size:14px;}
.zc-am-acts a:hover{color:#0a474c;border-color:#0a474c;}
.zc-am-acts button:hover{color:#d43f63;border-color:#d43f63;}
.zc-am-none td{text-align:center;color:#9aa5ab;padding:70px 14px!important;font-size:13px;}
.zc-am-st{display:inline-block;font-size:11px;font-weight:700;border-radius:10px;padding:3px 10px;letter-spacing:.2px;}
.zc-am-st--draft{background:#fff4e0;color:#a86a00;}
.zc-am-st--ready{background:#e6f1ff;color:#2b6cd4;}
.zc-am-st--live{background:rgba(37,211,102,.15);color:#0a7c43;}
.zc-am-st--paused{background:#f0f0f0;color:#77828a;}

.zc-am-foot{display:flex;align-items:center;justify-content:flex-end;gap:26px;padding:12px 4px 0;
    font-size:12px;color:#6e7c85;}
.zc-am-foot strong{font-weight:600;color:#3b4a54;}
.zc-am-foot__p{display:flex;gap:14px;font-size:14px;}
.zc-am-foot__p a{color:#0a474c;}
.zc-am-foot__p .is-off{color:#cfd6da;}

/* ── empty state ── */
.zc-am-empty{background:#fff;border:1px solid #ececec;border-radius:12px;padding:64px 20px;
    display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.zc-am-empty__i{width:70px;height:70px;border-radius:18px;background:#f0f4f5;color:#9fb0b5;
    display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:6px;}
.zc-am-empty strong{font-size:15px;color:#1f2d3d;}
.zc-am-empty p{font-size:12.5px;color:#8a949a;max-width:380px;margin:0 0 10px;line-height:1.55;}

/* ── Events: list panel + detail, AiSensy's split ── */
.zc-am--split{display:grid;grid-template-columns:280px minmax(0,1fr);gap:0;padding:0;
    min-height:calc(100vh - 57px);background:#fff;}
.zc-am-evlist{border-right:1px solid #ececec;display:flex;flex-direction:column;min-height:0;background:#fff;}
.zc-am-evlist header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;}
.zc-am-evlist header > span:first-child{font-size:14px;font-weight:600;color:#1f2d3d;}
.zc-am-evlist__a{display:flex;gap:6px;}
.zc-am-evlist__a a{width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;
    justify-content:center;color:#6e7c85;font-size:15px;}
.zc-am-evlist__a a:hover{background:#f0f4f5;color:#0a474c;}
.zc-am-evlist .zc-am-search{flex:0 0 auto;margin:0 16px 12px;}
.zc-am-evlist__b{flex:1;overflow-y:auto;min-height:0;padding:0 8px 16px;}
.zc-am-ev{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
    text-decoration:none;color:#3b4a54;}
.zc-am-ev:hover{background:#f5f7f7;text-decoration:none;color:#0a474c;}
.zc-am-ev.on{background:#ebf5f3;color:#0a474c;}
.zc-am-ev i{font-size:17px;}
.zc-am-ev span{flex:1;font-size:13px;font-weight:500;}
.zc-am-ev em{font-style:normal;font-size:11px;font-weight:700;color:#6e7c85;background:#eef1f2;
    border-radius:9px;padding:1px 7px;}
.zc-am-ev.on em{background:#fff;color:#0a474c;}
.zc-am-evmain{padding:16px 24px 40px;min-width:0;background:#f7f7f7;}

.zc-am-card{background:#fff;border:1px solid #ececec;border-radius:12px;padding:22px 24px;}
.zc-am-card h4{font-size:15px;font-weight:600;color:#1f2d3d;margin:0 0 4px;}
.zc-am-card__d{font-size:12.5px;color:#8a949a;margin:0 0 18px;}
.zc-am-kv{display:flex;flex-direction:column;gap:12px;margin:0 0 18px;}
.zc-am-kv div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #f4f4f4;padding-bottom:10px;}
.zc-am-kv div:last-child{border-bottom:none;padding-bottom:0;}
.zc-am-kv dt{font-size:12.5px;color:#7b868c;margin:0;}
.zc-am-kv dd{font-size:12.5px;color:#1f2d3d;font-weight:600;margin:0;text-align:right;}
.zc-am-note{display:flex;gap:8px;font-size:12px;line-height:1.55;color:#5c6b73;background:#f4f8f8;
    border-radius:8px;padding:11px 14px;margin:0;}
.zc-am-note i{font-size:15px;color:#0a474c;flex-shrink:0;}

@media(max-width:1199px){
  .zc-am-kpis{grid-template-columns:repeat(3,1fr);}
  .zc-am-guide{grid-template-columns:minmax(0,1fr);}
  .zc-am-guide__l{border-right:none;border-bottom:1px solid #ececec;}
  .zc-am-tiles{grid-template-columns:minmax(0,1fr);}
  .zc-am-hero__box{margin-right:120px;}
}
@media(max-width:767px){
  .zc-am,.zc-am-evmain{padding:14px;}
  .zc-am-bar{padding:10px 14px;flex-wrap:wrap;}
  .zc-am-kpis,.zc-am-kpis--3{grid-template-columns:repeat(2,1fr);}
  .zc-am--split{grid-template-columns:minmax(0,1fr);}
  .zc-am-evlist{border-right:none;border-bottom:1px solid #ececec;}
  .zc-am-hero{padding:18px;}
  .zc-am-hero__h,.zc-am-hero__box,.zc-am-steps,.zc-am-hero__foot{padding-left:0;margin-left:0;}
  .zc-am-hero__box{margin-right:0;}
  .zc-am-hero__coin,.zc-am-hero__gift{display:none;}
  .zc-am-steps{flex-direction:column;gap:14px;}
  .zc-am-steps li::after{display:none;}
  .zc-am-search{flex:0 0 100%;}
}

/* prize sits on the same label row as the steps; footer note reads white like AiSensy's */
.zc-am-steps__prize .zc-am-steps__l{grid-row:3/4;}
.zc-am-hero__foot{opacity:1;color:rgba(255,255,255,.92);}
.zc-am-hero__foot i{color:#ffd166;}

/* Forms grid, AiSensy card rhythm */
.zc-am-forms{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;}
.zc-am-form{background:#fff;border:1px solid #ececec;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px;}
.zc-am-form:hover{border-color:#0a474c;}
.zc-am-form header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.zc-am-form__t{font-size:14.5px;font-weight:600;color:#1f2d3d;line-height:1.35;}
.zc-am-form__s{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;
    background:#f7f9f9;border-radius:9px;padding:11px 8px;}
.zc-am-form__s div{display:flex;flex-direction:column;align-items:center;gap:2px;}
.zc-am-form__s dt{font-size:11px;color:#8a949a;margin:0;order:2;}
.zc-am-form__s dd{font-size:17px;font-weight:700;color:#0a474c;margin:0;order:1;line-height:1;}
.zc-am-form__lnk{display:flex;align-items:center;gap:7px;border:1px solid #e6e6e6;border-radius:8px;padding:0 6px 0 10px;height:34px;}
.zc-am-form__lnk > i{font-size:13px;color:#9aa5ab;flex-shrink:0;}
.zc-am-form__lnk input{flex:1;min-width:0;border:none;background:transparent;font-size:11.5px;color:#6e7c85;padding:0;}
.zc-am-form__lnk input:focus{outline:none;}
.zc-am-form__lnk button{width:26px;height:26px;border:none;background:transparent;color:#6e7c85;border-radius:5px;flex-shrink:0;}
.zc-am-form__lnk button:hover{background:#eef1f2;color:#0a474c;}
.zc-am-form__a{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:auto;}
.zc-am-form__a form{display:inline;}
.zc-am-del:hover{color:#d43f63!important;border-color:#d43f63!important;}

/* the old Setup markup keeps its rows, but inherits the new page frame */
.zc-am .zc-ads-banner{border-radius:12px;border:1px solid #ececec;box-shadow:none;}
.zc-am .zc-ads-card{border-radius:12px;border:1px solid #ececec;box-shadow:none;}

/* ══ Referral — same palette as the rest of the app: #0a474c teal,
   cards r12/1px #ececec, chips 10/700, page bg #f7f7f7 ══ */
html body .zc-dashboard .zc-content:has(.zc-rf){background:#f7f7f7!important;}
.zc-rf{display:flex;flex-direction:column;gap:18px;}

.zc-rf-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 260px;
    gap:24px;align-items:center;background:#0a474c;border-radius:14px;padding:28px 30px;color:#fff;}
.zc-rf-hero::after{content:'';position:absolute;right:-60px;top:-70px;width:260px;height:260px;
    border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none;}
.zc-rf-hero__r svg{width:100%;height:auto;display:block;}
.zc-rf-live{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
    letter-spacing:.6px;text-transform:uppercase;background:rgba(255,255,255,.12);border-radius:20px;
    padding:5px 12px;margin-bottom:14px;}
.zc-rf-live i{width:7px;height:7px;border-radius:50%;background:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.25);}
.zc-rf-hero h1{font-size:25px;font-weight:700;line-height:1.25;margin:0 0 8px;color:#fff;max-width:520px;}
.zc-rf-hero > div > p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 20px;max-width:560px;}
.zc-rf-linklbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
    color:rgba(255,255,255,.6);margin-bottom:7px;}
.zc-rf-link{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:5px 5px 5px 13px;max-width:600px;}
.zc-rf-link > i{font-size:16px;color:rgba(255,255,255,.6);flex-shrink:0;}
.zc-rf-link input{flex:1;min-width:0;background:transparent;border:none;color:#fff;font-size:13px;padding:6px 0;}
.zc-rf-link input:focus{outline:none;}
.zc-rf-link button{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0a474c;border:none;
    border-radius:7px;font-size:12.5px;font-weight:600;padding:8px 16px;flex-shrink:0;}
.zc-rf-link button:hover{background:#eaf3f2;}
.zc-rf-link button.is-done{background:#25d366;color:#fff;}
.zc-rf-link button i{font-size:15px;}
.zc-rf-share{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;}
.zc-rf-share > span{font-size:11.5px;color:rgba(255,255,255,.6);margin-right:2px;}
.zc-rf-share a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#fff;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:7px;
    padding:6px 13px;text-decoration:none;}
.zc-rf-share a:hover{background:rgba(255,255,255,.18);color:#fff;text-decoration:none;}
.zc-rf-share a i{font-size:15px;}
.zc-rf-share .s-wa i{color:#4bdc7f;}
.zc-rf-share .s-tg i{color:#7cc6f5;}
.zc-rf-share .s-li i{color:#8fc2ee;}

/* ── numbers ── */
.zc-rf-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.zc-rf-kpi{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #ececec;
    border-radius:12px;padding:16px 18px;min-width:0;}
.zc-rf-kpi__i{flex:0 0 40px;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
    justify-content:center;font-size:19px;}
.zc-rf-kpi__i.i-teal{background:#e6f0ef;color:#0a474c;}
.zc-rf-kpi__i.i-green{background:rgba(37,211,102,.14);color:#0a7c43;}
.zc-rf-kpi__i.i-amber{background:#fff4e0;color:#a86a00;}
.zc-rf-kpi__i.i-gold{background:#fdf3d6;color:#8a6100;}
.zc-rf-kpi div{min-width:0;display:flex;flex-direction:column;gap:2px;}
.zc-rf-kpi strong{font-size:21px;font-weight:700;color:#1f2d3d;line-height:1.1;}
.zc-rf-kpi span{font-size:11.5px;color:#7b868c;}

/* ── how it works ── */
.zc-rf-how{background:#fff;border:1px solid #ececec;border-radius:12px;padding:24px 26px 26px;}
.zc-rf-how header{margin-bottom:20px;}
.zc-rf-how h2{font-size:17px;font-weight:700;color:#1f2d3d;margin:0 0 3px;}
.zc-rf-how header p{font-size:12.5px;color:#8a949a;margin:0;}
.zc-rf-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;}
.zc-rf-steps li{position:relative;background:#fafbfb;border:1px solid #f0f2f2;border-radius:12px;
    padding:20px 18px 18px;display:flex;flex-direction:column;gap:6px;}
.zc-rf-steps li:not(:last-child)::after{content:'';position:absolute;right:-11px;top:50%;width:14px;height:14px;
    border-top:2px solid #d6e0df;border-right:2px solid #d6e0df;transform:translateY(-50%) rotate(45deg);z-index:1;}
.zc-rf-steps__n{position:absolute;top:-9px;left:18px;width:24px;height:24px;border-radius:50%;
    background:#0a474c;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.zc-rf-steps__art{display:block;height:56px;margin:6px 0 8px;}
.zc-rf-steps__art svg{height:56px;width:auto;display:block;}
.zc-rf-steps strong{font-size:13.5px;font-weight:600;color:#1f2d3d;}
.zc-rf-steps p{font-size:12px;line-height:1.55;color:#7b868c;margin:0;}

/* ── cards ── */
.zc-rf-split{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:18px;align-items:start;}
.zc-rf-card{background:#fff;border:1px solid #ececec;border-radius:12px;padding:20px 22px 22px;}
.zc-rf-card__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.zc-rf-card__h h3{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#1f2d3d;margin:0;}
.zc-rf-card__h h3 i{font-size:18px;color:#0a474c;}
.zc-rf-chip{font-size:11px;font-weight:700;background:#e6f0ef;color:#0a474c;border-radius:10px;padding:3px 10px;}
.zc-rf-more{font-size:12px;color:#0a474c;text-decoration:none;display:inline-flex;align-items:center;gap:3px;}
.zc-rf-more:hover{text-decoration:underline;color:#0a474c;}

.zc-rf-tier{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;
    padding:13px 0;border-bottom:1px solid #f4f4f4;}
.zc-rf-tier:last-of-type{border-bottom:none;}
.zc-rf-tier__n{display:flex;align-items:center;gap:7px;min-width:0;}
.zc-rf-tier__n strong{font-size:13.5px;font-weight:600;color:#1f2d3d;}
.zc-rf-tier__n em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    background:rgba(37,211,102,.15);color:#0a7c43;border-radius:9px;padding:2px 7px;}
.zc-rf-tier__p{font-size:12.5px;color:#7b868c;text-align:right;display:flex;flex-direction:column;gap:1px;}
.zc-rf-tier__p em{font-style:normal;font-size:11px;color:#a8b1b6;}
.zc-rf-tier__e{font-size:15px;font-weight:700;color:#0a7c43;text-align:right;min-width:86px;
    display:flex;flex-direction:column;gap:1px;}
.zc-rf-tier__e em{font-style:normal;font-size:11.5px;font-weight:600;color:#63a684;}
.zc-rf-tier__e.is-na{font-size:12px;font-weight:500;color:#b3bec4;}
.zc-rf-tier.is-free .zc-rf-tier__n strong{color:#7b868c;}
.zc-rf-none{font-size:12.5px;color:#8a949a;padding:20px 0;margin:0;text-align:center;}
.zc-rf-note{display:flex;gap:8px;font-size:11.5px;line-height:1.55;color:#5c6b73;background:#f4f8f8;
    border-radius:8px;padding:11px 13px;margin:16px 0 0;}
.zc-rf-note i{font-size:15px;color:#0a474c;flex-shrink:0;}

.zc-rf-tablewrap{overflow-x:auto;margin:0 -22px;padding:0 22px;}
.zc-rf-table{width:100%;border-collapse:collapse;}
.zc-rf-table th{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#8a949a;
    text-align:left;padding:0 10px 10px;border-bottom:1px solid #ececec;white-space:nowrap;}
.zc-rf-table td{font-size:12.5px;color:#3b4a54;padding:13px 10px;border-bottom:1px solid #f6f6f6;white-space:nowrap;}
.zc-rf-table tbody tr:last-child td{border-bottom:none;}
.zc-rf-table th:first-child,.zc-rf-table td:first-child{padding-left:0;}
.zc-rf-table th:last-child,.zc-rf-table td:last-child{padding-right:0;}
.zc-rf-who{display:flex;align-items:center;gap:10px;}
.zc-rf-av{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#e6f0ef;color:#0a474c;
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.zc-rf-who__n{display:block;font-size:13px;font-weight:600;color:#1f2d3d;}
.zc-rf-who__s{display:block;font-size:11.5px;color:#8a949a;}
.zc-rf-st{display:inline-block;font-size:11px;font-weight:700;border-radius:10px;padding:3px 10px;}
.zc-rf-st.is-paid{background:rgba(37,211,102,.15);color:#0a7c43;}
.zc-rf-st.is-wait{background:#fff4e0;color:#a86a00;}
.zc-rf-trx{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#7b868c;}
.zc-rf-amt{font-weight:700;color:#0a7c43;}

.zc-rf-empty{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:34px 20px 30px;}
.zc-rf-empty svg{width:96px;height:auto;margin-bottom:6px;}
.zc-rf-empty strong{font-size:14.5px;color:#1f2d3d;}
.zc-rf-empty p{font-size:12.5px;color:#8a949a;max-width:330px;margin:0 0 12px;line-height:1.55;}
.zc-rf-btn{display:inline-flex;align-items:center;gap:7px;background:#0a474c;color:#fff;border:none;
    border-radius:7px;font-size:13px;font-weight:500;padding:9px 18px;}
.zc-rf-btn:hover{background:#08383c;color:#fff;}
.zc-rf-btn i{font-size:16px;}

@media(max-width:1199px){
  .zc-rf-hero{grid-template-columns:minmax(0,1fr);}
  .zc-rf-hero__r{display:none;}
  .zc-rf-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zc-rf-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zc-rf-steps li:nth-child(2)::after{display:none;}
  .zc-rf-split{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:767px){
  .zc-rf-hero{padding:20px;}
  .zc-rf-hero h1{font-size:20px;}
  .zc-rf-kpis{grid-template-columns:minmax(0,1fr);}
  .zc-rf-steps{grid-template-columns:minmax(0,1fr);}
  .zc-rf-steps li::after{display:none!important;}
  .zc-rf-link{flex-wrap:wrap;}
  .zc-rf-link input{flex:1 0 100%;order:2;}
  .zc-rf-card{padding:16px;}
  .zc-rf-tablewrap{margin:0 -16px;padding:0 16px;}
}

/* the step glyphs read as decoration at 56px — give them room and a tinted ground */
.zc-rf-steps__art{height:78px;margin:8px 0 10px;display:flex;align-items:center;}
.zc-rf-steps__art svg{height:78px;}
.zc-rf-empty svg{width:150px;}

/* ══ Manage — reuses the AiSensy primitives (.zc-am-*), adds only its own bits ══ */
.zc-mg-lead{display:flex;gap:9px;font-size:12.5px;line-height:1.6;color:#5c6b73;background:#fff;
    border:1px solid #ececec;border-radius:12px;padding:14px 16px;margin:0 0 16px;}
.zc-mg-lead i{font-size:17px;color:#0a474c;flex-shrink:0;}

.zc-mg-split{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:18px;align-items:start;}
.zc-am-kpis--4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* forms */
.zc-mg-form{display:flex;flex-direction:column;gap:16px;}
.zc-mg-form label{display:flex;flex-direction:column;gap:6px;}
.zc-mg-form label > span{font-size:12.5px;font-weight:600;color:#3b4a54;}
.zc-mg-form label > span em{font-style:normal;font-weight:400;color:#9aa5ab;font-size:11.5px;margin-left:4px;}
.zc-mg-form input[type=text],.zc-mg-form input[type=number],.zc-mg-form textarea{
    border:1px solid #e0e0e0;border-radius:8px;padding:10px 13px;font-size:13px;color:#3b4a54;background:#fff;width:100%;}
.zc-mg-form input:focus,.zc-mg-form textarea:focus{outline:none;border-color:#0a474c;}
.zc-mg-form textarea{resize:vertical;line-height:1.55;}
.zc-mg-form small{font-size:11.5px;color:#8a949a;line-height:1.5;}
.zc-mg-form > button{align-self:flex-start;}
.zc-mg-pre,.zc-mg-suffix{display:flex;align-items:center;border:1px solid #e0e0e0;border-radius:8px;background:#fff;overflow:hidden;}
.zc-mg-pre:focus-within,.zc-mg-suffix:focus-within{border-color:#0a474c;}
.zc-mg-pre i,.zc-mg-suffix i{font-style:normal;font-size:12.5px;color:#8a949a;background:#f5f7f7;
    padding:10px 12px;flex-shrink:0;align-self:stretch;display:flex;align-items:center;}
.zc-mg-pre input,.zc-mg-suffix input{border:none!important;border-radius:0!important;flex:1;min-width:0;}
.zc-mg-suffix input{text-align:right;}

/* attributes */
.zc-mg-attrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.zc-mg-attr{display:flex;flex-direction:column;gap:4px;background:#fafbfb;border:1px solid #f0f2f2;
    border-radius:10px;padding:13px 15px;}
.zc-mg-attr code{font-size:12.5px;color:#0a474c;background:transparent;padding:0;font-weight:600;}
.zc-mg-attr span{font-size:12.5px;color:#3b4a54;}
.zc-mg-attr em{font-style:normal;font-size:11px;color:#9aa5ab;}
.zc-mg-code{font-size:11.5px;font-weight:600;color:#0a474c;background:#e6f0ef;border-radius:6px;padding:2px 8px;}
.zc-mg-bar{display:inline-block;width:74px;height:5px;border-radius:3px;background:#eef1f2;
    overflow:hidden;vertical-align:middle;margin-right:8px;}
.zc-mg-bar i{display:block;height:100%;background:#0a474c;border-radius:3px;}
.zc-mg-pct{font-size:12px;font-weight:600;color:#3b4a54;min-width:34px;display:inline-block;text-align:right;}

/* canned */
.zc-mg-canned{display:flex;flex-direction:column;gap:12px;}
.zc-mg-cn{background:#fafbfb;border:1px solid #f0f2f2;border-radius:10px;padding:14px 16px;}
.zc-mg-cn:hover{border-color:#d9e3e2;}
.zc-mg-cn header{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px;}
.zc-mg-cn header strong{font-size:13.5px;font-weight:600;color:#1f2d3d;}
.zc-mg-cn__u{margin-left:auto;font-size:11px;color:#9aa5ab;}
.zc-mg-cn p{font-size:12.5px;line-height:1.55;color:#6e7c85;margin:0 0 11px;white-space:pre-line;}
.zc-mg-cn footer{display:flex;gap:7px;}

/* settings link list */
.zc-mg-links{display:flex;flex-direction:column;gap:9px;}
.zc-mg-links a{display:flex;align-items:center;gap:13px;background:#fafbfb;border:1px solid #f0f2f2;
    border-radius:10px;padding:13px 15px;text-decoration:none;}
.zc-mg-links a:hover{border-color:#0a474c;text-decoration:none;background:#f5f9f8;}
.zc-mg-links__i{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:#e6f0ef;color:#0a474c;
    display:flex;align-items:center;justify-content:center;font-size:17px;}
.zc-mg-links a > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.zc-mg-links strong{font-size:13.5px;font-weight:600;color:#1f2d3d;}
.zc-mg-links a > div > span{font-size:12px;color:#8a949a;line-height:1.45;}
.zc-mg-links > a > i:last-child{font-size:15px;color:#c3cbd0;flex-shrink:0;}

@media(max-width:1199px){
  .zc-mg-split{grid-template-columns:minmax(0,1fr);}
  .zc-am-kpis--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:767px){
  .zc-am-kpis--4{grid-template-columns:minmax(0,1fr);}
  .zc-mg-attrs{grid-template-columns:minmax(0,1fr);}
}

.zc-mg-lead--warn{background:#fff8e6;border-color:#f2e3bd;align-items:flex-start;}
.zc-mg-lead--warn i{color:#a86a00;}
.zc-mg-lead--warn strong{display:block;color:#7a4b00;margin-bottom:2px;}

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD v2 — KPI tiles, message-activity chart, earn strip   (2026-08-18)
   Flat on purpose: no gradients, no glass, no sheen. Same tokens as the rest
   of the AiSensy pass — white cards, 0 0 11px #e6e6e6, teal #0a474c.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── KPI tiles ─────────────────────────────────────────────────────────── */
.zc-content .zc-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.zc-content .zc-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
    text-decoration: none;
    transition: box-shadow .18s ease;
}

.zc-content .zc-kpi:hover {
    box-shadow: 0 0 14px #dcdcdc;
    text-decoration: none;
}

.zc-content .zc-kpi__k {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: #64748b;
}

.zc-content .zc-kpi__k em {
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .02em;
    text-transform: none;
    color: #94a3b8;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 2px 6px;
}

.zc-content .zc-kpi__v {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.zc-content .zc-kpi__s {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.zc-content .zc-kpi__s b {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
}

.zc-content .zc-kpi__s b i {
    font-size: 12px;
}

.zc-content .zc-kpi__s .up {
    color: #0a474c;
}

.zc-content .zc-kpi__s .dn {
    color: #4a90a4;
}

.zc-content .zc-kpi__s .bad {
    color: #dc2626;
}

.zc-content .zc-kpi__s .ok {
    color: #15803d;
}

/* ── Message activity chart ────────────────────────────────────────────── */
.zc-content .zc-chart {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
    padding: 18px 20px 14px;
    margin-bottom: 16px;
}

.zc-content .zc-chart__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.zc-content .zc-chart__head h6 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px;
}

.zc-content .zc-chart__head p {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}

.zc-content .zc-chart__legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: #475569;
}

.zc-content .zc-chart__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zc-content .zc-chart__legend .d {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.zc-content .zc-chart__legend .d--sent {
    background: #0a474c;
}

.zc-content .zc-chart__legend .d--recv {
    background: #4a90a4;
}

.zc-content .zc-chart__plot {
    height: 220px;
}

.zc-content .zc-chart__plot svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.zc-content .zc-chart__grid {
    stroke: #eef1f0;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.zc-content .zc-chart__tick {
    fill: #94a3b8;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.zc-content .zc-chart__l {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.zc-content .zc-chart__l.l--sent {
    stroke: #0a474c;
}

.zc-content .zc-chart__l.l--recv {
    stroke: #4a90a4;
}

.zc-content .zc-chart__a {
    stroke: none;
}

.zc-content .zc-chart__a.a--sent {
    fill: rgba(10, 71, 76, .10);
}

.zc-content .zc-chart__a.a--recv {
    fill: rgba(74, 144, 164, .10);
}

.zc-content .zc-chart__x {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    padding: 8px 0 0 34px;
}

.zc-content .zc-chart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 20px 40px;
    text-align: center;
}

.zc-content .zc-chart__empty i {
    font-size: 34px;
    color: #cbd5e1;
}

.zc-content .zc-chart__empty strong {
    font-size: 14px;
    color: #334155;
}

.zc-content .zc-chart__empty span {
    font-size: 12.5px;
    color: #94a3b8;
}

.zc-content .zc-chart__empty a {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #0a474c;
    border-radius: 6px;
    padding: 8px 16px;
    text-decoration: none;
}

.zc-content .zc-chart__empty a:hover {
    background: #083c40;
    color: #fff;
    text-decoration: none;
}

/* ── Earn strip: referral + live offers ────────────────────────────────── */
.zc-content .zc-earn {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.zc-content .zc-earn__ref,
.zc-content .zc-earn__offers {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
}

.zc-content .zc-earn__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.zc-content .zc-earn__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #0a474c;
    background: #eaf2f2;
    border-radius: 6px;
    padding: 5px 10px;
}

.zc-content .zc-earn__tag--amber {
    color: #a16207;
    background: #fdf4e3;
}

.zc-content .zc-earn__more {
    font-size: 12.5px;
    font-weight: 600;
    color: #0a474c;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.zc-content .zc-earn__more:hover {
    color: #083c40;
    text-decoration: none;
}

.zc-content .zc-earn__ref h6 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 4px;
}

.zc-content .zc-earn__ref > p {
    font-size: 12.5px;
    line-height: 1.6;
    color: #64748b;
    margin: 0 0 14px;
    max-width: 62ch;
}

.zc-content .zc-earn__link {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 4px 4px 12px;
    background: #f8fafc;
}

.zc-content .zc-earn__link > i {
    font-size: 15px;
    color: #94a3b8;
}

.zc-content .zc-earn__link input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    color: #334155;
    padding: 8px 0;
    outline: none;
}

.zc-content .zc-earn__link button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 6px;
    background: #0a474c;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
}

.zc-content .zc-earn__link button:hover {
    background: #083c40;
}

.zc-content .zc-earn__link button.is-copied {
    background: #15803d;
}

.zc-content .zc-earn__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 14px;
}

.zc-content .zc-earn__stats > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.zc-content .zc-earn__stats span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #64748b;
}

.zc-content .zc-earn__stats strong {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.zc-content .zc-earn__share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    color: #94a3b8;
}

.zc-content .zc-earn__share .s {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 11px;
    text-decoration: none;
}

.zc-content .zc-earn__share .s:hover {
    border-color: #cbd5e1;
    color: #0f172a;
    text-decoration: none;
}

.zc-content .zc-earn__share .s--wa i {
    color: #25d366;
}

.zc-content .zc-earn__share .s--tg i {
    color: #29a9eb;
}

/* Coupons */
.zc-content .zc-coupon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #eef1f0;
    border-radius: 8px;
    margin-bottom: 10px;
}

.zc-content .zc-coupon__off {
    flex: 0 0 auto;
    min-width: 62px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #a16207;
    background: #fdf4e3;
    border-radius: 6px;
    padding: 8px 6px;
    line-height: 1.1;
}

.zc-content .zc-coupon__off em {
    display: block;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .8;
}

.zc-content .zc-coupon__b {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zc-content .zc-coupon__b strong {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.zc-content .zc-coupon__b span {
    font-size: 11.5px;
    color: #94a3b8;
}

.zc-content .zc-coupon__code {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #0a474c;
    background: #fff;
    border: 1px dashed #9fbcbb;
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
}

.zc-content .zc-coupon__code:hover {
    background: #eaf2f2;
}

.zc-content .zc-coupon__code.is-copied {
    color: #15803d;
    border-color: #86c39c;
}

.zc-content .zc-earn__none {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 26px 12px;
}

.zc-content .zc-earn__none i {
    font-size: 26px;
    color: #cbd5e1;
}

.zc-content .zc-earn__none strong {
    font-size: 13.5px;
    color: #334155;
}

.zc-content .zc-earn__none span {
    font-size: 12px;
    color: #94a3b8;
}

.zc-content .zc-earn__plans {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    font-size: 12.5px;
    font-weight: 600;
    color: #0a474c;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.zc-content .zc-earn__plans:hover {
    color: #083c40;
    text-decoration: none;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1399px) {
    .zc-content .zc-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .zc-content .zc-earn {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .zc-content .zc-kpis {
        grid-template-columns: 1fr;
    }

    .zc-content .zc-earn__stats {
        grid-template-columns: 1fr;
    }

    .zc-content .zc-chart__plot {
        height: 180px;
    }
}

/* ── Premium rail item: gold crown with a slow glint ────────────────────
   The gradient lives in the SVG; here we add the warm halo and the glint
   sweep. It rests for most of the cycle and flashes briefly, so it reads
   as a highlight rather than a blinking icon. ── */
#zcSidebar .zcv3-item[data-fly-title="Premium"] .zcv3-ic{
    filter:drop-shadow(0 0 3px rgba(233,197,110,.35));
    animation:zcCrownHalo 5s ease-in-out infinite;
}
#zcSidebar .zcv3-item[data-fly-title="Premium"] .zc-crown-glint{
    opacity:0;
    animation:zcCrownGlint 5s ease-in-out infinite;
}
@keyframes zcCrownHalo{
    0%,64%,100%{filter:drop-shadow(0 0 3px rgba(233,197,110,.35));}
    76%        {filter:drop-shadow(0 0 7px rgba(250,226,160,.8));}
}
@keyframes zcCrownGlint{
    0%,64%,100%{opacity:0;}
    72%        {opacity:.85;}
    82%        {opacity:0;}
}
@media (prefers-reduced-motion:reduce){
    #zcSidebar .zcv3-item[data-fly-title="Premium"] .zcv3-ic,
    #zcSidebar .zcv3-item[data-fly-title="Premium"] .zc-crown-glint{animation:none!important;}
}

/* ══ Advanced Analytics — one palette, KPI icons on the left like Manage ══ */
.zc-an-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
.zc-an-kpi{flex-direction:row;align-items:center;gap:13px;padding:16px 18px;}
.zc-an-kpi__i{flex:0 0 40px;width:40px;height:40px;border-radius:11px;background:#e6f0ef;color:#0a474c;
    display:flex;align-items:center;justify-content:center;font-size:19px;}
.zc-an-kpi > div{min-width:0;display:flex;flex-direction:column;gap:2px;}
.zc-an-kpi strong{font-size:21px;font-weight:700;color:#1f2d3d;line-height:1.1;}
.zc-an-kpi > div > span{font-size:11.5px;color:#7b868c;}

.zc-an-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;
    align-items:start;margin-bottom:18px;}

/* bar chart */
.zc-an-bars{display:flex;align-items:flex-end;gap:12px;height:190px;padding-top:20px;}
.zc-an-bar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-end;height:100%;gap:6px;}
.zc-an-bar__v{font-size:11.5px;font-weight:700;color:#0a474c;height:14px;line-height:14px;}
.zc-an-bar__f{width:100%;max-width:46px;background:#0a474c;border-radius:6px 6px 0 0;min-height:3px;
    transition:height .5s cubic-bezier(.4,0,.2,1);}
.zc-an-bar__l{font-size:11px;color:#8a949a;}

/* pipeline */
.zc-an-pl{display:grid;grid-template-columns:82px minmax(0,1fr) 40px;gap:11px;align-items:center;
    padding:9px 0;border-bottom:1px solid #f6f6f6;}
.zc-an-pl:last-child{border-bottom:none;}
.zc-an-pl__l{font-size:12.5px;color:#5c6b73;text-transform:capitalize;}
.zc-an-pl__t{height:8px;background:#eef1f2;border-radius:5px;overflow:hidden;}
.zc-an-pl__t i{display:block;height:100%;background:#0a474c;border-radius:5px;}
.zc-an-pl__v{font-size:13px;font-weight:700;color:#1f2d3d;text-align:right;}

/* sources */
.zc-an-src{display:flex;flex-wrap:wrap;gap:9px;}
.zc-an-src__i{display:inline-flex;align-items:center;gap:9px;background:#fafbfb;border:1px solid #f0f2f2;
    border-radius:9px;padding:8px 9px 8px 14px;font-size:12.5px;font-weight:600;color:#3b4a54;}
.zc-an-src__i em{font-style:normal;font-size:11.5px;font-weight:700;color:#0a474c;background:#e6f0ef;
    border-radius:7px;padding:2px 9px;}

.zc-an-blank{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:38px 20px;}
.zc-an-blank i{font-size:34px;color:#c3cbd0;margin-bottom:4px;}
.zc-an-blank strong{font-size:14px;color:#1f2d3d;}
.zc-an-blank p{font-size:12.5px;color:#8a949a;margin:0;max-width:330px;line-height:1.55;}

@media(max-width:1199px){
  .zc-an-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zc-an-row{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:767px){
  .zc-an-kpis{grid-template-columns:minmax(0,1fr);}
  .zc-an-bars{height:150px;gap:7px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   AVATARS — one look everywhere: cream disc, coloured initial   (2026-08-18)

   AiSensy inverts the usual scheme — the circle is the neutral (#F5EFDF, the
   chat-thread beige) and the LETTER carries the colour. The inbox list already
   did this; every other screen still had a solid/gradient disc with a white
   letter. This block makes the rest match.

   Palette for the initial (same four the inbox rotates through):
     #1a1a1a near-black · #0a474c teal · #c2410c burnt orange · #FF2A13 red
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared shape: circle, cream, no gradient / shadow / border ──────────── */
.zc-dashboard .zc-content .contact_thumb,
.zc-dashboard .zc-content .contact_thumb.bg--success,
.zc-dashboard .zc-content .contact_thumb.bg--info,
.zc-dashboard .zc-content .contact_thumb.bg--warning,
.zc-dashboard .zc-content .contact_thumb.bg--danger,
.zc-dashboard .zc-content .contact_thumb.bg--base,
.zc-dashboard .zc-content .contact_thumb.bg--primary,
.zc-content .zc-tm-av,
.zc-content .ti-av,
.zc-content .av,
.zc-content .zc-rf-av,
.zc-content .lead-av {
    background: #F5EFDF !important;
    background-image: none !important;
    border-radius: 50% !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Photo avatars keep filling the disc */
.zc-dashboard .zc-content .contact_thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* ── contact_thumb: the bg--* class is a stable per-contact hash, so it is
      what decides the letter colour (same mapping as the inbox list) ─────── */
.zc-dashboard .zc-content .contact_thumb.bg--success {
    color: #0a474c !important;
}

.zc-dashboard .zc-content .contact_thumb.bg--info,
.zc-dashboard .zc-content .contact_thumb.bg--base,
.zc-dashboard .zc-content .contact_thumb.bg--primary {
    color: #1a1a1a !important;
}

.zc-dashboard .zc-content .contact_thumb.bg--warning {
    color: #c2410c !important;
}

.zc-dashboard .zc-content .contact_thumb.bg--danger {
    color: #FF2A13 !important;
}

/* ── Team list already rotates lt-1…lt-5 off the agent id ───────────────── */
.zc-content .zc-tm-av.lt-1 {
    color: #1a1a1a !important;
}

.zc-content .zc-tm-av.lt-2 {
    color: #0a474c !important;
}

.zc-content .zc-tm-av.lt-3 {
    color: #c2410c !important;
}

.zc-content .zc-tm-av.lt-4 {
    color: #FF2A13 !important;
}

.zc-content .zc-tm-av.lt-5 {
    color: #0a474c !important;
}

/* ── The rest carry no per-item class, so rotate on the row's position.
      Matching the PARENT's :nth-child works whatever the row is called. ─── */
.zc-content *:nth-child(4n+1) > .ti-av,
.zc-content *:nth-child(4n+1) > .av,
.zc-content *:nth-child(4n+1) > .zc-rf-av {
    color: #1a1a1a !important;
}

.zc-content *:nth-child(4n+2) > .ti-av,
.zc-content *:nth-child(4n+2) > .av,
.zc-content *:nth-child(4n+2) > .zc-rf-av {
    color: #0a474c !important;
}

.zc-content *:nth-child(4n+3) > .ti-av,
.zc-content *:nth-child(4n+3) > .av,
.zc-content *:nth-child(4n+3) > .zc-rf-av {
    color: #c2410c !important;
}

.zc-content *:nth-child(4n+4) > .ti-av,
.zc-content *:nth-child(4n+4) > .av,
.zc-content *:nth-child(4n+4) > .zc-rf-av {
    color: #FF2A13 !important;
}

/* Fallback so a letter is never left white-on-cream if a row nests differently */
.zc-content .ti-av,
.zc-content .av,
.zc-content .zc-rf-av {
    color: #0a474c !important;
}

/* Deliberately NOT converted:
   .zi-msg-av  — sits on the #F5EFDF chat thread, so a cream disc vanishes;
                 the outgoing-message avatar stays solid teal.
   .zi-cp-avatar — that is the Chat Profile wrapper, not the disc itself. */

/* CRM lead discs colour the letter by pipeline stage — that colour is
   information, so only the disc is repainted. The inline stage colour wins over
   this; it is here so a lead with no stage colour still gets a readable letter. */
.zc-content .lead-av {
    color: #0a474c;
}

/* .zc-am-card__h was never defined — bootstrap's 30px h3 was winning */
.zc-am-card__h{display:flex;align-items:center;justify-content:space-between;gap:12px;
    flex-wrap:wrap;margin-bottom:16px;}
html body .zc-am-card__h h3,
html body .zc-am-card__h h4{display:flex;align-items:center;gap:8px;font-size:14.5px;
    font-weight:600;color:#1f2d3d;margin:0;line-height:1.35;}
html body .zc-am-card__h h3 i,
html body .zc-am-card__h h4 i{font-size:18px;color:#0a474c;}


/* ══════════════════════════════════════════════════════════════════
   Chat doodle - white icons on the cream thread (AiSensy look)
   The old chat-bg.png was a faint grey abstract doodle, invisible once
   the thread turned cream, so every chat surface now shares one white
   line-art tile over #F5EFDF.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-dashboard .chat-box { background: #F5EFDF !important; }
html body .zc-hist-thread { background: #F5EFDF !important; }

html body .zc-dashboard .chat-box::before,
html body .zc-hist-thread::before {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    z-index: 0 !important; pointer-events: none !important;
    background: url('../images/chat-doodle.svg') repeat !important;
    background-size: 504px auto !important;
    opacity: .92 !important;
}
html body .zc-dashboard .chat-box > *,
html body .zc-hist-thread > * { position: relative; z-index: 1; }


/* ══════════════════════════════════════════════════════════════════
   Template preview panels read as a chat surface
   Same cream + doodle as a real thread, and the same avatar/bubble fix
   the campaign preview needed: .tpl-prev-wa was pinned at left:-10px /
   top:-14px so the green badge hung outside the panel, and .card-item
   drew a second bordered box inside the bubble.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .ccm-preview,
html body .zc-content .tpl-preview {
    background: #F5EFDF url('../images/chat-doodle.svg') repeat !important;
    background-size: 440px auto !important;
    border: 1px solid #ece5d2 !important;
    border-radius: 10px !important;
    padding: 16px !important;
}
html body .zc-content .tpl-prev-wrap {
    position: relative; display: flex; align-items: flex-start; gap: 9px;
    padding-left: 0; margin-top: 14px;
}
html body .zc-content .tpl-prev-wa {
    position: static; width: 28px; height: 28px; border-radius: 50%;
    background: #25d366; color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 17px; flex-shrink: 0;
}
html body .zc-content .tpl-prev-card {
    flex: 1 1 auto; min-width: 0; max-width: 100%;
    border-top-left-radius: 3px; overflow: hidden;
}
html body .zc-content .tpl-prev-card .card-item {
    border: none !important; background: transparent !important; box-shadow: none !important;
    border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
    width: 100% !important; max-width: 100% !important; flex: none !important;
}
html body .zc-content .tpl-prev-card .card-item__title,
html body .zc-content .tpl-prev-card .card-item__desc,
html body .zc-content .tpl-prev-card .footer_text { overflow-wrap: anywhere; }
html body .zc-content .tpl-prev-card .card-item__thumb:empty { display: none; }
html body .zc-content .tpl-help,
html body .zc-content .tpl-disc { color: #6e6e6e; }

/* ══ Contact create / edit — two columns, nothing stacked on top of anything ══ */
.zc-cte{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;}
.zc-cte__main,.zc-cte__side{display:flex;flex-direction:column;gap:18px;min-width:0;}

/* avatar row */
.zc-cte-id{display:flex;align-items:center;gap:16px;padding-bottom:20px;margin-bottom:20px;
    border-bottom:1px solid #f4f4f4;}
.zc-cte-av{position:relative;flex:0 0 76px;width:76px;height:76px;border-radius:50%;cursor:pointer;
    display:block;background:#eef2f2;overflow:visible;}
.zc-cte-av img{width:76px;height:76px;border-radius:50%;object-fit:cover;display:block;}
.zc-cte-av span{position:absolute;right:-2px;bottom:-2px;width:27px;height:27px;border-radius:50%;
    background:#0a474c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;
    border:2px solid #fff;}
.zc-cte-av:hover span{background:#08383c;}
.zc-cte-id__t{display:flex;flex-direction:column;gap:3px;min-width:0;}
.zc-cte-id__t strong{font-size:13.5px;font-weight:600;color:#1f2d3d;}
.zc-cte-id__t span{font-size:12px;color:#8a949a;}

/* fields */
.zc-cte-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.zc-cte-f{display:flex;flex-direction:column;gap:6px;min-width:0;}
.zc-cte-f > span{display:flex;align-items:center;justify-content:space-between;gap:8px;
    font-size:12.5px;font-weight:600;color:#3b4a54;}
.zc-cte-f > span em{font-style:normal;color:#d43f63;}
.zc-cte-f input[type=text],
.zc-cte-f select,
.zc-cte-note{width:100%;border:1px solid #e0e0e0;border-radius:8px;padding:10px 13px;
    font-size:13px;color:#3b4a54;background:#fff;}
.zc-cte-f input:focus,.zc-cte-f select:focus,.zc-cte-note:focus{outline:none;border-color:#0a474c;}
.zc-cte-note{resize:vertical;line-height:1.6;min-height:110px;}
.zc-cte-f small{font-size:11.5px;color:#d43f63;}
.zc-cte-add{border:none;background:transparent;font-size:11.5px;font-weight:600;color:#0a474c;padding:0;}
.zc-cte-add:hover{text-decoration:underline;}
.zc-cte-count{font-size:11.5px;color:#9aa5ab;}
.zc-cte-count i{font-style:normal;}

.zc-cte-phone{display:flex;align-items:stretch;border:1px solid #e0e0e0;border-radius:8px;
    background:#fff;overflow:hidden;}
.zc-cte-phone:focus-within{border-color:#0a474c;}
.zc-cte-phone i{font-style:normal;display:flex;align-items:center;padding:0 12px;background:#f4f7f7;
    color:#5c6b73;font-size:12.5px;font-weight:600;border-right:1px solid #e8ecec;flex-shrink:0;}
.zc-cte-phone input{flex:1;min-width:0;border:none!important;border-radius:0!important;}

/* custom attributes */
.zc-cte-attrs{display:flex;flex-direction:column;gap:10px;}
.zc-cte-attr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 38px;gap:10px;align-items:center;}
.zc-cte-attr input{width:100%;border:1px solid #e0e0e0;border-radius:8px;padding:10px 13px;
    font-size:13px;color:#3b4a54;background:#fff;}
.zc-cte-attr input:focus{outline:none;border-color:#0a474c;}
.zc-cte-attr .remove-attribute{width:38px;height:38px;border-radius:8px;border:1px solid #e6e6e6;
    background:#fff;color:#8a949a;display:flex;align-items:center;justify-content:center;font-size:15px;}
.zc-cte-attr .remove-attribute:hover{color:#d43f63;border-color:#d43f63;background:#fff5f7;}

/* switches */
.zc-cte-sw{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid #f4f4f4;
    cursor:pointer;margin:0;}
.zc-cte-sw:last-child{border-bottom:none;padding-bottom:0;}
.zc-cte-sw input{position:absolute;opacity:0;width:0;height:0;}
.zc-cte-sw__b{position:relative;flex:0 0 38px;width:38px;height:21px;border-radius:11px;background:#d8dfe0;
    transition:background .18s;margin-top:1px;}
.zc-cte-sw__b::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
    background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.18);}
.zc-cte-sw input:checked + .zc-cte-sw__b{background:#0a474c;}
.zc-cte-sw input:checked + .zc-cte-sw__b::after{transform:translateX(17px);}
.zc-cte-sw--danger input:checked + .zc-cte-sw__b{background:#d43f63;}
.zc-cte-sw__t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.zc-cte-sw__t strong{font-size:13px;font-weight:600;color:#1f2d3d;}
.zc-cte-sw__t em{font-style:normal;font-size:11.5px;color:#8a949a;line-height:1.45;}

/* select2 inside the new form */
.zc-cte .select2-container{width:100%!important;}
.zc-cte .select2-container--default .select2-selection--multiple{border:1px solid #e0e0e0!important;
    border-radius:8px!important;background:#fff!important;min-height:42px;padding:3px 6px;}
.zc-cte .select2-container--default.select2-container--focus .select2-selection--multiple,
.zc-cte .select2-container--default.select2-container--open .select2-selection--multiple{border-color:#0a474c!important;}
.zc-cte .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background:#e6f0ef!important;border:none!important;color:#0a474c!important;border-radius:6px!important;
    font-size:12px;padding:2px 8px;margin:3px 4px 0 0;}
.zc-cte .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color:#0a474c!important;margin-right:5px;}

@media(max-width:1199px){
  .zc-cte{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:767px){
  .zc-cte-grid{grid-template-columns:minmax(0,1fr);}
  .zc-cte-attr{grid-template-columns:minmax(0,1fr) 38px;}
  .zc-cte-attr input:nth-child(2){grid-column:1/3;}
}


/* ══════════════════════════════════════════════════════════════════
   select2: one box per field, app-wide
   main.css styles .select2-selection__rendered as its own bordered box
   (white bg + 1px #c1c9d0 + radius 8) on top of the container border and
   the selection border, so every select rendered as three nested boxes
   at three different heights, with the arrow pinned to the outermost one
   - which is why arrows floated above and outside their fields.
   Here the rendered span goes back to being just a text layer, the
   selection carries the chrome, and the whole control sits on one 40px
   band matching .form--control next to it.
   Kept deliberately at 2-4 classes so the higher-specificity exceptions
   still win: .body-top toolbars (38px), .ccm-sec campaign builder
   (filled 42px), .input-group country pickers (glued left radius).
   ══════════════════════════════════════════════════════════════════ */
.zc-content .select2-container {
    width: 100% !important;
    height: auto !important;
    /* no min-height here: the selection owns the height, and a floor set on
       the container fought the 38px .body-top toolbar override by 2px */
    border: none !important;
    border-radius: 0 !important;
    /* the empty inline .dropdown-wrapper sat on the baseline and left a
       ~7px dead strip under every select, which also threw off select2's
       own dropdown positioning */
    line-height: 0 !important;
}
.zc-content .select2-container > .selection { display: block !important; }
.zc-content .select2-container > .dropdown-wrapper { vertical-align: top !important; }
.zc-content .select2-container .select2-dropdown { line-height: normal !important; }

/* the field box */
.zc-content .select2-container .select2-selection.select2-selection--single {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: block !important;
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
/* text layer only - no box of its own */
.zc-content .select2-container .select2-selection .select2-selection__rendered {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 38px 0 14px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #334155 !important;
}
.zc-content .select2-container .select2-selection .select2-selection__placeholder { color: #94a3b8 !important; }
.zc-content .select2-container .select2-selection .select2-selection__arrow {
    height: 40px !important;
    width: 34px !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
}
.zc-content .select2-container .select2-selection .select2-selection__clear { line-height: 40px !important; margin-right: 26px !important; }

/* multi-select: same band, chips inside, search fills the rest.
   select2 4.1 renders the inline search as a SIBLING of the chip <ul>,
   so the ul must size to its chips or the placeholder is pushed right. */
.zc-content .select2-container .select2-selection.select2-selection--multiple {
    min-height: 40px !important;
    height: auto !important;
    padding: 4px 10px !important;
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.zc-content .select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    padding: 0 !important;
}
.zc-content .select2-container .select2-selection.select2-selection--multiple .select2-search--inline {
    flex: 1 1 90px !important; min-width: 90px !important; display: block !important; margin: 0 !important;
}
.zc-content .select2-container .select2-selection.select2-selection--multiple .select2-search__field {
    width: 100% !important; margin: 0 !important;
    height: 30px !important; line-height: 30px !important;
    font-size: 14px !important; border: none !important; background: transparent !important;
}
.zc-content .select2-container .select2-selection .select2-selection__choice {
    background: #eef4f4 !important;
    border: 1px solid #d6e3e2 !important;
    border-radius: 6px !important;
    color: #0a474c !important;
    font-size: 12.5px !important;
    line-height: normal !important;
    padding: 3px 8px !important;
    margin: 2px 0 !important;
}
.zc-content .select2-container .select2-selection .select2-selection__choice__remove { color: #0a474c !important; margin-right: 5px !important; }

/* focus / open */
.zc-content .select2-container--open .select2-selection--single,
.zc-content .select2-container--open .select2-selection--multiple,
.zc-content .select2-container--focus .select2-selection--multiple {
    border-color: #0a474c !important;
    box-shadow: 0 0 0 3px rgba(10, 71, 76, .12) !important;
}

/* the required marker belongs next to the label, not shoved to the far edge */
.zc-cte-f > span{justify-content:flex-start;gap:4px;}
.zc-cte-f > span .zc-cte-add{margin-left:auto;}

/* select2: single */
.zc-cte .select2-container--default .select2-selection--single{height:42px!important;
    border:1px solid #e0e0e0!important;border-radius:8px!important;background:#fff!important;padding:0 12px!important;}
.zc-cte .select2-container--default.select2-container--open .select2-selection--single,
.zc-cte .select2-container--default.select2-container--focus .select2-selection--single{border-color:#0a474c!important;}
.zc-cte .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:40px!important;padding:0!important;border:0!important;background:transparent!important;
    box-shadow:none!important;font-size:13px;color:#3b4a54;}
.zc-cte .select2-container--default .select2-selection--single .select2-selection__arrow{height:40px!important;right:8px;}
.zc-cte .select2-container--default .select2-selection--single .select2-selection__placeholder{color:#9aa5ab;}

/* select2: multiple */
.zc-cte .select2-container--default .select2-selection--multiple{min-height:42px!important;padding:4px 8px!important;}
.zc-cte .select2-container--default .select2-selection--multiple .select2-selection__rendered{
    padding:0!important;line-height:1.6;display:flex;flex-wrap:wrap;align-items:center;gap:0;}
.zc-cte .select2-container--default .select2-search--inline .select2-search__field{
    margin:0!important;height:32px;line-height:32px;font-size:13px;background:transparent!important;}
.zc-cte .select2-container--default .select2-search--inline .select2-search__field::placeholder{color:#9aa5ab;}
.zc-cte .select2-dropdown{border:1px solid #e0e0e0!important;border-radius:8px!important;}
.zc-cte .select2-container--default .select2-results__option--highlighted[aria-selected]{background:#0a474c!important;}


/* ══════════════════════════════════════════════════════════════════
   App Store polish: logo depth + a PRO badge that reads paid
   The logos are real app tiles now, so they get the shadow a physical
   icon would cast and lift slightly with the card. The PRO chip was a
   flat yellow rectangle that looked like a warning; gold with a crown
   reads as an upsell.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-int-card__ico img {
    width: 72px; height: 72px; display: block;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .20)) drop-shadow(0 1px 2px rgba(15, 23, 42, .10));
    transition: transform .2s ease, filter .2s ease;
}
html body .zc-int-card:hover .zc-int-card__ico img {
    transform: translateY(-2px);
    filter: drop-shadow(0 12px 22px rgba(15, 23, 42, .24)) drop-shadow(0 2px 4px rgba(15, 23, 42, .12));
}

/* PRO — gold, embossed, crowned */
html body .zc-int-chip.chip-pro {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, #fbe08a 0%, #e9b949 42%, #c8891f 100%);
    color: #4a2f05;
    font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    line-height: 1; padding: 4px 8px 4px 6px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(150, 100, 10, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
}
html body .zc-int-chip.chip-pro::before {
    content: "\f521"; font-family: "Line Awesome Free"; font-weight: 900;
    font-size: 10px; line-height: 1; letter-spacing: 0;
}

/* same badge, sidebar scale — flyout / pinned panel */
html body .zcv3-pro,
html body .zcv3-fly .zcv3-pro,
html body .zcv3-pal .zcv3-pro {
    font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
    color: #4a2f05 !important;
    background: linear-gradient(135deg, #fbe08a 0%, #e6b243 55%, #cf9327 100%);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 1px 2px rgba(150, 100, 10, .3), inset 0 1px 0 rgba(255, 255, 255, .65);
    padding: 2px 6px; border-radius: 5px; margin-left: auto; line-height: 1;
}
/* and on the rail icon itself */
html body #zcSidebar.zcv3 .zcv3-pro-rail {
    background: linear-gradient(135deg, #fbe08a 0%, #e6b243 55%, #cf9327 100%);
    color: #4a2f05;
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .6);
    padding: 2px 5px; border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   REVENUE ATTRIBUTION  (2026-08-18)
   Same flat tokens as the rest: white cards, 0 0 11px #e6e6e6, teal #0a474c.
   ══════════════════════════════════════════════════════════════════════════ */

.zc-content .rev-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.zc-content .rev-sub {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0;
    max-width: 70ch;
}

.zc-content .rev-range {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.zc-content .rev-range__b {
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    padding: 6px 13px;
    border-radius: 6px;
    text-decoration: none;
}

.zc-content .rev-range__b:hover {
    color: #0f172a;
    text-decoration: none;
}

.zc-content .rev-range__b.active {
    background: #fff;
    color: #0a474c;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1);
}

/* ── Headline KPIs ─────────────────────────────────────────────────────── */
.zc-content .rev-kpis {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.zc-content .rev-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
}

.zc-content .rev-kpi--hero {
    background: #0a474c;
    box-shadow: none;
}

.zc-content .rev-kpi__k {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: #64748b;
}

.zc-content .rev-kpi--hero .rev-kpi__k {
    color: rgba(255, 255, 255, .72);
}

.zc-content .rev-kpi__k em {
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    text-transform: none;
    color: #94a3b8;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 2px 6px;
}

.zc-content .rev-kpi--hero .rev-kpi__k em {
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .14);
}

.zc-content .rev-kpi__v {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.zc-content .rev-kpi--hero .rev-kpi__v {
    color: #fff;
    font-size: 30px;
}

.zc-content .rev-kpi__v--muted {
    color: #64748b;
}

.zc-content .rev-kpi__s {
    font-size: 12px;
    color: #64748b;
}

.zc-content .rev-kpi--hero .rev-kpi__s {
    color: rgba(255, 255, 255, .8);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.zc-content .rev-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.zc-content .rev-card__h {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.zc-content .rev-card__h h6 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px;
}

.zc-content .rev-card__h p {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}

.zc-content .rev-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.zc-content .rev-two .rev-card {
    margin-bottom: 0;
}

/* ── Trend chart ───────────────────────────────────────────────────────── */
.zc-content .rev-chart__plot {
    height: 200px;
}

.zc-content .rev-chart__plot svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.zc-content .rev-chart__grid {
    stroke: #eef1f0;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.zc-content .rev-chart__tick {
    fill: #94a3b8;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.zc-content .rev-chart__l {
    fill: none;
    stroke: #0a474c;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.zc-content .rev-chart__a {
    stroke: none;
    fill: rgba(10, 71, 76, .10);
}

.zc-content .rev-chart__x {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    padding: 8px 0 0 46px;
}

/* ── Channel breakdown ─────────────────────────────────────────────────── */
.zc-content .rev-chan__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 108px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f4f6f6;
}

.zc-content .rev-chan__row:last-child {
    border-bottom: 0;
}

.zc-content .rev-chan__l {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.zc-content .rev-chan__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.zc-content .rev-chan__dot--ads {
    background: #0a474c;
}

.zc-content .rev-chan__dot--campaign {
    background: #4a90a4;
}

.zc-content .rev-chan__dot--organic {
    background: #c9b896;
}

.zc-content .rev-chan__name {
    font-size: 13.5px;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zc-content .rev-chan__n {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 6px;
    flex: 0 0 auto;
}

.zc-content .rev-chan__bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.zc-content .rev-chan__bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.zc-content .rev-chan__fill--ads {
    background: #0a474c;
}

.zc-content .rev-chan__fill--campaign {
    background: #4a90a4;
}

.zc-content .rev-chan__fill--organic {
    background: #c9b896;
}

.zc-content .rev-chan__v {
    text-align: right;
}

.zc-content .rev-chan__v strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.zc-content .rev-chan__v span {
    font-size: 11px;
    color: #94a3b8;
}

/* By type */
.zc-content .rev-src {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.zc-content .rev-src__h {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
}

.zc-content .rev-src__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
    color: #475569;
}

.zc-content .rev-src__row em {
    font-style: normal;
    font-size: 11px;
    color: #94a3b8;
    background: #f8fafc;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
}

.zc-content .rev-src__row strong {
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* ── Top earners ───────────────────────────────────────────────────────── */
.zc-content .rev-touch {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #f4f6f6;
}

.zc-content .rev-touch:last-child {
    border-bottom: 0;
}

.zc-content .rev-touch__rank {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #F5EFDF;
    color: #0a474c;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zc-content .rev-touch__b {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.zc-content .rev-touch__b strong {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.zc-content .rev-touch__tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 7px;
}

.zc-content .rev-touch__tag--ads {
    color: #0a474c;
    background: #eaf2f2;
}

.zc-content .rev-touch__tag--campaign {
    color: #2d6b7d;
    background: #e8f1f4;
}

.zc-content .rev-touch__tag--organic {
    color: #8a7a5c;
    background: #f7f2e6;
}

.zc-content .rev-touch__v {
    flex: 0 0 auto;
    text-align: right;
}

.zc-content .rev-touch__v strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.zc-content .rev-touch__v span {
    font-size: 11px;
    color: #94a3b8;
}

/* ── Ledger ────────────────────────────────────────────────────────────── */
.zc-content .rev-tablewrap {
    overflow-x: auto;
}

.zc-content .rev-ref {
    font-weight: 600;
    color: #0f172a;
}

/* ── Empty states ──────────────────────────────────────────────────────── */
.zc-content .rev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 20px 40px;
    text-align: center;
}

.zc-content .rev-empty--sm {
    padding: 28px 16px;
}

.zc-content .rev-empty i {
    font-size: 32px;
    color: #cbd5e1;
}

.zc-content .rev-empty strong {
    font-size: 14px;
    color: #334155;
}

.zc-content .rev-empty span {
    font-size: 12.5px;
    color: #94a3b8;
    max-width: 52ch;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1399px) {
    .zc-content .rev-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .zc-content .rev-two {
        grid-template-columns: 1fr;
    }

    .zc-content .rev-two .rev-card {
        margin-bottom: 16px;
    }
}

@media (max-width: 575px) {
    .zc-content .rev-kpis {
        grid-template-columns: 1fr;
    }

    .zc-content .rev-chan__row {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .zc-content .rev-chan__bar {
        display: none;
    }
}


/* ══════════════════════════════════════════════════════════════════
   Developer Hub — API keys, webhooks, request log, docs
   ══════════════════════════════════════════════════════════════════ */
.zc-dev { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; }

.zc-dev-guide {
    background: #f1f9f4; border-radius: 10px; padding: 22px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.zc-dev-guide__k { font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: #6b7f74; }
.zc-dev-guide h6 { font-size: 20px; font-weight: 700; color: #1c1c1c; margin: 6px 0 4px; }
.zc-dev-guide p { font-size: 13px; color: #5c6b64; margin: 0; line-height: 1.55; max-width: 640px; }
.zc-dev-guide__base { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zc-dev-guide__base > span { font-size: 12px; color: #6b7f74; }
.zc-dev-guide__base code {
    background: #fff; border: 1px solid #d9e7df; border-radius: 6px;
    padding: 7px 11px; font-size: 12.5px; color: #0a474c;
}

.zc-dev-tabs { display: flex; gap: 4px; border-bottom: 1px solid #ececec; flex-wrap: wrap; }
.zc-dev-tabs a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; font-size: 13.5px; font-weight: 500; color: #6d7a76;
    text-decoration: none !important; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.zc-dev-tabs a:hover { color: #0a474c; }
.zc-dev-tabs a.on { color: #0a474c; font-weight: 600; border-bottom-color: #0a474c; }
.zc-dev-tabs i { font-size: 17px; }

.zc-dev-card { background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9; padding: 22px 24px; position: relative; }
.zc-dev-card__h { margin-bottom: 16px; }
.zc-dev-card__h h6 {
    font-size: 15.5px; font-weight: 600; color: #1c1c1c; margin: 0 0 4px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.zc-dev-card__h p { font-size: 13px; color: #6d7a76; margin: 0; line-height: 1.55; }
.zc-dev-verb {
    font-style: normal; font-size: 11.5px; font-weight: 600; color: #0a474c;
    background: #eef4f4; border: 1px solid #d9e7e5; border-radius: 5px; padding: 3px 8px;
    overflow-wrap: anywhere;
}

.zc-dev-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.zc-dev-row .form--control { flex: 1 1 320px; }

.zc-dev-btn {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 7px;
    background: #fff; color: #0a474c; border: 1px solid #cfdedb; cursor: pointer;
    text-decoration: none !important; transition: background .15s, border-color .15s;
}
.zc-dev-btn:hover { background: #f2f8f7; border-color: #b6cec9; }
.zc-dev-btn.primary { background: #0a474c; color: #fff; border-color: #0a474c; }
.zc-dev-btn.primary:hover { background: #083a3e; }
.zc-dev-btn.danger { color: #c0392b; border-color: #f0d3cf; }
.zc-dev-btn.danger:hover { background: #fdf3f2; border-color: #e6b8b2; }

.zc-dev-copy {
    font-size: 12px; font-weight: 600; color: #0a474c; background: #eef4f4;
    border: 1px solid #d9e7e5; border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
.zc-dev-copy:hover { background: #e3eeec; }
.zc-dev-copy.done { background: #0a474c; color: #fff; border-color: #0a474c; }
.zc-dev-copy.solid { background: #0a474c; color: #fff; border-color: #0a474c; padding: 8px 14px; font-size: 12.5px; }
.zc-dev-card > .zc-dev-copy { position: absolute; top: 20px; right: 22px; }

/* the one-time key reveal */
.zc-dev-fresh { background: #eaf7f0; border: 1px solid #bfe3d2; border-radius: 10px; padding: 18px 20px; }
.zc-dev-fresh__h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.zc-dev-fresh__h i { font-size: 20px; color: #17a06a; }
.zc-dev-fresh__h strong { font-size: 14.5px; color: #0a474c; }
.zc-dev-fresh__h span { font-size: 12.5px; color: #4d6d67; }
.zc-dev-fresh__k { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zc-dev-fresh__k code {
    flex: 1 1 380px; background: #fff; border: 1px solid #cde3d8; border-radius: 7px;
    padding: 11px 14px; font-size: 13px; color: #0f172a; overflow-wrap: anywhere;
}

.zc-dev-scroll { overflow-x: auto; }
.zc-dev-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.zc-dev-table thead th {
    text-align: left; padding: 12px 14px; font-size: 13px; font-weight: 500;
    color: #4a5350; border-bottom: 1px solid #eef1f1; white-space: nowrap;
}
.zc-dev-table tbody td { padding: 13px 14px; border-bottom: 1px solid #f3f5f5; color: #1f2d3d; vertical-align: middle; }
.zc-dev-table tbody tr:last-child td { border-bottom: none; }
.zc-dev-table .nm { font-weight: 500; }
.zc-dev-table .ta-r { text-align: right; }
.zc-dev-table .ta-r form { display: inline-block; }
.zc-dev-table tr.is-dead td { opacity: .5; }
.zc-dev-table code, .zc-dev-mask { font-size: 12.5px; color: #4a5350; }

.zc-dev-chip {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 8px; border-radius: 5px; background: #eef4f4; color: #0a474c;
}
.zc-dev-chip.on { background: #e6f4ea; color: #116b3a; }
.zc-dev-chip.off { background: #fdecea; color: #b02a1c; }

/* webhook rows */
.zc-dev-hook__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.zc-dev-hook__url { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.zc-dev-hook__url code { font-size: 13px; color: #1f2d3d; overflow-wrap: anywhere; }
.zc-dev-hook__act { display: flex; gap: 8px; flex-wrap: wrap; }
.zc-dev-hook__meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid #f1f4f4;
}
.zc-dev-hook__meta > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.zc-dev-hook__meta .k { color: #8a938f; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; width: 100%; }
.zc-dev-hook__meta code { background: #f6f8f8; border-radius: 4px; padding: 3px 7px; font-size: 12px; color: #4a5350; }
.zc-dev-hook__meta .good { color: #116b3a; font-weight: 600; }
.zc-dev-hook__meta .bad { color: #b02a1c; font-weight: 600; }
.zc-dev-hook__meta .muted, .zc-dev-table .muted { color: #8a938f; }

.zc-dev-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 16px; }
.zc-dev-event { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #4a5350; margin: 0; cursor: pointer; }
.zc-dev-event input { margin-top: 3px; accent-color: #0a474c; }
.zc-dev-event code { background: #eef4f4; border-radius: 4px; padding: 2px 6px; font-size: 12px; color: #0a474c; margin-right: 5px; }

.zc-dev-code {
    background: #0f2f31; color: #d6ece9; border-radius: 8px; padding: 16px 18px;
    font-size: 12.5px; line-height: 1.65; margin: 0; overflow-x: auto; white-space: pre;
}

.zc-dev-empty { padding: 44px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zc-dev-empty i { font-size: 36px; color: #b9c6c4; }
.zc-dev-empty strong { font-size: 15px; color: #1f2d3d; }
.zc-dev-empty span { font-size: 13px; color: #6d7a76; }

/* ══════════════════════════════════════════════════════════════════════════
   TEMPLATE APPROVAL CHECK  (2026-08-18)
   Sits under the preview on the Create Template page.
   ══════════════════════════════════════════════════════════════════════════ */

.zc-content .tpl-lint {
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #eef1f0;
    border-radius: 10px;
}

.zc-content .tpl-lint__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.zc-content .tpl-lint__t {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.zc-content .tpl-lint__verdict {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 3px 9px;
    white-space: nowrap;
}

.zc-content .tpl-lint__verdict.is-pass {
    color: #15803d;
    background: #e8f5ec;
}

.zc-content .tpl-lint__verdict.is-warn {
    color: #a16207;
    background: #fdf4e3;
}

.zc-content .tpl-lint__verdict.is-fail {
    color: #b91c1c;
    background: #fdeaea;
}

.zc-content .tpl-lint__sub {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 3px 0 10px;
}

.zc-content .tpl-lint__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.zc-content .tpl-lint__list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.zc-content .tpl-lint__list li b {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.zc-content .tpl-lint__list li span {
    font-size: 12.5px;
    line-height: 1.55;
    color: #475569;
}

.zc-content .tpl-lint__list li.is-fail {
    background: #fdf5f5;
    border-left-color: #dc2626;
}

.zc-content .tpl-lint__list li.is-fail b {
    color: #b91c1c;
}

.zc-content .tpl-lint__list li.is-warn {
    background: #fdfaf2;
    border-left-color: #d97706;
}

.zc-content .tpl-lint__list li.is-warn b {
    color: #a16207;
}

.zc-content .tpl-lint__list li.is-pass {
    background: #f4faf6;
    border-left-color: #16a34a;
}

.zc-content .tpl-lint__list li.is-pass b {
    color: #15803d;
}

/* ══════════════════════════════════════════════════════════════════════════
   NUMBER HEALTH GUARDIAN  (2026-08-18)
   ══════════════════════════════════════════════════════════════════════════ */

.zc-content .gd-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.zc-content .gd-sub {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0;
    max-width: 70ch;
}

.zc-content .gd-manage {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 14px;
    text-decoration: none;
}

.zc-content .gd-manage:hover {
    border-color: #cbd5e1;
    color: #0f172a;
    text-decoration: none;
}

/* ── Hero: score ring + facts ──────────────────────────────────────────── */
.zc-content .gd-hero {
    display: flex;
    align-items: center;
    gap: 26px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
    padding: 22px 24px;
    margin-bottom: 16px;
    border-left: 4px solid #16a34a;
}

.zc-content .gd-hero--warn {
    border-left-color: #d97706;
}

.zc-content .gd-hero--bad {
    border-left-color: #dc2626;
}

.zc-content .gd-ring {
    position: relative;
    flex: 0 0 auto;
    width: 128px;
    height: 128px;
}

.zc-content .gd-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.zc-content .gd-ring__track {
    fill: none;
    stroke: #f1f5f9;
    stroke-width: 11;
}

.zc-content .gd-ring__bar {
    fill: none;
    stroke: #16a34a;
    stroke-width: 11;
    stroke-linecap: round;
}

.zc-content .gd-hero--warn .gd-ring__bar {
    stroke: #d97706;
}

.zc-content .gd-hero--bad .gd-ring__bar {
    stroke: #dc2626;
}

.zc-content .gd-ring__mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.zc-content .gd-ring__mid strong {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.zc-content .gd-ring__mid span {
    font-size: 11px;
    color: #94a3b8;
}

.zc-content .gd-hero__b {
    flex: 1;
    min-width: 0;
}

.zc-content .gd-band {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 3px 9px;
    margin-bottom: 7px;
}

.zc-content .gd-band--good {
    color: #15803d;
    background: #e8f5ec;
}

.zc-content .gd-band--warn {
    color: #a16207;
    background: #fdf4e3;
}

.zc-content .gd-band--bad {
    color: #b91c1c;
    background: #fdeaea;
}

.zc-content .gd-hero__b h6 {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 4px;
}

.zc-content .gd-hero__b > p {
    font-size: 12.5px;
    line-height: 1.6;
    color: #64748b;
    margin: 0 0 14px;
    max-width: 76ch;
}

.zc-content .gd-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.zc-content .gd-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.zc-content .gd-fact span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.zc-content .gd-fact strong {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.zc-content .gd-q--green {
    color: #15803d;
}

.zc-content .gd-q--yellow {
    color: #a16207;
}

.zc-content .gd-q--red {
    color: #b91c1c;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.zc-content .gd-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.zc-content .gd-card__h {
    margin-bottom: 14px;
}

.zc-content .gd-card__h h6 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px;
}

.zc-content .gd-card__h p {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}

.zc-content .gd-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.zc-content .gd-two .gd-card {
    margin-bottom: 0;
}

/* ── Factor rows ───────────────────────────────────────────────────────── */
.zc-content .gd-factors {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zc-content .gd-factor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 9px;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
}

.zc-content .gd-factor--good {
    background: #f4faf6;
    border-left-color: #16a34a;
}

.zc-content .gd-factor--warn {
    background: #fdfaf2;
    border-left-color: #d97706;
}

.zc-content .gd-factor--bad {
    background: #fdf5f5;
    border-left-color: #dc2626;
}

.zc-content .gd-factor__ic {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    background: #94a3b8;
}

.zc-content .gd-factor--good .gd-factor__ic {
    background: #16a34a;
}

.zc-content .gd-factor--warn .gd-factor__ic {
    background: #d97706;
}

.zc-content .gd-factor--bad .gd-factor__ic {
    background: #dc2626;
}

.zc-content .gd-factor__b {
    flex: 1;
    min-width: 0;
}

.zc-content .gd-factor__t {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.zc-content .gd-factor__t strong {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.zc-content .gd-factor__t em {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #fff;
    border-radius: 4px;
    padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}

.zc-content .gd-factor__b p {
    font-size: 12.5px;
    line-height: 1.6;
    color: #64748b;
    margin: 3px 0 0;
}

.zc-content .gd-factor__w {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

/* ── Tier ladder ───────────────────────────────────────────────────────── */
.zc-content .gd-ladder {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.zc-content .gd-rung {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0 9px 2px;
    position: relative;
}

.zc-content .gd-rung::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #eef1f0;
}

.zc-content .gd-rung:first-child::before {
    top: 50%;
}

.zc-content .gd-rung:last-child::before {
    bottom: 50%;
}

.zc-content .gd-rung__dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cbd5e1;
    flex: 0 0 auto;
}

.zc-content .gd-rung.is-passed .gd-rung__dot,
.zc-content .gd-rung.is-current .gd-rung__dot {
    border-color: #0a474c;
    background: #0a474c;
}

.zc-content .gd-rung__l {
    font-size: 13.5px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.zc-content .gd-rung__l em {
    font-style: normal;
    font-size: 11.5px;
    color: #94a3b8;
}

.zc-content .gd-rung.is-current .gd-rung__l {
    color: #0f172a;
    font-weight: 700;
}

.zc-content .gd-rung__tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #0a474c;
    background: #eaf2f2;
    border-radius: 4px;
    padding: 2px 7px;
}

.zc-content .gd-note {
    font-size: 12.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.zc-content .gd-note b {
    color: #0f172a;
}

.zc-content .gd-note--sm {
    font-size: 12px;
    color: #94a3b8;
}

/* ── Recent behaviour ──────────────────────────────────────────────────── */
.zc-content .gd-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.zc-content .gd-statcol {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px 14px;
}

.zc-content .gd-statcol__h {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
}

.zc-content .gd-statrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 12.5px;
    color: #64748b;
}

.zc-content .gd-statrow strong {
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.zc-content .gd-statrow strong.is-bad {
    color: #dc2626;
}

/* ── Quality history strip ─────────────────────────────────────────────── */
.zc-content .gd-hist {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.zc-content .gd-hist__h {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
}

.zc-content .gd-hist__h em {
    font-style: normal;
    color: #64748b;
}

.zc-content .gd-hist__strip {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.zc-content .gd-hist__d {
    width: 12px;
    height: 20px;
    border-radius: 3px;
    background: #e2e8f0;
}

.zc-content .gd-hist__d--green {
    background: #16a34a;
}

.zc-content .gd-hist__d--yellow {
    background: #d97706;
}

.zc-content .gd-hist__d--red {
    background: #dc2626;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .zc-content .gd-two {
        grid-template-columns: 1fr;
    }

    .zc-content .gd-two .gd-card {
        margin-bottom: 16px;
    }
}

@media (max-width: 767px) {
    .zc-content .gd-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .zc-content .gd-facts {
        grid-template-columns: 1fr 1fr;
    }

    .zc-content .gd-stats {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   INDIA STACK — IndiaMART + Shiprocket  (2026-08-18)
   ══════════════════════════════════════════════════════════════════════════ */

.zc-content .ist-top {
    margin-bottom: 16px;
}

.zc-content .ist-sub {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0;
    max-width: 74ch;
}

.zc-content .ist-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
    padding: 20px 22px;
    margin-bottom: 16px;
}

.zc-content .ist-card__h {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.zc-content .ist-card__id {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
}

.zc-content .ist-logo {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
}

.zc-content .ist-logo--im {
    background: #0a474c;
}

.zc-content .ist-logo--sr {
    background: #4a90a4;
}

.zc-content .ist-card__h h6 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 3px;
}

.zc-content .ist-card__h p {
    font-size: 12.5px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
    max-width: 74ch;
}

.zc-content .ist-state {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 4px 10px;
    white-space: nowrap;
}

.zc-content .ist-state.is-on {
    color: #15803d;
    background: #e8f5ec;
}

.zc-content .ist-state.is-pending {
    color: #a16207;
    background: #fdf4e3;
}

.zc-content .ist-state.is-off {
    color: #64748b;
    background: #f1f5f9;
}

/* ── Form ──────────────────────────────────────────────────────────────── */
.zc-content .ist-f {
    margin-bottom: 16px;
}

.zc-content .ist-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.zc-content .ist-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 3px;
}

.zc-content .ist-help {
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
    margin: 0 0 8px;
    max-width: 74ch;
}

.zc-content .ist-hint {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 5px;
}

.zc-content .ist-hint code,
.zc-content .ist-f code {
    font-size: 11px;
    color: #0a474c;
    background: #eaf2f2;
    border-radius: 4px;
    padding: 1px 5px;
}

.zc-content .ist-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 8px;
    cursor: pointer;
}

.zc-content .ist-check input {
    width: 15px;
    height: 15px;
    accent-color: #0a474c;
}

.zc-content .ist-actions {
    display: flex;
    gap: 10px;
}

.zc-content .ist-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 9px 16px;
    cursor: pointer;
    text-decoration: none;
}

.zc-content .ist-btn:hover {
    border-color: #cbd5e1;
    color: #0f172a;
}

.zc-content .ist-btn--primary {
    color: #fff;
    background: #0a474c;
    border-color: #0a474c;
}

.zc-content .ist-btn--primary:hover {
    background: #083c40;
    border-color: #083c40;
    color: #fff;
}

/* ── Run bar ───────────────────────────────────────────────────────────── */
.zc-content .ist-run {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.zc-content .ist-run form {
    margin: 0;
}

.zc-content .ist-meta {
    font-size: 12px;
    color: #94a3b8;
    margin-left: auto;
}

.zc-content .ist-note {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 10px 0 0;
}

/* ── Lead list ─────────────────────────────────────────────────────────── */
.zc-content .ist-leads {
    display: flex;
    flex-direction: column;
}

.zc-content .ist-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f4f6f6;
    font-size: 13px;
}

.zc-content .ist-lead:last-child {
    border-bottom: 0;
}

.zc-content .ist-lead strong {
    font-weight: 600;
    color: #0f172a;
    min-width: 0;
    flex: 1;
}

.zc-content .ist-lead span {
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.zc-content .ist-lead em {
    font-style: normal;
    font-size: 11.5px;
    color: #94a3b8;
    min-width: 84px;
    text-align: right;
}

@media (max-width: 767px) {
    .zc-content .ist-two {
        grid-template-columns: 1fr;
    }

    .zc-content .ist-meta {
        margin-left: 0;
        width: 100%;
    }
}


/* ══════════════════════════════════════════════════════════════════
   Developer Hub — full-bleed, same shape as Flows and History:
   white title bar and tab strip run edge to edge, the cards sit in a
   centred body so code blocks stay readable on a very wide screen.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content:has(.zc-dev) { padding: 0 !important; background: #f5f6f7 !important; }
html body .zc-content:has(.zc-dev) .zc-page-head { display: none !important; }

html body .zc-dev { max-width: none; gap: 0; }
.zc-dev-titlebar {
    background: #fff; padding: 16px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.zc-dev-titlebar .container-top__title {
    font-size: 20px !important; font-weight: 600 !important; color: #1c1c1c !important; margin: 0 !important;
}
html body .zc-dev .zc-dev-tabs {
    background: #fff; border-bottom: 1px solid #ececec; padding: 0 28px;
}
.zc-dev-body {
    padding: 20px 28px 40px; max-width: 1720px; margin: 0 auto; width: 100%;
    display: flex; flex-direction: column; gap: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   VOICE TRANSCRIPTION  (2026-08-19)
   ══════════════════════════════════════════════════════════════════════════ */

.zc-content .vt-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.zc-content .vt-sub {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0;
    max-width: 74ch;
}

.zc-content .vt-state {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 4px 10px;
    white-space: nowrap;
}

.zc-content .vt-state.is-on {
    color: #15803d;
    background: #e8f5ec;
}

.zc-content .vt-state.is-off {
    color: #64748b;
    background: #f1f5f9;
}

.zc-content .vt-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.zc-content .vt-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
}

.zc-content .vt-kpi span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: #64748b;
}

.zc-content .vt-kpi strong {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.zc-content .vt-kpi strong.is-bad {
    color: #dc2626;
}

.zc-content .vt-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 11px #e6e6e6;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.zc-content .vt-card__h {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.zc-content .vt-card__h h6 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px;
}

.zc-content .vt-card__h p {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
    max-width: 74ch;
}

.zc-content .vt-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.zc-content .vt-f {
    margin-bottom: 16px;
}

.zc-content .vt-f--check {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zc-content .vt-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 4px;
}

.zc-content .vt-hint {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 5px;
}

.zc-content .vt-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #0f172a;
    cursor: pointer;
}

.zc-content .vt-check input {
    width: 15px;
    height: 15px;
    accent-color: #0a474c;
}

.zc-content .vt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 15px;
    cursor: pointer;
    white-space: nowrap;
}

.zc-content .vt-btn:hover {
    border-color: #cbd5e1;
    color: #0f172a;
}

.zc-content .vt-btn--primary {
    color: #fff;
    background: #0a474c;
    border-color: #0a474c;
}

.zc-content .vt-btn--primary:hover {
    background: #083c40;
    border-color: #083c40;
    color: #fff;
}

/* ── Voice note rows ───────────────────────────────────────────────────── */
.zc-content .vt-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid #f4f6f6;
}

.zc-content .vt-row:last-child {
    border-bottom: 0;
}

.zc-content .vt-row__ic {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F5EFDF;
    color: #0a474c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.zc-content .vt-row__b {
    flex: 1;
    min-width: 0;
}

.zc-content .vt-row__meta {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.zc-content .vt-row__meta strong {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.zc-content .vt-row__meta span {
    font-size: 11.5px;
    color: #94a3b8;
}

.zc-content .vt-dir {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 6px;
}

.zc-content .vt-text {
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
    margin: 5px 0 0;
}

.zc-content .vt-text--none {
    color: #94a3b8;
    font-style: italic;
}

.zc-content .vt-text--fail {
    color: #b91c1c;
}

.zc-content .vt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px;
    text-align: center;
}

.zc-content .vt-empty i {
    font-size: 30px;
    color: #cbd5e1;
}

.zc-content .vt-empty strong {
    font-size: 14px;
    color: #334155;
}

.zc-content .vt-empty span {
    font-size: 12.5px;
    color: #94a3b8;
}

@media (max-width: 991px) {
    .zc-content .vt-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .zc-content .vt-two {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════
   Global Attributes rows (Flows) — name / value / secret / remove
   ══════════════════════════════════════════════════════════════════ */
.zc-ga { padding: 4px 0 0; }
.zc-ga-head, .zc-ga-row {
    display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr) 40px;
    gap: 16px; align-items: center; padding: 0 30px;
}
.zc-ga-head {
    font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: #8a938f; padding-top: 18px; padding-bottom: 10px;
}
.zc-ga-row { padding-top: 9px; padding-bottom: 9px; }

.zc-ga-name { display: flex; align-items: center; gap: 6px; }
.zc-ga-brace { font-size: 13px; color: #b6c0bd; user-select: none; }
.zc-ga-name input {
    flex: 1; min-width: 0; height: 40px; padding: 0 12px;
    border: 1px solid #e2e8f0; border-radius: 7px; background: #fff;
    font-size: 13.5px; color: #1f2d3d;
}
.zc-ga-name input:invalid { border-color: #e6b8b2; }

.zc-ga-val { display: flex; align-items: center; gap: 6px; }
.zc-ga-val input[name="value[]"] {
    flex: 1; min-width: 0; height: 40px; padding: 0 12px;
    border: 1px solid #e2e8f0; border-radius: 7px; background: #fff;
    font-size: 13.5px; color: #1f2d3d;
}
.zc-ga-name input:focus, .zc-ga-val input:focus {
    outline: none; border-color: #0a474c; box-shadow: 0 0 0 3px rgba(10, 71, 76, .1);
}

.zc-ga-ico {
    width: 34px; height: 34px; flex: none; border: none; background: none; cursor: pointer;
    border-radius: 7px; color: #7b8785; font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .15s, background .15s;
}
.zc-ga-ico:hover { color: #0a474c; background: #f2f8f7; }
.zc-ga-copy.done { color: #fff; background: #0a474c; }
.zc-ga-del:hover { color: #c0392b; background: #fdf3f2; }

.zc-ga-secret {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; flex: none;
    font-size: 12.5px; color: #6d7a76; cursor: pointer; white-space: nowrap;
}
.zc-ga-secret input { accent-color: #0a474c; margin: 0; }

.zc-ga-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding: 18px 30px 22px; margin-top: 8px; border-top: 1px solid #f1f4f4;
}
.zc-ga-add {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
    color: #0a474c; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 6px 0;
}
.zc-ga-add:hover { text-decoration: underline; }
.zc-ga-add i { font-size: 17px; }

@media (max-width: 860px) {
    .zc-ga-head { display: none; }
    .zc-ga-row {
        grid-template-columns: minmax(0, 1fr) 40px;
        grid-template-areas: "name del" "val val";
        row-gap: 8px; padding-bottom: 16px; border-bottom: 1px solid #f3f5f5;
    }
    .zc-ga-name { grid-area: name; }
    .zc-ga-val  { grid-area: val; flex-wrap: wrap; }
    .zc-ga-del  { grid-area: del; }
}


/* ══════════════════════════════════════════════════════════════════
   Store Setup cards (Integrations) — Shopify / WooCommerce
   ══════════════════════════════════════════════════════════════════ */
.zc-ss-stat { font-size: 13px; color: #5c6b64; margin: 6px 0 0 !important; }
.zc-ss-stat b { font-size: 16px; color: #0a474c; }

.zc-ss-flow { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.zc-ss-flow > i { align-self: center; color: #b6c0bd; font-size: 20px; }
.zc-ss-flow__step {
    flex: 1 1 150px; background: #fafbfb; border: 1px solid #eef1f1; border-radius: 8px;
    padding: 13px 15px; display: flex; flex-direction: column; gap: 3px;
}
.zc-ss-flow__step .n {
    width: 20px; height: 20px; border-radius: 50%; background: #0a474c; color: #fff;
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    margin-bottom: 3px;
}
.zc-ss-flow__step strong { font-size: 13.5px; color: #1c1c1c; }
.zc-ss-flow__step span { font-size: 12px; color: #6d7a76; line-height: 1.45; }

.zc-ss-hook {
    background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9; padding: 20px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.zc-ss-hook__t h6 { font-size: 15px; font-weight: 600; color: #1c1c1c; margin: 0 0 3px; }
.zc-ss-hook__t p { font-size: 12.5px; color: #6d7a76; margin: 0; max-width: 560px; }
.zc-ss-hook__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zc-ss-hook__row code {
    background: #f6f8f8; border: 1px solid #e6ebea; border-radius: 7px;
    padding: 9px 13px; font-size: 12.5px; color: #0a474c; overflow-wrap: anywhere;
}

.zc-ss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .zc-ss-grid { grid-template-columns: 1fr; } }

.zc-ss-card { background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9; padding: 22px 24px; }
.zc-ss-card.is-on { outline: 1.5px solid #bfe3d2; outline-offset: -1.5px; }
.zc-ss-card__h { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.zc-ss-card__h img {
    width: 56px; height: 56px; display: block;
    filter: drop-shadow(0 5px 12px rgba(15, 23, 42, .18));
}
.zc-ss-card__h strong { display: block; font-size: 16.5px; font-weight: 700; color: #1c1c1c; margin-bottom: 4px; }
.zc-ss-chip {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 5px; background: #f1f3f3; color: #6d7a76;
}
.zc-ss-chip.on { background: #e6f4ea; color: #116b3a; }
.zc-ss-card__d { font-size: 13px; color: #6d7a76; line-height: 1.55; margin: 0 0 14px; }

.zc-ss-conn {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    background: #f2faf5; border: 1px solid #d7ecdf; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #0a474c;
}
.zc-ss-conn i { font-size: 17px; }
.zc-ss-conn span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.zc-ss-unlink {
    background: none; border: none; color: #c0392b; font-size: 12.5px; font-weight: 600;
    cursor: pointer; padding: 2px 4px;
}
.zc-ss-unlink:hover { text-decoration: underline; }

.zc-ss-steps { border-top: 1px solid #f1f4f4; padding-top: 4px; }
.zc-ss-steps summary {
    list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #0a474c;
    padding: 10px 0; display: flex; align-items: center; gap: 7px;
}
.zc-ss-steps summary::before {
    content: "\f105"; font-family: "Line Awesome Free"; font-weight: 900; transition: transform .15s;
}
.zc-ss-steps[open] summary::before { transform: rotate(90deg); }
.zc-ss-steps summary::-webkit-details-marker { display: none; }
.zc-ss-steps ol { margin: 4px 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.zc-ss-steps ol li { font-size: 13px; color: #4a5350; line-height: 1.5; }
.zc-ss-steps ol li b { color: #1c1c1c; font-weight: 600; }

.zc-ss-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-bottom: 6px; }
.zc-ss-form .form--control { flex: 1 1 220px; }

.zc-ss-devcard {
    background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9;
    padding: 22px 24px; position: relative;
}
.zc-ss-devcard__t h6 { font-size: 15px; font-weight: 600; color: #1c1c1c; margin: 0 0 4px; }
.zc-ss-devcard__t p { font-size: 12.5px; color: #6d7a76; margin: 0 0 14px; max-width: 860px; line-height: 1.55; }
.zc-ss-devcard > .zc-dev-copy { position: absolute; top: 20px; right: 22px; }


/* ══════════════════════════════════════════════════════════════════
   CDP & Segmentation — flat professional pass (photo feedback, 2026-08-19)
   One accent (#0a474c), one tile tint, quiet actions. The old view's
   generic class names (.lab/.val/.track) collided with the marketing
   stylesheets and pulled in a serif font — hence the zc-cdp- prefix.
   ══════════════════════════════════════════════════════════════════ */
.zc-cdp-tile{width:44px;height:44px;border-radius:10px;background:#e6f0ef;color:#0a474c;
    display:inline-flex;align-items:center;justify-content:center;font-size:21px;flex:none;}
.zc-cdp-tile.sm{width:30px;height:30px;border-radius:8px;font-size:16px;}

.zc-cdp-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;
    border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:18px 22px;margin-bottom:16px;}
.zc-cdp-head__t{flex:1;min-width:240px;}
.zc-cdp-head__t h5{margin:0;font-size:16.5px;font-weight:700;color:#1c1c1c;
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.zc-cdp-head__t p{margin:3px 0 0;font-size:12.5px;color:#6e6e6e;}
.zc-cdp-prem{font-style:normal;display:inline-flex;align-items:center;gap:4px;
    background:linear-gradient(135deg,#fbe08a 0%,#e9b949 42%,#c8891f 100%);color:#4a2f05;
    font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:5px;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 1px 2px rgba(150,100,10,.3),inset 0 1px 0 rgba(255,255,255,.7);}
.zc-cdp-prem i{font-size:10px;}
.zc-cdp-ghost{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
    color:#0a474c!important;background:#fff;border:1px solid #cfdedb;border-radius:7px;
    padding:8px 14px;text-decoration:none!important;transition:background .15s,border-color .15s;}
.zc-cdp-ghost:hover{background:#f2f8f7;border-color:#b6cec9;}

.zc-cdp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:12px;margin-bottom:20px;}
.zc-cdp-kpi{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;
    padding:18px 20px;display:flex;align-items:center;gap:14px;}
.zc-cdp-kpi b{display:block;font-size:1.5rem;font-weight:700;color:#1c1c1c;line-height:1.15;}
.zc-cdp-kpi span{font-size:12.5px;color:#6e6e6e;}

.zc-cdp-sec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 2px 12px;}
.zc-cdp-sec h6{margin:0;font-size:14.5px;font-weight:600;color:#1c1c1c;}
.zc-cdp-sec span{font-size:12.5px;color:#8a938f;}

.zc-cdp-segs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:12px;margin-bottom:22px;}
.zc-cdp-seg{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;
    display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s;}
.zc-cdp-seg:hover{box-shadow:0 3px 14px rgba(10,71,76,.13);}
.zc-cdp-seg__body{display:block;padding:14px 16px 12px;text-decoration:none!important;}
.zc-cdp-seg__top{display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.zc-cdp-seg__nm{font-size:13px;font-weight:600;color:#4a5350;flex:1;min-width:0;line-height:1.3;}
.zc-cdp-seg__arr{color:#c3cdca;font-size:13px;transition:transform .15s,color .15s;}
.zc-cdp-seg:hover .zc-cdp-seg__arr{transform:translateX(3px);color:#0a474c;}
.zc-cdp-seg__body b{display:block;font-size:24px;font-weight:700;color:#1c1c1c;line-height:1.1;}
.zc-cdp-seg__pct{font-size:12px;color:#8a938f;}
.zc-cdp-seg__use{margin:0;border-top:1px solid #f1f4f4;}
html body .zc-content .zc-cdp-seg__use button{width:100%;display:flex;align-items:center;
    justify-content:center;gap:6px;background:#fff!important;border:none!important;
    color:#0a474c!important;font-size:12.5px;font-weight:600;padding:9px 10px;cursor:pointer;
    border-radius:0!important;box-shadow:none!important;transition:background .15s;}
html body .zc-content .zc-cdp-seg__use button:hover{background:#f2f8f7!important;}
.zc-cdp-seg__use button i{font-size:15px;}

.zc-cdp-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start;}
@media(max-width:1080px){.zc-cdp-cols{grid-template-columns:1fr;}}
.zc-cdp-panel{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:20px 22px;}
.zc-cdp-sect{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.zc-cdp-sect h6{margin:0;font-size:14.5px;font-weight:600;color:#1c1c1c;}
.zc-cdp-sect span{font-size:12px;color:#8a938f;}

.zc-cdp-scroll{overflow-x:auto;}
.zc-cdp-tbl{width:100%;border-collapse:collapse;}
.zc-cdp-tbl th{text-align:left;font-size:13px;font-weight:500;color:#4a5350;
    padding:10px 12px;border-bottom:1px solid #eef1f1;white-space:nowrap;}
.zc-cdp-tbl td{padding:11px 12px;border-bottom:1px solid #f3f5f5;font-size:13px;
    color:#4a5350;vertical-align:middle;}
.zc-cdp-tbl tr:last-child td{border-bottom:0;}
.zc-cdp-tbl tbody tr:hover td{background:#fafbfb;}
.zc-cdp-tbl .ta-c{text-align:center;}
.zc-cdp-nm{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#1c1c1c;}
.zc-cdp-nm i{color:#d99a2b;font-size:13px;}
.zc-cdp-mob{font-size:12px;color:#8a938f;}
.zc-cdp-score{font-weight:700;color:#0a474c;letter-spacing:.5px;}
.zc-cdp-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;
    padding:3px 9px;border-radius:5px;white-space:nowrap;}
.zc-cdp-chip.c-champions{background:#e6f4ea;color:#116b3a;}
.zc-cdp-chip.c-loyal{background:#e8f1fe;color:#1d5cb4;}
.zc-cdp-chip.c-promising{background:#efedfd;color:#5b50c7;}
.zc-cdp-chip.c-at-risk{background:#fdf3e3;color:#95611a;}
.zc-cdp-chip.c-hibernating{background:#f1f3f3;color:#5c6b64;}
.zc-cdp-chip.c-needs-attention{background:#fdecea;color:#b02a1c;}
.zc-cdp-note{margin:12px 0 0;font-size:12px;color:#8a938f;line-height:1.6;}
.zc-cdp-note b{color:#4a5350;font-weight:600;}

.zc-cdp-dist{display:flex;flex-direction:column;gap:12px;}
.zc-cdp-dist__row{display:flex;align-items:center;gap:12px;}
.zc-cdp-dist__lab{width:118px;flex:none;font-size:13px;font-weight:500;color:#4a5350;}
.zc-cdp-dist__track{flex:1;height:8px;border-radius:6px;background:#f1f3f3;overflow:hidden;}
.zc-cdp-dist__fill{display:block;height:100%;border-radius:6px;background:#0a474c;}
.zc-cdp-dist__val{width:30px;text-align:right;font-size:13px;font-weight:600;color:#1c1c1c;}

.zc-cdp-empty{text-align:center;color:#8a938f;font-size:13px;padding:28px 0;}
.zc-cdp-empty i{font-size:26px;display:block;margin-bottom:8px;color:#b9c6c4;}


/* ══════════════════════════════════════════════════════════════════
   Payments & Wallet — flat professional pass (photo feedback, 2026-08-19)
   Same primitives as CDP: tinted tiles, one accent, quiet actions,
   a real table for requests instead of a stack of glass cards.
   ══════════════════════════════════════════════════════════════════ */
.zc-pay-tile{width:44px;height:44px;border-radius:10px;background:#e6f0ef;color:#0a474c;
    display:inline-flex;align-items:center;justify-content:center;font-size:21px;flex:none;}
.zc-pay-tile.lg{width:56px;height:56px;border-radius:12px;font-size:26px;}

.zc-pay-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;
    border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:18px 22px;margin-bottom:16px;}
.zc-pay-head__t{flex:1;min-width:240px;}
.zc-pay-head__t h5{margin:0;font-size:16.5px;font-weight:700;color:#1c1c1c;
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.zc-pay-head__t p{margin:3px 0 0;font-size:12.5px;color:#6e6e6e;}
.zc-pay-prem{font-style:normal;display:inline-flex;align-items:center;gap:4px;
    background:linear-gradient(135deg,#fbe08a 0%,#e9b949 42%,#c8891f 100%);color:#4a2f05;
    font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:5px;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 1px 2px rgba(150,100,10,.3),inset 0 1px 0 rgba(255,255,255,.7);}
.zc-pay-prem i{font-size:10px;}

html body .zc-content .zc-pay-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:7px;cursor:pointer;
    background:#fff;color:#0a474c;border:1px solid #cfdedb;box-shadow:none;
    text-decoration:none!important;transition:background .15s,border-color .15s;line-height:1.3;}
html body .zc-content .zc-pay-btn:hover{background:#f2f8f7;border-color:#b6cec9;transform:none;}
html body .zc-content .zc-pay-btn.primary{background:#0a474c;color:#fff;border-color:#0a474c;}
html body .zc-content .zc-pay-btn.primary:hover{background:#083a3e;}
html body .zc-content .zc-pay-btn.sm{padding:6px 12px;font-size:12.5px;}
html body .zc-content .zc-pay-btn.wide{width:100%;justify-content:center;margin-top:6px;padding:11px 18px;}
.zc-pay-ico{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:7px;
    color:#7b8785;font-size:17px;display:inline-flex;align-items:center;justify-content:center;
    transition:color .15s,background .15s;padding:0;}
.zc-pay-ico:hover{color:#0a474c;background:#f2f8f7;}
.zc-pay-ico.danger:hover{color:#c0392b;background:#fdf3f2;}

.zc-pay-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px;}
.zc-pay-kpi{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:18px 20px;
    display:flex;align-items:center;gap:14px;}
.zc-pay-kpi b{display:block;font-size:1.5rem;font-weight:700;color:#1c1c1c;line-height:1.15;}
.zc-pay-kpi span{font-size:12.5px;color:#6e6e6e;}

.zc-pay-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start;}
@media(max-width:1080px){.zc-pay-cols{grid-template-columns:1fr;}}
.zc-pay-panel{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:20px 22px;}
.zc-pay-sect{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;}
.zc-pay-sect h6{margin:0;font-size:14.5px;font-weight:600;color:#1c1c1c;}
.zc-pay-sect span{font-size:12px;color:#8a938f;}

.zc-pay-scroll{overflow-x:auto;}
.zc-pay-tbl{width:100%;border-collapse:collapse;}
.zc-pay-tbl th{text-align:left;font-size:13px;font-weight:500;color:#4a5350;padding:10px 12px;
    border-bottom:1px solid #eef1f1;white-space:nowrap;}
.zc-pay-tbl td{padding:11px 12px;border-bottom:1px solid #f3f5f5;font-size:13px;color:#4a5350;vertical-align:middle;}
.zc-pay-tbl tr:last-child td{border-bottom:0;}
.zc-pay-tbl tbody tr:hover td{background:#fafbfb;}
.zc-pay-tbl .ta-r{text-align:right;}
.zc-pay-amt{font-size:14.5px;font-weight:700;color:#1c1c1c;white-space:nowrap;}
.zc-pay-nm{display:block;font-size:13.5px;font-weight:600;color:#1c1c1c;}
.zc-pay-sub{display:block;font-size:12px;color:#8a938f;}
.zc-pay-desc{color:#6d7a76;}
.zc-pay-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;
    padding:3px 9px;border-radius:5px;white-space:nowrap;}
.zc-pay-chip.is-pending{background:#fdf3e3;color:#95611a;}
.zc-pay-chip.is-paid{background:#e6f4ea;color:#116b3a;}
.zc-pay-chip.is-cancelled{background:#fdecea;color:#b02a1c;}
.zc-pay-act{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end;}
.zc-pay-act form{margin:0;display:inline-flex;}

.zc-pay-tx{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f3f5f5;}
.zc-pay-tx:last-child{border-bottom:0;}
.zc-pay-tx__ic{width:32px;height:32px;border-radius:8px;flex:none;display:inline-flex;
    align-items:center;justify-content:center;font-size:16px;}
.zc-pay-tx__ic.in{background:#e6f4ea;color:#116b3a;}
.zc-pay-tx__ic.out{background:#fdecea;color:#b02a1c;}
.zc-pay-tx__t{flex:1;min-width:0;}
.zc-pay-tx__amt{font-size:13.5px;font-weight:700;white-space:nowrap;}
.zc-pay-tx__amt.in{color:#116b3a;}
.zc-pay-tx__amt.out{color:#b02a1c;}

.zc-pay-empty{text-align:center;padding:44px 20px;display:flex;flex-direction:column;
    align-items:center;gap:8px;}
.zc-pay-empty strong{font-size:15px;color:#1f2d3d;margin-top:4px;}
.zc-pay-empty span{font-size:13px;color:#6d7a76;}
.zc-pay-empty .zc-pay-btn{margin-top:8px;}
.zc-pay-empty.compact{padding:22px 0 12px;gap:6px;}
.zc-pay-empty.compact i{font-size:26px;color:#b9c6c4;}

/* modal */
.zc-pay-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9999;
    align-items:center;justify-content:center;padding:24px;}
.zc-pay-overlay.show{display:flex;}
.zc-pay-modal{background:#fff;border-radius:12px;width:100%;max-width:440px;
    box-shadow:0 18px 50px rgba(0,0,0,.18);overflow:hidden;}
.zc-pay-modal__h{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:16px 20px;border-bottom:1px solid #eef1f1;}
.zc-pay-modal__h h6{margin:0;font-size:15px;font-weight:600;color:#1c1c1c;display:flex;align-items:center;gap:7px;}
.zc-pay-modal__h h6 i{color:#0a474c;font-size:18px;}
.zc-pay-modal__b{padding:18px 20px 20px;}
.zc-pay-lbl{display:block;font-size:12.5px;font-weight:500;color:#4a5350;margin:0 0 5px;}
.zc-pay-lbl i{font-style:normal;color:#c0392b;}
.zc-pay-modal__b .form--control{margin-bottom:13px;}


/* ══════════════════════════════════════════════════════════════════
   Template Messages — flat professional pass (photo feedback, 2026-08-19)
   One accent, radius 10, one shadow, quiet card actions. Overrides the
   earlier .zc-tpl-* block above by source order + specificity.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-tpl-head{margin-bottom:16px;}
html body .zc-content .zc-tpl-head .container-top__title{font-size:20px!important;font-weight:600!important;color:#1c1c1c!important;margin:0!important;}
html body .zc-content .zc-tpl-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:7px;cursor:pointer;
    background:#fff;color:#0a474c!important;border:1px solid #cfdedb;box-shadow:none;
    text-decoration:none!important;transition:background .15s,border-color .15s;line-height:1.3;}
html body .zc-content .zc-tpl-btn:hover{background:#f2f8f7;border-color:#b6cec9;transform:none;}
html body .zc-content .zc-tpl-btn.primary{background:#0a474c;color:#fff!important;border-color:#0a474c;}
html body .zc-content .zc-tpl-btn.primary:hover{background:#083a3e;}

/* top row: guide + launch on the same card system */
html body .zc-content .zc-tpl-top{grid-template-columns:290px minmax(0,1fr);gap:16px;margin-bottom:18px;}
html body .zc-content .zc-tpl-guide{background:#f1f9f4;border:none;border-radius:10px;padding:20px 22px;}
html body .zc-content .zc-tpl-guide__k{font-size:11px;font-weight:700;letter-spacing:.085em;color:#6b7f74;}
html body .zc-content .zc-tpl-guide h6{font-size:18px;font-weight:700;color:#1c1c1c;margin:6px 0 8px;}
html body .zc-content .zc-tpl-guide p{font-size:13px;color:#5c6b64;}
html body .zc-content .zc-tpl-guide a{font-size:13px;}
html body .zc-content .zc-tpl-launch{border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:20px 22px;}
html body .zc-content .zc-tpl-launch h6{font-size:15.5px;font-weight:600;color:#1c1c1c;}
html body .zc-content .zc-tpl-lc{border:1px solid #ededed;border-radius:8px;padding:14px 16px;gap:13px;}
html body .zc-content .zc-tpl-lc:hover{border-color:#d8e4e2;box-shadow:0 3px 12px rgba(10,71,76,.07);}
/* launch icons: same tile recipe and colour set as the Flows launch cards
   (.zc-fl2-card__ic) — display is forced because a global rule was turning
   the tile into display:block and pinning the glyph to the top-left */
html body .zc-content .zc-tpl-lc__ico{width:38px;height:38px;border-radius:9px;font-size:20px;flex:none;
    display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;}
html body .zc-content .zc-tpl-lc__ico i{line-height:1!important;display:block;}
html body .zc-content .zc-tpl-lc__ico.ico-teal{background:#e9f6ef;color:#17a06a;}
html body .zc-content .zc-tpl-lc__ico.ico-violet{background:#f1ecfd;color:#7c3aed;}
html body .zc-content .zc-tpl-lc__ico.ico-blue{background:#eaf1fe;color:#2563eb;}
html body .zc-content .zc-tpl-lc__ico.ico-amber{background:#fdf0e7;color:#b7601c;}
html body .zc-content .zc-tpl-tag{background:#eaf1fe;color:#2563eb;}
html body .zc-content .zc-tpl-tag.ai{background:#f1ecfd;color:#7c3aed;}
html body .zc-content .zc-tpl-lc strong{font-size:14px;font-weight:600;color:#1c1c1c;}
html body .zc-content .zc-tpl-lc span{font-size:12.5px;color:#6d7a76;}
html body .zc-content .zc-tpl-tag,
html body .zc-content .zc-tpl-tag.ai{font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:4px;
    background:#eef4f4;color:#0a474c;}

/* filter bar: search 38px + AiSensy underline tabs instead of filled pills */
html body .zc-content .zc-tpl-bar{margin-bottom:12px;align-items:flex-end;}
html body .zc-content .zc-tpl-bar .search-form .form--control{height:38px!important;min-height:38px!important;border-radius:7px!important;font-size:13px!important;}
html body .zc-content .zc-tpl-tabs{gap:2px;border-bottom:1px solid #ececec;}
html body .zc-content .zc-tpl-tab{font-size:13.5px;font-weight:500;color:#6d7a76;padding:9px 14px;border-radius:0;
    border-bottom:2px solid transparent;margin-bottom:-1px;background:none!important;}
html body .zc-content .zc-tpl-tab:hover{color:#0a474c;background:none!important;}
html body .zc-content .zc-tpl-tab.on{color:#0a474c;font-weight:600;background:none!important;border-bottom-color:#0a474c;}
html body .zc-content .zc-tpl-tab em{font-size:11px;font-weight:600;background:#eef1f1;color:#4a5350;padding:1px 7px;border-radius:10px;}
html body .zc-content .zc-tpl-tab.on em{background:#e6f0ef;color:#0a474c;}
html body .zc-content .zc-tpl-hint{font-size:12.5px;color:#8a938f;margin:10px 0 14px;}

/* starter library: bubble preview + quiet footer action */
html body .zc-content .zc-tpl-lib{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
html body .zc-content .zc-tpl-card{border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:0;gap:0;overflow:hidden;height:100%;
    transition:box-shadow .15s;}
html body .zc-content .zc-tpl-card:hover{box-shadow:0 3px 14px rgba(10,71,76,.13);}
html body .zc-content .zc-tpl-card__h{padding:14px 16px 10px;}
html body .zc-content .zc-tpl-card__h strong{font-size:14px;font-weight:600;color:#1c1c1c;}
html body .zc-content .zc-tpl-badge,
html body .zc-content .zc-tpl-badge.ut,
html body .zc-content .zc-tpl-badge.mk{font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:5px;text-transform:none;}
html body .zc-content .zc-tpl-badge.ut{background:#e6f0ef;color:#0a474c;}
html body .zc-content .zc-tpl-badge.mk{background:#fdf3e3;color:#95611a;}
html body .zc-content .zc-tpl-card__bubble{margin:0 16px;flex:1;background:#f5efdf;border-radius:10px;
    padding:12px 14px 10px;position:relative;}
html body .zc-content .zc-tpl-card__bubble::before{content:"";position:absolute;left:-6px;top:12px;
    border:6px solid transparent;border-right-color:#f5efdf;border-left:0;}
html body .zc-content .zc-tpl-card__b{font-size:12.5px;color:#1c1c1c;line-height:1.55;margin:0 0 8px;
    background:transparent!important;padding:0!important;border-radius:0!important;
    display:block;overflow:visible;-webkit-line-clamp:unset;}
html body .zc-content .zc-tpl-card__f{display:block;font-size:11.5px;color:#8a938f;}
html body .zc-content .zc-tpl-card__use{display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:12px;padding:11px 16px;border-top:1px solid #f1f4f4;background:#fff;
    font-size:13px;font-weight:600;color:#0a474c!important;text-decoration:none!important;transition:background .15s;}
html body .zc-content .zc-tpl-card__use:hover{background:#f2f8f7;}
html body .zc-content .zc-tpl-card__use i{font-size:15px;transition:transform .15s;}
html body .zc-content .zc-tpl-card__use:hover i{transform:translateX(3px);}


/* ══════════════════════════════════════════════════════════════════
   CDP & Segmentation v2 — layout rebuild (2026-08-19)
   Full-bleed title bar (Flows/History pattern), KPI strip, segments as
   a scannable list with a share bar, RFM as one stacked bar + legend,
   and the table full width with 10 rows visible. One accent throughout.
   ══════════════════════════════════════════════════════════════════ */
.zc-cdp2-title{display:flex;align-items:center;gap:10px;}
.zc-cdp2-prem{font-style:normal;display:inline-flex;align-items:center;gap:4px;
    background:linear-gradient(135deg,#fbe08a 0%,#e9b949 42%,#c8891f 100%);color:#4a2f05;
    font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:5px;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 1px 2px rgba(150,100,10,.3),inset 0 1px 0 rgba(255,255,255,.7);}
.zc-cdp2-prem i{font-size:10px;}
.zc-cdp2 .zc-fl2-body{display:flex;flex-direction:column;gap:16px;}

.zc-cdp2-tile{width:40px;height:40px;border-radius:10px;background:#e6f0ef;color:#0a474c;
    display:inline-flex;align-items:center;justify-content:center;font-size:19px;flex:none;}
.zc-cdp2-tile.sm{width:32px;height:32px;border-radius:8px;font-size:16px;}

.zc-cdp2-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media(max-width:1100px){.zc-cdp2-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
.zc-cdp2-kpi{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:16px 18px;
    display:flex;align-items:center;gap:13px;}
.zc-cdp2-kpi b{display:block;font-size:22px;font-weight:700;color:#1c1c1c;line-height:1.15;}
.zc-cdp2-kpi span{font-size:12.5px;color:#6e6e6e;}

.zc-cdp2-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start;}
@media(max-width:1100px){.zc-cdp2-cols{grid-template-columns:1fr;}}
.zc-cdp2-panel{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:18px 20px 16px;}
.zc-cdp2-sect{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.zc-cdp2-sect h6{margin:0 0 3px;font-size:15px;font-weight:600;color:#1c1c1c;}
.zc-cdp2-sect > div > span{display:block;font-size:12.5px;color:#8a938f;line-height:1.5;}

/* segments list */
.zc-cdp2-seglist{display:flex;flex-direction:column;}
.zc-cdp2-seg{display:flex;align-items:center;gap:6px;border-top:1px solid #f1f4f4;}
.zc-cdp2-seg:first-child{border-top:0;}
.zc-cdp2-seg__main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 6px 10px 2px;
    text-decoration:none!important;border-radius:8px;transition:background .15s;}
.zc-cdp2-seg__main:hover{background:#f7faf9;}
.zc-cdp2-seg__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.zc-cdp2-seg__t strong{font-size:13.5px;font-weight:600;color:#1c1c1c;line-height:1.2;}
.zc-cdp2-seg__bar{display:block;height:5px;border-radius:4px;background:#eef2f1;overflow:hidden;max-width:260px;}
.zc-cdp2-seg__bar i{display:block;height:100%;background:#0a474c;border-radius:4px;min-width:0;}
.zc-cdp2-seg__n{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:54px;}
.zc-cdp2-seg__n b{font-size:16px;font-weight:700;color:#1c1c1c;line-height:1.1;}
.zc-cdp2-seg__n small{font-size:11.5px;color:#8a938f;}
.zc-cdp2-seg__use{margin:0;}
html body .zc-content .zc-cdp2-seg__use button{width:34px;height:34px;border:none!important;background:none!important;
    border-radius:8px!important;color:#7b8785!important;font-size:17px;cursor:pointer;box-shadow:none!important;
    display:inline-flex;align-items:center;justify-content:center;padding:0;transition:color .15s,background .15s;}
html body .zc-content .zc-cdp2-seg__use button:hover{color:#0a474c!important;background:#eaf3f2!important;}

/* stacked distribution */
.zc-cdp2-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#eef2f1;margin:4px 0 14px;}
.zc-cdp2-stack span{display:block;height:100%;}
.zc-cdp2-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.zc-cdp2-legend li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid #f1f4f4;font-size:13px;}
.zc-cdp2-legend li:first-child{border-top:0;}
.zc-cdp2-legend .dot{width:10px;height:10px;border-radius:3px;flex:none;}
.zc-cdp2-legend .lb{flex:1;color:#1c1c1c;font-weight:500;}
.zc-cdp2-legend .pc{color:#8a938f;font-size:12px;min-width:36px;text-align:right;}
.zc-cdp2-legend b{font-weight:700;color:#1c1c1c;min-width:28px;text-align:right;}
.zc-cdp2-note{margin:12px 0 0;font-size:12px;color:#8a938f;line-height:1.6;}
.zc-cdp2-note b{color:#4a5350;font-weight:600;}

/* one tone set for stack, legend and chips */
.zc-cdp2-stack .c-champions,.zc-cdp2-legend .dot.c-champions{background:#116b3a;}
.zc-cdp2-stack .c-loyal,.zc-cdp2-legend .dot.c-loyal{background:#1d5cb4;}
.zc-cdp2-stack .c-promising,.zc-cdp2-legend .dot.c-promising{background:#5b50c7;}
.zc-cdp2-stack .c-at-risk,.zc-cdp2-legend .dot.c-at-risk{background:#d99a2b;}
.zc-cdp2-stack .c-hibernating,.zc-cdp2-legend .dot.c-hibernating{background:#9aa4a2;}
.zc-cdp2-stack .c-needs-attention,.zc-cdp2-legend .dot.c-needs-attention{background:#c0392b;}
.zc-cdp2-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:5px;white-space:nowrap;}
.zc-cdp2-chip.c-champions{background:#e6f4ea;color:#116b3a;}
.zc-cdp2-chip.c-loyal{background:#e8f1fe;color:#1d5cb4;}
.zc-cdp2-chip.c-promising{background:#efedfd;color:#5b50c7;}
.zc-cdp2-chip.c-at-risk{background:#fdf3e3;color:#95611a;}
.zc-cdp2-chip.c-hibernating{background:#f1f3f3;color:#5c6b64;}
.zc-cdp2-chip.c-needs-attention{background:#fdecea;color:#b02a1c;}

/* table */
.zc-cdp2-scroll{overflow-x:auto;}
.zc-cdp2-tbl{width:100%;border-collapse:collapse;}
.zc-cdp2-tbl th{text-align:left;font-size:13px;font-weight:500;color:#4a5350;padding:10px 12px;
    border-bottom:1px solid #eef1f1;white-space:nowrap;}
.zc-cdp2-tbl td{padding:10px 12px;border-bottom:1px solid #f3f5f5;font-size:13px;color:#4a5350;vertical-align:middle;}
.zc-cdp2-tbl tbody tr:last-child td{border-bottom:0;}
.zc-cdp2-tbl tbody tr:hover td{background:#fafbfb;}
.zc-cdp2-tbl tr.is-extra{display:none;}
.zc-cdp2-tbl.show-all tr.is-extra{display:table-row;}
.zc-cdp2-tbl .ta-c{text-align:center;}
.zc-cdp2-tbl .ta-r{text-align:right;}
.zc-cdp2-rank{color:#8a938f;font-size:12px;}
.zc-cdp2-nm{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#1c1c1c;}
.zc-cdp2-nm i{color:#d99a2b;font-size:13px;}
.zc-cdp2-mob{font-size:12px;color:#8a938f;}
.zc-cdp2-pip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border-radius:5px;
    font-size:12px;font-weight:600;background:#f1f3f3;color:#5c6b64;}
.zc-cdp2-pip.p4,.zc-cdp2-pip.p5{background:#e6f0ef;color:#0a474c;}
.zc-cdp2-pip.p5{background:#0a474c;color:#fff;}
.zc-cdp2-score{font-size:14px;font-weight:700;color:#0a474c;}
.zc-cdp2-of{font-size:11px;color:#8a938f;margin-left:1px;}
.zc-cdp2-empty{text-align:center;color:#8a938f;font-size:13px;padding:28px 0;}
.zc-cdp2-empty i{font-size:26px;display:block;margin-bottom:8px;color:#b9c6c4;}

/* CDP v2 fixups: body uses the full width on wide screens; segment rows keep
   the number close to the bar instead of flush to the far edge */
html body .zc-cdp2 .zc-fl2-body{max-width:none;padding:18px 24px 36px;}
.zc-cdp2-seg__bar{max-width:none;}
.zc-cdp2-seg__t{flex:1 1 auto;}
.zc-cdp2-seg__n{margin-left:0;flex:none;}
.zc-cdp2-seg__main{max-width:none;}
.zc-cdp2-seg__main{gap:14px;}


/* ══════════════════════════════════════════════════════════════════
   Optin Management — professional pass (photo feedback, 2026-08-19)
   Full-bleed title bar, tiled KPIs, one card holding tools + table,
   and a switch per row instead of 62 repeated buttons.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-opt .zc-fl2-body{max-width:none;padding:18px 24px 36px;display:flex;flex-direction:column;gap:16px;}
.zc-opt-title__r{display:flex;gap:8px;}

.zc-opt-note{display:flex;align-items:flex-start;gap:12px;background:#fff;border-radius:10px;
    box-shadow:0 0 11px #e9e9e9;padding:14px 18px;}
.zc-opt-note__ic{width:34px;height:34px;border-radius:9px;background:#e6f0ef;color:#0a474c;flex:none;
    display:inline-flex;align-items:center;justify-content:center;font-size:18px;}
.zc-opt-note strong{display:block;font-size:13.5px;font-weight:600;color:#1c1c1c;margin-bottom:2px;}
.zc-opt-note span{font-size:12.5px;color:#6d7a76;line-height:1.55;}

.zc-opt-tile{width:40px;height:40px;border-radius:10px;background:#e6f0ef;color:#0a474c;flex:none;
    display:inline-flex;align-items:center;justify-content:center;font-size:19px;}
.zc-opt-tile.ok{background:#e6f4ea;color:#116b3a;}
.zc-opt-tile.bad{background:#fdecea;color:#b02a1c;}
.zc-opt-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media(max-width:1100px){.zc-opt-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
.zc-opt-kpi{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:16px 18px;
    display:flex;align-items:center;gap:13px;}
.zc-opt-kpi b{display:block;font-size:22px;font-weight:700;color:#1c1c1c;line-height:1.15;}
.zc-opt-kpi span{font-size:12.5px;color:#6e6e6e;}

.zc-opt-card{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;overflow:hidden;}
.zc-opt-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:14px 18px;border-bottom:1px solid #eef1f1;}
.zc-opt-search{position:relative;display:inline-block;}
.zc-opt-search input{border:1px solid #e2e6e5;border-radius:7px;padding:0 34px 0 14px;height:38px;font-size:13.5px;
    min-width:280px;background:#fff;color:#1c1c1c;}
.zc-opt-search input:focus{outline:none;border-color:#0a474c;box-shadow:0 0 0 3px rgba(10,71,76,.08);}
.zc-opt-search i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#98a3a0;font-size:16px;}
.zc-opt-tabs{display:flex;gap:2px;}
.zc-opt-tabs a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:#6d7a76;
    padding:7px 12px;border-radius:7px;text-decoration:none!important;transition:background .15s,color .15s;}
.zc-opt-tabs a:hover{background:#f4f7f6;color:#0a474c;}
.zc-opt-tabs a.on{background:#e6f0ef;color:#0a474c;font-weight:600;}
.zc-opt-tabs em{font-style:normal;font-size:11px;font-weight:600;background:#eef1f1;color:#4a5350;padding:1px 7px;border-radius:10px;}
.zc-opt-tabs a.on em{background:#fff;color:#0a474c;}

.zc-opt-scroll{overflow-x:auto;}
.zc-opt-tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
.zc-opt-tbl th{text-align:left;padding:12px 18px;font-size:13px;font-weight:500;color:#4a5350;
    border-bottom:1px solid #eef1f1;white-space:nowrap;}
.zc-opt-tbl td{padding:10px 18px;border-bottom:1px solid #f3f5f5;color:#1f2d3d;vertical-align:middle;}
.zc-opt-tbl tbody tr:last-child td{border-bottom:0;}
.zc-opt-tbl tbody tr:hover td{background:#fafbfb;}
.zc-opt-tbl tr.is-blocked td{opacity:.6;}
.zc-opt-tbl .ta-r{text-align:right;}
.zc-opt-who{display:flex;align-items:center;gap:10px;}
.zc-opt-who .contact_thumb,.zc-opt-who .table-thumb{width:32px!important;height:32px!important;font-size:12px!important;flex:none;}
.zc-opt-nm{font-weight:600;color:#1c1c1c;}
.zc-opt-num{font-variant-numeric:tabular-nums;color:#4a5350;}
.zc-opt-sub{color:#8a938f;font-size:12.5px;}
.zc-opt-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:5px;
    background:#f1f3f3;color:#6d7a76;white-space:nowrap;}
.zc-opt-chip.ok{background:#e6f4ea;color:#116b3a;}
.zc-opt-chip.bad{background:#fdecea;color:#b02a1c;}

/* switch */
.zc-opt-sw{margin:0;display:inline-block;}
.zc-opt-sw label{position:relative;display:inline-block;width:40px;height:22px;margin:0;cursor:pointer;vertical-align:middle;}
.zc-opt-sw input{opacity:0;width:0;height:0;position:absolute;}
.zc-opt-sw span{position:absolute;inset:0;background:#d3d9d8;border-radius:20px;transition:background .18s;}
.zc-opt-sw span::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;
    transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.18);}
.zc-opt-sw input:checked+span{background:#17a06a;}
.zc-opt-sw input:checked+span::before{transform:translateX(18px);}
.zc-opt-sw input:disabled+span{opacity:.45;cursor:not-allowed;}
.zc-opt-sw input:focus-visible+span{box-shadow:0 0 0 3px rgba(10,71,76,.18);}

.zc-opt-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;
    border-top:1px solid #eef1f1;font-size:13px;color:#4a5350;}
.zc-opt-foot p{display:none!important;}
.zc-opt-empty{padding:46px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;}
.zc-opt-empty i{font-size:38px;color:#b9c6c4;}
.zc-opt-empty strong{font-size:15.5px;color:#1f2d3d;}
.zc-opt-empty span{font-size:13px;color:#6d7a76;}


/* ══════════════════════════════════════════════════════════════════
   Live Chat Settings — professional pass (photo feedback, 2026-08-19)
   One real setting presented as a setting row with presets, a KPI
   strip that says something, and related controls as a compact list.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-lcs .zc-fl2-body{max-width:none;padding:18px 24px 36px;display:flex;flex-direction:column;gap:16px;}
.zc-lcs-tile{width:40px;height:40px;border-radius:10px;background:#e6f0ef;color:#0a474c;flex:none;
    display:inline-flex;align-items:center;justify-content:center;font-size:19px;}
.zc-lcs-tile.sm{width:34px;height:34px;border-radius:9px;font-size:17px;}
.zc-lcs-tile.ok{background:#e6f4ea;color:#116b3a;}
.zc-lcs-tile.warn{background:#fdf3e3;color:#95611a;}
.zc-lcs-tile.bad{background:#fdecea;color:#b02a1c;}

.zc-lcs-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media(max-width:1100px){.zc-lcs-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
.zc-lcs-kpi{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:16px 18px;
    display:flex;align-items:center;gap:13px;}
.zc-lcs-kpi b{display:block;font-size:22px;font-weight:700;color:#1c1c1c;line-height:1.15;}
.zc-lcs-kpi span{font-size:12.5px;color:#6e6e6e;}

.zc-lcs-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start;}
@media(max-width:1100px){.zc-lcs-cols{grid-template-columns:1fr;}}
.zc-lcs-card{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;overflow:hidden;margin:0;}
.zc-lcs-card__h{padding:18px 20px 14px;border-bottom:1px solid #f1f4f4;}
.zc-lcs-card__h h6{margin:0 0 3px;font-size:15px;font-weight:600;color:#1c1c1c;}
.zc-lcs-card__h span{font-size:12.5px;color:#8a938f;}

.zc-lcs-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:20px;}
.zc-lcs-row__l{flex:1 1 300px;}
.zc-lcs-row__l strong{display:block;font-size:14px;font-weight:600;color:#1c1c1c;margin-bottom:4px;}
.zc-lcs-row__l span{font-size:12.5px;color:#6d7a76;line-height:1.55;}
.zc-lcs-row__r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.zc-lcs-input{display:inline-flex;align-items:center;border:1px solid #e2e6e5;border-radius:7px;overflow:hidden;height:38px;background:#fff;}
.zc-lcs-input input{width:84px;height:100%;border:none;padding:0 12px;font-size:14px;font-weight:600;color:#1c1c1c;
    text-align:right;background:transparent;outline:none;-moz-appearance:textfield;}
.zc-lcs-input input::-webkit-outer-spin-button,.zc-lcs-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.zc-lcs-input span{padding:0 12px;height:100%;display:inline-flex;align-items:center;background:#f6f8f8;
    border-left:1px solid #e2e6e5;font-size:12.5px;color:#6d7a76;}
.zc-lcs-input:focus-within{border-color:#0a474c;box-shadow:0 0 0 3px rgba(10,71,76,.08);}
.zc-lcs-presets{display:inline-flex;gap:4px;}
html body .zc-content .zc-lcs-presets button{height:30px;padding:0 11px;border-radius:7px;border:1px solid #e2e6e5!important;
    background:#fff!important;color:#4a5350!important;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:none!important;
    transition:background .15s,border-color .15s,color .15s;}
html body .zc-content .zc-lcs-presets button:hover{background:#f2f8f7!important;border-color:#cfdedb!important;}
html body .zc-content .zc-lcs-presets button.on{background:#e6f0ef!important;border-color:#b6cec9!important;color:#0a474c!important;}
.zc-lcs-card__f{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:14px 20px;border-top:1px solid #f1f4f4;background:#fafbfb;}
.zc-lcs-card__f > span{font-size:12.5px;color:#6d7a76;display:inline-flex;align-items:center;gap:6px;}
.zc-lcs-card__f > span i{font-size:15px;color:#8a938f;}

.zc-lcs-links{display:flex;flex-direction:column;}
.zc-lcs-link{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid #f1f4f4;
    text-decoration:none!important;transition:background .15s;}
.zc-lcs-link:first-child{border-top:0;}
.zc-lcs-link:hover{background:#f7faf9;}
.zc-lcs-link__t{flex:1;min-width:0;}
.zc-lcs-link__t strong{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#1c1c1c;}
.zc-lcs-link__t span{display:block;font-size:12.5px;color:#6d7a76;margin-top:1px;}
.zc-lcs-link__n{font-size:13px;font-weight:700;color:#4a5350;background:#f1f3f3;border-radius:10px;padding:2px 9px;}
.zc-lcs-link__n.bad{background:#fdecea;color:#b02a1c;}
.zc-lcs-link > i.la-angle-right{color:#b6c0bd;font-size:16px;transition:transform .15s,color .15s;}
.zc-lcs-link:hover > i.la-angle-right{transform:translateX(3px);color:#0a474c;}
.zc-lcs-pro{font-style:normal;display:inline-flex;align-items:center;gap:3px;
    background:linear-gradient(135deg,#fbe08a 0%,#e9b949 42%,#c8891f 100%);color:#4a2f05;
    font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:4px;
    border:1px solid rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(150,100,10,.3),inset 0 1px 0 rgba(255,255,255,.7);}
.zc-lcs-pro i{font-size:9px;}


/* ══════════════════════════════════════════════════════════════════
   User Attributes — professional pass (photo feedback, 2026-08-19)
   One table for built-in + custom with fill rate, and an Add/Edit modal
   so an attribute can exist before any contact carries it.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-ua .zc-fl2-body{max-width:none;padding:18px 24px 36px;display:flex;flex-direction:column;gap:16px;}
.zc-ua-title__r{display:flex;gap:8px;}
.zc-ua-tile{width:40px;height:40px;border-radius:10px;background:#e6f0ef;color:#0a474c;flex:none;
    display:inline-flex;align-items:center;justify-content:center;font-size:19px;}
.zc-ua-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media(max-width:900px){.zc-ua-kpis{grid-template-columns:1fr;}}
.zc-ua-kpi{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:16px 18px;display:flex;align-items:center;gap:13px;}
.zc-ua-kpi b{display:block;font-size:22px;font-weight:700;color:#1c1c1c;line-height:1.15;}
.zc-ua-kpi span{font-size:12.5px;color:#6e6e6e;}

.zc-ua-card{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;overflow:hidden;}
.zc-ua-sect{padding:18px 20px 14px;border-bottom:1px solid #f1f4f4;}
.zc-ua-sect h6{margin:0 0 3px;font-size:15px;font-weight:600;color:#1c1c1c;}
.zc-ua-sect span{font-size:12.5px;color:#8a938f;line-height:1.5;display:block;max-width:900px;}

.zc-ua-scroll{overflow-x:auto;}
.zc-ua-tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
.zc-ua-tbl th{text-align:left;padding:12px 20px;font-size:13px;font-weight:500;color:#4a5350;border-bottom:1px solid #eef1f1;white-space:nowrap;}
.zc-ua-tbl td{padding:11px 20px;border-bottom:1px solid #f3f5f5;color:#1f2d3d;vertical-align:middle;}
.zc-ua-tbl tbody tr:last-child td{border-bottom:0;}
.zc-ua-tbl tbody tr:hover td{background:#fafbfb;}
.zc-ua-tbl .ta-r{text-align:right;}
.zc-ua-nm{display:flex;align-items:center;gap:6px;font-weight:600;color:#1c1c1c;}
.zc-ua-nm i{color:#9aa4a2;font-size:14px;}
.zc-ua-sub{display:block;font-size:12px;color:#8a938f;margin-top:2px;}
.zc-ua-tok{font-size:12.5px;color:#0a474c;background:#eef4f4;border-radius:5px;padding:3px 8px;}
.zc-ua-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:5px;background:#f1f3f3;color:#5c6b64;}
.zc-ua-fill{display:block;width:120px;height:6px;border-radius:4px;background:#eef2f1;overflow:hidden;margin-bottom:4px;}
.zc-ua-fill i{display:block;height:100%;background:#0a474c;border-radius:4px;}
.zc-ua-act{display:inline-flex;align-items:center;gap:2px;justify-content:flex-end;}
.zc-ua-act form{margin:0;display:inline-flex;}
.zc-ua-ico{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:7px;color:#7b8785;font-size:17px;
    display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background .15s;padding:0;}
.zc-ua-ico:hover{color:#0a474c;background:#f2f8f7;}
.zc-ua-ico.danger:hover{color:#c0392b;background:#fdf3f2;}
.zc-ua-empty{padding:40px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;}
.zc-ua-empty i{font-size:36px;color:#b9c6c4;}
.zc-ua-empty strong{font-size:15px;color:#1f2d3d;}
.zc-ua-empty span{font-size:13px;color:#6d7a76;max-width:480px;line-height:1.5;}
.zc-ua-empty .zc-fl2-btn{margin-top:8px;}

/* modal */
.zc-ua-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9999;align-items:center;justify-content:center;padding:24px;}
.zc-ua-overlay.show{display:flex;}
.zc-ua-modal{background:#fff;border-radius:12px;width:100%;max-width:440px;box-shadow:0 18px 50px rgba(0,0,0,.18);overflow:hidden;margin:0;}
.zc-ua-modal__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid #eef1f1;}
.zc-ua-modal__h h6{margin:0;font-size:15px;font-weight:600;color:#1c1c1c;display:flex;align-items:center;gap:7px;}
.zc-ua-modal__h h6 i{color:#0a474c;font-size:18px;}
.zc-ua-modal__b{padding:18px 20px 20px;}
.zc-ua-lbl{display:block;font-size:12.5px;font-weight:500;color:#4a5350;margin:0 0 5px;}
.zc-ua-lbl i{font-style:normal;color:#c0392b;}
.zc-ua-modal__b .form--control{margin-bottom:13px;}
.zc-ua-tokin{display:flex;align-items:center;border:1px solid #e2e8f0;border-radius:8px;height:40px;overflow:hidden;background:#fff;}
.zc-ua-tokin span{padding:0 10px;color:#b6c0bd;font-size:13px;background:#f7f9f9;height:100%;display:inline-flex;align-items:center;}
.zc-ua-tokin input{flex:1;min-width:0;height:100%;border:none;outline:none;padding:0 10px;font-size:14px;color:#1c1c1c;}
.zc-ua-tokin:focus-within{border-color:#0a474c;box-shadow:0 0 0 3px rgba(10,71,76,.1);}
.zc-ua-hint{display:block;font-size:12px;color:#8a938f;margin:6px 0 13px;}
html body .zc-content .zc-fl2-btn.wide{width:100%;justify-content:center;margin-top:6px;padding:11px 18px;}

/* User Attributes — settle ("dynamic nahi lagna chahiye"): compact KPI strip,
   quiet one-line empty state, no hero block */
html body .zc-ua .zc-ua-kpis{display:inline-grid;width:max-content;max-width:100%;grid-template-columns:repeat(3,max-content);gap:0;background:#fff;border-radius:10px;
    box-shadow:0 0 11px #e9e9e9;padding:4px 8px;}
html body .zc-ua .zc-ua-kpi{box-shadow:none;border-radius:0;padding:12px 22px;gap:11px;border-right:1px solid #eef1f1;background:transparent;}
html body .zc-ua .zc-ua-kpi:last-child{border-right:0;}
html body .zc-ua .zc-ua-kpi b{font-size:18px;}
html body .zc-ua .zc-ua-tile{width:34px;height:34px;border-radius:8px;font-size:16px;}
.zc-ua-emptyrow td{padding:16px 20px!important;font-size:13px;color:#8a938f;}
.zc-ua-emptyrow i{font-size:15px;vertical-align:-2px;margin-right:4px;color:#b6c0bd;}
.zc-ua-emptyrow a{color:#0a474c;font-weight:600;text-decoration:none;margin-left:4px;}
.zc-ua-emptyrow a:hover{text-decoration:underline;}
html body .zc-ua .zc-ua-sect span{max-width:760px;}


/* ══════════════════════════════════════════════════════════════════
   Tags — settled list (photo feedback, 2026-08-19)
   Replaces the "glassy / dynamic" page: one card, quiet tabs, plain
   table, one-line empty state. Nothing animates, nothing lifts.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-tg2 .zc-fl2-body{max-width:none;padding:18px 24px 36px;}
.zc-tg2-card{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;overflow:hidden;}
.zc-tg2-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:14px 18px;border-bottom:1px solid #eef1f1;}
.zc-tg2-search{position:relative;display:inline-block;margin:0;}
.zc-tg2-search input{border:1px solid #e2e6e5;border-radius:7px;padding:0 34px 0 14px;height:38px;font-size:13.5px;
    min-width:280px;background:#fff;color:#1c1c1c;}
.zc-tg2-search input:focus{outline:none;border-color:#0a474c;box-shadow:0 0 0 3px rgba(10,71,76,.08);}
.zc-tg2-search i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#98a3a0;font-size:16px;}
.zc-tg2-tabs{display:flex;gap:2px;}
.zc-tg2-tabs a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:#6d7a76;
    padding:7px 12px;border-radius:7px;text-decoration:none!important;transition:background .15s,color .15s;}
.zc-tg2-tabs a i{font-size:15px;}
.zc-tg2-tabs a:hover{background:#f4f7f6;color:#0a474c;}
.zc-tg2-tabs a.on{background:#e6f0ef;color:#0a474c;font-weight:600;}
.zc-tg2-tabs em{font-style:normal;font-size:11px;font-weight:600;background:#fff;color:#0a474c;padding:1px 7px;border-radius:10px;}

.zc-tg2-scroll{overflow-x:auto;}
.zc-tg2-tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
html body .zc-content .zc-tg2-tbl th{text-align:left;padding:12px 18px;font-size:13px;font-weight:500;color:#4a5350;
    border-bottom:1px solid #eef1f1;white-space:nowrap;background:#fff!important;text-transform:none!important;letter-spacing:0!important;}
.zc-tg2-tbl td{padding:11px 18px;border-bottom:1px solid #f3f5f5;color:#1f2d3d;vertical-align:middle;}
.zc-tg2-tbl tbody tr:last-child td{border-bottom:0;}
.zc-tg2-tbl tbody tr:hover td{background:#fafbfb;}
.zc-tg2-tbl .ta-r{text-align:right;}
.zc-tg2-tag{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#1c1c1c;
    background:#eef4f4;border-radius:6px;padding:4px 10px 4px 8px;font-size:13px;}
.zc-tg2-tag i{color:#0a474c;font-size:14px;}
.zc-tg2-cnt{display:inline-flex;align-items:center;gap:2px;font-weight:600;color:#0a474c;text-decoration:none!important;}
.zc-tg2-cnt i{font-size:14px;transition:transform .15s;}
.zc-tg2-cnt:hover i{transform:translateX(2px);}
.zc-tg2-sub{color:#8a938f;font-size:12.5px;}
.zc-tg2-act{display:inline-flex;align-items:center;gap:2px;justify-content:flex-end;}
html body .zc-content .zc-tg2-ico{width:32px;height:32px;border:none!important;background:none!important;cursor:pointer;border-radius:7px!important;
    color:#7b8785!important;font-size:17px;display:inline-flex;align-items:center;justify-content:center;padding:0;
    box-shadow:none!important;transition:color .15s,background .15s;transform:none!important;}
html body .zc-content .zc-tg2-ico:hover{color:#0a474c!important;background:#f2f8f7!important;}
html body .zc-content .zc-tg2-ico.danger:hover{color:#c0392b!important;background:#fdf3f2!important;}
.zc-tg2-emptyrow td{padding:16px 18px!important;font-size:13px;color:#8a938f;}
.zc-tg2-emptyrow i{font-size:15px;vertical-align:-2px;margin-right:4px;color:#b6c0bd;}
.zc-tg2-emptyrow a{color:#0a474c;font-weight:600;text-decoration:none;margin-left:4px;}
.zc-tg2-emptyrow a:hover{text-decoration:underline;}
.zc-tg2-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;
    border-top:1px solid #eef1f1;font-size:13px;color:#4a5350;}
.zc-tg2-foot p{display:none!important;}


/* ══════════════════════════════════════════════════════════════════
   India Stack — settled (photo feedback, 2026-08-19)
   Settings-card recipe: header row + 2-col form + one footer strip
   holding the meta and all actions, with a single primary per card.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-ist .zc-fl2-body{max-width:none;padding:18px 24px 36px;display:flex;flex-direction:column;gap:16px;}
.zc-ist-sub{display:block;font-size:12.5px;color:#8a938f;margin-top:2px;}

.zc-ist-card{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;overflow:hidden;}
.zc-ist-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid #f1f4f4;}
.zc-ist-head.plain{padding-bottom:12px;}
.zc-ist-head__t{flex:1;min-width:0;}
.zc-ist-head__t h6{margin:0 0 2px;font-size:15px;font-weight:600;color:#1c1c1c;}
.zc-ist-head__t > span{font-size:12.5px;color:#6d7a76;line-height:1.5;display:block;max-width:720px;}
.zc-ist-logo{width:40px;height:40px;border-radius:10px;flex:none;display:inline-flex;align-items:center;
    justify-content:center;font-size:14px;font-weight:800;letter-spacing:.02em;color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.zc-ist-logo.im{background:linear-gradient(135deg,#12b3a8,#087f77);}
.zc-ist-logo.sr{background:linear-gradient(135deg,#8b6cf5,#5a3ecb);}
.zc-ist-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;
    padding:3px 9px;border-radius:5px;background:#f1f3f3;color:#6d7a76;white-space:nowrap;flex:none;}
.zc-ist-chip.ok{background:#e6f4ea;color:#116b3a;}
.zc-ist-chip.warn{background:#fdf3e3;color:#95611a;}

.zc-ist-form{padding:18px 20px 6px;}
.zc-ist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;max-width:1180px;}
@media(max-width:900px){.zc-ist-grid{grid-template-columns:1fr;}}
.zc-ist-f{margin-bottom:12px;}
.zc-ist-f > label{display:block;font-size:12.5px;font-weight:500;color:#4a5350;margin:0 0 5px;}
.zc-ist-f .form--control{width:100%;}
.zc-ist-f textarea.form--control{min-height:76px!important;padding:10px 14px!important;}
.zc-ist-hint{display:block;font-size:12px;color:#8a938f;margin-top:5px;line-height:1.5;}
.zc-ist-hint code,.zc-ist-f code{background:#eef4f4;border-radius:4px;padding:1px 6px;font-size:11.5px;color:#0a474c;}
.zc-ist-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#1c1c1c;
    margin:0 0 8px;cursor:pointer;}
.zc-ist-check input{accent-color:#0a474c;margin:0;}

.zc-ist-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:13px 20px;border-top:1px solid #f1f4f4;background:#fafbfb;}
.zc-ist-meta{font-size:12.5px;color:#6d7a76;display:inline-flex;align-items:center;gap:6px;max-width:760px;line-height:1.5;}
.zc-ist-meta i{font-size:15px;color:#8a938f;flex:none;}
.zc-ist-foot__r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.zc-ist-foot__r form{margin:0;display:inline-flex;}

.zc-ist-leads{display:flex;flex-direction:column;}
.zc-ist-lead{display:flex;align-items:center;gap:16px;padding:10px 20px;border-top:1px solid #f3f5f5;font-size:13px;}
.zc-ist-lead:first-child{border-top:0;}
.zc-ist-lead strong{flex:1;font-weight:600;color:#1c1c1c;}
.zc-ist-lead span{color:#4a5350;font-variant-numeric:tabular-nums;}
.zc-ist-lead em{font-style:normal;color:#8a938f;font-size:12.5px;}


/* ══════════════════════════════════════════════════════════════════
   Voice Transcription — settled (photo feedback, 2026-08-19)
   Tiled KPIs, engine card with a footer strip and one primary, and
   per-row transcribe as a small ghost instead of a dark button wall.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-vt .zc-fl2-body{max-width:none;padding:18px 24px 36px;display:flex;flex-direction:column;gap:16px;}
.zc-vt-sub{display:block;font-size:12.5px;color:#8a938f;margin-top:2px;max-width:820px;}
.zc-vt-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;
    padding:3px 9px;border-radius:5px;background:#f1f3f3;color:#6d7a76;white-space:nowrap;flex:none;}
.zc-vt-chip.ok{background:#e6f4ea;color:#116b3a;}

.zc-vt-tile{width:40px;height:40px;border-radius:10px;background:#e6f0ef;color:#0a474c;flex:none;
    display:inline-flex;align-items:center;justify-content:center;font-size:19px;}
.zc-vt-tile.sm{width:34px;height:34px;border-radius:9px;font-size:17px;}
.zc-vt-tile.ok{background:#e6f4ea;color:#116b3a;}
.zc-vt-tile.warn{background:#fdf3e3;color:#95611a;}
.zc-vt-tile.bad{background:#fdecea;color:#b02a1c;}
.zc-vt-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media(max-width:1100px){.zc-vt-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
.zc-vt-kpi{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;padding:16px 18px;
    display:flex;align-items:center;gap:13px;}
.zc-vt-kpi b{display:block;font-size:22px;font-weight:700;color:#1c1c1c;line-height:1.15;}
.zc-vt-kpi span{font-size:12.5px;color:#6e6e6e;}

.zc-vt-card{background:#fff;border-radius:10px;box-shadow:0 0 11px #e9e9e9;overflow:hidden;}
.zc-vt-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid #f1f4f4;}
.zc-vt-head__t{flex:1;min-width:0;}
.zc-vt-head__t h6{margin:0 0 2px;font-size:15px;font-weight:600;color:#1c1c1c;}
.zc-vt-head__t > span{font-size:12.5px;color:#6d7a76;line-height:1.5;display:block;max-width:760px;}
.zc-vt-head form{margin:0;flex:none;}

.zc-vt-form{padding:18px 20px 6px;}
.zc-vt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;max-width:1180px;}
@media(max-width:900px){.zc-vt-grid{grid-template-columns:1fr;}}
.zc-vt-f{margin-bottom:10px;}
.zc-vt-f > label{display:block;font-size:12.5px;font-weight:500;color:#4a5350;margin:0 0 5px;}
.zc-vt-hint{display:block;font-size:12px;color:#8a938f;margin-top:5px;line-height:1.5;}
.zc-vt-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#1c1c1c;
    margin:24px 0 0;cursor:pointer;}
.zc-vt-check input{accent-color:#0a474c;margin:0;}
.zc-vt-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:13px 20px;border-top:1px solid #f1f4f4;background:#fafbfb;}
.zc-vt-meta{font-size:12.5px;color:#6d7a76;display:inline-flex;align-items:center;gap:6px;}
.zc-vt-meta i{font-size:15px;color:#8a938f;}

.zc-vt-list{display:flex;flex-direction:column;}
.zc-vt-row{display:flex;align-items:flex-start;gap:12px;padding:13px 20px;border-top:1px solid #f3f5f5;}
.zc-vt-row:first-child{border-top:0;}
.zc-vt-row form{margin:2px 0 0;flex:none;}
.zc-vt-row__b{flex:1;min-width:0;}
.zc-vt-row__meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.zc-vt-row__meta strong{font-size:13.5px;font-weight:600;color:#1c1c1c;}
.zc-vt-row__meta span{font-size:12.5px;color:#8a938f;}
.zc-vt-row__meta em{font-style:normal;font-size:11px;font-weight:600;color:#6d7a76;background:#f1f3f3;
    border-radius:5px;padding:2px 7px;}
.zc-vt-text{margin:4px 0 0;font-size:13px;color:#4a5350;line-height:1.55;}
.zc-vt-text.none{color:#a5aeac;}
.zc-vt-text.fail{color:#b02a1c;}
html body .zc-content .zc-fl2-btn.sm{padding:6px 13px;font-size:12.5px;}
.zc-vt-emptyrow{padding:18px 20px;font-size:13px;color:#8a938f;}
.zc-vt-emptyrow i{font-size:15px;vertical-align:-2px;margin-right:5px;color:#b6c0bd;}

/* zc-fl2-btn on <button>: a global submit-button rule paints buttons dark,
   which turned every ghost action into a dark wall — pin the ghost look */
html body .zc-content button.zc-fl2-btn:not(.primary){background:#fff!important;color:#0a474c!important;
    border:1px solid #cfdedb!important;box-shadow:none!important;transform:none!important;border-radius:7px!important;}
html body .zc-content button.zc-fl2-btn:not(.primary):hover{background:#f2f8f7!important;border-color:#b6cec9!important;}
html body .zc-content button.zc-fl2-btn.primary{background:#0a474c!important;color:#fff!important;
    border:1px solid #0a474c!important;box-shadow:none!important;transform:none!important;border-radius:7px!important;}
html body .zc-content button.zc-fl2-btn.primary:hover{background:#083a3e!important;}


/* one-line table empty state (partials/empty_message) — replaces the GIF hero */
.zc-emptyline{display:flex;align-items:center;justify-content:center;gap:8px;
    padding:20px 16px;font-size:13px;color:#8a938f;text-align:center;}
.zc-emptyline i{font-size:16px;color:#b6c0bd;}

/* scroll-story chip/bar are landing-page furniture; cached JS may still inject them */
body:has(.zc-sidebar) #zps-chip, body:has(.zc-sidebar) #zps-progress { display:none !important; }


/* ══════════════════════════════════════════════════════════════════
   Mobile app shell — final word (2026-08-19)
   The older ≤991px rules were written above the rail-skin blocks, so
   margin-left:70px and pane display rules kept beating them on source
   order. This block sits at the end of the file on purpose: under
   992px the app behaves like an app — rail off-canvas behind the
   hamburger, content full width, History one pane at a time.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* content owns the full width, rail state notwithstanding */
    html body .zc-main,
    html body .crm-right,
    html body.zc-fly-open .zc-main,
    html body.zc-fly-open .crm-right { margin-left: 0 !important; }

    /* rail: fixed off-canvas drawer */
    html body #zcSidebar.zcv3 {
        position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
        transform: translateX(-102%) !important;
        transition: transform .22s cubic-bezier(.32,.72,0,1) !important;
        z-index: 1095 !important;
    }
    html body #zcSidebar.zcv3.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 6px 0 24px rgba(0,0,0,.22) !important;
    }
    html body .zc-sidebar-overlay { z-index: 1090 !important; }
    html body .zc-mobile-menu { z-index: 1100 !important; }

    /* the hover flyout has no place on touch — the drawer + pinned panel do the job */
    html body .zcv3-fly { z-index: 1096 !important; }

    /* full-bleed titlebars leave room for the floating hamburger */
    html body .zc-fl2-titlebar { padding-left: 60px !important; }
}

/* ── History: one pane at a time on a phone ── */
@media (max-width: 1199px) {
    html body .zc-hist { grid-template-columns: 320px minmax(0,1fr) !important; }
    html body .zc-hist-profile { display: none !important; }
}
@media (max-width: 767px) {
    html body .zc-hist { grid-template-columns: minmax(0,1fr) !important; height: 100vh !important; height: 100dvh !important; }
    /* no chat open → the list IS the page */
    html body .zc-hist:not(.has-active) .zc-hist-list { display: flex !important; }
    html body .zc-hist:not(.has-active) .zc-hist-thread { display: none !important; }
    /* chat open → the thread IS the page, back arrow returns to the list */
    html body .zc-hist.has-active .zc-hist-list { display: none !important; }
    html body .zc-hist.has-active .zc-hist-thread { display: flex !important; }
    html body .zc-hist-back { display: inline-flex !important; }
    /* the floating hamburger overlaps the list header — pad it down; and on an
       open thread the back arrow owns that corner, so the hamburger steps aside */
    html body .zc-hist-list { padding-top: 52px !important; }
    html body .zc-main:has(.zc-hist.has-active) .zc-mobile-menu { display: none !important; }
}

/* ── Mobile nav diet: an app shows its main things, not the whole sitemap.
   Only the core destinations stay on the phone drawer; everything else
   remains on desktop (and inside pages). Aditya, 2026-08-19: "jo main-main
   cheezein hain wahi rakho, jisse application lage". ── */
@media (max-width: 991px) {
    html body #zcSidebar.zcv3 .zcv3-nav .zcv3-item { display: none !important; }
    html body #zcSidebar.zcv3 .zcv3-nav .zcv3-item[data-nav="dashboard"],
    html body #zcSidebar.zcv3 .zcv3-nav .zcv3-item[data-nav="live-chat"],
    html body #zcSidebar.zcv3 .zcv3-nav .zcv3-item[data-nav="history"],
    html body #zcSidebar.zcv3 .zcv3-nav .zcv3-item[data-nav="ai-agent"],
    html body #zcSidebar.zcv3 .zcv3-nav .zcv3-item[data-nav="contacts"],
    html body #zcSidebar.zcv3 .zcv3-nav .zcv3-item[data-nav="campaigns"] { display: flex !important; }
    /* breathing room now that the list is short */
    html body #zcSidebar.zcv3 .zcv3-nav { gap: 6px !important; padding-top: 8px !important; }
    html body #zcSidebar.zcv3 .zcv3-nav .zcv3-item { padding: 10px 0 !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile: bottom tab bar, no sidebar (2026-08-19)
   "EditoHub client panel jaisa" — on the phone there is no drawer and
   no hamburger; five tabs at the bottom are the navigation. The rail
   and its whole machinery stay desktop-only. While a chat thread is
   open the bar steps aside so the composer owns the bottom edge.
   ══════════════════════════════════════════════════════════════════ */
.zc-tabbar { display: none; }

@media (max-width: 991px) {
    /* rail, hamburger, drawer overlay: gone on phones */
    html body #zcSidebar.zcv3,
    html body .zc-mobile-menu,
    html body .zc-sidebar-overlay,
    html body .zcv3-fly { display: none !important; }

    /* content padding goes back to normal now that nothing floats top-left */
    html body .zc-content:not(:has(.chatbox-area)) { padding-top: 20px !important; }
    html body .zc-content:has(.zc-fl2) { padding-top: 0 !important; }
    html body .zc-fl2-titlebar { padding-left: 20px !important; }
    html body .zc-hist-list { padding-top: 0 !important; }

    /* the bar itself */
    html body .zc-tabbar {
        display: flex !important;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
        background: #fff; border-top: 1px solid #ececec;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 12px rgba(15, 23, 42, .05);
    }
    .zc-tabbar__i {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 4px 2px; text-decoration: none !important; color: #7b8785;
    }
    .zc-tabbar__ic { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
    .zc-tabbar__ic i { font-size: 22px; line-height: 1; color: inherit; }
    .zc-tabbar__ic em {
        position: absolute; top: -5px; right: -10px; font-style: normal;
        background: #e53935; color: #fff; font-size: 9.5px; font-weight: 700;
        line-height: 1; padding: 3px 5px; border-radius: 9px; min-width: 16px; text-align: center;
    }
    .zc-tabbar__lb { font-size: 10.5px; font-weight: 500; line-height: 1; color: inherit; }
    .zc-tabbar__i.on { color: #0a474c; }
    .zc-tabbar__i.on .zc-tabbar__lb { font-weight: 600; }

    /* room for the bar under normal pages */
    html body .zc-content { padding-bottom: 78px !important; }

    /* full-height chat screens: shrink to sit above the bar on list views… */
    html body .zc-dashboard .chatbox-area { height: calc(100dvh - 58px) !important; }
    html body .zc-hist { height: calc(100dvh - 58px) !important; }

    /* …and while a thread is open, the bar leaves and the screen is whole */
    html body:has(.zc-hist.has-active) .zc-tabbar,
    html body:has(.chatbox-area .chatbox-area__body:not(.d-none)) .zc-tabbar { display: none !important; }
    html body:has(.zc-hist.has-active) .zc-hist { height: 100dvh !important; }
    html body:has(.chatbox-area .chatbox-area__body:not(.d-none)) .chatbox-area { height: 100dvh !important; }
    html body:has(.chatbox-area) .zc-content,
    html body:has(.zc-hist) .zc-content { padding-bottom: 0 !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile inbox: the list IS the screen (2026-08-20)
   Root cause of the blank Chats tab: stock main.css (~8442) turns
   .chatbox-area__left into a position:fixed translateX(-100%) drawer
   under 768px — the old hamburger UX. Our v3 rules set width but never
   undid the transform, so the whole list sat off-canvas. Here the list
   is simply the page, and an open thread is a fullscreen layer of its
   own (the .zi-back arrow in the thread header returns to the list).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* .zc-main is a flex item with min-width:auto — long nowrap chat names
       become its min-content floor and push the whole shell wider than the
       phone. 0 lets ellipsis do its job. */
    html body .zc-main { min-width: 0 !important; }
    html body .zc-dashboard .chatbox-area__left {
        position: static !important;
        transform: none !important;
        align-items: stretch !important;
        width: 100% !important; min-width: 0 !important; max-width: none !important;
        height: auto !important; min-height: 0 !important;
        flex: 1 1 auto !important;
        padding-top: 0 !important;
        border-right: none !important; border-radius: 0 !important;
        overflow: hidden !important;
        display: flex !important; flex-direction: column !important;
        background: #fff !important;
    }
    html body .zc-dashboard .chatbox-area__left .close-icon { display: none !important; }
    html body .zc-dashboard .chatbox-area {
        height: calc(100dvh - 58px) !important;
        border: none !important; border-radius: 0 !important;
    }
    /* "Select a conversation" placeholder has no meaning on one-pane mobile */
    html body .zc-dashboard .empty-conversation { display: none !important; }

    /* open thread = its own screen, above the shell and the tab bar */
    html body .zc-dashboard .chatbox-area__body:not(.d-none) {
        display: flex !important;
        position: fixed !important; inset: 0 !important;
        z-index: 1085 !important;
        height: 100dvh !important;
        background: #fff !important;
    }
    html body .zc-dashboard .chatbox-area__body .chat-box {
        flex: 1 1 auto !important; min-width: 0 !important;
        width: auto !important; max-width: none !important;
        display: flex !important; flex-direction: column !important;
        height: 100% !important; min-height: 0 !important;
    }
    html body .zc-dashboard .chat-box .msg-body {
        flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important;
    }
    html body .zc-dashboard .chat-box__footer {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* contact-details side pane: desktop furniture */
    html body .zc-dashboard .body-right.contact__details { display: none !important; }
    /* back arrow lives on the whole tab-bar range, not just 767 */
    html body .zc-dashboard .zi-back {
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        width: 36px !important; height: 36px !important; padding: 0 !important;
        background: transparent !important; border: none !important; border-radius: 50% !important;
        color: #54656f !important; font-size: 19px !important; margin-right: 2px !important;
    }
}
@media (max-width: 991px) {
    /* stock hides the contact name/number in the thread header on phones —
       WhatsApp shows them, so do we (white on the teal header) */
    html body .zc-dashboard .chat-box__header .chat-box__content {
        display: flex !important; flex-direction: column !important; gap: 1px !important;
        min-width: 0 !important;
    }
    html body .zc-dashboard .chat-box__header .contact__name {
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        max-width: 44vw !important;
    }
    html body .zc-dashboard .chat-box__header .contact__mobile {
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        max-width: 44vw !important;
    }
    /* back arrow sits on the teal header — make it white like the rest */
    html body .zc-dashboard .chat-box__header .zi-back { color: rgba(255,255,255,.92) !important; }
    /* stock also hides the row's time on phones — WhatsApp shows it */
    html body .zc-dashboard .chat-list__item .right .time {
        display: block !important; font-size: 11px !important; color: #8696a0 !important;
        margin: 0 !important; white-space: nowrap !important;
    }
}

@media (min-width: 992px) {
    html body .zc-dashboard .zi-back { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   App = no theatrics (2026-08-20)
   Aditya: "kisi bhi section mai jaane se pehle animation aa raha hai,
   ushe hatta do." Both load overlays are already display:none on
   body.dashboard via premium-upgrades.css — repeated here so the rule
   rides this file's cache-bust too. The idle loops (floating stat
   icons, sliding sheens, sidebar glow) are the same kind of motion,
   so they go with it.
   ══════════════════════════════════════════════════════════════════ */
body.dashboard #zc-preloader,
body.dashboard .preloader { display: none !important; }
.dashboard.zc-dashboard .zc-content .dashboard-widget__icon { animation: none !important; }
#zcSidebar .zc-user-card::after { content: none !important; animation: none !important; }
#zcSidebar::before, #zcSidebar::after { animation: none !important; }
.zc-dashboard .zc-topbar::after { content: none !important; animation: none !important; }


/* ══════════════════════════════════════════════════════════════════
   Mobile Home diet (2026-08-20)
   Aditya: home se KYC notice, Message Activity, Latest Transaction /
   Latest Contact aur Offers card phone pe nahi chahiye — app jaisa
   Home = status strip + KPI widgets bas. section.zc-chart sirf Home
   pe hota hai, isliye wahi page-scope ka anchor hai. Desktop par sab
   waise ka waisa.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    html body .zc-content:has(section.zc-chart) .alert,
    html body .zc-content:has(section.zc-chart) section.zc-chart,
    html body .zc-content:has(section.zc-chart) .row:has(> .col-lg-6 > .transaction-table-inner),
    html body .zc-content:has(section.zc-chart) .row:has(> .col-lg-6 > .dashboard-table),
    html body .zc-content:has(section.zc-chart) .zc-earn__offers,
    html body .zc-content:has(section.zc-chart) .zc-dstrip { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile KPI: icon tiles, 2x2 (2026-08-20)
   Aditya: "ishe icons format mai kro, jishe kam space consume kre" —
   phone pe chaar lambi cards ki jagah aadhi-height ka 2x2 grid: tinted
   icon + value + label. Desktop cards jaise the waise hi (icon wahan
   render hi nahi hota).
   ══════════════════════════════════════════════════════════════════ */
.zc-kpi__ic { display: none; }

@media (max-width: 991px) {
    html body .zc-content .zc-kpis {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    html body .zc-content .zc-kpi {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 10px !important; row-gap: 1px !important;
        padding: 12px 12px !important;
        margin: 0 !important;
        background: #fff !important;
        border: none !important; border-radius: 10px !important;
        box-shadow: 0 0 11px #e9e9e9 !important;
    }
    html body .zc-content .zc-kpi__ic {
        display: flex !important; align-items: center !important; justify-content: center !important;
        grid-row: 1 / 3 !important;
        width: 38px !important; height: 38px !important; border-radius: 10px !important;
        font-size: 19px !important;
    }
    html body .zc-content .zc-kpi__ic.ic-msg { background: #e6f0ef !important; color: #0a474c !important; }
    html body .zc-content .zc-kpi__ic.ic-del { background: #e9f6ef !important; color: #17a06a !important; }
    html body .zc-content .zc-kpi__ic.ic-con { background: #e8f0fd !important; color: #2563eb !important; }
    html body .zc-content .zc-kpi__ic.ic-cam { background: #fdf3e2 !important; color: #c47f17 !important; }
    /* value upar, label neeche — chip aur subline phone pe nahi */
    html body .zc-content .zc-kpi__v {
        grid-column: 2 !important; grid-row: 1 !important;
        font-size: 19px !important; font-weight: 700 !important; line-height: 1.15 !important;
        margin: 0 !important;
    }
    html body .zc-content .zc-kpi__k {
        grid-column: 2 !important; grid-row: 2 !important;
        font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important;
        color: #7b8785 !important; margin: 0 !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }
    html body .zc-content .zc-kpi__k em { display: none !important; }
    html body .zc-content .zc-kpi__s { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile Home: KPIs first (2026-08-20)
   Aditya: "icons wala sab se upar rakho, baki ke niche." Phone pe
   order = title, icon-KPI grid, status card, refer & earn, side
   cards. KPIs blade mein .zc-dash-main ke andar hain, isliye grid
   aur main-col ko display:contents karke unke bachche seedhe
   .zc-content ke flex items ban jaate hain — phir order kaafi hai.
   Desktop layout (grid 9/3) waise ka waisa.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    html body .zc-content:has(section.zc-chart) {
        display: flex !important;
        flex-direction: column !important;
    }
    html body .zc-content:has(section.zc-chart) .zc-dash-grid,
    html body .zc-content:has(section.zc-chart) .zc-dash-main { display: contents !important; }

    html body .zc-content:has(section.zc-chart) .zc-page-head { order: -3; }
    html body .zc-content:has(section.zc-chart) .zc-kpis { order: -2; margin: 0 0 14px !important; }
    html body .zc-content:has(section.zc-chart) .zc-dstrip { order: -1; }

    /* display:contents ne bootstrap col ki padding/gutter kha li — wapas set */
    html body .zc-content:has(section.zc-chart) .zc-earn { margin-top: 14px !important; }
    html body .zc-content:has(section.zc-chart) .zc-dash-side {
        margin-top: 14px !important;
        padding: 0 !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile app: premium coloring (2026-08-20)
   Aditya: "home page coloring and icons premium type banao, jisse
   application feel aur premium app type lage." Flat system ke andar
   hi: gehri duotone icon tints, tabular numerals, hairline borders,
   soft sage ground, aur tab bar pe M3-style active pill. Koi
   animation/gradient nahi. Desktop untouched (sab ≤991 gated).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* ── app ground: flat soft sage, har page pe ── */
    html body.dashboard,
    html body .zc-dashboard,
    html body .zc-main,
    html body .zc-content { background: #f3f6f5 !important; }

    /* ── page title: app header weight ── */
    html body .zc-content .zc-page-head h1,
    html body .zc-content .zc-page-head h4,
    html body .zc-content .zc-page-head h5,
    html body .zc-content .zc-page-head { font-size: 21px !important; font-weight: 700 !important; color: #0f1f1b !important; letter-spacing: -0.01em !important; }

    /* ── KPI tiles: deeper duotone, hairline card ── */
    html body .zc-content .zc-kpi {
        border: 1px solid #ecf0ee !important;
        box-shadow: 0 1px 3px rgba(15, 31, 27, .05) !important;
        padding: 13px 12px !important;
    }
    html body .zc-content .zc-kpi__ic {
        width: 40px !important; height: 40px !important;
        border-radius: 12px !important; font-size: 20px !important;
    }
    html body .zc-content .zc-kpi__ic.ic-msg { background: #dfeae8 !important; color: #0a474c !important; }
    html body .zc-content .zc-kpi__ic.ic-del { background: #ddf0e6 !important; color: #0d7f52 !important; }
    html body .zc-content .zc-kpi__ic.ic-con { background: #e3ebfa !important; color: #2050b3 !important; }
    html body .zc-content .zc-kpi__ic.ic-cam { background: #f7eeda !important; color: #9c6a0d !important; }
    html body .zc-content .zc-kpi__v {
        font-size: 20px !important; font-weight: 750 !important; color: #0f1f1b !important;
        font-variant-numeric: tabular-nums !important;
    }
    html body .zc-content .zc-kpi__k {
        font-size: 10.5px !important; font-weight: 650 !important;
        letter-spacing: .07em !important; text-transform: uppercase !important;
        color: #93a09b !important;
    }

    /* ── baaki Home cards bhi wahi hairline treatment ── */
    html body .zc-content:has(section.zc-chart) .zc-earn,
    html body .zc-content:has(section.zc-chart) .zc-dash-side > * {
        border: 1px solid #ecf0ee !important;
        box-shadow: 0 1px 3px rgba(15, 31, 27, .05) !important;
        border-radius: 12px !important;
        background: #fff !important;
    }

    /* ── tab bar: premium app nav (M3-style active pill) ── */
    html body .zc-tabbar {
        background: #fff !important;
        border-top: 1px solid #ecf0ee !important;
        box-shadow: 0 -1px 3px rgba(15, 31, 27, .04) !important;
        padding-top: 8px !important;
    }
    html body .zc-tabbar__i { color: #8a9692 !important; gap: 4px !important; }
    html body .zc-tabbar__ic {
        width: 52px !important; height: 30px !important;
        border-radius: 999px !important;
    }
    html body .zc-tabbar__ic i { font-size: 21px !important; }
    html body .zc-tabbar__lb { font-size: 10px !important; font-weight: 600 !important; letter-spacing: .02em !important; }
    html body .zc-tabbar__i.on { color: #0a474c !important; }
    html body .zc-tabbar__i.on .zc-tabbar__ic { background: #dfeae8 !important; }
    html body .zc-tabbar__i.on .zc-tabbar__lb { font-weight: 700 !important; }
    html body .zc-tabbar__ic em { top: -4px !important; right: -2px !important; border: 2px solid #fff !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile Home: teal hero header (2026-08-20)
   "Vesa ka vesa hi hai" — pichhla polish subtle tha. Ab saaf dikhne
   wala app-pattern: brand-teal header jiske neeche wali edge par KPI
   cards overlap karti hain (fintech-app look). Flat #0a474c, koi
   gradient/animation nahi. Sirf Home (:has zc-chart), sirf ≤991.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    html body .zc-content:has(section.zc-chart) { padding-top: 0 !important; }
    html body .zc-content:has(section.zc-chart) .zc-page-head {
        margin: 0 -16px 0 !important;
        padding: 24px 18px 62px !important;
        background: #0a474c !important;
        border-radius: 0 0 22px 22px !important;
        align-items: flex-start !important;
    }
    html body .zc-content:has(section.zc-chart) .zc-page-head .zc-page-h1 {
        color: #fff !important;
        font-size: 21px !important; font-weight: 700 !important;
        letter-spacing: -0.01em !important; margin: 0 !important;
    }
    /* teal par baithi hui cards — overlap + zara gehri shadow taki pop kare */
    html body .zc-content:has(section.zc-chart) .zc-kpis {
        margin: -44px 0 14px !important;
        position: relative !important; z-index: 2 !important;
    }
    html body .zc-content:has(section.zc-chart) .zc-kpi {
        box-shadow: 0 6px 18px rgba(10, 31, 27, .10) !important;
        border: none !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile Home: app hero v2 (2026-08-20)
   "Itna kuch khaas nahi hai" — bare title wala hero kaafi nahi tha.
   Ab asli app-hero: business avatar + naam + number, LIVE/Quality/
   Plan pills, aur 4 quick-action buttons (Campaign / Contacts /
   Templates / Flows) — sab teal par, KPI cards uske edge par overlap.
   "Dashboard" title phone pe redundant → hidden. Flat, no animation.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    html body .zc-content:has(section.zc-chart) .zc-page-head { display: none !important; }

    html body .zc-mhero {
        order: -4;
        margin: 0 -16px 0 !important;
        padding: 22px 18px 60px !important;
        background: #0a474c !important;
        border-radius: 0 0 24px 24px !important;
    }
    html body .zc-mhero__top { display: flex; align-items: center; gap: 12px; }
    html body .zc-mhero__ava {
        width: 46px; height: 46px; flex: 0 0 46px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
        border-radius: 14px; color: #fff; font-size: 19px; font-weight: 700;
    }
    html body .zc-mhero__id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    html body .zc-mhero__id strong {
        color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
        line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html body .zc-mhero__id span { color: rgba(255,255,255,.68); font-size: 12.5px; font-variant-numeric: tabular-nums; }

    html body .zc-mhero__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
    html body .zc-mhero__pill {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.10);
        color: rgba(255,255,255,.92); font-size: 11px; font-weight: 600;
        padding: 4px 10px; border-radius: 999px; letter-spacing: .02em;
    }
    html body .zc-mhero__pill i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
    html body .zc-mhero__pill.is-on i { background: #2ee87a; }
    html body .zc-mhero__pill.is-off i { background: #ffb020; }

    html body .zc-mhero__acts {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px;
    }
    html body .zc-mhero__acts a {
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        text-decoration: none !important;
    }
    html body .zc-mhero__acts a span {
        width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.16);
        border-radius: 16px; color: #fff; font-size: 21px;
    }
    html body .zc-mhero__acts a em {
        font-style: normal; color: rgba(255,255,255,.85); font-size: 10.5px; font-weight: 600;
    }
}
@media (min-width: 992px) {
    html body .zc-mhero { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile Home: hero v3 rich (2026-08-20)
   "Abhi bhi itna khaas nahi" — flat single-teal kaafi nahi tha. Ab
   depth: layered deep-teal gradient + doodle texture watermark,
   greeting line, gold-ringed avatar, gold plan chip (wahi PREMIUM
   badge gradient), glass action tiles. Static sab — koi animation.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    html body .zc-mhero {
        position: relative !important;
        overflow: hidden !important;
        background: linear-gradient(158deg, #072f33 0%, #0a474c 52%, #0e5a52 100%) !important;
        padding: 24px 18px 64px !important;
        border-radius: 0 0 26px 26px !important;
    }
    html body .zc-mhero::before {
        content: ""; position: absolute; inset: 0;
        background: url(../images/chat-doodle.svg) 0 0 / 420px repeat;
        opacity: .05; pointer-events: none;
    }
    html body .zc-mhero::after {
        content: ""; position: absolute; width: 340px; height: 340px;
        right: -130px; top: -150px; border-radius: 50%;
        background: radial-gradient(circle, rgba(46,232,122,.14) 0%, rgba(46,232,122,0) 70%);
        pointer-events: none;
    }
    html body .zc-mhero > * { position: relative; z-index: 1; }

    html body .zc-mhero__top { align-items: flex-start !important; justify-content: space-between !important; }
    html body .zc-mhero__hi {
        color: rgba(255,255,255,.62) !important; font-size: 12.5px !important;
        font-weight: 500 !important; letter-spacing: .02em !important;
    }
    html body .zc-mhero__id strong {
        font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.02em !important;
        margin-top: 1px !important;
    }
    html body .zc-mhero__num { color: rgba(255,255,255,.55) !important; font-size: 12.5px !important; }
    html body .zc-mhero__ava {
        width: 48px !important; height: 48px !important; flex: 0 0 48px !important;
        border-radius: 16px !important; font-size: 20px !important;
        border: 2px solid transparent !important;
        background: linear-gradient(#0d474c, #0d474c) padding-box,
                    linear-gradient(135deg, #fbe08a, #e9b949, #c8891f) border-box !important;
    }

    html body .zc-mhero__pill.is-on i { box-shadow: 0 0 8px rgba(46,232,122,.55) !important; }
    html body .zc-mhero__pill--gold {
        background: linear-gradient(135deg, #fbe08a, #e9b949, #c8891f) !important;
        border: none !important; color: #4a3305 !important; font-weight: 700 !important;
    }
    html body .zc-mhero__pill--gold i {
        width: auto !important; height: auto !important; border-radius: 0 !important;
        background: none !important; font-size: 12px !important; color: #4a3305 !important;
    }

    html body .zc-mhero__acts { gap: 10px !important; margin-top: 20px !important; }
    html body .zc-mhero__acts a span {
        width: 54px !important; height: 54px !important; border-radius: 17px !important;
        background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.08)) !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
        font-size: 22px !important;
    }
    html body .zc-mhero__acts a em { font-size: 10.5px !important; color: rgba(255,255,255,.82) !important; }

    /* KPI: thoda aur dum */
    html body .zc-content .zc-kpi__v { font-size: 21px !important; font-weight: 800 !important; }
    html body .zc-content .zc-kpi__ic.ic-msg { background: linear-gradient(135deg, #e3efed, #d2e6e1) !important; }
    html body .zc-content .zc-kpi__ic.ic-del { background: linear-gradient(135deg, #ddf2e7, #c9ebd9) !important; }
    html body .zc-content .zc-kpi__ic.ic-con { background: linear-gradient(135deg, #e5edfb, #d4e2f8) !important; }
    html body .zc-content .zc-kpi__ic.ic-cam { background: linear-gradient(135deg, #f8f0dc, #f2e4c4) !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile: flyout panel can never appear (2026-08-20)
   Glitch report: Flows ka pinned panel phone pe poori screen dhak
   raha tha, band karne ka koi rasta nahi. Wajah: panel-mode ka
   `html body .zcv3-fly.open { display:block !important }` (0,1,3)
   tab-bar block ke `html body .zcv3-fly` hide (0,1,2) se zyada
   specific hai — !important rules mein specificity source-order ko
   beat karti hai. ID laga ke (1,1,2) hamesha ke liye seal.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    html body #zcFly.zcv3-fly,
    html body #zcFly.zcv3-fly.open,
    html body .zcv3-fly.open {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    html body.zc-fly-open .zc-main,
    html body.zc-fly-open .crm-right { margin-left: 0 !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Billing & Usage — wallet, rate card, low-balance warning (2026-08-21)
   Every template message now debits users.balance at the conversation_rates
   rate, so the page finally shows money instead of zeros.
   ══════════════════════════════════════════════════════════════════ */
.zc-bill-wallet {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr auto;
    align-items: center;
    gap: 24px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 0 11px #e9e9e9;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.zc-bill-wallet.is-low { border-color: #f0d9a8; box-shadow: 0 0 11px #f3e9d3; }

.zc-bill-wallet__cell { min-width: 0; }

.zc-bill-wallet__v {
    display: block;
    margin-top: 4px;
    font-size: 22px; font-weight: 750; letter-spacing: -0.01em;
    color: #0f1f1b;
    font-variant-numeric: tabular-nums;
}

.zc-bill-wallet__cell em {
    display: block; margin-top: 2px;
    font-size: 12px; font-style: normal; color: #8a9692;
}

.zc-bill-rates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.zc-bill-rates span {
    display: inline-flex; align-items: baseline; gap: 6px;
    background: #f4f9f8; border: 1px solid #dfeae8; border-radius: 8px;
    padding: 5px 9px;
    font-size: 12px; font-weight: 700; color: #0a474c;
    font-variant-numeric: tabular-nums;
}
.zc-bill-rates span b { font-weight: 600; color: #6e7d78; }

.zc-bill-wallet__cta {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 18px;
    background: #0a474c; color: #fff;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 700; white-space: nowrap; text-decoration: none;
    transition: background .18s ease-out, transform .12s ease-out;
}
.zc-bill-wallet__cta:hover { background: #0d5a60; color: #fff; }
.zc-bill-wallet__cta:active { transform: scale(.98); }
.zc-bill-wallet__cta:focus-visible { outline: 2px solid #0a474c; outline-offset: 2px; }

.zc-bill-lowbal {
    display: flex; align-items: flex-start; gap: 8px;
    background: #fdf6e8; border: 1px solid #f0e0bd; border-radius: 10px;
    padding: 10px 12px; margin-bottom: 16px;
    font-size: 12.5px; line-height: 1.5; color: #7a5510;
}
.zc-bill-lowbal i { font-size: 16px; line-height: 1.2; }

@media (max-width: 991px) {
    .zc-bill-wallet { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
    .zc-bill-wallet__cell--rates { grid-column: 1 / -1; }
    .zc-bill-wallet__cta { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 575px) {
    .zc-bill-wallet { grid-template-columns: 1fr; }
    .zc-bill-wallet__v { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .zc-bill-wallet__cta { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════
   Project switcher (2026-08-21) — one WhatsApp number = one project.
   Trigger lives in the 78px rail; the panel is moved to <body> by JS
   because the rail is overflow:hidden and transformed on mobile, which
   would otherwise clip a fixed child.
   ══════════════════════════════════════════════════════════════════ */
html body #zcSidebar.zcv3 .zc-proj { flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, .13); }

html body #zcSidebar.zcv3 .zc-proj__btn {
    width: 100%; height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: transparent; border: 0; padding: 0;
    color: rgba(255, 255, 255, .78);
    cursor: pointer;
    transition: background .18s ease-out;
}
html body #zcSidebar.zcv3 .zc-proj__btn:hover { background: rgba(255, 255, 255, .07); }
html body #zcSidebar.zcv3 .zc-proj__btn:active { transform: scale(.98); }
html body #zcSidebar.zcv3 .zc-proj__btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
html body #zcSidebar.zcv3 .zc-proj__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }

html body #zcSidebar.zcv3 .zc-proj__ini {
    width: 26px; height: 26px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 13px; font-weight: 800; line-height: 1;
}
html body #zcSidebar.zcv3 .zc-proj__lb { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; }

.zc-proj__panel {
    /* above the pinned rail flyout, which sits at 2600 */
    position: fixed; left: 84px; top: 12px; width: 268px; z-index: 2700;
    background: #fff;
    border: 1px solid #ececec; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 31, 27, .06), 0 12px 30px rgba(15, 31, 27, .14);
    padding: 8px;
}
.zc-proj__panel[hidden] { display: none; }

.zc-proj__h {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 6px 8px 8px;
}
.zc-proj__h span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6e7d78; }
.zc-proj__h em { font-size: 11px; font-style: normal; color: #9aa8a3; }

.zc-proj__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }

.zc-proj__list a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 10px;
    text-decoration: none; color: #0f1f1b;
    transition: background .16s ease-out;
}
.zc-proj__list a:hover { background: #f4f9f8; }
.zc-proj__list a.on { background: #eef6f4; }

.zc-proj__pi {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #0a474c; color: #fff; font-size: 14px; font-weight: 800;
}
.zc-proj__pt { min-width: 0; flex: 1; }
.zc-proj__pt strong { display: block; font-size: 13px; font-weight: 700; color: #0f1f1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-proj__pt em { display: block; font-size: 11.5px; font-style: normal; color: #8a9692; font-variant-numeric: tabular-nums; }
.zc-proj__list a.on i { color: #0a474c; font-size: 17px; }

.zc-proj__add {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px; padding: 10px 8px;
    border-top: 1px solid #f0f0f0;
    font-size: 12.5px; font-weight: 700; color: #0a474c; text-decoration: none;
}
.zc-proj__add:hover { color: #0d5a60; }
.zc-proj__add i { font-size: 16px; }

@media (max-width: 575px) {
    .zc-proj__panel { left: 84px; right: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html body #zcSidebar.zcv3 .zc-proj__btn,
    .zc-proj__list a { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════
   Razorpay → WhatsApp receipts (2026-08-21). Reuses the zc-am-* card
   and hero primitives; only the pieces this page adds live here.
   ══════════════════════════════════════════════════════════════════ */
.zc-pay-state {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .14); color: #fff;
    border-radius: 10px; padding: 6px 12px;
    font-size: 12px; font-weight: 700;
}
.zc-pay-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.zc-pay-state.on::before { background: #35d07f; }

.zc-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.zc-pay-help { font-size: 12.5px; line-height: 1.65; color: #6e7d78; margin: 0 0 14px; }
.zc-pay-help code {
    background: #eef4f3; color: #0a474c; border-radius: 5px;
    padding: 1px 5px; font-size: 12px; font-weight: 600;
}
.zc-pay-help b { color: #0f1f1b; }

.zc-pay-copy { display: flex; gap: 8px; }
.zc-pay-copy input {
    flex: 1; min-width: 0; height: 42px;
    background: #f7faf9; border: 1px solid #e3ecea; border-radius: 10px;
    padding: 0 12px; font-size: 12.5px; color: #24403a;
}
.zc-pay-copy__btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 42px; padding: 0 14px;
    background: #0a474c; color: #fff; border: 0; border-radius: 10px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .18s ease-out, transform .12s ease-out;
}
.zc-pay-copy__btn:hover { background: #0d5a60; }
.zc-pay-copy__btn:active { transform: scale(.98); }

.zc-pay-regen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.zc-pay-regen span { font-size: 11.5px; color: #9aa8a3; }
.zc-pay-link {
    background: none; border: 0; padding: 0;
    font-size: 12.5px; font-weight: 700; color: #0a474c; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}

.zc-pay-field { margin-bottom: 14px; }
.zc-pay-field label { display: block; font-size: 12.5px; font-weight: 700; color: #0f1f1b; margin-bottom: 6px; }
.zc-pay-field input,
.zc-pay-field select {
    width: 100%; height: 42px;
    background: #fff; border: 1px solid #e3ecea; border-radius: 10px;
    padding: 0 12px; font-size: 13.5px; color: #0f1f1b;
    transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
.zc-pay-field input:focus,
.zc-pay-field select:focus { outline: none; border-color: #0a474c; box-shadow: 0 0 0 3px rgba(10, 71, 76, .10); }
.zc-pay-field small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: #8a9692; }
.zc-pay-field small b { color: #0a474c; }

.zc-pay-switch { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; cursor: pointer; }
.zc-pay-switch input { width: 18px; height: 18px; accent-color: #0a474c; }
.zc-pay-switch span { font-size: 13px; font-weight: 600; color: #0f1f1b; }

.zc-pay-save {
    width: 100%; min-height: 44px;
    background: #0a474c; color: #fff; border: 0; border-radius: 10px;
    font-size: 13.5px; font-weight: 700; cursor: pointer;
    transition: background .18s ease-out, transform .12s ease-out;
}
.zc-pay-save:hover { background: #0d5a60; }
.zc-pay-save:active { transform: scale(.98); }

.zc-pay-table { overflow-x: auto; }
.zc-pay-table table { width: 100%; border-collapse: collapse; min-width: 620px; }
.zc-pay-table th {
    text-align: left; padding: 10px 12px;
    background: #f7faf9; color: #6e7d78;
    font-size: 12px; font-weight: 600;
    border-bottom: 1px solid #eef2f1;
}
.zc-pay-table td {
    padding: 12px; font-size: 13px; color: #0f1f1b;
    border-bottom: 1px solid #f2f6f5; vertical-align: middle;
}
.zc-pay-table code { font-size: 12px; color: #24403a; }
.zc-pay-table td em { display: block; margin-top: 3px; font-size: 11.5px; font-style: normal; color: #8a9692; }
.zc-pay-empty { text-align: center; color: #8a9692; font-size: 12.5px; padding: 26px 12px; }

.zc-pay-tag {
    display: inline-block; border-radius: 8px; padding: 3px 9px;
    font-size: 11px; font-weight: 700; text-transform: capitalize;
}
.zc-pay-tag--sent { background: rgba(37, 211, 102, .15); color: #0a7c43; }
.zc-pay-tag--skipped { background: #f3f0e2; color: #8a6d1f; }
.zc-pay-tag--failed { background: #fdf1ef; color: #9e2f22; }

@media (max-width: 991px) {
    .zc-pay-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .zc-pay-copy { flex-wrap: wrap; }
    .zc-pay-copy input { flex: 1 1 100%; font-size: 16px; }
    .zc-pay-copy__btn { flex: 1 1 100%; justify-content: center; }
    .zc-pay-field input, .zc-pay-field select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .zc-pay-copy__btn, .zc-pay-save, .zc-pay-field input, .zc-pay-field select { transition: none; }
    .zc-pay-copy__btn:active, .zc-pay-save:active { transform: none; }
}

/* hero copy sits on the deep teal block — the shared primitive does not colour
   the heading, so scope it to this page rather than repainting every hero */
.zc-pay .zc-am-hero__k { color: rgba(255, 255, 255, .62) !important; }
.zc-pay .zc-am-hero__l h5 { color: #fff !important; }
.zc-pay .zc-am-hero__l p { color: rgba(255, 255, 255, .82) !important; }


/* ══════════════════════════════════════════════════════════════════════
   Dashboard — professional pass (2026-08-21)

   The August flatten sweep missed this page: Latest Transaction and Latest
   Contact were still glass cards (gradient + backdrop-filter + 18px radius +
   a bouncy hover lift + 800-weight headings), the transaction panel stretched
   to its neighbour's height and left a hand-sized hole under "No data found",
   and the referral strip shouted louder than the operational numbers above it.
   Flat card, calm heading, no motion, content-height panels.
   ══════════════════════════════════════════════════════════════════════ */

html body .zc-dashboard { background: #f5f6f7 !important; }

html body .dashboard.zc-dashboard .zc-content .transaction-table-inner,
html body .dashboard.zc-dashboard .zc-content .row.gy-4 > .col-lg-6:has(> h6) {
    background: #fff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    padding: 18px 20px !important;
    height: auto !important;
    transition: none !important;
}

html body .dashboard.zc-dashboard .zc-content .transaction-table-inner:hover,
html body .dashboard.zc-dashboard .zc-content .row.gy-4 > .col-lg-6:has(> h6):hover {
    transform: none !important;
    border-color: transparent !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
}

html body .dashboard.zc-dashboard .zc-content .transaction-table-inner h6,
html body .dashboard.zc-dashboard .zc-content .row.gy-4 > .col-lg-6:has(> h6) > h6 {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #0f1f1b !important;
    margin-bottom: 10px !important;
}

/* a panel ends where its content ends — no stretched void under an empty table */
html body .dashboard.zc-dashboard .zc-content .transaction-table-inner .dashboard-table.flex-fill {
    flex: 0 0 auto !important;
}

html body .dashboard.zc-dashboard .zc-content .dashboard-table .table > :not(caption) > * > * {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ── Referral strip: information, not a billboard ── */
html body .zc-content .zc-earn__ref h6 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f1f1b !important;
    margin-bottom: 4px !important;
}

html body .zc-content .zc-earn__ref > p {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: #6e7d78 !important;
}

html body .zc-content .zc-earn__stats > div {
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
}

html body .zc-content .zc-earn__stats span {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    color: #8a9692 !important;
}

html body .zc-content .zc-earn__stats strong,
html body .zc-content .zc-earn__stats b {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f1f1b !important;
}

html body .zc-content .zc-earn__share a {
    background: #fff !important;
    border: 1px solid #ececec !important;
    color: #24403a !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* ── Offers: one quiet line, not a centred hero ── */
html body .zc-content .zc-earn__offers { height: auto !important; align-self: start !important; }

html body .zc-content .zc-earn__none {
    display: flex !important;
    /* an earlier rule stacks this column-centred like a hero — flatten it to one row */
    flex-direction: row !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
    padding: 14px 0 !important;
    min-height: 0 !important;
}

html body .zc-content .zc-earn__none i {
    font-size: 16px !important;
    color: #9aa8a3 !important;
    margin: 0 !important;
}

html body .zc-content .zc-earn__none strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #24403a !important;
    margin: 0 !important;
}

html body .zc-content .zc-earn__none span {
    font-size: 12.5px !important;
    color: #8a9692 !important;
    margin: 0 !important;
}

@media (max-width: 575px) {
    html body .zc-content .zc-earn__none { flex-wrap: wrap !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Photo pass — the leftovers the August sweep missed (2026-08-21)
   Two habits kept coming back on page after page: shouting table heads,
   and empty states built like heroes (36px icon, 44px of air, centred).
   ══════════════════════════════════════════════════════════════════════ */

html body .zc-content .zc-ct2-table thead th,
html body .zc-content .zc-dev-table thead th {
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: #4a5350 !important;
}

html body .zc-content .zc-dev-empty,
html body .zc-content .zc-ct2-empty {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 16px 20px !important;
    gap: 8px !important;
    min-height: 0 !important;
}

html body .zc-content .zc-dev-empty i,
html body .zc-content .zc-ct2-empty i {
    font-size: 16px !important;
    color: #9aa8a3 !important;
}

html body .zc-content .zc-dev-empty strong,
html body .zc-content .zc-ct2-empty strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #24403a !important;
}

html body .zc-content .zc-dev-empty span,
html body .zc-content .zc-ct2-empty span {
    font-size: 12.5px !important;
    color: #8a9692 !important;
}

/* the empty-state cell keeps its own 48px of padding, which put ~96px of air
   under a single line of text — the block already carries its own spacing */
html body .zc-content .zc-dev-table td:has(.zc-dev-empty),
html body .zc-content .zc-ct2-table td:has(.zc-ct2-empty) {
    padding: 0 !important;
}

/* The app-wide table head was still shouting: .zc-content thead th (~line 2081)
   kept uppercase + heavy weight, which the August settle only removed from
   table.table. Fixing it here covers every page at once instead of one selector
   per screen — Contacts, Flows, Developer Hub and the referral table included. */
html body .zc-content thead th,
html body .zc-content .zc-rf-table th {
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: #4a5350 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Toolbar hierarchy (2026-08-21)
   Contacts had six identical ghost buttons and Campaigns put a solid dark
   Download Report next to the header's primary — so nothing read as the
   main action. One primary per screen, everything else steps back.
   ══════════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-ct2-btn.primary {
    background: #0a474c !important;
    border: 1px solid #0a474c !important;
    color: #fff !important;
    font-weight: 600 !important;
    transition: background .18s ease-out, transform .12s ease-out !important;
}
html body .zc-content .zc-ct2-btn.primary:hover { background: #083a3e !important; border-color: #083a3e !important; color: #fff !important; }
html body .zc-content .zc-ct2-btn.primary:active { transform: scale(.98) !important; }

/* navigation to other screens, not actions on this list — text weight only */
html body .zc-content .zc-ct2-btn.quiet {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #6e7d78 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
html body .zc-content .zc-ct2-btn.quiet:hover { color: #0a474c !important; background: #f2f7f6 !important; }

/* the report download is a secondary act next to Launch */
html body .zc-content .cmp-report {
    background: #fff !important;
    border: 1px solid #ececec !important;
    color: #24403a !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
html body .zc-content .cmp-report:hover { border-color: #d8e3e0 !important; color: #0a474c !important; }

/* provider tabs for the payments integration (2026-08-21) */
.zc-pay-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.zc-pay-tab {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #ececec; border-radius: 10px;
    padding: 8px 14px; font-size: 13px; font-weight: 600; color: #6e7d78;
    transition: border-color .18s ease-out, color .18s ease-out;
}
.zc-pay-tab:hover { color: #0a474c; border-color: #d8e3e0; }
.zc-pay-tab.on { background: #0a474c; border-color: #0a474c; color: #fff; }
.zc-pay-tab em {
    font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    background: rgba(37, 211, 102, .18); color: #0a7c43; border-radius: 6px; padding: 2px 6px;
}
.zc-pay-tab.on em { background: rgba(255, 255, 255, .2); color: #fff; }

/* a secondary action does not need the full width of the card */
.zc-pay-save--sm { max-width: 200px; }

/* Templates → Sync from Meta: a quiet secondary next to New Template */
.zc-tpl-sync { display: inline-block; margin-right: 8px; }
.zc-tpl-sync__btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 38px; padding: 0 14px;
    background: #fff; border: 1px solid #ececec; border-radius: 10px;
    font-size: 13px; font-weight: 600; color: #24403a; cursor: pointer;
    transition: border-color .18s ease-out, color .18s ease-out;
}
.zc-tpl-sync__btn:hover { border-color: #d8e3e0; color: #0a474c; }
.zc-tpl-sync__btn i { font-size: 16px; }

/* pin the sync ghost — a bare <button> gets caught by the global dark-button
   rule, which made Sync from Meta compete with Create Template */
html body .zc-content .zc-tpl-sync .zc-tpl-sync__btn,
html body .zc-content form.zc-tpl-sync button.zc-tpl-sync__btn {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #ececec !important;
    color: #24403a !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
html body .zc-content .zc-tpl-sync .zc-tpl-sync__btn:hover {
    border-color: #d8e3e0 !important;
    color: #0a474c !important;
    background: #fff !important;
}


/* ── Developer Hub · Sandbox ─────────────────────────────────────── */
.zc-sbx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.zc-sbx-step { display: flex; gap: 12px; }
.zc-sbx-step > span {
    flex: 0 0 26px; height: 26px; border-radius: 50%; background: #0a474c; color: #fff;
    font-size: 12.5px; font-weight: 600; display: grid; place-items: center;
}
.zc-sbx-step b { display: block; font-size: 14px; color: #1c1c1c; margin-bottom: 3px; }
.zc-sbx-step p { font-size: 13px; color: #6d7a76; margin: 0; line-height: 1.6; }

.zc-sbx-join {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px;
    padding: 16px 18px; border: 1px dashed #cfdedb; border-radius: 10px; background: #f7fbfa;
}
.zc-sbx-join__code { display: flex; align-items: center; gap: 12px; flex: 1 1 320px; font-size: 13.5px; color: #24403a; }
.zc-sbx-join__code b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #0a474c; }
.zc-sbx-wa {
    display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff !important;
    border-radius: 8px; padding: 10px 16px; font-size: 13.5px; font-weight: 600;
    text-decoration: none; transition: all .18s ease-out;
}
.zc-sbx-wa:hover { background: #1fb457; }
.zc-sbx-wa:active { transform: scale(.98); }
.zc-sbx-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: #f1f3f2; color: #6d7a76; }
.zc-sbx-tag.is-real { background: #e7f6ef; color: #0a7a4a; }
@media (prefers-reduced-motion: reduce) { .zc-sbx-wa { transition: none; } }

.zc-dev-mode {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px;
    border: 1px solid #e3e8e7; border-radius: 8px; background: #fbfdfc; cursor: pointer;
    font-size: 13.5px; color: #24403a; user-select: none; transition: border-color .18s ease-out;
}
.zc-dev-mode:hover { border-color: #0a474c; }
.zc-dev-mode input { accent-color: #0a474c; margin: 0; }
.zc-dev-mode small { font-size: 12px; color: #8a9692; }
@media (max-width: 575px) { .zc-dev-mode small { display: none; } }


/* ══════════════════════════════════════════════════════════════════
   Payments + India Stack settle (2026-08-20)
   Structure pass, screenshots se: (1) teen KPI cards poori 1740px par
   phaili thi — ab wahi ek-card strip jo User Attributes par approved
   hui (inline-grid, max-content, divider lines); (2) "No payment
   requests yet" ek bada hero tha jisme dobara dark button — ab ek
   line; (3) dono pages ka content 1720px tak khinch raha tha, right
   half khaali — settings-type pages 1280px band me; (4) "How it
   works" tab gradient + hover-expand tha — ab shaant flat chip.
   ══════════════════════════════════════════════════════════════════ */

/* 1 · KPI strip: ek card, teen stats — page ke saath phailta nahi */
html body .zc-pay-kpis {
    display: inline-grid !important;
    width: max-content !important; max-width: 100% !important;
    grid-template-columns: repeat(3, max-content) !important;
    gap: 0 !important;
    background: #fff !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    padding: 4px 8px !important; margin-bottom: 16px !important;
}
html body .zc-pay-kpi {
    box-shadow: none !important; border-radius: 0 !important;
    background: transparent !important;
    padding: 12px 22px !important; gap: 11px !important;
    border-right: 1px solid #eef1f1 !important;
}
html body .zc-pay-kpi:last-child { border-right: 0 !important; }
html body .zc-pay-kpi b { font-size: 22px !important; }
@media (max-width: 700px) {
    html body .zc-pay-kpis { display: grid !important; width: auto !important; grid-template-columns: 1fr !important; }
    html body .zc-pay-kpi { border-right: 0 !important; border-bottom: 1px solid #eef1f1 !important; }
    html body .zc-pay-kpi:last-child { border-bottom: 0 !important; }
}

/* 2 · settings-type pages ek padhne-laayak band me rehte hain */
/* .zc-pay ka cap hata — "Full-screen bands" block dekho */
/* India Stack ki band niche "settings density" block me hai */

/* 3 · empty state ki purani hero padding ab kahin bache to bhi shaant rahe */
html body .zc-pay-panel .zc-emptyline { padding: 26px 12px !important; }

/* 4 · guide tab: shaant chip, koi gradient/hover-expand nahi */
html body .zcg-tab {
    background: #fff !important;
    color: #0a474c !important;
    border: 1px solid #e4eae9 !important;
    border-right: 0 !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    font-weight: 600 !important; font-size: 11.5px !important; letter-spacing: .02em !important;
    padding: 13px 8px !important;
    border-radius: 9px 0 0 9px !important;
    transition: none !important;
}
html body .zcg-tab:hover { padding: 13px 8px !important; box-shadow: 0 0 11px #e0e5e4 !important; background: #f7faf9 !important; }
html body .zcg-tab i { color: #6d7a76 !important; font-size: 13px !important; }


/* ══════════════════════════════════════════════════════════════════
   Billing settle + kill the global glossy layer (2026-08-20)
   Billing ke chaaro page (Subscription / Deposits / Transactions /
   Withdrawals) glassy the: har page pe green wash, header card pe
   gradient + animated sheen, table head pe gradient patti, aur nested
   card-in-card. Wash ki jad app-wide thi ("GLOBAL GLOSSY LAYER",
   ~4641 & ~4784: .zc-main/.zc-content pe fixed radial gradients), to
   wo yahin se flat kiya — poora app ek hi shaant ground pe aata hai.
   Inline <style> blocks blades se hata diye; sab yahan hai.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. page ground: ek flat surface, har page pe ── */
html body .zc-main,
html body .zc-content {
    background: #f5f6f7 !important;
    background-attachment: scroll !important;
}

/* ── 2. gloss/lift jo har page pe chipka tha ── */
html body .zc-content .card:hover,
html body .zc-content .btn:hover,
html body .zc-content .btn--base:hover,
html body .zc-content .btn--primary:hover,
html body .zc-content .dashboard-widget:hover,
html body .zc-dashboard .dashboard-widget:hover,
html body .dashboard.zc-dashboard .zc-content .dashboard-widget:hover { transform: none !important; }
html body .dashboard.zc-dashboard .zc-content .dashboard-widget::after,
html body .dashboard.zc-dashboard .zc-content .dashboard-widget:hover::after { content: none !important; }
/* head typography ka settle upar hai (~13780); yahan sirf gradient patti hat rahi hai */
html body .zc-content thead th { background: #fff !important; }

/* ── 3. Deposits / Transactions / Withdrawals — same list recipe ── */
html body .zc-content .zc-dh .container-top,
html body .zc-content .zc-tx .container-top,
html body .zc-content .zc-wl .container-top {
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
}
html body .zc-content .zc-dh .container-top::after,
html body .zc-content .zc-tx .container-top::after,
html body .zc-content .zc-wl .container-top::after { content: none !important; animation: none !important; }
html body .zc-content .zc-dh .container-top__title,
html body .zc-content .zc-tx .container-top__title,
html body .zc-content .zc-wl .container-top__title {
    color: #1c1c1c !important; font-size: 15.5px !important; font-weight: 600 !important;
}
html body .zc-content .zc-dh .container-top__desc,
html body .zc-content .zc-tx .container-top__desc,
html body .zc-content .zc-wl .container-top__desc {
    color: #8a938f !important; font-size: 12.5px !important; margin: 2px 0 0 !important;
}

html body .zc-dh-btn, html body .zc-tx-btn, html body .zc-wl-btn {
    background: #0a474c !important; color: #fff !important;
    border-radius: 8px !important; padding: 9px 16px !important;
    font-size: 13px !important; font-weight: 500 !important;
    box-shadow: none !important; transition: background .15s ease !important;
}
html body .zc-dh-btn:hover, html body .zc-tx-btn:hover, html body .zc-wl-btn:hover {
    background: #083a3e !important; transform: none !important; filter: none !important;
}
html body .zc-dh-btn::after, html body .zc-tx-btn::after, html body .zc-wl-btn::after { content: none !important; }

html body .zc-content .zc-dh .dashboard-container__body,
html body .zc-content .zc-tx .dashboard-container__body,
html body .zc-content .zc-wl .dashboard-container__body {
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    padding: 16px 18px 6px !important;
}

html body .zc-dh-search input, html body .zc-tx-search input, html body .zc-wl-search input {
    height: 38px !important; padding: 0 14px 0 36px !important;
    border: 1px solid #e4e8e7 !important; border-radius: 8px !important;
    background: #fff !important; font-size: 13px !important;
}
html body .zc-dh-search input:focus, html body .zc-tx-search input:focus, html body .zc-wl-search input:focus {
    border-color: #0a474c !important; box-shadow: none !important;
}
html body .zc-dh-search .ic, html body .zc-tx-search .ic, html body .zc-wl-search .ic { color: #98a2a0 !important; left: 13px !important; }

html body .zc-content .zc-dh .zc-dh-table thead th,
html body .zc-content .zc-tx .zc-tx-table thead th,
html body .zc-content .zc-wl .zc-wl-table thead th {
    background: #fff !important;
    font-size: 13px !important; font-weight: 500 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    color: #4a5350 !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid #eef1f1 !important;
    border-radius: 0 !important;
}
html body .zc-content .zc-dh .zc-dh-table tbody td,
html body .zc-content .zc-tx .zc-tx-table tbody td,
html body .zc-content .zc-wl .zc-wl-table tbody td {
    background: #fff !important; color: #3a4441 !important;
    border-bottom: 1px solid #f2f4f4 !important; padding: 12px 14px !important;
}
html body .zc-content .zc-dh .zc-dh-table tbody tr:hover td,
html body .zc-content .zc-tx .zc-tx-table tbody tr:hover td,
html body .zc-content .zc-wl .zc-wl-table tbody tr:hover td { background: #fafbfb !important; }

/* ── 4. Subscription — do saaf cards, nested card nahi ── */
html body .zc-content .zc-sub .dashboard-container__body {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important;
}
html body .zc-content .zc-sub .container-top { padding-bottom: 0 !important; }
/* tab strip: sirf underline, dark pill nahi */
html body .zc-content .zc-sub .custom--tab .nav-link {
    background: transparent !important; color: #6b7573 !important;
    border: none !important; border-bottom: 2px solid transparent !important;
    border-radius: 0 !important; padding: 10px 2px !important; margin-right: 22px !important;
    font-size: 13.5px !important; font-weight: 500 !important; box-shadow: none !important;
}
html body .zc-content .zc-sub .custom--tab .nav-link.active {
    background: transparent !important; color: #0a474c !important;
    border-bottom-color: #0a474c !important; font-weight: 600 !important;
}
html body .zc-content .zc-sub .plan-wrapper { gap: 16px !important; align-items: start !important; }

html body .zc-content .zc-sub .active-card {
    background: #fff !important; border: none !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; padding: 20px !important;
}
html body .zc-content .zc-sub .active-card::before { content: none !important; }
html body .zc-content .zc-sub .active-card .active-card__badge {
    background: #e6f0ef !important; color: #0a474c !important;
    border-radius: 6px !important; padding: 4px 10px !important;
    font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .06em !important;
    box-shadow: none !important;
}
html body .zc-content .zc-sub .active-card .active-card__title {
    font-size: 19px !important; font-weight: 700 !important; color: #1c1c1c !important; margin: 0 !important;
}
html body .zc-content .zc-sub .active-card .active-card__desc { font-size: 12.5px !important; color: #8a938f !important; }
html body .zc-content .zc-sub .active-card__top { margin-top: 16px !important; }
html body .zc-content .zc-sub .active-card .text-list__item {
    padding: 10px 0 !important; font-size: 13px !important; border-bottom: 1px solid #f2f4f4 !important;
}
html body .zc-content .zc-sub .active-card .active-plan-title { color: #7b8785 !important; }
html body .zc-content .zc-sub .active-card .text--base { color: #1c1c1c !important; font-weight: 600 !important; }
html body .zc-content .zc-sub .active-card .purchaseBtn,
html body .zc-content .zc-sub .active-card .btn--base {
    background: #0a474c !important; border-radius: 8px !important;
    padding: 9px 18px !important; font-size: 13px !important; font-weight: 500 !important;
    box-shadow: none !important;
}
html body .zc-content .zc-sub .active-card .purchaseBtn:hover { background: #083a3e !important; }
html body .zc-content .zc-sub .active-card__note {
    color: #8a938f !important; font-size: 12px !important;
    margin: 10px 0 0 !important; text-decoration: none !important;
}
html body .zc-content .zc-sub .active-card label { color: #7b8785 !important; font-size: 12px !important; }

html body .zc-content .zc-sub .plan-wrapper__right {
    background: #fff !important; border: none !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; padding: 20px !important;
}
html body .zc-content .zc-sub .plan-wrapper__right .title {
    font-size: 14.5px !important; font-weight: 600 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-sub .plan-wrapper__desc { color: #8a938f !important; font-size: 12.5px !important; }
html body .zc-content .zc-sub .plan-wrapper__top { margin-bottom: 6px !important; }
html body .zc-content .zc-sub .plan-details {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
/* pill rows → hairline rows */
html body .zc-content .zc-sub .plan-details__item {
    background: transparent !important; border: none !important;
    border-bottom: 1px solid #f2f4f4 !important; border-radius: 0 !important;
    padding: 11px 0 !important; margin: 0 !important;
    font-size: 13px !important; font-weight: 600 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-sub .plan-details__item:last-child { border-bottom: none !important; }
html body .zc-content .zc-sub .plan-details__item .item-title {
    font-size: 13px !important; font-weight: 400 !important; color: #6b7573 !important;
}

/* ── 5. Pricing Plans tab: glass hata ke wahi flat card system ── */
html body #pills-plans { padding: 6px 0 !important; border-radius: 0 !important; }
html body #pills-plans::before { content: none !important; }
html body #pills-plans .custom-plan {
    background: #fff !important; border: 1px solid #ececec !important;
    border-radius: 10px !important; padding: 22px 20px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transform: none !important; transition: border-color .15s ease !important;
}
html body #pills-plans .custom-plan:hover {
    transform: none !important; box-shadow: 0 0 11px #e9e9e9 !important; border-color: #d8dedc !important;
}
html body #pills-plans .custom-plan.featured {
    background: #fff !important; border: 1.5px solid #0a474c !important; transform: none !important;
}
html body #pills-plans .custom-plan.featured:hover { transform: none !important; }
html body #pills-plans .custom-plan-badge {
    background: #0a474c !important; box-shadow: none !important;
    font-size: 10px !important; font-weight: 600 !important; letter-spacing: .05em !important;
    border-radius: 6px !important; padding: 4px 9px !important;
}
html body #pills-plans .pricing-card-top {
    background: #fff !important; border: 1px solid #ececec !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
html body #pills-plans .custom-plan-name { font-size: 15px !important; font-weight: 600 !important; }
html body #pills-plans .custom-plan-price,
html body #pills-plans .custom-plan-price .monthly_price,
html body #pills-plans .custom-plan-price .yearly_price {
    font-size: 1.6rem !important; font-weight: 700 !important; color: #1c1c1c !important;
    -webkit-text-fill-color: #1c1c1c !important; background: none !important;
}
html body #pills-plans .custom-plan-cta {
    border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important;
    padding: 10px 18px !important; box-shadow: none !important;
}
html body #pills-plans .custom-plan-cta:hover { transform: none !important; box-shadow: none !important; }
html body #pills-plans .custom-plan-cta::after,
html body #pills-plans .custom-plan-cta:hover::after { content: none !important; }
html body #pills-plans .custom-plan-cta-solid { background: #0a474c !important; }
html body #pills-plans .custom-plan-cta-solid:hover { background: #083a3e !important; }
html body #pills-plans .custom-plan-cta-outline {
    background: #fff !important; border: 1px solid #ececec !important;
    color: #0a474c !important; backdrop-filter: none !important;
}
html body #pills-plans .custom-plan-cta-outline:hover { background: #0a474c !important; color: #fff !important; }
html body .zc-pricing-eyebrow {
    background: #e6f0ef !important; color: #0a474c !important;
    font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .06em !important;
    border-radius: 6px !important; padding: 4px 10px !important;
}
html body .zc-pricing-title { font-size: 20px !important; font-weight: 700 !important; color: #1c1c1c !important; }
html body .zc-pricing-sub { font-size: 13px !important; color: #8a938f !important; }
html body .zc-save-badge {
    background: #e6f0ef !important; color: #0a474c !important;
    box-shadow: none !important; font-weight: 600 !important; border-radius: 6px !important;
}


/* ══════════════════════════════════════════════════════════════════
   India Stack — settings density (2026-08-20)
   "Dynamic lag raha hai, professional nahi." Jo cheezein chamak rahi
   thi: (1) logo tiles gradient + inset gloss the, aur Shiprocket ka
   violet system ke bahar tha; (2) chaar field ek 1280px chaude canvas
   par — form chhota, maidan bada; (3) har card me teen boxed buttons
   (do dark Save page par); (4) {name}/{order} token pills tinted the.
   Ab Stripe/Zoho settings jaisa: 940px band, neutral tile + brand-rang
   ka monogram, secondary actions text-links, tokens plain mono.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-ist .zc-fl2-body {
    max-width: 940px !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding: 18px 28px 40px !important;
    gap: 14px !important;
}

/* 1 · logo: neutral tile, brand sirf monogram me — koi gradient/gloss */
html body .zc-ist-logo {
    background: #f5f7f7 !important;
    border: 1px solid #e8ecec !important;
    box-shadow: none !important;
    width: 36px !important; height: 36px !important;
    border-radius: 9px !important;
    font-size: 12.5px !important; font-weight: 700 !important;
}
html body .zc-ist-logo.im { color: #0f8a80 !important; }
html body .zc-ist-logo.sr { color: #5b4bcc !important; }

/* 2 · header row thoda compact */
html body .zc-ist-head { padding: 14px 18px !important; gap: 12px !important; }
html body .zc-ist-head__t h6 { font-size: 14.5px !important; }
html body .zc-ist-head__t > span { font-size: 12.5px !important; max-width: 620px !important; }

/* 3 · form: sanchit rows, chhota textarea */
html body .zc-ist-form { padding: 16px 18px 4px !important; }
html body .zc-ist-grid { gap: 14px 22px !important; max-width: none !important; }
html body .zc-ist-f { margin-bottom: 10px !important; }
html body .zc-ist-f > label { font-size: 12px !important; color: #6d7a76 !important; margin-bottom: 4px !important; }
html body .zc-ist-f textarea.form--control { min-height: 62px !important; }

/* 4 · tokens: plain mono, pill nahi */
html body .zc-ist-hint code,
html body .zc-ist-f code {
    background: none !important; padding: 0 3px 0 0 !important;
    color: #8a938f !important; font-size: 11.5px !important;
}

/* 5 · footer: ek primary, baaki quiet text-links */
/* strip ek hi line me rahe — 940px par meta + teen actions wrap ho ke
   buttons ko left phenk rahe the; meta shrink karega, actions right */
/* .zc-ist ka cap hata — "Full-screen bands" block dekho */
html body .zc-ist-foot { padding: 11px 18px !important; flex-wrap: nowrap !important; }
html body .zc-ist-meta {
    font-size: 12px !important; min-width: 0 !important; flex: 1 1 auto !important;
    max-width: none !important;
}
html body .zc-ist-foot__r { flex: none !important; flex-wrap: nowrap !important; }
html body .zc-ist-foot__r .zc-fl2-btn:not(.primary),
html body .zc-ist-foot__r button:not(.primary):not([class*="primary"]) {
    background: none !important; border: none !important; box-shadow: none !important;
    color: #4a5350 !important; font-size: 12.5px !important; font-weight: 500 !important;
    padding: 6px 10px !important;
}
html body .zc-ist-foot__r .zc-fl2-btn:not(.primary):hover,
html body .zc-ist-foot__r button:not(.primary):not([class*="primary"]):hover {
    color: #0a474c !important; background: #f2f6f5 !important;
}
html body .zc-ist-foot__r .zc-fl2-btn.primary,
html body .zc-ist-foot__r button.primary {
    font-size: 12.5px !important; padding: 8px 16px !important;
}


/* ══════════════════════════════════════════════════════════════════
   Subscription card nits (2026-08-20)
   Teen cheezein zoom pe pakdi: (1) main.css:11263 ka green dot
   `.active-card__badge::after` — wo `padding-left:25px` maan ke
   left:10px pe baitha tha, hamare quiet chip padding ke saath seedha
   "M" ke upar aa gaya; chip khud hi kaafi hai to dot gaya. (2) Auto
   Renewal switch theme ka 45x25 grey pill tha — Optin wale switch se
   match karaya. (3) rows hatne ke baad title aur Next Billing Date ke
   beech ~45px ka gaddha reh gaya tha.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-sub .active-card .active-card__badge::after,
html body .zc-content .zc-sub .active-card .active-card__badge::before { content: none !important; }

html body .zc-content .zc-sub .active-card .form-group {
    display: flex !important; flex-direction: column !important;
    align-items: flex-end !important; gap: 5px !important; margin: 0 !important;
}
html body .zc-content .zc-sub .active-card .form-group label {
    font-size: 11.5px !important; font-weight: 500 !important; color: #8a938f !important; margin: 0 !important;
}
html body .zc-content .zc-sub .active-card .form--switch { margin: 0 !important; }
html body .zc-content .zc-sub .active-card .form--switch .form-check-input {
    width: 40px !important; height: 22px !important; padding: 0 !important; margin: 0 !important;
    background-color: #d7dcdb !important; border: none !important; box-shadow: none !important;
    transition: background-color .15s ease !important;
}
html body .zc-content .zc-sub .active-card .form--switch .form-check-input::before {
    width: 16px !important; height: 16px !important; left: 3px !important;
    box-shadow: 0 1px 2px rgba(15,31,27,.25) !important;
}
html body .zc-content .zc-sub .active-card .form--switch .form-check-input:checked {
    background-color: #17a06a !important;
}
html body .zc-content .zc-sub .active-card .form--switch .form-check-input:checked::before {
    left: calc(100% - 19px) !important; box-shadow: 0 1px 2px rgba(15,31,27,.25) !important;
}

html body .zc-content .zc-sub .active-card__top { margin-top: 14px !important; }
html body .zc-content .zc-sub .active-card .active-card__content { margin-top: 4px !important; }
html body .zc-content .zc-sub .active-card .text-list { margin: 0 !important; padding: 0 !important; }
html body .zc-content .zc-sub .active-card__bottom { margin-top: 14px !important; }

/* naapa gaya: .active-card__top pe padding-bottom 24 + margin-bottom 24 = 48px
   ka gaddha tha (lambi list ke zamane ka spacing) — ab 14px. */
html body .zc-content .zc-sub .active-card__top {
    padding-bottom: 14px !important;
    margin-bottom: 0 !important;
}

/* Inline block ke saath search ka layout bhi chala gaya tha (wrapper relative +
   icon absolute) — sirf skin wahan se aati thi, geometry bhi. Wapas: */
html body .zc-dh-search, html body .zc-tx-search, html body .zc-wl-search {
    position: relative !important; min-width: 230px !important; flex: 1 1 230px !important;
    max-width: 320px !important;
}
html body .zc-dh-search .ic, html body .zc-tx-search .ic, html body .zc-wl-search .ic {
    position: absolute !important; left: 13px !important; top: 50% !important;
    transform: translateY(-50%) !important; pointer-events: none !important;
    font-size: 14px !important; line-height: 1 !important;
}
html body .zc-dh-toolbar, html body .zc-tx-toolbar, html body .zc-wl-toolbar {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 14px !important; flex-wrap: wrap !important; margin-bottom: 14px !important;
}
html body .zc-dh-filter .select2-container, html body .zc-wl-filter .select2-container { min-width: 170px !important; }
html body .zc-tx-filter { gap: 10px !important; }
html body .zc-tx-filter .select2-container { min-width: 150px !important; }

/* card ek hi surface ho: .body-top ka #f8fafc band white card ke andar
   patti bana raha tha (naapa: rgb(248,250,252) vs card rgb(255,255,255)) */
html body .zc-content .zc-dh .body-top,
html body .zc-content .zc-tx .body-top,
html body .zc-content .zc-wl .body-top {
    background: #fff !important; border: none !important;
    border-bottom: 1px solid #f2f4f4 !important;
    border-radius: 0 !important; padding: 4px 0 14px !important;
}
html body .zc-content .zc-dh .dashboard-table,
html body .zc-content .zc-tx .dashboard-table,
html body .zc-content .zc-wl .dashboard-table { background: transparent !important; }


/* ══════════════════════════════════════════════════════════════════
   Search toolbar: one box, icon inside (2026-08-23)
   Aditya ne Interactive List aur CTA URL ka search box highlight kiya.
   Root cause: in blades ka magnifier `<span class="ic">` hai, jabki
   absolute-positioning sirf `.search-form__icon` ke liye likhi thi —
   to icon input ke BAAHAR flow me baith jaata tha, aur input ka
   `padding-left:36px` (jo icon ke liye reserved tha) khaali dikhta
   tha. Ek class ka bug, chhe pages par: contact_list/list,
   withdraw/log, deposit_history, interactive_list, cta-url,
   transactions. Saath me do aur cheezein jo isi patti me chubhti
   thi: toolbar ka grey band, aur khaali pagination strip.
   ══════════════════════════════════════════════════════════════════ */

/* 1 · icon ab field ke andar, dono class-naamon ke liye */
html body .zc-content .search-form { position: relative !important; }
html body .zc-content .search-form .ic,
html body .zc-content .search-form__icon {
    position: absolute !important;
    left: 12px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    display: inline-flex !important; align-items: center !important;
    color: #94a3b8 !important; font-size: 14px !important;
    pointer-events: none !important; background: none !important;
}
html body .zc-content .search-form .ic i { font-size: 14px !important; line-height: 1 !important; }

/* field toolbar ke select2 se ek hi band par — dono 38px */
html body .zc-content .body-top .search-form .form--control,
html body .zc-content .body-top .search-form input {
    height: 38px !important;
    /* global .form--control ka min-height:40px height ko haraa deta hai */
    min-height: 38px !important;
    padding: 0 14px 0 36px !important;
    border-radius: 8px !important;
    border: 1px solid #e4e9e8 !important;
    min-width: 260px !important;
}
html body .zc-content .body-top .search-form input:focus {
    border-color: #0a474c !important;
    box-shadow: none !important;
}

/* 2 · toolbar patti card ka hissa lage, alag grey band nahi */
html body .zc-content .body-top {
    background: #fff !important;
    border-bottom: 1px solid #f1f4f4 !important;
    padding: 12px 18px !important;
}

/* 3 · khaali pagination strip card ke neeche 29px ka grey chhod rahi thi */
html body .zc-content .pagination-wrapper:empty { display: none !important; }


/* ══════════════════════════════════════════════════════════════════
   Premium Suite ground (2026-08-23)
   Suite ki cards jaan-boojh ke cream/gold hain (#fffdf6→#fdf6e6). Jab
   app ka ground #f5f6f7 (lagbhag white) hua, cream par cream baith
   gaya aur poora grid dhula-dhula lagne laga. Is ek page ko halka
   warm-neutral ground diya taki gold cards utar ke saamne aayein.
   Icons ka asli problem controller me tha — 35 modules ke gradients
   ek hi pale tint (#e6f0ef) kar diye gaye the, aur .zc-prem-ico ka
   glyph white hai → pale par pale = invisible. Wo wapas rangeen hai.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content:has(.zc-prem-wrap),
html body .zc-main:has(.zc-prem-wrap) { background: #f2f0ea !important; }

/* glyph ko crisp rakho — pale tint wale daur me drop-shadow bhi kaam nahi kar rahi thi */
html body .zc-prem-ico i { color: #fff !important; }

/* Open module CTA: #1a1407→#3a2e12 ka doosra stop olive ki taraf khisak
   jaata tha, isliye cream card pe button gandla lagta tha. Ab warm
   near-black + gold hairline — wahi gold theme, saaf. */
html body .zc-prem-cta.open,
html body .zc-prem-cta.lockbtn {
    background: linear-gradient(135deg,#191410,#241d14) !important;
    border: 1px solid rgba(200,162,74,.35) !important;
    color: #f4dfae !important;
    letter-spacing: .01em !important;
    box-shadow: 0 6px 16px rgba(25,20,16,.28), inset 0 1px 0 rgba(233,201,122,.14) !important;
}
html body .zc-prem-cta.open:hover,
html body .zc-prem-cta.lockbtn:hover {
    background: linear-gradient(135deg,#221b15,#312718) !important;
    border-color: rgba(200,162,74,.6) !important;
    box-shadow: 0 12px 26px rgba(25,20,16,.34), inset 0 1px 0 rgba(233,201,122,.2) !important;
}


/* ══════════════════════════════════════════════════════════════════
   De-glass sweep — poore app ka ek pass (2026-08-23)
   Aditya: "ek bhi section unprofessional na rahe." Scan me ek hi
   glassy template 30 blades me copy hua mila — `backdrop-filter:
   blur(18px) saturate(150%)`, `zcXxSheen` infinite skew sweep,
   `translateY(-2px)` hover lift, aur `rgba(255,255,255,.6-.85)`
   translucent surfaces + teal-tinted borders.
   custom-redesign.css blade ke <style> ke BAAD load hoti hai
   (app.blade.php: @stack('style') line 65, ye file line 67), isliye
   selectors ko `html body` se prefix karke ek jagah se neutral kiya —
   30 blades chhede bina. Premium Suite hub (gold showcase) aur
   marketing/auth pages jaan-boojh ke chhode gaye hain.
   ══════════════════════════════════════════════════════════════════ */

/* ── glass surfaces (28 rules) ── */
html body .bk-ghost {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .blocked-message {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .custom-attribute-wrapper {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .gbtn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .gbtn2 {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .tc-add-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .tc-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .tc-card input[type=file].form--control,
html body .form--control[type=file] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .tc-info-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .tc-rule {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-agc-btn--ghost {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-content .alert.template-requirements,
html body body .alert.template-requirements {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-content .buttons-wrapper {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-content .card-block.carousel--card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-content .dashboard-container .container-top {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-content .template-info-container__left {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-content .template-info-container__right .preview-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-content .zc-agc .container-top {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-content .zc-fl .container-top {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-content .zc-sl .container-top {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-fl-btn--ghost {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-g {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-gbtn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-ls-body {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-ls-head {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-ls-tab {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zc-sl-btn--ghost {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .zcg-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── infinite sheen layers (14 rules) ── */
html body .resender.loading {
    animation: none !important;
    content: none !important;
}
html body .sheen::after {
    animation: none !important;
    content: none !important;
}
html body .tc-info-banner::after {
    animation: none !important;
    content: none !important;
}
html body .tc-step-num {
    animation: none !important;
    content: none !important;
}
html body .tpl-ai__go.is-busy i {
    animation: none !important;
    content: none !important;
}
html body .tpl-ai__skel span {
    animation: none !important;
    content: none !important;
}
html body .zc-content .dashboard-container .container-top::after {
    animation: none !important;
    content: none !important;
}
html body .zc-content .template-info-container__right .preview-item__header::after {
    animation: none !important;
    content: none !important;
}
html body .zc-content .zc-agc .container-top::after {
    animation: none !important;
    content: none !important;
}
html body .zc-content .zc-fl .container-top::after {
    animation: none !important;
    content: none !important;
}
html body .zc-content .zc-sl .container-top::after {
    animation: none !important;
    content: none !important;
}
html body .zc-ls-head::after {
    animation: none !important;
    content: none !important;
}
html body .zc-pm-head::after {
    animation: none !important;
    content: none !important;
}
html body .zcm-hl {
    animation: none !important;
    content: none !important;
}

/* ── hover lifts (54 rules) ── */
html body .add-card-button:hover {
    transform: none !important;
}
html body .bk-btn:hover {
    transform: none !important;
}
html body .bk-card:hover {
    transform: none !important;
}
html body .bk-ghost:hover {
    transform: none !important;
}
html body .bk-stat:hover {
    transform: none !important;
}
html body .bkb-back:hover {
    transform: none !important;
}
html body .bkb-day:hover span {
    transform: none !important;
}
html body .bkb-save:hover {
    transform: none !important;
}
html body .bkl-back:hover {
    transform: none !important;
}
html body .btn-google-connect:hover {
    transform: none !important;
}
html body .container-top__right .btn--base:hover {
    transform: none !important;
}
html body .em-save:hover {
    transform: none !important;
}
html body .fb-chip:hover {
    transform: none !important;
}
html body .fb-save:hover {
    transform: none !important;
}
html body .gbtn.del:hover {
    transform: none !important;
}
html body .gbtn.edit:hover,
html body .gbtn.book:hover,
html body .gbtn.open:hover,
html body .gbtn.copy:hover {
    transform: none !important;
}
html body .gbtn2.no:hover {
    transform: none !important;
}
html body .gbtn2.ok:hover {
    transform: none !important;
}
html body .jb-btn:hover {
    transform: none !important;
}
html body .oc-btn:hover {
    transform: none !important;
}
html body .pm-btn:hover {
    transform: none !important;
}
html body .sv-btn:hover {
    transform: none !important;
}
html body .tc-add-btn:hover {
    transform: none !important;
}
html body .tc-card input[type=file].form--control::file-selector-button:hover,
html body .form--control[type=file]::file-selector-button:hover {
    transform: none !important;
}
html body .tc-card input[type=file].form--control:hover,
html body .form--control[type=file]:hover {
    transform: none !important;
}
html body .tc-card:hover {
    transform: none !important;
}
html body .ti-btn:hover {
    transform: none !important;
}
html body .wl-btn:hover {
    transform: none !important;
}
html body .zc-action-btn:hover {
    transform: none !important;
}
html body .zc-agc-btn:hover {
    transform: none !important;
}
html body .zc-btn-primary:hover {
    transform: none !important;
}
html body .zc-call-btn:hover {
    transform: none !important;
}
html body .zc-card:hover {
    transform: none !important;
}
html body .zc-content .cz-add-card:hover {
    transform: none !important;
}
html body .zc-content .form--control[type=file]:hover {
    transform: none !important;
}
html body .zc-content .template-info-container__right .preview-item__content .card-item:hover {
    transform: none !important;
}
html body .zc-content .zc-agc .zc-form-card:hover {
    transform: none !important;
}
html body .zc-dashboard .dashboard-widget:hover {
    transform: none !important;
}
html body .zc-fl .copyScript:hover {
    transform: none !important;
}
html body .zc-fl-btn:hover {
    transform: none !important;
}
html body .zc-fl-card:hover {
    transform: none !important;
}
html body .zc-gbtn.del:hover {
    transform: none !important;
}
html body .zc-gbtn.edit:hover {
    transform: none !important;
}
html body .zc-gbtn.prev:hover {
    transform: none !important;
}
html body .zc-gbtn.send:hover {
    transform: none !important;
}
html body .zc-ls-btn:hover {
    transform: none !important;
}
html body .zc-ls-tab:hover {
    transform: none !important;
}
html body .zc-pm-back:hover {
    transform: none !important;
}
html body .zc-pm-feat:hover {
    transform: none !important;
}
html body .zc-pm-save:hover {
    transform: none !important;
}
html body .zc-pri:hover {
    transform: none !important;
}
html body .zc-sl-btn:hover {
    transform: none !important;
}
html body .zc-sl-card:hover {
    transform: none !important;
}
html body .zcg-next:hover {
    transform: none !important;
}

/* ── translucent surfaces (64 rules) ── */
html body .bk-ghost {
    background: #fff !important;
}
html body .bkb-back {
    background: #fff !important;
}
html body .bkl-back {
    background: #fff !important;
}
html body .bkl-empty {
    background: #fff !important;
}
html body .custom-attribute-wrapper {
    background: #fff !important;
}
html body .gbtn {
    background: #fff !important;
}
html body .gbtn2 {
    background: #fff !important;
}
html body .markdown-btn-group button {
    background: #fff !important;
}
html body .note-bubble {
    background: #fff !important;
}
html body .tc-card {
    background: #fff !important;
}
html body .tc-card .form--control,
html body .tc-card textarea.form--control,
html body .tc-card input.form--control {
    background: #fff !important;
}
html body .tc-card input[type=file].form--control,
html body .form--control[type=file] {
    background: #fff !important;
}
html body .tc-card input[type=file].form--control:hover,
html body .form--control[type=file]:hover {
    background: #fff !important;
}
html body .tc-card-head {
    background: #fff !important;
}
html body .tc-info-banner {
    background: #fff !important;
}
html body .tc-rule {
    background: #fff !important;
}
html body .wl-pv-logo {
    background: #fff !important;
}
html body .zc-agc .form--control.form-two,
html body .zc-agc .form-control.form--control,
html body .zc-agc .input-group .form-control {
    background: #fff !important;
}
html body .zc-agc .select2-container--default .select2-selection,
html body .zc-agc .select2-selection {
    background: #fff !important;
}
html body .zc-agc-btn--ghost {
    background: #fff !important;
}
html body .zc-content .alert.template-requirements,
html body body .alert.template-requirements {
    background: #fff !important;
}
html body .zc-content .buttons-wrapper {
    background: #fff !important;
}
html body .zc-content .card-block.carousel--card > .d-flex:first-child {
    background: #fff !important;
}
html body .zc-content .cz-sec {
    background: #fff !important;
}
html body .zc-content .cz-sec__head {
    background: #fff !important;
}
html body .zc-content .dashboard-container .container-top {
    background: #fff !important;
}
html body .zc-content .form--control[type=file] {
    background: #fff !important;
}
html body .zc-content .form--control[type=file]:hover {
    background: #fff !important;
}
html body .zc-content .template-info-container__left .form--control:not([type=file]) {
    background: #fff !important;
}
html body .zc-content .template-info-container__right .preview-item {
    background: #fff !important;
}
html body .zc-content .zc-agc .container-top {
    background: #fff !important;
}
html body .zc-content .zc-agc .zc-form-card {
    background: #fff !important;
}
html body .zc-content .zc-agc .zc-form-card__head {
    background: #fff !important;
}
html body .zc-content .zc-fl .container-top {
    background: #fff !important;
}
html body .zc-content .zc-sl .container-top {
    background: #fff !important;
}
html body .zc-fl .floaterResult,
html body .zc-fl .floaterPreview {
    background: #fff !important;
}
html body .zc-fl .form--control.form-two,
html body .zc-fl textarea.form--control {
    background: #fff !important;
}
html body .zc-fl .input-group > .input-group-text:first-child {
    background: #fff !important;
}
html body .zc-fl .input-group.color-input .input-group-text:last-child {
    background: #fff !important;
}
html body .zc-fl-btn--ghost {
    background: #fff !important;
}
html body .zc-fl-card {
    background: #fff !important;
}
html body .zc-fl-card__head {
    background: #fff !important;
}
html body .zc-g {
    background: #fff !important;
}
html body .zc-gbtn {
    background: #fff !important;
}
html body .zc-ghost {
    background: #fff !important;
}
html body .zc-lists .zc-ls-table tbody td {
    background: #fff !important;
}
html body .zc-lists .zc-ls-table thead th {
    background: #fff !important;
}
html body .zc-ls-body {
    background: #fff !important;
}
html body .zc-ls-head {
    background: #fff !important;
}
html body .zc-ls-search input {
    background: #fff !important;
}
html body .zc-ls-tab {
    background: #fff !important;
}
html body .zc-pm-back {
    background: #fff !important;
}
html body .zc-pm-card {
    background: #fff !important;
}
html body .zc-pm-input {
    background: #fff !important;
}
html body .zc-pm-note {
    background: #fff !important;
}
html body .zc-pm-stat {
    background: #fff !important;
}
html body .zc-sl .form--control.form-two,
html body .zc-sl textarea.form--control {
    background: #fff !important;
}
html body .zc-sl .input-group:not(.short-link) > .input-group-text:first-child {
    background: #fff !important;
}
html body .zc-sl-btn--ghost {
    background: #fff !important;
}
html body .zc-sl-card {
    background: #fff !important;
}
html body .zc-sl-card__head {
    background: #fff !important;
}
html body .zcg-top .ic {
    background: #fff !important;
}
html body .zcg-x {
    background: #fff !important;
}
html body .zcg-x:hover {
    background: #fff !important;
}

/* ── teal-tinted borders (73 rules) ── */
html body .custom-attribute-wrapper {
    border-color: #ececec !important;
}
html body .custom-attribute-wrapper:hover {
    border-color: #ececec !important;
}
html body .markdown-btn-group button {
    border-color: #ececec !important;
}
html body .note-bubble {
    border-color: #ececec !important;
}
html body .select2-container--open .select2-dropdown {
    border-color: #ececec !important;
}
html body .t-row {
    border-color: #ececec !important;
}
html body .tc-card {
    border-color: #ececec !important;
}
html body .tc-card .form--control,
html body .tc-card textarea.form--control,
html body .tc-card input.form--control {
    border-color: #ececec !important;
}
html body .tc-card .form--control:focus,
html body .tc-card textarea.form--control:focus {
    border-color: #ececec !important;
}
html body .tc-card input[type=file].form--control,
html body .form--control[type=file] {
    border-color: #ececec !important;
}
html body .tc-card input[type=file].form--control:hover,
html body .form--control[type=file]:hover {
    border-color: #ececec !important;
}
html body .tc-card-head {
    border-color: #ececec !important;
}
html body .tc-card:hover {
    border-color: #ececec !important;
}
html body .tc-info-banner {
    border-color: #ececec !important;
}
html body .zc-action-btn.view {
    border-color: #ececec !important;
}
html body .zc-agc .form--control.form-two,
html body .zc-agc .form-control.form--control,
html body .zc-agc .input-group .form-control {
    border-color: #ececec !important;
}
html body .zc-agc .form--control.form-two:focus,
html body .zc-agc .form-control:focus {
    border-color: #ececec !important;
}
html body .zc-agc .input-group .input-group-text.mobile-code {
    border-color: #ececec !important;
}
html body .zc-agc .select2-container--default .select2-selection,
html body .zc-agc .select2-selection {
    border-color: #ececec !important;
}
html body .zc-call-btn--tel {
    border-color: #ececec !important;
}
html body .zc-call-phone {
    border-color: #ececec !important;
}
html body .zc-content .alert.template-requirements,
html body body .alert.template-requirements {
    border-color: #ececec !important;
}
html body .zc-content .buttons-wrapper {
    border-color: #ececec !important;
}
html body .zc-content .card-block.carousel--card {
    border-color: #ececec !important;
}
html body .zc-content .card-block.carousel--card > .d-flex:first-child {
    border-color: #ececec !important;
}
html body .zc-content .card-block.carousel--card:hover {
    border-color: #ececec !important;
}
html body .zc-content .cz-sec {
    border-color: #ececec !important;
}
html body .zc-content .cz-sec:hover {
    border-color: #ececec !important;
}
html body .zc-content .cz-sec__head {
    border-color: #ececec !important;
}
html body .zc-content .dashboard-container .container-top {
    border-color: #ececec !important;
}
html body .zc-content .form--control[type=file] {
    border-color: #ececec !important;
}
html body .zc-content .form--control[type=file]:hover {
    border-color: #ececec !important;
}
html body .zc-content .template-info-container__left .form--control:not([type=file]) {
    border-color: #ececec !important;
}
html body .zc-content .template-info-container__left .form--control:not([type=file]):focus {
    border-color: #ececec !important;
}
html body .zc-content .template-info-container__left input.form--control[type=file].card-image-input,
html body .zc-content .template-info-container__left input.form--control[type=file] {
    border-color: #ececec !important;
}
html body .zc-content .template-info-container__right .preview-item {
    border-color: #ececec !important;
}
html body .zc-content .zc-agc .container-top {
    border-color: #ececec !important;
}
html body .zc-content .zc-agc .zc-form-card {
    border-color: #ececec !important;
}
html body .zc-content .zc-agc .zc-form-card:hover {
    border-color: #ececec !important;
}
html body .zc-content .zc-agc .zc-form-card__head {
    border-color: #ececec !important;
}
html body .zc-content .zc-fl .container-top {
    border-color: #ececec !important;
}
html body .zc-content .zc-sl .container-top {
    border-color: #ececec !important;
}
html body .zc-fl .floaterResult,
html body .zc-fl .floaterPreview {
    border-color: #ececec !important;
}
html body .zc-fl .form--control.form-two,
html body .zc-fl textarea.form--control {
    border-color: #ececec !important;
}
html body .zc-fl .form--control.form-two:focus,
html body .zc-fl textarea.form--control:focus {
    border-color: #ececec !important;
}
html body .zc-fl .input-group > .input-group-text:first-child {
    border-color: #ececec !important;
}
html body .zc-fl .input-group.color-input .input-group-text:last-child {
    border-color: #ececec !important;
}
html body .zc-fl-card {
    border-color: #ececec !important;
}
html body .zc-fl-card:hover {
    border-color: #ececec !important;
}
html body .zc-fl-card__head {
    border-color: #ececec !important;
}
html body .zc-lists .zc-ls-table tbody td {
    border-color: #ececec !important;
}
html body .zc-lists .zc-ls-table thead th {
    border-color: #ececec !important;
}
html body .zc-ls-body {
    border-color: #ececec !important;
}
html body .zc-ls-head {
    border-color: #ececec !important;
}
html body .zc-ls-search input {
    border-color: #ececec !important;
}
html body .zc-ls-search input:focus {
    border-color: #ececec !important;
}
html body .zc-ls-tab {
    border-color: #ececec !important;
}
html body .zc-ls-tab:hover {
    border-color: #ececec !important;
}
html body .zc-pm-back {
    border-color: #ececec !important;
}
html body .zc-pm-card {
    border-color: #ececec !important;
}
html body .zc-pm-feat {
    border-color: #ececec !important;
}
html body .zc-pm-feat:hover {
    border-color: #ececec !important;
}
html body .zc-pm-head {
    border-color: #ececec !important;
}
html body .zc-pm-input {
    border-color: #ececec !important;
}
html body .zc-pm-input:focus {
    border-color: #ececec !important;
}
html body .zc-pm-stat {
    border-color: #ececec !important;
}
html body .zc-pm-toggle {
    border-color: #ececec !important;
}
html body .zc-sl .form--control.form-two,
html body .zc-sl textarea.form--control {
    border-color: #ececec !important;
}
html body .zc-sl .form--control.form-two:focus,
html body .zc-sl textarea.form--control:focus {
    border-color: #ececec !important;
}
html body .zc-sl .input-group .input-group-text {
    border-color: #ececec !important;
}
html body .zc-sl-card {
    border-color: #ececec !important;
}
html body .zc-sl-card:hover {
    border-color: #ececec !important;
}
html body .zc-sl-card__head {
    border-color: #ececec !important;
}


/* ══════════════════════════════════════════════════════════════════
   Number Health settle (2026-08-23)
   Photo se: (1) sab kuch 2161px chauda tha, isliye har factor row ka
   penalty (-40/-20) text se ~1700px door dayein kinare par tha —
   padhne ke liye aankh ko poora page paar karna padta tha; (2) paanch
   rows paanch alag tinted bands thi (hara/neela/amber) + 3px left
   accent — ek report page paanch rang me chilla raha tha; (3) hero ka
   4px green left-bar aur `#f8fafc` fact boxes usi shor me jud rahe
   the. Ab: 1280px band, rows white + hairline separator, rang sirf
   chhote status icon par, hero ke facts ek strip me.
   ══════════════════════════════════════════════════════════════════ */

/* 1 · full width (Aditya: "make it full screen") — par khaali maidan na
   bane, isliye badi screen par factor list do column me chalti hai;
   warna weight column text se 2000px door chala jaata hai */
html body .zc-content .gd { max-width: none !important; }

@media (min-width: 1500px) {
    html body .zc-content .gd-factors {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 0 !important;
    }
    /* dono column ki pehli row ke upar hairline nahi */
    html body .zc-content .gd-factors .gd-factor:nth-child(-n+2) { border-top: 0 !important; }
    /* beech me divider — warna baayin row ka "40 pts" daayin row ke icon se
       chipak jaata hai aur do alag lists ek jaisi lagti hain */
    html body .zc-content .gd-factors .gd-factor:nth-child(odd) {
        border-right: 1px solid #f1f4f4 !important;
        padding-right: 32px !important;
    }
    html body .zc-content .gd-factors .gd-factor:nth-child(even) { padding-left: 32px !important; }
    /* visham ginti par aakhri row akeli hoti hai — uska stub line hataao */
    html body .zc-content .gd-factors .gd-factor:last-child:nth-child(odd) { border-right: 0 !important; }
    /* lambi ek-line descriptions ko padhne-laayak rakho */
    html body .zc-content .gd-hero__b > p,
    html body .zc-content .gd-card > p { max-width: 92ch !important; }
}

/* 2 · hero: accent bar hataao, facts hairline strip */
html body .zc-content .gd-hero {
    border-left: none !important;
    padding: 20px 22px !important;
    gap: 22px !important;
}
html body .zc-content .gd-facts {
    grid-template-columns: repeat(4, max-content) !important;
    gap: 0 !important;
    border: 1px solid #eef1f1 !important;
    border-radius: 8px !important;
    width: max-content !important; max-width: 100% !important;
}
html body .zc-content .gd-fact {
    background: none !important;
    border-radius: 0 !important;
    border-right: 1px solid #eef1f1 !important;
    padding: 9px 18px !important;
}
html body .zc-content .gd-facts .gd-fact:last-child { border-right: 0 !important; }
html body .zc-content .gd-fact span {
    font-size: 10.5px !important; font-weight: 600 !important;
    letter-spacing: .05em !important; color: #93a09b !important;
}

/* hero ka daayan aadha khaali tha — facts strip ab text ke bagal me,
   card do balanced halves me (chhoti screen par wapas neeche) */
html body .zc-content .gd-hero__b {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 26px !important;
}
html body .zc-content .gd-hero__b > .gd-band,
html body .zc-content .gd-hero__b > h6,
html body .zc-content .gd-hero__b > p { grid-column: 1 !important; }
/* grid item hone se chip poori column chaudi ho gaya tha */
html body .zc-content .gd-hero__b > .gd-band { justify-self: start !important; }
html body .zc-content .gd-hero__b > .gd-facts {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
}
@media (max-width: 1150px) {
    html body .zc-content .gd-hero__b { grid-template-columns: minmax(0, 1fr) !important; }
    html body .zc-content .gd-hero__b > .gd-facts { grid-column: 1 !important; grid-row: auto !important; }
}

/* 3 · factor rows: ek list, tint nahi — rang sirf status icon par */
html body .zc-content .gd-factors { gap: 0 !important; }
html body .zc-content .gd-factor {
    background: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    border-top: 1px solid #f1f4f4 !important;
    padding: 13px 2px !important;
    gap: 11px !important;
    align-items: flex-start !important;
}
html body .zc-content .gd-factors .gd-factor:first-child { border-top: 0 !important; }
html body .zc-content .gd-factor__ic {
    width: 20px !important; height: 20px !important;
    font-size: 11px !important;
    margin-top: 1px !important;
}
/* neutral rows ka grey circle bhi shaant */
html body .zc-content .gd-factor .gd-factor__ic { background: #b6c0bd !important; }
html body .zc-content .gd-factor--good .gd-factor__ic { background: #17a06a !important; }
html body .zc-content .gd-factor--warn .gd-factor__ic { background: #c47f17 !important; }
html body .zc-content .gd-factor--bad .gd-factor__ic { background: #c0392b !important; }

/* penalty ab row ke text ke paas, page ke kinare par nahi */
html body .zc-content .gd-factor__w {
    flex: none !important;
    margin-left: auto !important;
    padding-left: 18px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: #4a5350 !important;
    min-width: 62px !important; text-align: right !important;
}
html body .zc-content .gd-factor__w i {
    font-style: normal !important; font-weight: 500 !important;
    font-size: 11px !important; color: #93a09b !important; margin-left: 3px !important;
}

/* ══════════════════════════════════════════════════════════════════
   De-glass sweep — CSS-level bache hue surfaces (2026-08-23)
   115 app pages scan karne ke baad sirf ye reh gaye the. Ye blades me
   nahi, isi file me the (inbox composer ~3521/3565/3606, flow builder
   ~4449/4480), isliye upar wale blade-sweep ne inhe nahi chhua.

   Jaan-boojh ke CHHODE gaye (false positives — inhe mat badalna):
   · dark surface par translucent-white chips — .template_button aur
     .contact__* (teal header par), .zc-pay-state (#02545a par),
     referral hero ke .zc-rf-live/.zc-rf-link/.s-* — ye glass-on-dark
     hai, standard aur premium.
   · modal scrims (#affModal/#refModal/#runModal/.zcg-overlay) ka
     blur(3px) — normal modal backdrop.
   · .progress-bar-animated — asli import ke waqt hi dikhta hai,
     wo genuine progress feedback hai, sajawat nahi.
   ══════════════════════════════════════════════════════════════════ */

/* inbox composer: cream chat par frosted panel ka koi matlab nahi tha */
html body .chat-box__footer,
html body .chat-box__footer .chat-list__wrapper,
html body .chat-box__footer .input-area,
html body .chat-media__list,
html body .chat-url__list {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .chat-box__footer { background: #f0f2f5 !important; }
html body .chat-box__footer .chat-list__wrapper,
html body .chat-box__footer .input-area,
html body .chat-media__list,
html body .chat-url__list,
html body .chat-box__footer .btn-item.image-upload-btn { background: #fff !important; }

/* flow builder ke floating controls */
html body .flow_top_button_wrapper .top_btn,
html body .react-flow__controls {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
}

/* guide modal ka typewriter cursor hamesha blink karta rehta tha */
html body .zcm-field .cur { animation: none !important; opacity: 1 !important; }


/* ══════════════════════════════════════════════════════════════════
   Full-screen bands (2026-08-23)
   Aditya: "baki pages bhi full screen kro." Chaar body-wrappers
   (.zc-tm-body Templates, .zc-ct2-body Contacts, .zc-fl2-body Flows
   + 11 aur, .zc-dev-body Developer) sab `max-width:1720px; margin:0
   auto` the — 2560px par dono taraf ~385px khaali aur content beech
   me tairta hua. Ab poori chaudai, left-aligned.
   Number Health wala sabak yahan bhi: full width ka matlab "khinch
   do" nahi — jin pages par thodi si content thi (settings forms)
   unka andar ka layout multi-column kiya gaya hai, warna wahi khaali
   maidan wapas aa jaata hai.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-tm-body,
html body .zc-content .zc-ct2-body,
html body .zc-content .zc-fl2-body,
html body .zc-content .zc-dev-body {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
html body .zc-content .zc-pay { max-width: none !important; }

/* India Stack: do connector cards ab saath-saath — ek card ke andar
   chaar field poori 2400px par phailne se bach jaate hain */
html body .zc-ist .zc-fl2-body {
    padding-left: 28px !important; padding-right: 28px !important;
}
@media (min-width: 1500px) {
    html body .zc-ist .zc-fl2-body {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: start !important;
        gap: 16px !important;
    }
}

/* ye do composer ke click-par-khulne wale dropdown hain — inke apne rules
   .chat-box__footer se scoped the, isliye pichhla single-class override
   specificity me haar gaya tha. (react-flow__attribution library ka
   credit link hai, width 0 — chhod diya.) */
html body .chat-box__footer .chat-media__list,
html body .chat-box__footer .chat-url__list,
html body .chat-box .chat-media__list,
html body .chat-box .chat-url__list {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ~3520 ka 'INBOX COMPOSE FOOTER — WhatsApp-style glassmorphism' block
   .zc-content se scoped hai (0,2,0), isliye upar wala single-class
   override haar raha tha. Background pehle hi opaque ho chuka tha, par
   blur bhi saaf kar do. */
html body .zc-content .chat-box__footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Marketing furniture app me leak — wahi parivar jisme #zps-chip wala
   awaara tick tha (Aditya ne 19 Aug hatwaya). .zpa-progress aur
   .zpa-aurora/.zpa-orb zupi-ambient se aate hain aur dashboard layout
   pe bhi chad jaate hain. App shell me inka kaam nahi. */
body:has(.zc-sidebar) .zpa-progress,
body:has(.zc-sidebar) .zpa-aurora,
body:has(.zc-sidebar) .zpa-orb,
body.dashboard .zpa-progress,
body.dashboard .zpa-aurora,
body.dashboard .zpa-orb { display: none !important; }


/* ── .zc-emptyline wale <td> ka apna padding do gaddhe banata tha ── */
html body .zc-content td:has(.zc-emptyline) { padding: 0 !important; }

/* ── Carousel preview ko baaki app ke saath milao (2026-08-23) ──
   Create Template ka .tpl-preview WhatsApp cream + doodle par hai
   (9458), par Carousel ka preview panel abhi tak gradient teal header
   + mint-green (#f0fdf8→#e8fd..) chat area dikha raha tha. Do jagah
   do alag chat surface = bana diya wali nishani. */
html body .zc-content .template-info-container__right .preview-item__header {
    background: #0a474c !important;
    background-image: none !important;
}
html body .zc-content .template-info-container__right .preview-item__content {
    background: #F5EFDF url('../images/chat-doodle.svg') repeat !important;
    background-size: 440px auto !important;
}


/* ── India Stack + WA Payments: professional pass (2026-08-23) ──────────
   Both pages were full-bleed on a wide screen, so fields stretched to 600px
   and the eye had nothing to anchor on. Cap the measure, give the numbers
   real weight, and end the page with a strip instead of a void. */
html body .zc-ist-f .form--control { max-width: 460px; }
html body .zc-ist-f textarea.form--control { max-width: 560px; }

html body .zc-ist-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f5f7f7; color: #6d7a76; border: 1px solid #e6ecea;
    padding: 5px 11px; border-radius: 999px; font-size: 11.5px; letter-spacing: .01em;
}
html body .zc-ist-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b6c0bd; }
html body .zc-ist-chip.ok { background: #e9f5ee; color: #116b3a; border-color: #cfe8d9; }
html body .zc-ist-chip.ok::before { background: #17a34a; }
html body .zc-ist-chip.warn { background: #fdf4e6; color: #95611a; border-color: #f0e0c4; }
html body .zc-ist-chip.warn::before { background: #d98416; }

html body .zc-ist-check { display: flex !important; align-items: flex-start !important; gap: 8px !important; }
html body .zc-ist-check input[type="checkbox"] {
    appearance: auto !important; -webkit-appearance: checkbox !important;
    width: 15px !important; height: 15px !important; min-width: 15px !important;
    flex: 0 0 15px !important; margin: 2px 0 0 !important; padding: 0 !important;
    border: 0 !important; box-shadow: none !important; accent-color: #0a474c;
}

/* side-by-side cards read as one row only when they end on the same line */
@media (min-width: 1500px) {
    html body .zc-ist .zc-fl2-body { align-items: stretch !important; }
    html body .zc-ist-card { display: flex; flex-direction: column; }
    html body .zc-ist-card .zc-ist-form { flex: 1; }
}

/* secondary actions should read as secondary — only Save is filled */
html body .zc-ist-foot__r .zc-fl2-btn:active { transform: scale(.98); }

/* payments: the numbers are the point of the page, so let them carry weight */
html body .zc-pay-kpi { align-items: center; padding: 20px 22px; }
html body .zc-pay-kpi b { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: #0f1f1b; }
html body .zc-pay-kpi > div > span { font-size: 12.5px; color: #6d7a76; }
html body .zc-pay-kpi .zc-pay-tile { background: #eef4f3; color: #0a474c; }
html body .zc-pay-panel { min-height: 340px; display: flex; flex-direction: column; }
html body .zc-pay-panel .zc-emptyline { flex: 1; flex-direction: column; gap: 10px; color: #8a938f; }
html body .zc-pay-panel .zc-emptyline i { font-size: 26px; }
html body .zc-pay-panel .zc-emptyline span { max-width: 320px; text-align: center; line-height: 1.6; }

/* the closing strip, shared by both pages */
html body .zc-howstrip {
    grid-column: 1 / -1;
    background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9;
    padding: 22px 24px; margin-top: 16px;
}
html body .zc-howstrip h6 { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: #4a5350;
    text-transform: uppercase; letter-spacing: .08em; }
html body .zc-howstrip ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 28px; margin: 0; padding: 0; list-style: none; counter-reset: zcstep; }
html body .zc-howstrip li { position: relative; padding-left: 38px; counter-increment: zcstep; }
html body .zc-howstrip li::before {
    content: counter(zcstep); position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: 8px; background: #eef4f3; color: #0a474c;
    font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
html body .zc-howstrip li b { display: block; font-size: 13.5px; color: #0f1f1b; margin-bottom: 3px; }
html body .zc-howstrip li span { font-size: 12.5px; color: #6d7a76; line-height: 1.6; }
@media (max-width: 900px) { html body .zc-howstrip ol { grid-template-columns: 1fr; } }

/* ── App scrollbars: neutral, app-wide (2026-08-23) ──
   main.css (3921 / 9240 / 11481 …) scrollbars ko hsl(var(--base)/.8)
   deti hai aur theme ka --base bright turquoise #48e5d0 hai — wahi rang
   jo redesign me kahin aur allowed nahi. Carousel preview ke neeche ek
   chamakta turquoise bar isi se aa raha tha. Ab har jagah patli neutral
   scrollbar; jahan pehle se apni tuned scrollbar hai (inbox list,
   msg-body, history) wo apne rules se aage nikal jaati hain. */
html body.dashboard *,
html body .zc-content * {
    scrollbar-width: thin;
    scrollbar-color: #cbd3d1 transparent;
}
html body .zc-content *::-webkit-scrollbar { width: 7px; height: 7px; }
html body .zc-content *::-webkit-scrollbar-track { background: transparent; }
html body .zc-content *::-webkit-scrollbar-thumb { background: #cbd3d1; border-radius: 4px; }
html body .zc-content *::-webkit-scrollbar-thumb:hover { background: #b3bdba; }

/* 390px: the footer was locked to nowrap for the desktop row, which on a phone
   squeezed "Never synced — …" into a one-character-per-line column. */
@media (max-width: 900px) {
    html body .zc-ist-foot { flex-wrap: wrap !important; align-items: flex-start !important; gap: 12px !important; }
    html body .zc-ist-meta { flex: 1 1 100% !important; max-width: none !important; }
    html body .zc-ist-foot__r { flex: 1 1 100% !important; flex-wrap: wrap !important; }
    html body .zc-ist-foot__r .zc-fl2-btn { flex: 1 1 auto; justify-content: center; }
    html body .zc-ist-head { flex-wrap: wrap !important; }
    html body .zc-ist-head__t { flex: 1 1 100% !important; order: 2; }
    html body .zc-ist-chip { order: 1; margin-left: auto; }
}


/* ══════════════════════════════════════════════════════════════════
   Inbox empty state settle (2026-08-23)
   Right pane me 240px ki illustration thi jiske ANDAR hi "Select a
   contact to start conversation." likha tha — neeche h4 aur p wahi
   baat dohra rahe the, yaani ek hi message teen baar. Aditya ka
   standing rule: koi bada empty-state hero nahi. Ab chhota icon +
   ek heading + ek line.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-dashboard .empty-conversation .zi-empty-inner {
    text-align: center !important;
    max-width: 340px !important;
    padding: 20px !important;
}
html body .zc-dashboard .zi-empty-ic {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 46px !important; height: 46px !important; border-radius: 14px !important;
    background: #e6f0ef !important; color: #0a474c !important;
    font-size: 21px !important; margin-bottom: 12px !important;
}
html body .zc-dashboard .zi-empty-title {
    font-size: 15.5px !important; font-weight: 600 !important;
    color: #1c1c1c !important; margin: 0 0 5px !important;
}
html body .zc-dashboard .zi-empty-sub {
    font-size: 13px !important; color: #8a938f !important;
    line-height: 1.55 !important; margin: 0 !important;
}
html body .zc-dashboard .empty-conversation img.conversation-empty-image { display: none !important; }


/* ══════════════════════════════════════════════════════════════════
   My Profile — full-width premium (2026-08-23)
   Aditya: "10x premium lage, dynamic na lage, aur FULL SCREEN hi rahe."
   Pehle Account Details card ~640px par ruk jaata tha aur uske right me
   ~1300px khaali padta tha; Profile Picture strip par mint gradient
   thi aur section heading ek adhoore tab jaisi lagti thi.
   Ab: identity card left me (300px), form right me poori chaudai me,
   aur fields wide screen par 3 column me khulte hain. Sab flat.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-prof .dashboard-container__body {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ── left: identity card ── */
html body .zc-content .zc-prof .profile-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
    background: #fff !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    padding: 24px 20px !important;
    margin: 0 !important;
    position: sticky !important;
    top: 16px !important;
}
html body .zc-content .zc-prof .profile-header__title {
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .07em !important; text-transform: uppercase !important;
    color: #93a09b !important; margin: 0 0 16px !important;
}
html body .zc-content .zc-prof .profile-header__thumb,
html body .zc-content .zc-prof .profile-header__thumb img {
    width: 104px !important; height: 104px !important;
    border: 3px solid #e6f0ef !important;
}
html body .zc-content .zc-prof .profile-header__thumb { position: relative !important; margin: 0 0 14px !important; }
html body .zc-content .zc-prof .profile-header__thumb .edit {
    background: #0a474c !important; color: #fff !important;
    width: 30px !important; height: 30px !important; border-radius: 50% !important;
    border: 2px solid #fff !important; box-shadow: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
html body .zc-content .zc-prof .profile-header .thumb-size {
    font-size: 12px !important; color: #8a938f !important;
    line-height: 1.6 !important; margin: 0 !important;
}
html body .zc-content .zc-prof .profile-header .thumb-size .number { color: #4a5350 !important; font-weight: 500 !important; }

/* ── right: details card ── */
html body .zc-content .zc-prof .profile-info.zc-has-head {
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important; max-width: none !important;
}
html body .zc-content .zc-prof .zc-profile-head {
    display: block !important;
    background: #fff !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid #f2f4f4 !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 16px 20px !important;
    color: #1c1c1c !important;
}
html body .zc-content .zc-prof .zc-profile-head span {
    display: block !important;
    font-size: 14.5px !important; font-weight: 600 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-prof .zc-profile-head em {
    display: block !important; font-style: normal !important;
    font-size: 12.5px !important; color: #8a938f !important; margin-top: 2px !important;
}

/* fields: poori chaudai mili hai to teen column me khulo */
html body .zc-content .zc-prof .profile-info.zc-has-head > .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 20px !important;
    padding: 20px !important;
    margin: 0 !important;
}
html body .zc-content .zc-prof .profile-info.zc-has-head > .row > [class*="col-"] {
    width: 100% !important; max-width: none !important; flex: none !important;
    padding: 0 !important;
}
html body .zc-content .zc-prof .form-group { margin-bottom: 16px !important; }
html body .zc-content .zc-prof .form-group label {
    font-size: 12.5px !important; font-weight: 500 !important; color: #4a5350 !important;
}
html body .zc-content .zc-prof .form-group .form-text,
html body .zc-content .zc-prof .form-group small {
    font-size: 11.5px !important; color: #98a2a0 !important; line-height: 1.5 !important;
}

@media (max-width: 1500px) {
    html body .zc-content .zc-prof .profile-info.zc-has-head > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 991px) {
    html body .zc-content .zc-prof .dashboard-container__body {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    html body .zc-content .zc-prof .profile-header { position: static !important; }
    html body .zc-content .zc-prof .profile-info.zc-has-head > .row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* heading strip: purana rule .zc-content .profile-info.zc-has-head .zc-profile-head
   (0,4,0) tha, upar wala override (0,3,2) usse haar raha tha — mint tab jaisa
   dikhta reh gaya. Ab poori chaudai ki plain heading row. */
html body .zc-content .zc-prof .profile-info.zc-has-head .zc-profile-head {
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid #f2f4f4 !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 16px 20px !important;
    color: #1c1c1c !important;
    font-weight: 400 !important;
}
html body .zc-content .zc-prof .profile-info.zc-has-head .zc-profile-head span {
    display: block !important; font-size: 14.5px !important;
    font-weight: 600 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-prof .profile-info.zc-has-head .zc-profile-head em {
    display: block !important; font-style: normal !important;
    font-size: 12.5px !important; color: #8a938f !important; margin-top: 2px !important;
}


/* ══════════════════════════════════════════════════════════════════
   My Profile v2 — three columns (2026-08-23)
   v1 me form ko poori chaudai me kheench diya tha: 9 fields 550px
   ke ho gaye (Zip ke liye bemaani) aur neeche 500px ka khaali maidan
   bacha — Aditya ne kaha "aur accha nahi lag raha". Sahi ilaaj jagah
   ko asli content se bharna hai, fields stretch karna nahi.
   Ab: left identity (280) · center form 2-col (form ki chaudai sane)
   · right account-status panel (plan / verification / account) —
   sara data live, koi dummy nahi.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-prof .dashboard-container__body {
    grid-template-columns: 280px minmax(0, 1fr) 320px !important;
}
html body .zc-content .zc-prof .profile-info.zc-has-head > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* right column */
html body .zc-content .zc-prof .zc-prof-side {
    display: flex !important; flex-direction: column !important; gap: 14px !important;
    position: sticky !important; top: 16px !important;
}
html body .zc-content .zc-prof .zc-prof-card {
    background: #fff !important; border: none !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; padding: 16px 18px !important;
}
html body .zc-content .zc-prof .zc-prof-card__h {
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important;
    text-transform: uppercase !important; color: #93a09b !important; margin-bottom: 10px !important;
}
html body .zc-content .zc-prof .zc-prof-plan {
    font-size: 17px !important; font-weight: 700 !important; color: #1c1c1c !important; line-height: 1.2 !important;
}
html body .zc-content .zc-prof .zc-prof-muted { font-size: 12.5px !important; color: #8a938f !important; margin-top: 3px !important; }
html body .zc-content .zc-prof .zc-prof-link {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    margin-top: 12px !important; font-size: 12.5px !important; font-weight: 500 !important;
    color: #0a474c !important; text-decoration: none !important;
}
html body .zc-content .zc-prof .zc-prof-link:hover { text-decoration: underline !important; }
html body .zc-content .zc-prof .zc-prof-link i { font-size: 13px !important; }

html body .zc-content .zc-prof .zc-prof-checks { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body .zc-content .zc-prof .zc-prof-checks li {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 8px 0 !important; border-bottom: 1px solid #f4f6f5 !important;
    font-size: 13px !important; color: #3a4441 !important;
}
html body .zc-content .zc-prof .zc-prof-checks li:last-child { border-bottom: none !important; }
html body .zc-content .zc-prof .zc-prof-checks li i { font-size: 15px !important; flex-shrink: 0 !important; }
html body .zc-content .zc-prof .zc-prof-checks li.ok i { color: #17a06a !important; }
html body .zc-content .zc-prof .zc-prof-checks li.off i { color: #b9a15c !important; }
html body .zc-content .zc-prof .zc-prof-checks li span { flex: 1 !important; }
html body .zc-content .zc-prof .zc-prof-checks li em {
    font-style: normal !important; font-size: 12px !important; font-weight: 500 !important; color: #8a938f !important;
}
html body .zc-content .zc-prof .zc-prof-checks li.ok em { color: #17a06a !important; }

html body .zc-content .zc-prof .zc-prof-rows > div {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important;
    gap: 10px !important; padding: 7px 0 !important; border-bottom: 1px solid #f4f6f5 !important;
    font-size: 13px !important;
}
html body .zc-content .zc-prof .zc-prof-rows > div:last-child { border-bottom: none !important; }
html body .zc-content .zc-prof .zc-prof-rows span { color: #8a938f !important; }
html body .zc-content .zc-prof .zc-prof-rows b {
    font-weight: 500 !important; color: #1c1c1c !important; text-align: right !important;
    font-variant-numeric: tabular-nums !important; word-break: break-all !important;
}

@media (max-width: 1500px) {
    html body .zc-content .zc-prof .dashboard-container__body {
        grid-template-columns: 260px minmax(0, 1fr) 290px !important;
    }
}
@media (max-width: 1199px) {
    html body .zc-content .zc-prof .dashboard-container__body {
        grid-template-columns: 260px minmax(0, 1fr) !important;
    }
    html body .zc-content .zc-prof .zc-prof-side {
        grid-column: 1 / -1 !important; position: static !important;
        flex-direction: row !important; flex-wrap: wrap !important;
    }
    html body .zc-content .zc-prof .zc-prof-card { flex: 1 1 260px !important; }
}
@media (max-width: 991px) {
    html body .zc-content .zc-prof .zc-prof-side { flex-direction: column !important; }
}


/* ══════════════════════════════════════════════════════════════════
   My Profile v3 — grouped (2026-08-23)
   v2 me teen column the par teeno alag-alag height par khatam hote the:
   left avatar card 200px, center 430px, right 480px — beech me gaddhe.
   Aur center bas "9 fields ka ek dabba" tha, isliye kitna bhi chaudai
   do, premium nahi lagta tha. Ab avatar main card ke header me hai
   (naam + email ke saath) aur fields teen labelled groups me —
   Personal / Contact / Location. Card lamba aur structured ho gaya,
   right rail ke barabar. Layout ab do column: content + status rail.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-prof .dashboard-container__body {
    grid-template-columns: minmax(0, 1fr) 320px !important;
}

/* identity header inside the main card */
html body .zc-content .zc-prof .zc-prof-id {
    display: flex !important; align-items: center !important; gap: 16px !important;
    padding: 20px !important; border-bottom: 1px solid #f2f4f4 !important;
}
html body .zc-content .zc-prof .zc-prof-id .profile-header__thumb,
html body .zc-content .zc-prof .zc-prof-id .profile-header__thumb img {
    width: 72px !important; height: 72px !important;
    border: 3px solid #e6f0ef !important; border-radius: 50% !important;
}
html body .zc-content .zc-prof .zc-prof-id .profile-header__thumb {
    position: relative !important; flex: 0 0 72px !important; margin: 0 !important;
}
html body .zc-content .zc-prof .zc-prof-id .edit {
    background: #0a474c !important; color: #fff !important;
    width: 26px !important; height: 26px !important; border-radius: 50% !important;
    border: 2px solid #fff !important; box-shadow: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 12px !important;
}
html body .zc-content .zc-prof .zc-prof-id__t { min-width: 0 !important; }
html body .zc-content .zc-prof .zc-prof-id__t strong {
    display: block !important; font-size: 17px !important; font-weight: 700 !important;
    color: #1c1c1c !important; line-height: 1.25 !important;
}
html body .zc-content .zc-prof .zc-prof-id__t span {
    display: block !important; font-size: 13px !important; color: #6b7573 !important; margin-top: 1px !important;
}
html body .zc-content .zc-prof .zc-prof-id__t em {
    display: block !important; font-style: normal !important;
    font-size: 12px !important; color: #98a2a0 !important; margin-top: 6px !important;
}

/* field groups */
html body .zc-content .zc-prof .zc-fgroup {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 20px !important;
    border-bottom: 1px solid #f2f4f4 !important;
}
html body .zc-content .zc-prof .zc-fgroup:last-child { border-bottom: none !important; }
html body .zc-content .zc-prof .zc-fgroup__h span {
    display: block !important; font-size: 13.5px !important; font-weight: 600 !important;
    color: #1c1c1c !important;
}
html body .zc-content .zc-prof .zc-fgroup__h em {
    display: block !important; font-style: normal !important;
    font-size: 12px !important; color: #98a2a0 !important;
    line-height: 1.55 !important; margin-top: 3px !important;
}
html body .zc-content .zc-prof .zc-fgrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 18px !important;
}
html body .zc-content .zc-prof .zc-fgrid .zc-fspan { grid-column: 1 / -1 !important; }
html body .zc-content .zc-prof .zc-fgrid .form-group { margin-bottom: 14px !important; }
html body .zc-content .zc-prof .zc-fgrid .form-group:last-child { margin-bottom: 0 !important; }

@media (max-width: 1400px) {
    html body .zc-content .zc-prof .zc-fgroup { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 1199px) {
    html body .zc-content .zc-prof .dashboard-container__body {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
@media (max-width: 767px) {
    html body .zc-content .zc-prof .zc-fgrid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ek purana multi-selector rule (.zc-at-head/.zc-cl-head wala group)
   .profile-info ko display:flex de raha tha — isse mere teen groups
   ek doosre ke bagal me chipak gaye. Card ek seedha stack hona chahiye. */
html body .zc-content .zc-prof .profile-info.zc-has-head {
    display: block !important;
}

/* Country ka select2 dropdown card ke neeche ki edge par kat raha tha —
   chain me kahin overflow:hidden baitha hai (purana .zc-has-head rule).
   dropdownParent:body wala hack yahan mat lagana: body.dashboard khud
   scroll container hai, usse popup upar flip ho jaata hai. Sahi ilaaj
   clipping hatana hai. */
html body .zc-content .zc-prof .dashboard-container__body,
html body .zc-content .zc-prof .profile-info.zc-has-head,
html body .zc-content .zc-prof .zc-fgroup,
html body .zc-content .zc-prof .zc-fgrid,
html body .zc-content .zc-prof .zc-fgrid .form-group {
    overflow: visible !important;
}
html body .zc-content .zc-prof .zc-fgrid .form-group:has(.select2-container--open) { position: relative !important; z-index: 60 !important; }
html body .select2-container--open { z-index: 9999 !important; }
html body .select2-container--open .select2-dropdown { z-index: 9999 !important; }


/* ══════════════════════════════════════════════════════════════════
   2FA Security — premium setup flow (2026-08-23)
   Pehle do bemel cards the: left me ek bada khaali card jisme QR beech
   me tairta tha, right me ek nanha card sirf OTP + full-width dark
   button ke saath — aur neeche 400px khaali. Ye hai to ek setup flow,
   isliye ab numbered steps hain (app lo → account add karo → code
   daalo) aur bagal me status rail. Dono column barabar khatam hote
   hain. My Profile wale group pattern se hi mel khata hai.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-2fa .dashboard-container__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 16px !important;
    align-items: start !important;
    background: transparent !important;
    border: none !important; box-shadow: none !important; padding: 0 !important;
}

html body .zc-content .zc-2fa-state {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 5px 12px !important; border-radius: 6px !important;
    font-size: 12px !important; font-weight: 600 !important;
}
html body .zc-content .zc-2fa-state.off { background: #fdf3e2 !important; color: #9c6a0d !important; }
html body .zc-content .zc-2fa-state.on { background: #e9f6ef !important; color: #17a06a !important; }

/* main card with steps */
html body .zc-content .zc-2fa-main {
    background: #fff !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; overflow: visible !important;
}
html body .zc-content .zc-2fa-step {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 24px !important; padding: 20px !important;
    border-bottom: 1px solid #f2f4f4 !important;
}
html body .zc-content .zc-2fa-step:last-child { border-bottom: none !important; }
html body .zc-content .zc-2fa-step__h { display: flex !important; gap: 11px !important; align-items: flex-start !important; }
html body .zc-content .zc-2fa-num {
    flex: 0 0 24px !important; width: 24px !important; height: 24px !important;
    border-radius: 50% !important; background: #e6f0ef !important; color: #0a474c !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 12px !important; font-weight: 700 !important;
}
html body .zc-content .zc-2fa-step__h strong {
    display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-2fa-step__h em {
    display: block !important; font-style: normal !important;
    font-size: 12px !important; color: #98a2a0 !important; line-height: 1.55 !important; margin-top: 3px !important;
}
html body .zc-content .zc-2fa-note {
    font-size: 12.5px !important; color: #8a938f !important; line-height: 1.6 !important; margin: 0 0 8px !important;
}
html body .zc-content .zc-2fa-link {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    font-size: 12.5px !important; font-weight: 500 !important;
    color: #0a474c !important; text-decoration: none !important;
}
html body .zc-content .zc-2fa-link:hover { text-decoration: underline !important; }

/* step 2: QR + key side by side */
html body .zc-content .zc-2fa-scan { display: flex !important; gap: 20px !important; align-items: flex-start !important; flex-wrap: wrap !important; }
html body .zc-content .zc-2fa-qr {
    flex: 0 0 auto !important; padding: 10px !important;
    background: #fff !important; border: 1px solid #ececec !important; border-radius: 10px !important;
    line-height: 0 !important;
}
html body .zc-content .zc-2fa-qr img { width: 148px !important; height: 148px !important; display: block !important; }
html body .zc-content .zc-2fa-key { flex: 1 1 260px !important; min-width: 0 !important; }
html body .zc-content .zc-2fa-key .form-label { font-size: 12.5px !important; font-weight: 500 !important; color: #4a5350 !important; }
html body .zc-content .zc-2fa-key .referralURL {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    letter-spacing: .04em !important; font-size: 13px !important;
}
html body .zc-content .zc-2fa-key .copytext {
    background: #fff !important; border: 1px solid #ececec !important;
    color: #0a474c !important; cursor: pointer !important;
}
html body .zc-content .zc-2fa-key .zc-2fa-note { margin: 8px 0 0 !important; }

/* step 3: the code */
html body .zc-content .zc-2fa-form { max-width: 320px !important; }
html body .zc-content .zc-2fa-otp {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 19px !important; letter-spacing: .34em !important; text-align: center !important;
    height: 48px !important;
}
html body .zc-content button.zc-2fa-btn {
    width: 100% !important; background: #0a474c !important; color: #fff !important;
    border: none !important; border-radius: 8px !important;
    padding: 11px 18px !important; font-size: 13.5px !important; font-weight: 500 !important;
    box-shadow: none !important; transition: background .15s ease !important;
}
html body .zc-content button.zc-2fa-btn:hover { background: #083a3e !important; }
html body .zc-content button.zc-2fa-btn.danger { background: #b3261e !important; }
html body .zc-content button.zc-2fa-btn.danger:hover { background: #8f1e18 !important; }

/* right rail */
html body .zc-content .zc-2fa-side {
    display: flex !important; flex-direction: column !important; gap: 14px !important;
    position: sticky !important; top: 16px !important;
}
html body .zc-content .zc-2fa-card {
    background: #fff !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; padding: 16px 18px !important;
}
html body .zc-content .zc-2fa-card__h {
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important;
    text-transform: uppercase !important; color: #93a09b !important; margin-bottom: 10px !important;
}
html body .zc-content .zc-2fa-status { display: flex !important; gap: 10px !important; align-items: flex-start !important; }
html body .zc-content .zc-2fa-status i { font-size: 19px !important; flex-shrink: 0 !important; }
html body .zc-content .zc-2fa-status.off i { color: #b9a15c !important; }
html body .zc-content .zc-2fa-status.on i { color: #17a06a !important; }
html body .zc-content .zc-2fa-status strong { display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1c1c1c !important; }
html body .zc-content .zc-2fa-status span { display: block !important; font-size: 12.5px !important; color: #8a938f !important; line-height: 1.55 !important; margin-top: 2px !important; }
html body .zc-content .zc-2fa-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body .zc-content .zc-2fa-list li {
    display: flex !important; gap: 9px !important; align-items: flex-start !important;
    padding: 7px 0 !important; font-size: 12.5px !important; color: #4a5350 !important; line-height: 1.55 !important;
}
html body .zc-content .zc-2fa-list li i { color: #0a474c !important; font-size: 15px !important; flex-shrink: 0 !important; margin-top: 1px !important; }
html body .zc-content .zc-2fa-rows > div {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important;
    gap: 10px !important; padding: 7px 0 !important; border-bottom: 1px solid #f4f6f5 !important; font-size: 13px !important;
}
html body .zc-content .zc-2fa-rows > div:last-child { border-bottom: none !important; }
html body .zc-content .zc-2fa-rows span { color: #8a938f !important; }
html body .zc-content .zc-2fa-rows b { font-weight: 500 !important; color: #1c1c1c !important; text-align: right !important; word-break: break-all !important; }
html body .zc-content .zc-2fa-card .zc-2fa-link { margin-top: 12px !important; }

@media (max-width: 1400px) {
    html body .zc-content .zc-2fa-step { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 1199px) {
    html body .zc-content .zc-2fa .dashboard-container__body { grid-template-columns: minmax(0, 1fr) !important; }
    html body .zc-content .zc-2fa-side { position: static !important; }
}

/* setup key 16 characters ka hai — field ko 1285px chaudai dena bemaani tha */
html body .zc-content .zc-2fa-key { max-width: 400px !important; flex: 0 1 400px !important; }


/* ══════════════════════════════════════════════════════════════════
   Subscription premium (2026-08-23)
   Photo se: gyarah feature rows poori 1560px chaudi thi — label baayein,
   value daayein kinare par, beech me ~1400px khaali. Aankh ko har row
   par poora page paar karna padta tha. Ab teen column ka grid, value
   apne label ke paas. Saath me plan card ko gold accent (Enterprise ek
   premium plan hai, use aisa dikhna bhi chahiye).
   ══════════════════════════════════════════════════════════════════ */

/* feature list: teen column, value label ke paas */
html body .zc-content .zc-sub .plan-details {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 28px !important;
}
@media (max-width: 1400px) { html body .zc-content .zc-sub .plan-details { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 800px)  { html body .zc-content .zc-sub .plan-details { grid-template-columns: 1fr !important; } }

html body .zc-content .zc-sub .plan-details__item {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; gap: 14px !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid #f1f4f4 !important;
    font-size: 13px !important;
}
html body .zc-content .zc-sub .plan-details__item .item-title {
    color: #4a5350 !important; font-size: 13px !important; font-weight: 500 !important;
}

/* "Unlimited" ek uplabdhi hai — use chip bana do, plain text nahi */
html body .zc-content .zc-sub .plan-details__item .plan-val {
    font-size: 12px !important; font-weight: 600 !important;
    color: #0a474c !important; background: #e6f0ef !important;
    padding: 3px 9px !important; border-radius: 5px !important;
    white-space: nowrap !important;
}
html body .zc-content .zc-sub .plan-details__item .text--success {
    font-size: 12px !important; font-weight: 600 !important;
    color: #117a4a !important; background: #e6f4ea !important;
    padding: 3px 9px !important; border-radius: 5px !important;
}
html body .zc-content .zc-sub .plan-details__item .text--danger {
    font-size: 12px !important; font-weight: 600 !important;
    color: #b02a1c !important; background: #fdecea !important;
    padding: 3px 9px !important; border-radius: 5px !important;
}

/* dono column ki height ab kareeb aa gayi — panel bhi card jaisa */
html body .zc-content .zc-sub .plan-wrapper { gap: 24px !important; align-items: stretch !important; }
html body .zc-content .zc-sub .plan-wrapper__right {
    width: auto !important; flex: 1 1 auto !important; min-width: 0 !important;
    background: #fff !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    padding: 20px 22px !important;
}
html body .zc-content .zc-sub .plan-wrapper__right .title {
    font-size: 14.5px !important; font-weight: 600 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-sub .plan-wrapper__desc { font-size: 12.5px !important; color: #8a938f !important; }
html body .zc-content .zc-sub .plan-wrapper__top { margin-bottom: 10px !important; }

/* plan card: gold accent — yahi wo cheez hai jo user ne khareedi hai */
html body .zc-content .zc-sub .active-card {
    width: 360px !important; flex: none !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    border-top: 3px solid transparent !important;
    border-image: linear-gradient(90deg, #fbe08a, #e9b949, #c8891f) 1 !important;
    padding: 18px 20px !important;
}
/* purana Billing-settle rule `.active-card .active-card__badge` (4 classes)
   zyada specific tha aur badge ko mint kar deta tha — chain match karo */
html body .zc-content .zc-sub .active-card .active-card__badge {
    background: linear-gradient(135deg, #fbe08a, #e9b949, #c8891f) !important;
    color: #4a3305 !important; font-weight: 700 !important;
    font-size: 10.5px !important; letter-spacing: .06em !important;
    padding: 4px 10px !important; border-radius: 5px !important;
}
html body .zc-content .zc-sub .active-card__title {
    font-size: 22px !important; font-weight: 700 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-sub .active-card__desc { font-size: 12.5px !important; color: #8a938f !important; }
html body .zc-content .zc-sub .active-card .text-list__item {
    padding: 9px 0 !important; border-bottom: 1px solid #f1f4f4 !important; font-size: 13px !important;
}
html body .zc-content .zc-sub .active-card .text-list__item:last-child { border-bottom: 0 !important; }
html body .zc-content .zc-sub .active-card__note { font-size: 12px !important; color: #8a938f !important; margin-top: 8px !important; }


/* ══════════════════════════════════════════════════════════════════
   Webhook Setup — premium (2026-08-23)
   Pehle: ek mint-gradient "Webhook Configuration" patti aur uske neeche
   bas do copy-fields — phir 730px khaali. Page batata hi nahi tha ki
   in do values ka karna kya hai. Ab 2FA jaisa step flow: copy karo →
   Meta me paste karo → fields subscribe karo. Right rail me asli
   delivery status (aakhri inbound message kab aaya) — yahi sach me
   batata hai ki webhook chal raha hai ya nahi.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-wbk .dashboard-container__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 16px !important; align-items: start !important;
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important;
}
html body .zc-content .zc-wbk-state {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 5px 12px !important; border-radius: 6px !important;
    font-size: 12px !important; font-weight: 600 !important;
}
html body .zc-content .zc-wbk-state.on { background: #e9f6ef !important; color: #17a06a !important; }
html body .zc-content .zc-wbk-state.off { background: #fdf3e2 !important; color: #9c6a0d !important; }

html body .zc-content .zc-wbk-main {
    background: #fff !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; overflow: visible !important;
}
html body .zc-content .zc-wbk-step {
    display: grid !important; grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 24px !important; padding: 20px !important; border-bottom: 1px solid #f2f4f4 !important;
}
html body .zc-content .zc-wbk-step:last-child { border-bottom: none !important; }
html body .zc-content .zc-wbk-step__h { display: flex !important; gap: 11px !important; align-items: flex-start !important; }
html body .zc-content .zc-wbk-num {
    flex: 0 0 24px !important; width: 24px !important; height: 24px !important; border-radius: 50% !important;
    background: #e6f0ef !important; color: #0a474c !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 12px !important; font-weight: 700 !important;
}
html body .zc-content .zc-wbk-step__h strong { display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1c1c1c !important; }
html body .zc-content .zc-wbk-step__h em {
    display: block !important; font-style: normal !important; font-size: 12px !important;
    color: #98a2a0 !important; line-height: 1.55 !important; margin-top: 3px !important;
}
html body .zc-content .zc-wbk-note { font-size: 12.5px !important; color: #8a938f !important; line-height: 1.6 !important; margin: 0 0 8px !important; }
html body .zc-content .zc-wbk-link {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    font-size: 12.5px !important; font-weight: 500 !important; color: #0a474c !important; text-decoration: none !important;
}
html body .zc-content .zc-wbk-link:hover { text-decoration: underline !important; }

html body .zc-content .zc-wbk-fields {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important;
    max-width: 720px !important;
}
html body .zc-content .zc-wbk-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 12.5px !important;
}
html body .zc-content .zc-wbk-fields .input-group-text.copyText {
    background: #fff !important; border: 1px solid #ececec !important; color: #0a474c !important; cursor: pointer !important;
}
html body .zc-content .zc-wbk-fields .zc-wbk-note { margin: 6px 0 0 !important; }

html body .zc-content .zc-wbk-fieldlist { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body .zc-content .zc-wbk-fieldlist li {
    display: flex !important; align-items: baseline !important; gap: 12px !important; flex-wrap: wrap !important;
    padding: 7px 0 !important; border-bottom: 1px solid #f4f6f5 !important;
}
html body .zc-content .zc-wbk-fieldlist li:last-child { border-bottom: none !important; }
html body .zc-content .zc-wbk-fieldlist code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 12px !important; background: #f2f5f4 !important; color: #0a474c !important;
    padding: 3px 8px !important; border-radius: 5px !important;
}
html body .zc-content .zc-wbk-fieldlist span { font-size: 12.5px !important; color: #8a938f !important; }

html body .zc-content .zc-wbk-side { display: flex !important; flex-direction: column !important; gap: 14px !important; position: sticky !important; top: 16px !important; }
html body .zc-content .zc-wbk-card { background: #fff !important; border-radius: 10px !important; box-shadow: 0 0 11px #e9e9e9 !important; padding: 16px 18px !important; }
html body .zc-content .zc-wbk-card__h {
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important;
    text-transform: uppercase !important; color: #93a09b !important; margin-bottom: 10px !important;
}
html body .zc-content .zc-wbk-status { display: flex !important; gap: 10px !important; align-items: flex-start !important; }
html body .zc-content .zc-wbk-status i { font-size: 19px !important; flex-shrink: 0 !important; }
html body .zc-content .zc-wbk-status.on i { color: #17a06a !important; }
html body .zc-content .zc-wbk-status.off i { color: #b9a15c !important; }
html body .zc-content .zc-wbk-status strong { display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1c1c1c !important; }
html body .zc-content .zc-wbk-status span { display: block !important; font-size: 12.5px !important; color: #8a938f !important; line-height: 1.55 !important; margin-top: 2px !important; }
html body .zc-content .zc-wbk-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body .zc-content .zc-wbk-list li {
    display: flex !important; gap: 9px !important; align-items: flex-start !important;
    padding: 7px 0 !important; font-size: 12.5px !important; color: #4a5350 !important; line-height: 1.55 !important;
}
html body .zc-content .zc-wbk-list li i { color: #0a474c !important; font-size: 15px !important; flex-shrink: 0 !important; margin-top: 1px !important; }
html body .zc-content .zc-wbk-rows > div {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important;
    gap: 10px !important; padding: 7px 0 !important; border-bottom: 1px solid #f4f6f5 !important; font-size: 13px !important;
}
html body .zc-content .zc-wbk-rows > div:last-child { border-bottom: none !important; }
html body .zc-content .zc-wbk-rows span { color: #8a938f !important; }
html body .zc-content .zc-wbk-rows b { font-weight: 500 !important; color: #1c1c1c !important; text-align: right !important; word-break: break-all !important; }
html body .zc-content .zc-wbk-card .zc-wbk-link { margin-top: 12px !important; }

@media (max-width: 1400px) {
    html body .zc-content .zc-wbk-step { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 1199px) {
    html body .zc-content .zc-wbk .dashboard-container__body { grid-template-columns: minmax(0, 1fr) !important; }
    html body .zc-content .zc-wbk-side { position: static !important; }
}
@media (max-width: 767px) {
    html body .zc-content .zc-wbk-fields { grid-template-columns: minmax(0, 1fr) !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Change Password premium (2026-08-23)
   Photo se: teen password fields poori chaudai le rahe the — "Old
   Password" akela 1930px chauda, jabki password 20 akshar ka hota
   hai. Aur kram ulta tha (naya password pehle, purana sabse neeche).
   Ab ek 520px ka column, sahi kram, aur har field par aankh ka button
   — password type karte waqt use dekh paana ab standard hai.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-pw-form {
    max-width: 520px !important;
    display: flex !important; flex-direction: column !important; gap: 16px !important;
}
html body .zc-content .zc-pw-field { position: relative !important; }
html body .zc-content .zc-pw-field input { padding-right: 42px !important; }
html body .zc-content .zc-pw-eye {
    position: absolute !important; right: 4px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important; height: 34px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: none !important; border: none !important; box-shadow: none !important;
    color: #93a09b !important; font-size: 16px !important; padding: 0 !important;
    border-radius: 7px !important; cursor: pointer !important;
}
html body .zc-content .zc-pw-eye:hover { color: #0a474c !important; background: #f2f6f5 !important; }

html body .zc-content .zc-pw-match { display: block !important; font-size: 12px !important; margin-top: 5px !important; }
html body .zc-content .zc-pw-match.is-ok  { color: #117a4a !important; }
html body .zc-content .zc-pw-match.is-bad { color: #b02a1c !important; }

html body .zc-content .zc-pw-note {
    display: flex !important; align-items: flex-start !important; gap: 7px !important;
    font-size: 12.5px !important; color: #8a938f !important; margin: 2px 0 0 !important; line-height: 1.5 !important;
}
html body .zc-content .zc-pw-note i { font-size: 15px !important; color: #b6c0bd !important; margin-top: 1px !important; }

/* card ka mint head flat system ke bahar tha */
html body .zc-content .zc-pw-card .zc-form-card__head {
    background: #fff !important;
    border-bottom: 1px solid #f1f4f4 !important;
    color: #1c1c1c !important;
}
html body .zc-content .zc-pw-card .zc-form-card__head span {
    color: #1c1c1c !important; font-size: 14.5px !important; font-weight: 600 !important;
}
/* container ka apna white bg card ke daayein 1500px ka khaali safed
   maidan chhod raha tha — do white surfaces ek doosre par */
html body .zc-content:has(.zc-pw-card) .dashboard-container__body {
    background: none !important; box-shadow: none !important;
    padding: 0 !important; border: none !important;
}
html body .zc-content .zc-pw-card { max-width: 620px !important; }


/* ══════════════════════════════════════════════════════════════════
   Developer Hub sandbox settle (2026-08-23)
   Photo se: teen steps 800px ke faasle par khade the aur table ke
   column bhi utne hi door — "Joined number" 122px par, "Window closes"
   1734px par. Padhne ke liye har baar poora page paar karna padta tha.
   Card poori chaudai ka rahega (app ka baaki hissa bhi aisa hai), par
   andar ka content apne natural naap par aa gaya hai. Guide ka mint
   band bhi hata — flat system me ek hi surface rehni chahiye.
   ══════════════════════════════════════════════════════════════════ */

/* quick guide: tinted band nahi, saada card */
html body .zc-content .zc-dev-guide {
    background: #fff !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    padding: 20px 22px !important;
}
html body .zc-content .zc-dev-guide h6 { font-size: 17px !important; }
html body .zc-content .zc-dev-guide__k { color: #93a09b !important; }

/* teen steps ab ek saath padhe jaate hain, alag alag kono me nahi */
html body .zc-content .zc-sbx-steps {
    grid-template-columns: repeat(3, minmax(0, 330px)) !important;
    gap: 34px !important;
}
@media (max-width: 1150px) { html body .zc-content .zc-sbx-steps { grid-template-columns: repeat(2, minmax(0,330px)) !important; } }
@media (max-width: 720px)  { html body .zc-content .zc-sbx-steps { grid-template-columns: 1fr !important; } }

/* tables: column apne content ke naap par, na ki page ke kono par */
html body .zc-content .zc-dev-card table {
    width: auto !important;
    min-width: 560px !important;
    max-width: 100% !important;
}
html body .zc-content .zc-dev-card table th,
html body .zc-content .zc-dev-card table td {
    white-space: nowrap !important;
    padding-right: 56px !important;
}
html body .zc-content .zc-dev-card table th:last-child,
html body .zc-content .zc-dev-card table td:last-child { padding-right: 12px !important; }
/* nowrap ke saath ek lambi webhook URL table ko card ke bahar le ja sakti
   hai — us soorat me scroll table ka ho, poore page ka nahi.
   `display:block` table par mat lagao: usse table parent ki poori chaudai
   le leti hai aur column phir se kono me chale jaate hain. Scroll uske
   wrapper ka kaam hai. */
html body .zc-content .zc-dev-card table { display: table !important; width: auto !important; }
html body .zc-content .zc-dev-card .zc-dev-scroll,
html body .zc-content .zc-dev-card .table-responsive { overflow-x: auto !important; }


/* ══════════════════════════════════════════════════════════════════
   Developer Hub — settle (2026-08-23)
   Teen cheezein kharab thi: (1) upar ek mint hero (#f1f9f4) — wahi
   "bada tinted block" jo baaki app se hata chuke hain; (2) event
   checkbox `auto-fit minmax(280px,1fr)` par the, to 2000px screen par
   chaaro poori chaudai me bikhar jaate the; (3) hook ka meta grid bhi
   waise hi faila hua tha — signing secret ek kinare, last delivery
   doosre kinare. Ab sab capped aur flat.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-dev-guide {
    background: #fff !important;
    border: 1px solid #ececec !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    padding: 18px 20px !important;
}
html body .zc-content .zc-dev-guide h6 { font-size: 15.5px !important; font-weight: 600 !important; margin: 5px 0 3px !important; }
html body .zc-content .zc-dev-guide__k { font-size: 10.5px !important; font-weight: 600 !important; color: #93a09b !important; }
html body .zc-content .zc-dev-guide p { font-size: 12.5px !important; color: #8a938f !important; }

/* checkbox row ko sane chaudai do */
html body .zc-content .zc-dev-events {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 860px !important;
}
html body .zc-content .zc-dev-row .form--control { max-width: 620px !important; flex: 1 1 380px !important; }

/* hook meta: teen column poori screen par mat phailao */
html body .zc-content .zc-dev-hook__meta {
    grid-template-columns: 300px minmax(0, 1fr) 240px !important;
    max-width: 1100px !important;
}

/* signature card */
html body .zc-content .zc-dev-hdrs { display: grid !important; gap: 8px !important; max-width: 860px !important; margin-bottom: 14px !important; }
html body .zc-content .zc-dev-hdrs > div {
    display: flex !important; align-items: baseline !important; gap: 12px !important; flex-wrap: wrap !important;
    padding: 7px 0 !important; border-bottom: 1px solid #f4f6f5 !important;
}
html body .zc-content .zc-dev-hdrs > div:last-child { border-bottom: none !important; }
html body .zc-content .zc-dev-hdrs code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 12px !important; background: #f2f5f4 !important; color: #0a474c !important;
    padding: 3px 8px !important; border-radius: 5px !important; flex: 0 0 auto !important;
}
html body .zc-content .zc-dev-hdrs span { font-size: 12.5px !important; color: #8a938f !important; }
html body .zc-content pre.zc-dev-pre {
    background: #12211f !important; color: #d7e4e0 !important;
    border-radius: 10px !important; padding: 16px 18px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 12.5px !important; line-height: 1.7 !important;
    max-width: 860px !important; overflow-x: auto !important; margin: 0 !important;
}
html body .zc-content pre.zc-dev-pre code { background: none !important; color: inherit !important; padding: 0 !important; font-size: inherit !important; }
html body .zc-content .zc-dev-foot { font-size: 12.5px !important; color: #8a938f !important; line-height: 1.6 !important; margin: 12px 0 0 !important; max-width: 860px !important; }

@media (max-width: 1400px) {
    html body .zc-content .zc-dev-hook__meta { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
}
@media (max-width: 900px) {
    html body .zc-content .zc-dev-events { grid-template-columns: minmax(0, 1fr) !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Developer Hub keys tab (2026-08-23)
   Table apne aap ko content jitni chaudai tak simet leti thi — 1460px
   ki screen par 600px ki table aur bagal me khaali maidan. Ab poori
   chaudai, Action column right kinare par. Neeche "Make your first
   call" card se page ka baaki hissa kaam ki cheez se bharta hai.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-dev-table { width: 100% !important; table-layout: auto !important; }
html body .zc-content .zc-dev-table th.ta-r,
html body .zc-content .zc-dev-table td.ta-r { text-align: right !important; }
html body .zc-content .zc-dev-table td.ta-r form { display: inline-block !important; }
html body .zc-content .zc-dev-table th:first-child,
html body .zc-content .zc-dev-table td:first-child { width: 26% !important; }
html body .zc-content .zc-dev-scroll { width: 100% !important; }

/* endpoint reference */
html body .zc-content .zc-dev-eps { margin-top: 18px !important; max-width: 860px !important; }
html body .zc-content .zc-dev-eps__h {
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important;
    text-transform: uppercase !important; color: #93a09b !important; margin-bottom: 8px !important;
}
html body .zc-content .zc-dev-eps > div:not(.zc-dev-eps__h) {
    display: flex !important; align-items: baseline !important; gap: 10px !important; flex-wrap: wrap !important;
    padding: 7px 0 !important; border-bottom: 1px solid #f4f6f5 !important;
}
html body .zc-content .zc-dev-eps > div:last-child { border-bottom: none !important; }
html body .zc-content .zc-dev-eps .m {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .04em !important;
    padding: 2px 7px !important; border-radius: 4px !important; flex: 0 0 auto !important;
    min-width: 44px !important; text-align: center !important;
}
html body .zc-content .zc-dev-eps .m.get { background: #e8f0fd !important; color: #2050b3 !important; }
html body .zc-content .zc-dev-eps .m.post { background: #e9f6ef !important; color: #0d7f52 !important; }
html body .zc-content .zc-dev-eps code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 12.5px !important; color: #1c1c1c !important; background: none !important; padding: 0 !important;
}
html body .zc-content .zc-dev-eps em {
    font-style: normal !important; font-size: 12.5px !important; color: #8a938f !important; margin-left: auto !important;
}
@media (max-width: 900px) {
    html body .zc-content .zc-dev-eps em { margin-left: 0 !important; flex-basis: 100% !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Webhooks tab settle (2026-08-23)
   Is tab par baaki sab kuch pehle hi band me tha (events 860, code
   860, meta 1100) — bas registered webhook ka top row chhoot gaya
   tha: 2386px chauda, `space-between` ke saath. Natija — URL bilkul
   baayein aur "Send test / Pause / Remove" bilkul daayein, beech me
   ~1750px khaali. Ab wahi 1100px ka band jo neeche meta strip ka hai.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-dev-hook__top {
    max-width: 1100px !important;
    align-items: flex-start !important;
}
html body .zc-content .zc-dev-hook__url { flex: 1 1 auto !important; }
html body .zc-content .zc-dev-hook__act { flex: 0 0 auto !important; }

/* Active/Paused chip: rang ke saath ek jeeta-jaagta dot — sirf shabd
   se pata nahi chalta ki hook abhi sun raha hai ya nahi */
html body .zc-content .zc-dev-chip {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .03em !important;
    padding: 3px 9px !important; border-radius: 5px !important;
}
html body .zc-content .zc-dev-chip::before {
    content: "" !important; width: 6px !important; height: 6px !important;
    border-radius: 50% !important; flex: none !important;
}
html body .zc-content .zc-dev-chip.on { background: #e6f4ea !important; color: #117a4a !important; }
html body .zc-content .zc-dev-chip.on::before { background: #17a06a !important; }
html body .zc-content .zc-dev-chip.off { background: #f3f5f5 !important; color: #6d7a76 !important; }
html body .zc-content .zc-dev-chip.off::before { background: #b6c0bd !important; }

/* aakhri delivery: "HTTP 500" plain laal text tha — hook ki sehat
   sabse zaroori jaankari hai is card par, use chip banao taaki ek
   nazar me pata chale kaunsa endpoint tut raha hai */
html body .zc-content .zc-dev-hook__meta .good,
html body .zc-content .zc-dev-hook__meta .bad {
    padding: 2px 8px !important; border-radius: 5px !important;
    font-size: 11.5px !important; font-weight: 600 !important;
}
html body .zc-content .zc-dev-hook__meta .good { background: #e6f4ea !important; color: #117a4a !important; }
html body .zc-content .zc-dev-hook__meta .bad  { background: #fdecea !important; color: #b02a1c !important; }

/* Remove ek wapas na hone wala kaam hai — wo baaki do jaisa nahi dikhna chahiye */
html body .zc-content .zc-dev-btn.danger {
    color: #b02a1c !important; border-color: #f0d6d2 !important;
}
html body .zc-content .zc-dev-btn.danger:hover {
    background: #fdf3f2 !important; border-color: #e4bdb7 !important; color: #932115 !important;
}

/* .zc-dev-card table par display:block mobile scroll
   ke liye tha, par block table ke andar columns spread hi nahi hote — 2386px
   ki table me sab kuch 950px me simat jaata tha aur bagal me maidan.
   Scroll ka kaam wrapper (.zc-dev-scroll) karta hai, table ko table rehne do. */
html body .zc-content .zc-dev-card table.zc-dev-table {
    display: table !important;
    width: 100% !important;
}
html body .zc-content .zc-dev-scroll { overflow-x: auto !important; }
@media (max-width: 767px) {
    html body .zc-content .zc-dev-card table.zc-dev-table { min-width: 640px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Request Log settle (2026-08-23)
   Sabse badi kami rang ki thi, layout ki nahi: chip ka rule
   `status < 300 ? on : off` tha, isliye 404, 422 aur 500 teeno ek
   jaise slate dikhte the — log me galti dhoondhna aankh ka kaam ban
   jaata tha. Ab 2xx hara, 4xx amber, 5xx laal. Saath me method ka
   apna chip (GET/POST ek nazar me), aur 300ms+ wale jawab highlight
   — API me dheemapan bhi ek bug hai.
   ══════════════════════════════════════════════════════════════════ */

/* status: har class apni kahani kehti hai */
html body .zc-content .zc-dev-chip.st-ok   { background: #e6f4ea !important; color: #117a4a !important; }
html body .zc-content .zc-dev-chip.st-ok::before   { background: #17a06a !important; }
html body .zc-content .zc-dev-chip.st-info { background: #eaf1fe !important; color: #2050b3 !important; }
html body .zc-content .zc-dev-chip.st-info::before { background: #2563eb !important; }
html body .zc-content .zc-dev-chip.st-warn { background: #fdf3e3 !important; color: #95611a !important; }
html body .zc-content .zc-dev-chip.st-warn::before { background: #c47f17 !important; }
html body .zc-content .zc-dev-chip.st-bad  { background: #fdecea !important; color: #b02a1c !important; }
html body .zc-content .zc-dev-chip.st-bad::before  { background: #d0392b !important; }

/* method chip: endpoint column ab do nazar me padh jaata hai */
html body .zc-content .zc-dev-m {
    display: inline-block !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .04em !important;
    padding: 2px 6px !important; border-radius: 4px !important; margin-right: 8px !important;
    min-width: 44px !important; text-align: center !important;
    background: #f1f4f4 !important; color: #6d7a76 !important;
}
html body .zc-content .zc-dev-m.m-get    { background: #eaf1fe !important; color: #2050b3 !important; }
html body .zc-content .zc-dev-m.m-post   { background: #e9f6ef !important; color: #0f7a4e !important; }
html body .zc-content .zc-dev-m.m-put,
html body .zc-content .zc-dev-m.m-patch  { background: #fdf3e3 !important; color: #95611a !important; }
html body .zc-content .zc-dev-m.m-delete { background: #fdecea !important; color: #b02a1c !important; }

/* dheema jawab bhi ek nishani hai */
html body .zc-content .zc-dev-ms { font-variant-numeric: tabular-nums !important; }
html body .zc-content .zc-dev-ms.is-slow { color: #95611a !important; font-weight: 600 !important; }
html body .zc-content .zc-dev-when { font-variant-numeric: tabular-nums !important; color: #6d7a76 !important; }

/* Ek log table poori chaudai le — wahi log-viewer ka tareeka hai. Par
   column ko naap do, warna paanch column barabar bant jaate hain aur
   "When" akela 690px le leta hai. `width:1%` + nowrap = column apne
   content jitna; bachi hui jagah Endpoint ko milti hai, jo sabse
   zaroori aur sabse lambi cheez hai. */
html body .zc-content .zc-dev-table th:nth-child(1),
html body .zc-content .zc-dev-table td:nth-child(1),
html body .zc-content .zc-dev-table th:nth-child(3),
html body .zc-content .zc-dev-table td:nth-child(3),
html body .zc-content .zc-dev-table th:nth-child(4),
html body .zc-content .zc-dev-table td:nth-child(4),
html body .zc-content .zc-dev-table th:nth-child(5),
html body .zc-content .zc-dev-table td:nth-child(5) {
    width: 1% !important; white-space: nowrap !important;
}
html body .zc-content .zc-dev-table th:nth-child(2),
html body .zc-content .zc-dev-table td:nth-child(2) { width: auto !important; }
html body .zc-content .zc-dev-table th,
html body .zc-content .zc-dev-table td { padding-right: 34px !important; }
html body .zc-content .zc-dev-table th:last-child,
html body .zc-content .zc-dev-table td:last-child { padding-right: 12px !important; }
html body .zc-content .zc-dev-scroll { overflow-x: auto !important; }
html body .zc-content .zc-dev-table tbody tr:hover td { background: #fafbfb !important; }


/* ══════════════════════════════════════════════════════════════════
   App Store shelves (2026-08-24)
   22 se 33 apps ho gaye — ek flat grid me itna kuch dhoondhna mushkil
   hai. Ab category shelves aur ek client-side search (sab kuch page par
   hai hi, request bhejne ki zaroorat nahi). Card ka design waise ka
   waisa; sirf sar par ek patli baar aur beech me headings.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-int-bar {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 14px !important; flex-wrap: wrap !important; margin-bottom: 18px !important;
}
html body .zc-content .zc-int-search { position: relative !important; flex: 1 1 320px !important; max-width: 420px !important; }
html body .zc-content .zc-int-search i {
    position: absolute !important; left: 13px !important; top: 50% !important; transform: translateY(-50%) !important;
    color: #98a2a0 !important; font-size: 15px !important; pointer-events: none !important;
}
html body .zc-content .zc-int-search input {
    width: 100% !important; height: 40px !important;
    padding: 0 14px 0 36px !important;
    background: #fff !important; border: 1px solid #ececec !important; border-radius: 8px !important;
    font-size: 13.5px !important; color: #1c1c1c !important; outline: none !important;
}
html body .zc-content .zc-int-search input:focus { border-color: #0a474c !important; }
html body .zc-content .zc-int-count { font-size: 12.5px !important; color: #8a938f !important; }
html body .zc-content .zc-int-count b { color: #1c1c1c !important; font-weight: 600 !important; }

html body .zc-content .zc-int-shelf { margin-bottom: 26px !important; }
html body .zc-content .zc-int-shelf__h {
    display: flex !important; align-items: baseline !important; gap: 8px !important;
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important;
    text-transform: uppercase !important; color: #93a09b !important; margin: 0 0 12px !important;
}
html body .zc-content .zc-int-shelf__h em {
    font-style: normal !important; font-size: 11px !important; font-weight: 500 !important;
    color: #b6c0bd !important; letter-spacing: 0 !important;
}
html body .zc-content .zc-int-card[hidden],
html body .zc-content .zc-int-shelf[hidden] { display: none !important; }

html body .zc-content .zc-int-none {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    gap: 5px !important; padding: 44px 20px !important; text-align: center !important;
    background: #fff !important; border-radius: 10px !important; box-shadow: 0 0 11px #e9e9e9 !important;
    margin-bottom: 22px !important;
}
html body .zc-content .zc-int-none i { font-size: 24px !important; color: #b6c0bd !important; }
html body .zc-content .zc-int-none strong { font-size: 14.5px !important; font-weight: 600 !important; color: #1c1c1c !important; }
html body .zc-content .zc-int-none span { font-size: 12.5px !important; color: #8a938f !important; }
html body .zc-content .zc-int-none a {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    margin-top: 8px !important; font-size: 12.5px !important; font-weight: 500 !important;
    color: #0a474c !important; text-decoration: none !important;
}
html body .zc-content .zc-int-none a:hover { text-decoration: underline !important; }

/* display:flex !important hidden attribute ko haraa deta tha, isliye
   'No app matches that' hamesha dikhta rehta tha. */
html body .zc-content .zc-int-none[hidden] { display: none !important; }


/* ══════════════════════════════════════════════════════════════════
   Contacts & Campaigns settings (2026-08-24)
   Wahi do-column settings dhaancha jo My Profile aur 2FA par hai —
   left me labelled groups, right me live status rail.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-cc .dashboard-container__body {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 16px !important; align-items: start !important;
    background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}
html body .zc-content .zc-cc-main {
    background: #fff !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; overflow: visible !important;
}
html body .zc-content .zc-cc-group {
    display: grid !important; grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 24px !important; padding: 20px !important; border-bottom: 1px solid #f2f4f4 !important;
}
html body .zc-content .zc-cc-group:last-child { border-bottom: none !important; }
html body .zc-content .zc-cc-group__h span {
    display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-cc-group__h em {
    display: block !important; font-style: normal !important; font-size: 12px !important;
    color: #98a2a0 !important; line-height: 1.55 !important; margin-top: 3px !important;
}
html body .zc-content .zc-cc-narrow { max-width: 220px !important; margin-bottom: 0 !important; }
html body .zc-content .zc-cc-narrow .input-group-text {
    background: #f4f6f6 !important; border: 1px solid #ececec !important; color: #4a5350 !important; font-weight: 600 !important;
}
html body .zc-content .zc-cc-times { display: flex !important; gap: 14px !important; margin-top: 14px !important; flex-wrap: wrap !important; }
html body .zc-content .zc-cc-times .form-group { max-width: 160px !important; margin-bottom: 0 !important; }
html body .zc-content .zc-cc-note {
    display: flex !important; gap: 8px !important; align-items: flex-start !important;
    font-size: 12.5px !important; color: #8a938f !important; line-height: 1.6 !important;
    margin: 14px 0 0 !important; max-width: 560px !important;
}
html body .zc-content .zc-cc-note i { color: #b9a15c !important; font-size: 15px !important; flex-shrink: 0 !important; margin-top: 1px !important; }

/* switch */
html body .zc-content .zc-cc-switch { display: inline-flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; margin: 0 !important; }
html body .zc-content .zc-cc-switch input { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }
html body .zc-content .zc-cc-sw {
    width: 40px !important; height: 22px !important; border-radius: 999px !important;
    background: #d8dedc !important; position: relative !important; transition: background .15s ease !important; flex-shrink: 0 !important;
}
html body .zc-content .zc-cc-sw::after {
    content: "" !important; position: absolute !important; top: 3px !important; left: 3px !important;
    width: 16px !important; height: 16px !important; border-radius: 50% !important;
    background: #fff !important; transition: transform .15s ease !important;
}
html body .zc-content .zc-cc-switch input:checked + .zc-cc-sw { background: #17a06a !important; }
html body .zc-content .zc-cc-switch input:checked + .zc-cc-sw::after { transform: translateX(18px) !important; }
html body .zc-content .zc-cc-switch b { font-size: 13px !important; font-weight: 500 !important; color: #1c1c1c !important; }

html body .zc-content button.zc-cc-btn.primary {
    background: #0a474c !important; color: #fff !important; border: none !important;
    border-radius: 8px !important; padding: 9px 18px !important;
    font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important;
}
html body .zc-content button.zc-cc-btn.primary:hover { background: #083a3e !important; }

html body .zc-content .zc-cc-side { display: flex !important; flex-direction: column !important; gap: 14px !important; position: sticky !important; top: 16px !important; }
html body .zc-content .zc-cc-card { background: #fff !important; border-radius: 10px !important; box-shadow: 0 0 11px #e9e9e9 !important; padding: 16px 18px !important; }
html body .zc-content .zc-cc-card__h {
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important;
    text-transform: uppercase !important; color: #93a09b !important; margin-bottom: 10px !important;
}
html body .zc-content .zc-cc-rows > div {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important;
    gap: 10px !important; padding: 7px 0 !important; border-bottom: 1px solid #f4f6f5 !important; font-size: 13px !important;
}
html body .zc-content .zc-cc-rows > div:last-child { border-bottom: none !important; }
html body .zc-content .zc-cc-rows span { color: #8a938f !important; }
html body .zc-content .zc-cc-rows b { font-weight: 600 !important; color: #1c1c1c !important; font-variant-numeric: tabular-nums !important; }
html body .zc-content .zc-cc-state { display: flex !important; gap: 10px !important; align-items: flex-start !important; }
html body .zc-content .zc-cc-state i { font-size: 19px !important; flex-shrink: 0 !important; }
html body .zc-content .zc-cc-state.on i { color: #17a06a !important; }
html body .zc-content .zc-cc-state.off i { color: #b9a15c !important; }
html body .zc-content .zc-cc-state strong { display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1c1c1c !important; }
html body .zc-content .zc-cc-state span { display: block !important; font-size: 12.5px !important; color: #8a938f !important; line-height: 1.55 !important; margin-top: 2px !important; }
html body .zc-content .zc-cc-card .zc-cc-link {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 8px 0 !important; border-bottom: 1px solid #f4f6f5 !important;
    font-size: 13px !important; color: #0a474c !important; text-decoration: none !important;
}
html body .zc-content .zc-cc-card .zc-cc-link:last-child { border-bottom: none !important; }
html body .zc-content .zc-cc-card .zc-cc-link:hover { text-decoration: underline !important; }

@media (max-width: 1400px) {
    html body .zc-content .zc-cc-group { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 1199px) {
    html body .zc-content .zc-cc .dashboard-container__body { grid-template-columns: minmax(0, 1fr) !important; }
    html body .zc-content .zc-cc-side { position: static !important; }
}


/* ══════════════════════════════════════════════════════════════════
   WhatsApp Status ads (2026-08-24)
   Ad ab do jagah chal sakta hai, isliye create form par pehla sawaal
   hi yehi hai. Do bade radio cards — chunav saaf dikhe, guess na karna
   pade. Flat, koi hover-lift nahi.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content .zc-adc-place {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
html body .zc-content .zc-adc-place label {
    position: relative !important; display: block !important; cursor: pointer !important;
    padding: 14px 16px 14px 44px !important; margin: 0 !important;
    background: #fff !important; border: 1px solid #ececec !important; border-radius: 10px !important;
}
html body .zc-content .zc-adc-place label.on { border-color: #0a474c !important; background: #f4f9f8 !important; }
html body .zc-content .zc-adc-place input {
    position: absolute !important; left: 16px !important; top: 17px !important;
    width: 16px !important; height: 16px !important; accent-color: #0a474c !important; margin: 0 !important;
}
html body .zc-content .zc-adc-place i {
    position: absolute !important; right: 14px !important; top: 13px !important;
    font-size: 19px !important; color: #b6c0bd !important;
}
html body .zc-content .zc-adc-place label.on i { color: #0a474c !important; }
html body .zc-content .zc-adc-place b {
    display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-adc-place span {
    display: block !important; font-size: 12.5px !important; color: #8a938f !important;
    line-height: 1.55 !important; margin-top: 3px !important;
}
html body .zc-content .zc-adc-tag {
    display: inline-block !important; margin-left: 7px !important;
    font-size: 10px !important; font-weight: 700 !important; letter-spacing: .05em !important;
    text-transform: uppercase !important; padding: 2px 7px !important; border-radius: 4px !important;
    background: #e8f0fd !important; color: #2050b3 !important; vertical-align: middle !important;
}
@media (max-width: 900px) {
    html body .zc-content .zc-adc-place { grid-template-columns: minmax(0, 1fr) !important; }
}


/* ==================================================================
   Premium module pages - shared shell (2026-08-25)
   Naye modules wahi do-column dhaancha use karte hain jo My Profile /
   2FA / Webhook par settle ho chuka hai: left labelled groups, right
   status rail. Prefix alag hain taaki har module apna tweak kar sake.
   ================================================================== */
html body .zc-content .zc-tr .dashboard-container__body,
html body .zc-content .zc-cp .dashboard-container__body,
html body .zc-content .zc-cs .dashboard-container__body {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 16px !important; align-items: start !important;
    background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}
html body .zc-content .zc-tr-main, html body .zc-content .zc-cp-main, html body .zc-content .zc-cs-main {
    background: #fff !important; border-radius: 10px !important; box-shadow: 0 0 11px #e9e9e9 !important;
}
html body .zc-content .zc-tr-group, html body .zc-content .zc-cp-group, html body .zc-content .zc-cs-group {
    display: grid !important; grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 24px !important; padding: 20px !important; border-bottom: 1px solid #f2f4f4 !important;
}
html body .zc-content .zc-tr-group:last-child, html body .zc-content .zc-cp-group:last-child,
html body .zc-content .zc-cs-group:last-child { border-bottom: none !important; }
html body .zc-content .zc-tr-group__h span, html body .zc-content .zc-cp-group__h span,
html body .zc-content .zc-cs-group__h span {
    display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1c1c1c !important;
}
html body .zc-content .zc-tr-group__h em, html body .zc-content .zc-cp-group__h em,
html body .zc-content .zc-cs-group__h em {
    display: block !important; font-style: normal !important; font-size: 12px !important;
    color: #98a2a0 !important; line-height: 1.55 !important; margin-top: 3px !important;
}
html body .zc-content .zc-tr-state, html body .zc-content .zc-cp-state, html body .zc-content .zc-cs-state {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 5px 12px !important; border-radius: 6px !important; margin-right: 10px !important;
    font-size: 12px !important; font-weight: 600 !important;
}
html body .zc-content .zc-tr-state.on, html body .zc-content .zc-cp-state.on,
html body .zc-content .zc-cs-state.on { background: #e9f6ef !important; color: #17a06a !important; }
html body .zc-content .zc-tr-state.off, html body .zc-content .zc-cp-state.off,
html body .zc-content .zc-cs-state.off { background: #fdf3e2 !important; color: #9c6a0d !important; }
html body .zc-content button.zc-tr-btn, html body .zc-content button.zc-cp-btn, html body .zc-content button.zc-cs-btn {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    background: #fff !important; color: #0a474c !important; border: 1px solid #ececec !important;
    border-radius: 8px !important; padding: 9px 16px !important;
    font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important;
}
html body .zc-content button.zc-tr-btn.primary, html body .zc-content button.zc-cp-btn.primary,
html body .zc-content button.zc-cs-btn.primary { background: #0a474c !important; color: #fff !important; border: none !important; }
html body .zc-content button.zc-tr-btn.primary:hover, html body .zc-content button.zc-cp-btn.primary:hover,
html body .zc-content button.zc-cs-btn.primary:hover { background: #083a3e !important; }
html body .zc-content button.zc-tr-btn:disabled, html body .zc-content button.zc-cp-btn:disabled,
html body .zc-content button.zc-cs-btn:disabled { opacity: .6 !important; }

html body .zc-content .zc-tr-switch { display: flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; margin: 0 !important; }
html body .zc-content .zc-tr-switch input { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }
html body .zc-content .zc-tr-sw { width: 40px !important; height: 22px !important; border-radius: 999px !important; background: #d8dedc !important; position: relative !important; flex-shrink: 0 !important; transition: background .15s ease !important; }
html body .zc-content .zc-tr-sw::after { content: "" !important; position: absolute !important; top: 3px !important; left: 3px !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #fff !important; transition: transform .15s ease !important; }
html body .zc-content .zc-tr-switch input:checked + .zc-tr-sw { background: #17a06a !important; }
html body .zc-content .zc-tr-switch input:checked + .zc-tr-sw::after { transform: translateX(18px) !important; }
html body .zc-content .zc-tr-switch b { font-size: 13px !important; font-weight: 500 !important; color: #1c1c1c !important; }

html body .zc-content .zc-tr-out {
    margin-top: 12px !important; padding: 12px 14px !important;
    background: #f4f9f8 !important; border: 1px solid #e2ecea !important; border-radius: 8px !important;
    font-size: 13.5px !important; color: #1c1c1c !important; line-height: 1.6 !important;
}
html body .zc-content .zc-tr-out.bad { background: #fdf2f2 !important; border-color: #f5d9d9 !important; color: #b3261e !important; }
html body .zc-content .zc-tr-out[hidden] { display: none !important; }

html body .zc-content .zc-tr-side, html body .zc-content .zc-cp-side, html body .zc-content .zc-cs-side {
    display: flex !important; flex-direction: column !important; gap: 14px !important;
    position: sticky !important; top: 16px !important;
}
html body .zc-content .zc-tr-card, html body .zc-content .zc-cp-card, html body .zc-content .zc-cs-card {
    background: #fff !important; border-radius: 10px !important; box-shadow: 0 0 11px #e9e9e9 !important; padding: 16px 18px !important;
}
html body .zc-content .zc-tr-card__h, html body .zc-content .zc-cp-card__h, html body .zc-content .zc-cs-card__h {
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important;
    text-transform: uppercase !important; color: #93a09b !important; margin-bottom: 10px !important;
}
html body .zc-content .zc-tr-rows > div, html body .zc-content .zc-cp-rows > div, html body .zc-content .zc-cs-rows > div {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important;
    gap: 10px !important; padding: 7px 0 !important; border-bottom: 1px solid #f4f6f5 !important; font-size: 13px !important;
}
html body .zc-content .zc-tr-rows > div:last-child, html body .zc-content .zc-cp-rows > div:last-child,
html body .zc-content .zc-cs-rows > div:last-child { border-bottom: none !important; }
html body .zc-content .zc-tr-rows span, html body .zc-content .zc-cp-rows span, html body .zc-content .zc-cs-rows span { color: #8a938f !important; }
html body .zc-content .zc-tr-rows b, html body .zc-content .zc-cp-rows b, html body .zc-content .zc-cs-rows b { font-weight: 500 !important; color: #1c1c1c !important; }
html body .zc-content .zc-tr-list, html body .zc-content .zc-cp-list, html body .zc-content .zc-cs-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body .zc-content .zc-tr-list li, html body .zc-content .zc-cp-list li, html body .zc-content .zc-cs-list li {
    display: flex !important; gap: 9px !important; align-items: flex-start !important;
    padding: 7px 0 !important; font-size: 12.5px !important; color: #4a5350 !important; line-height: 1.55 !important;
}
html body .zc-content .zc-tr-list li i, html body .zc-content .zc-cp-list li i, html body .zc-content .zc-cs-list li i {
    color: #0a474c !important; font-size: 15px !important; flex-shrink: 0 !important; margin-top: 1px !important;
}
html body .zc-content .zc-tr-note, html body .zc-content .zc-cp-note, html body .zc-content .zc-cs-note {
    font-size: 12.5px !important; color: #8a938f !important; line-height: 1.6 !important; margin: 10px 0 0 !important;
}

@media (max-width: 1400px) {
    html body .zc-content .zc-tr-group, html body .zc-content .zc-cp-group, html body .zc-content .zc-cs-group {
        grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important;
    }
}
@media (max-width: 1199px) {
    html body .zc-content .zc-tr .dashboard-container__body,
    html body .zc-content .zc-cp .dashboard-container__body,
    html body .zc-content .zc-cs .dashboard-container__body { grid-template-columns: minmax(0, 1fr) !important; }
    html body .zc-content .zc-tr-side, html body .zc-content .zc-cp-side, html body .zc-content .zc-cs-side { position: static !important; }
}

/* Copilot ke suggestion cards + translator ka try-box chaudai cap */
html body .zc-content .zc-tr-group__b textarea { max-width: 620px !important; }
html body .zc-content .zc-cp-out { display: flex !important; flex-direction: column !important; gap: 10px !important; max-width: 720px !important; }
html body .zc-content .zc-cp-sugg {
    position: relative !important; display: block !important;
    padding: 14px 16px 14px 42px !important;
    background: #f8faf9 !important; border: 1px solid #ececec !important; border-radius: 10px !important;
}
html body .zc-content .zc-cp-sugg p { margin: 0 !important; font-size: 13.5px !important; color: #1c1c1c !important; line-height: 1.6 !important; }
html body .zc-content .zc-cp-num {
    position: absolute !important; left: 14px !important; top: 14px !important;
    width: 20px !important; height: 20px !important; border-radius: 50% !important;
    background: #e6f0ef !important; color: #0a474c !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 11px !important; font-weight: 700 !important;
}
html body .zc-content button.zc-cp-copy {
    margin-top: 10px !important; background: #fff !important; color: #0a474c !important;
    border: 1px solid #ececec !important; border-radius: 6px !important;
    padding: 5px 12px !important; font-size: 12px !important; font-weight: 500 !important;
}
html body .zc-content .zc-cp-bad {
    padding: 12px 14px !important; background: #fdf2f2 !important; border: 1px solid #f5d9d9 !important;
    border-radius: 8px !important; font-size: 13px !important; color: #b3261e !important;
}

/* Copy Studio ke format cards aur options */
html body .zc-content .zc-cs-formats { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; max-width: 720px !important; }
html body .zc-content .zc-cs-formats label {
    position: relative !important; display: block !important; cursor: pointer !important; margin: 0 !important;
    padding: 12px 14px 12px 38px !important;
    background: #fff !important; border: 1px solid #ececec !important; border-radius: 10px !important;
}
html body .zc-content .zc-cs-formats label.on { border-color: #0a474c !important; background: #f4f9f8 !important; }
html body .zc-content .zc-cs-formats input { position: absolute !important; left: 14px !important; top: 15px !important; accent-color: #0a474c !important; margin: 0 !important; }
html body .zc-content .zc-cs-formats b { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: #1c1c1c !important; }
html body .zc-content .zc-cs-formats span { display: block !important; font-size: 12px !important; color: #98a2a0 !important; margin-top: 2px !important; line-height: 1.5 !important; }
html body .zc-content .zc-cs-group__b textarea { max-width: 720px !important; }
html body .zc-content .zc-cs-opts { display: flex !important; gap: 14px !important; margin-top: 14px !important; flex-wrap: wrap !important; }
html body .zc-content .zc-cs-opts .form-group { max-width: 200px !important; margin-bottom: 0 !important; }
@media (max-width: 900px) { html body .zc-content .zc-cs-formats { grid-template-columns: minmax(0,1fr) !important; } }


/* ══════════════════════════════════════════════════════════════════
   Notification bell (2026-08-25)
   notification_logs pehle se bhar raha tha (template approved, ticket
   reply, plan expiry) par panel me kahin dikhta nahi tha — sirf email
   jaati thi. Bell rail ke footer me, avatar ke upar. App me koi topbar
   hai hi nahi, isliye rail hi ek jagah hai jo har page par rehti hai.
   ══════════════════════════════════════════════════════════════════ */
html body #zcSidebar .zc-bell { position: relative; width: 100%; }
html body #zcSidebar .zc-bell__btn {
    width: 100%; background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0; color: #fbfbfb; position: relative;
}
html body #zcSidebar .zc-bell__btn i { font-size: 20px; line-height: 1; }
html body #zcSidebar .zc-bell__btn em {
    position: absolute; top: 3px; right: 14px; font-style: normal;
    background: #e53935; color: #fff; font-size: 9.5px; font-weight: 700;
    line-height: 1; padding: 3px 5px; border-radius: 9px; min-width: 16px; text-align: center;
}
html body #zcSidebar .zc-bell__btn:hover i { color: #fff; }

html body .zc-bell__panel {
    position: absolute; left: calc(100% + 8px); bottom: 0; z-index: 1200;
    width: 330px; background: #fff; border-radius: 10px;
    box-shadow: 0 10px 34px rgba(15,31,27,.16); overflow: hidden;
}
html body .zc-bell__panel[hidden] { display: none !important; }
html body .zc-bell__h {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid #f2f4f4;
}
html body .zc-bell__h strong { font-size: 14px; font-weight: 600; color: #1c1c1c; }
html body .zc-bell__h button {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 12px; font-weight: 500; color: #0a474c;
}
html body .zc-bell__h button:hover { text-decoration: underline; }

html body .zc-bell__list { max-height: 340px; overflow-y: auto; }
html body .zc-bell__row { margin: 0; }
html body .zc-bell__row button {
    width: 100%; background: none; border: none; cursor: pointer; text-align: left;
    display: flex; gap: 9px; align-items: flex-start;
    padding: 11px 16px; border-bottom: 1px solid #f6f8f8;
}
html body .zc-bell__row button:hover { background: #fafbfb; }
html body .zc-bell__dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    margin-top: 5px; background: transparent;
}
html body .zc-bell__row.is-new .zc-bell__dot { background: #17a06a; }
html body .zc-bell__t { min-width: 0; display: block; }
html body .zc-bell__t b { display: block; font-size: 13px; font-weight: 500; color: #1c1c1c; line-height: 1.4; }
html body .zc-bell__row.is-new .zc-bell__t b { font-weight: 600; }
html body .zc-bell__t span { display: block; font-size: 12px; color: #8a938f; line-height: 1.45; margin-top: 2px; }
html body .zc-bell__t em { display: block; font-style: normal; font-size: 11px; color: #a8b2af; margin-top: 3px; }

html body .zc-bell__empty {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 26px 20px; text-align: center;
}
html body .zc-bell__empty i { font-size: 20px; color: #b6c0bd; }
html body .zc-bell__empty span { font-size: 12.5px; color: #8a938f; line-height: 1.5; }
html body .zc-bell__all {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 11px; font-size: 12.5px; font-weight: 500;
    color: #0a474c; text-decoration: none; border-top: 1px solid #f2f4f4;
}
html body .zc-bell__all:hover { background: #fafbfb; text-decoration: none; }

/* full page */
html body .zc-content .zc-ntf-list { background: #fff; border-radius: 10px; box-shadow: 0 0 11px #e9e9e9; overflow: hidden; }
html body .zc-content .zc-ntf-row {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 15px 20px; border-bottom: 1px solid #f4f6f5;
}
html body .zc-content .zc-ntf-row:last-child { border-bottom: none; }
html body .zc-content .zc-ntf-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex-shrink: 0; margin-top: 6px; }
html body .zc-content .zc-ntf-row.is-new .zc-ntf-dot { background: #17a06a; }
html body .zc-content .zc-ntf-body { flex: 1; min-width: 0; }
html body .zc-content .zc-ntf-body b { display: block; font-size: 14px; font-weight: 500; color: #1c1c1c; }
html body .zc-content .zc-ntf-row.is-new .zc-ntf-body b { font-weight: 600; }
html body .zc-content .zc-ntf-body p { font-size: 12.5px; color: #8a938f; line-height: 1.6; margin: 3px 0 0; }
html body .zc-content .zc-ntf-body em { display: block; font-style: normal; font-size: 11.5px; color: #a8b2af; margin-top: 5px; }
html body .zc-content button.zc-ntf-mark {
    background: #fff; border: 1px solid #ececec; border-radius: 7px;
    padding: 5px 11px; font-size: 12px; color: #4a5350; cursor: pointer; flex-shrink: 0;
}
html body .zc-content button.zc-ntf-mark:hover { border-color: #0a474c; color: #0a474c; }
html body .zc-content button.zc-ntf-btn {
    background: #0a474c; color: #fff; border: none; border-radius: 8px;
    padding: 9px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
}
html body .zc-content button.zc-ntf-btn:hover { background: #083a3e; }
html body .zc-content .zc-ntf-pager { margin-top: 14px; }

@media (max-width: 991px) {
    html body .zc-bell__panel { left: 8px; right: 8px; bottom: 64px; width: auto; }
}


/* ── Bell: escape the rail, aur mobile par pahunch me raho (2026-08-25) ──
   #zcSidebar par overflow:hidden hai (rail scroll ke liye), isliye absolute
   panel rail ke 70px ke bahar nikalte hi kat jaata tha — khulta tha par
   dikhta nahi tha. position:fixed overflow se bahar nikal jaata hai.
   Aur ≤991px par rail poori hidden hai, to bell wahan se pahunch me hi nahi
   tha — mobile par use content ke upar-daayen fix kar diya. */
html body .zc-bell__panel {
    position: fixed !important;
    left: 78px !important;
    bottom: 14px !important;
    top: auto !important;
    max-height: min(430px, calc(100dvh - 28px)) !important;
    display: flex !important;
    flex-direction: column !important;
}
html body .zc-bell__panel[hidden] { display: none !important; }
html body .zc-bell__list { flex: 1 1 auto !important; min-height: 0 !important; }

@media (max-width: 991px) {
    /* rail hidden hai — bell ko khud content ke upar le aao */
    html body .zc-bell {
        position: fixed !important;
        top: 10px !important; right: 12px !important;
        left: auto !important; width: auto !important;
        z-index: 1075 !important;
    }
    html body #zcSidebar .zc-bell__btn {
        width: 40px !important; height: 40px !important; padding: 0 !important;
        background: #fff !important; border-radius: 50% !important;
        box-shadow: 0 1px 3px rgba(15,31,27,.14) !important;
        color: #0a474c !important; justify-content: center !important;
    }
    html body #zcSidebar .zc-bell__btn em { top: -2px !important; right: -2px !important; border: 2px solid #fff !important; }
    html body .zc-bell__panel {
        left: 12px !important; right: 12px !important;
        top: 58px !important; bottom: auto !important;
        width: auto !important;
        max-height: calc(100dvh - 140px) !important;
    }
}


/* =======================================================================
   HERO PROOF + STATS BAR (2026-08-25)
   Aditya: "reviews wala proper nahi dikh raha, aur stats grey hai -- black karo."

   Dono ki ek hi jad thi: custom.css ka `body:not(.dashboard) span` wala
   blanket grey !important. Usse avatar ke initials dark circle par dark
   grey ho gaye the (padhe hi nahi jaate the), stars sone ke bajaye grey,
   aur stats ke odometer digits grey. Wo rule ab scope ho gaya hai; yahan
   dono blocks ko premium bhi kar diya.
   ===================================================================== */

/* ── hero: avatar stack ── */
html body .zh-meta-proof { gap: 12px !important; align-items: center !important; }

html body .zh-meta-proof .zh-avatars { align-items: center !important; }

html body .zh-meta-proof .zh-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    /* safed ring se overlap saaf padhta hai -- warna circles chipke lagte hain */
    box-shadow: 0 0 0 2px #ffffff,
                0 2px 6px -2px rgba(15,46,43,.35) !important;
    /* -9px par do-akshar wale initials padosi circle ke neeche dab jaate the
       (32px circle + 2px ring me letter kinare se ~8.5px andar shuru hota hai) */
    margin-left: -5px !important;
}
html body .zh-meta-proof .zh-avatar:first-child { margin-left: 0 !important; }

/* rang brand-family me -- pehle random bhoore/neele the */
html body .zh-meta-proof .zh-avatar:nth-child(1) { background: #0F2E2B !important; }
html body .zh-meta-proof .zh-avatar:nth-child(2) { background: #1B5E52 !important; }
html body .zh-meta-proof .zh-avatar:nth-child(3) { background: #2E7D6B !important; }
html body .zh-meta-proof .zh-avatar:nth-child(4) {
    background: #E8F3F0 !important;
    color: #0F2E2B !important;
    -webkit-text-fill-color: #0F2E2B !important;
}

/* ── hero: rating ── */
html body .zh-meta-proof .zh-rating {
    gap: 7px !important;
    align-items: center !important;
    color: #0F2E2B !important;
}
html body .zh-meta-proof .zh-stars {
    color: #F5B40A !important;
    -webkit-text-fill-color: #F5B40A !important;
    font-size: 12.5px !important;
    letter-spacing: 1.5px !important;
}
html body .zh-meta-proof .zh-rating > strong,
html body .zh-meta-proof .zh-rating > span:not(.zh-stars) {
    color: #0F2E2B !important;
    -webkit-text-fill-color: #0F2E2B !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* ── stats bar: numbers black, labels shaant ── */
html body .custom-stats .custom-stat-num,
html body .custom-stats .custom-stat-num span {
    color: #0F2E2B !important;
    -webkit-text-fill-color: #0F2E2B !important;
}
html body .custom-stats .custom-stat-num {
    font-size: 40px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1.05 !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}
html body .custom-stats .custom-stat-label {
    color: rgba(15,46,43,.62) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .03em !important;
}

/* icon ka chowkor: flat brand, ek hi accent */
html body .custom-stats .custom-stat-num i {
    background: #0F2E2B !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px -10px rgba(15,46,43,.6) !important;
}

/* teeno ke beech baal-jaisi lakeer -- bar ko "designed" banati hai */
html body .custom-stats .custom-stats-inner .custom-stat-item + .custom-stat-item {
    border-left: 1px solid rgba(15,46,43,.10) !important;
}
@media (max-width: 767.98px) {
    html body .custom-stats .custom-stats-inner .custom-stat-item + .custom-stat-item {
        border-left: none !important;
        border-top: 1px solid rgba(15,46,43,.10) !important;
    }
    html body .custom-stats .custom-stat-num { font-size: 32px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Submit buttons: flat, app-wide (2026-08-25)
   custom-redesign.css:2594 har `.zc-content button[type=submit]` par
   teen cheezein thopta tha — `linear-gradient(135deg,#0a474c,#0d5c62)`,
   rangeen drop-shadow `0 4px 14px rgba(10,71,76,.35)`, aur hover par
   `translateY(-1px)` + aur bada shadow. Yaani har form ka Save button
   uchhalta tha. Flat system me primary hamesha SAADA #0a474c hota hai
   aur hover par sirf rang gehra hota hai — kuch hilta nahi.
   Ye file-end block us purane rule ko jeet kar poore app par ek hi
   button-bhaasha rakhta hai.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-content button[type="submit"],
html body .zc-content input[type="submit"] {
    background: #0a474c !important;
    box-shadow: none !important;
    transition: background .15s ease !important;
}
html body .zc-content button[type="submit"]:hover,
html body .zc-content input[type="submit"]:hover {
    background: #083a3e !important;
    box-shadow: none !important;
    transform: none !important;
}
html body .zc-content button[type="submit"]:active,
html body .zc-content input[type="submit"]:active { transform: none !important; }

/* Ghost/secondary submit apne rang me rehna chahiye — warna "Sync from
   Meta" jaisa halka action bhi primary jaisa dark ho jaata hai aur ek
   screen par do primary dikhte hain. */
html body .zc-content button[type="submit"].pm-btn-ghost,
html body .zc-content button[type="submit"].zc-fl2-btn:not(.primary),
html body .zc-content button[type="submit"].btn--white,
html body .zc-content button[type="submit"].zc-ct2-btn:not(.primary) {
    background: #fff !important;
    color: #4a5350 !important;
    border: 1px solid #ececec !important;
    box-shadow: none !important;
}
html body .zc-content button[type="submit"].pm-btn-ghost:hover,
html body .zc-content button[type="submit"].zc-fl2-btn:not(.primary):hover,
html body .zc-content button[type="submit"].btn--white:hover,
html body .zc-content button[type="submit"].zc-ct2-btn:not(.primary):hover {
    background: #f7faf9 !important;
    color: #1c1c1c !important;
    border-color: #dfe6e4 !important;
}
html body .zc-content button[type="submit"].pm-btn-ghost i { color: inherit !important; }

/* WhatsApp Flows: KPI strip ke andar har stat apna box bana raha tha
   (kisi purane border rule se) — strip ek hi card honi chahiye. */
html body .zc-content .pm-kpis .pm-kpi {
    border-top: 0 !important; border-bottom: 0 !important; border-left: 0 !important;
    border-right: 1px solid #eef1f1 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .zc-content .pm-kpis .pm-kpi:last-child { border-right: 0 !important; }


/* ===============================================================
   Premium module cards: flat  (2026-08-25)

   19 premium pages ek hi inline <style> template copy-paste karte hain
   (.zc-h / .zc-hi / .zc-pill / .zc-pri / .zc-grid / .zc-card / .zc-g).
   Wo template violet tha (#7c3aed, #ddd6fe, rgba(124,58,237,.4) glow)
   aur usme hover-lift bhi tha - dono is app ke flat system ke khilaf.

   Blades chhede bina yahan se theek ho jaata hai kyunki
   custom-redesign.css @stack('style') ke BAAD load hoti hai
   (app.blade.php 65 -> 67). Wahi tarika jo "De-glass sweep" me use hua.
   Values wahi jo baaki app par hain: #fff / radius 10 / 0 0 11px #e9e9e9.
   =============================================================== */

html body .zc-content .zc-h {
    /* GEOMETRY bhi yahan chahiye: pages/index.blade.php ka inline <style>
       hata diya gaya hai, aur usme flex/grid layout rules bhi the -- sirf
       skin likhne se header stack ho gaya tha. */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    padding: 18px 20px !important;
    margin-bottom: 16px !important;
    gap: 14px !important;
}
html body .zc-content .zc-h__t { flex: 1; min-width: 0; }
html body .zc-content .zc-h h5 {
    margin: 0 !important; font-size: 16.5px !important; font-weight: 700 !important;
    color: #22312e !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
html body .zc-content .zc-h p {
    margin: 3px 0 0 !important; font-size: 12.5px !important; color: #6d7a76 !important;
}

/* icon tile: flat teal, koi glow nahi */
html body .zc-content .zc-hi {
    width: 42px !important; height: 42px !important; border-radius: 11px !important;
    background: #e6f0ef !important; color: #0a474c !important;
    font-size: 18px !important; box-shadow: none !important;
    display: flex; align-items: center; justify-content: center; flex: none;
}

/* PREMIUM badge: wahi gold chip jo Payments par approve hua tha */
html body .zc-content .zc-pill {
    font-style: normal; display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .04em;
    color: #8a6412 !important; background: #fdf3e3 !important;
    border: 1px solid #f2e2c4 !important; padding: 2px 8px !important;
    border-radius: 20px !important;
}
html body .zc-content .zc-pill i { font-size: 10px; }

/* ek screen, ek primary - flat, koi lift/glow nahi */
html body .zc-content .zc-pri {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    text-decoration: none !important; cursor: pointer !important; white-space: nowrap !important;
    background: #0a474c !important; background-image: none !important;
    border: none !important; color: #fff !important;
    border-radius: 8px !important; padding: 0 16px !important; height: 38px !important;
    font-size: 13px !important; font-weight: 600 !important;
    box-shadow: none !important; transition: background .15s ease !important;
}
html body .zc-content .zc-pri:hover {
    background: #083a3e !important; color: #fff !important; transform: none !important;
}

/* list cards */
html body .zc-content .zc-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 14px !important;
}
html body .zc-content .zc-card {
    background: #fff !important; border: none !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; padding: 16px !important;
    transition: none !important;
}
html body .zc-content .zc-card:hover {
    transform: none !important; box-shadow: 0 0 11px #e9e9e9 !important;
    border-color: transparent !important;
}

/* row buttons: glass hataya, hairline ghost */
html body .zc-content .zc-g {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    line-height: 1 !important; text-decoration: none !important; cursor: pointer !important;
    background: #fff !important; background-image: none !important;
    border: 1px solid #ececec !important; border-radius: 8px !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important; transition: background .15s ease, color .15s ease !important;
}
html body .zc-content .zc-g.open { color: #0a474c !important; }
html body .zc-content .zc-g.open:hover { background: #0a474c !important; color: #fff !important; }

/* panel wrapper (empty state ke liye) */
html body .zc-content .zc-panel {
    background: #fff !important; border: none !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; padding: 6px !important;
}

/* purane hero empty states: 200px ka gaddha -> ek shaant line.
   Inhe blade me chhedne ke bajaye yahin collapse kiya - 19 files ka
   markup badalne se risk zyada tha. `border:1.5px dashed` inka tell hai. */
html body .zc-content .dashboard-container div[style*="1.5px dashed"] {
    padding: 26px 16px !important;
    border: 1px solid #ececec !important;
    border-radius: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 10px !important; flex-wrap: wrap !important;
    background: #fff !important;
}
html body .zc-content .dashboard-container div[style*="1.5px dashed"] > div:first-child {
    width: 34px !important; height: 34px !important; border-radius: 9px !important;
    font-size: 16px !important; margin: 0 !important; flex: none !important;
    background: #f2f6f5 !important; color: #7d8b87 !important;
}
html body .zc-content .dashboard-container div[style*="1.5px dashed"] h5 {
    margin: 0 !important; font-size: 14.5px !important; font-weight: 600 !important; color: #22312e !important;
}
html body .zc-content .dashboard-container div[style*="1.5px dashed"] p {
    margin: 0 !important; font-size: 13px !important; color: #8a938f !important;
}


/* ══════════════════════════════════════════════════════════════════
   Premium modules: layout settle (2026-08-25)
   Har module ka apna prefix hai (pm-/sv-/bk-/zc-/jb-/oc-/ti-/wl-/bc-)
   par dikkat sab me ek jaisi thi:

   1. KPI cards `repeat(auto-fit,minmax(150px,1fr))` par the — 2400px
      screen par teen-chaar card poore page par khinch jaate the aur
      har card ke andar number baayein, baaki khaali. Ab wahi strip
      jo User Attributes par approve hui: EK card, andar gine hue
      khaane, beech me hairline divider.
   2. Empty state ek "hero" tha — 68px padding + 80px icon tile +
      heading + subtext. Ab shaant: chhota icon, kam padding.

   Ye layout ki baat hai, skin ki nahi — isiliye har page ka inline
   <style> chhedne ke bajaye yahan ek jagah se.
   ══════════════════════════════════════════════════════════════════ */

html body .zc-content .bc-kpis, html body .zc-content .bk-stats, html body .zc-content .jb-kpis, html body .zc-content .oc-kpis, html body .zc-content .pm-kpis, html body .zc-content .sv-kpis, html body .zc-content .ti-kpis, html body .zc-content .wl-kpis, html body .zc-content .zc-stats {
    display: inline-grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: max-content !important;
    width: max-content !important;
    max-width: 100% !important;
    gap: 0 !important;
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    padding: 4px 6px !important;
    overflow-x: auto !important;
}
html body .zc-content .bc-kpis > *, html body .zc-content .bk-stats > *, html body .zc-content .jb-kpis > *, html body .zc-content .oc-kpis > *, html body .zc-content .pm-kpis > *, html body .zc-content .sv-kpis > *, html body .zc-content .ti-kpis > *, html body .zc-content .wl-kpis > *, html body .zc-content .zc-stats > * {
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid #eef1f1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 13px 24px !important;
    margin: 0 !important;
}
html body .zc-content .bc-kpis > *:last-child, html body .zc-content .bk-stats > *:last-child, html body .zc-content .jb-kpis > *:last-child, html body .zc-content .oc-kpis > *:last-child, html body .zc-content .pm-kpis > *:last-child, html body .zc-content .sv-kpis > *:last-child, html body .zc-content .ti-kpis > *:last-child, html body .zc-content .wl-kpis > *:last-child, html body .zc-content .zc-stats > *:last-child { border-right: 0 !important; }

@media (max-width: 760px) {
html body .zc-content .bc-kpis, html body .zc-content .bk-stats, html body .zc-content .jb-kpis, html body .zc-content .oc-kpis, html body .zc-content .pm-kpis, html body .zc-content .sv-kpis, html body .zc-content .ti-kpis, html body .zc-content .wl-kpis, html body .zc-content .zc-stats {
        display: grid !important;
        grid-auto-flow: row !important;
        width: auto !important;
    }
html body .zc-content .bc-kpis > *, html body .zc-content .bk-stats > *, html body .zc-content .jb-kpis > *, html body .zc-content .oc-kpis > *, html body .zc-content .pm-kpis > *, html body .zc-content .sv-kpis > *, html body .zc-content .ti-kpis > *, html body .zc-content .wl-kpis > *, html body .zc-content .zc-stats > * {
        border-right: 0 !important;
        border-bottom: 1px solid #eef1f1 !important;
    }
html body .zc-content .bc-kpis > *:last-child, html body .zc-content .bk-stats > *:last-child, html body .zc-content .jb-kpis > *:last-child, html body .zc-content .oc-kpis > *:last-child, html body .zc-content .pm-kpis > *:last-child, html body .zc-content .sv-kpis > *:last-child, html body .zc-content .ti-kpis > *:last-child, html body .zc-content .wl-kpis > *:last-child, html body .zc-content .zc-stats > *:last-child { border-bottom: 0 !important; }
}

/* ── empty states: hero se ek shaant block ── */
html body .zc-content .bc-empty, html body .zc-content .bk-empty, html body .zc-content .bkl-empty, html body .zc-content .jb-empty, html body .zc-content .kb-empty, html body .zc-content .oc-empty, html body .zc-content .pm-empty, html body .zc-content .sv-empty, html body .zc-content .ti-empty, html body .zc-content .wl-empty, html body .zc-content .zc-empty, html body .zc-content .iv-empty, html body .zc-content .ev-empty {
    padding: 30px 18px !important;
    /* border-style diya tha par width nahi — browser tab "medium" (~3px) leta
       hai, isliye 13 module ke khaali panel par ek mota slate border chhap
       raha tha. Hairline hi mansha thi. (2026-08-25) */
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #ececec !important;
}
html body .zc-content .bc-empty > :first-child, html body .zc-content .bk-empty > :first-child, html body .zc-content .bkl-empty > :first-child, html body .zc-content .jb-empty > :first-child, html body .zc-content .kb-empty > :first-child, html body .zc-content .oc-empty > :first-child, html body .zc-content .pm-empty > :first-child, html body .zc-content .sv-empty > :first-child, html body .zc-content .ti-empty > :first-child, html body .zc-content .wl-empty > :first-child, html body .zc-content .zc-empty > :first-child, html body .zc-content .iv-empty > :first-child, html body .zc-content .ev-empty > :first-child {
    width: 44px !important;
    height: 44px !important;
    font-size: 19px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   Premium KPI icons + empty actions (2026-08-25)

   1. KPI ka icon har page par `.si` / `.ic` hai, par uska rang blade me
      INLINE likha tha — aur kai jagah galat: Booking par ek tile
      `background:#0a474c; color:#1e293b` thi, yaani gehre par gehra —
      icon dikhta hi nahi tha (Aditya ki screenshot me khaali chowkor).
      Ab rang yahan se aata hai aur chaaron khaane apne tone par hain
      (teal / green / blue / violet) — flat tint, koi gradient nahi.

   2. Empty state ke andar ka action header wale primary jaisa DARK tha,
      yaani ek screen par do primary. Ab wo shaant ghost hai — action
      rehta hai, shor nahi karta.
   ══════════════════════════════════════════════════════════════════ */

html body .zc-content .bc-kpis > * :is(.si, .ic),
html body .zc-content .bk-stats > * :is(.si, .ic),
html body .zc-content .jb-kpis > * :is(.si, .ic),
html body .zc-content .oc-kpis > * :is(.si, .ic),
html body .zc-content .pm-kpis > * :is(.si, .ic),
html body .zc-content .sv-kpis > * :is(.si, .ic),
html body .zc-content .ti-kpis > * :is(.si, .ic),
html body .zc-content .wl-kpis > * :is(.si, .ic),
html body .zc-content .zc-stats > * :is(.si, .ic) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    margin: 0 !important;
    box-shadow: none !important;
    flex: none !important;
}
html body .zc-content .bc-kpis > * :is(.si, .ic) i,
html body .zc-content .bk-stats > * :is(.si, .ic) i,
html body .zc-content .jb-kpis > * :is(.si, .ic) i,
html body .zc-content .oc-kpis > * :is(.si, .ic) i,
html body .zc-content .pm-kpis > * :is(.si, .ic) i,
html body .zc-content .sv-kpis > * :is(.si, .ic) i,
html body .zc-content .ti-kpis > * :is(.si, .ic) i,
html body .zc-content .wl-kpis > * :is(.si, .ic) i,
html body .zc-content .zc-stats > * :is(.si, .ic) i { color: inherit !important; font-size: 16px !important; }

html body .zc-content .bc-kpis > *:nth-child(1) :is(.si, .ic),
html body .zc-content .bk-stats > *:nth-child(1) :is(.si, .ic),
html body .zc-content .jb-kpis > *:nth-child(1) :is(.si, .ic),
html body .zc-content .oc-kpis > *:nth-child(1) :is(.si, .ic),
html body .zc-content .pm-kpis > *:nth-child(1) :is(.si, .ic),
html body .zc-content .sv-kpis > *:nth-child(1) :is(.si, .ic),
html body .zc-content .ti-kpis > *:nth-child(1) :is(.si, .ic),
html body .zc-content .wl-kpis > *:nth-child(1) :is(.si, .ic),
html body .zc-content .zc-stats > *:nth-child(1) :is(.si, .ic) {
    background: #e6f0ef !important;
    color: #0a474c !important;
}

html body .zc-content .bc-kpis > *:nth-child(2) :is(.si, .ic),
html body .zc-content .bk-stats > *:nth-child(2) :is(.si, .ic),
html body .zc-content .jb-kpis > *:nth-child(2) :is(.si, .ic),
/* KPI tiles ab sab ek jaise (2026-08-25).
   Pehle yahan position ke hisaab se RAINBOW tha -- 1st teal, 2nd hara,
   3rd neela (#eaf1fe/#2563eb), 4th baingani (#f1ecfd/#7c3aed). Har
   premium page par ek neela aur ek baingani tile bina kisi matlab ke
   baith jaata tha. Flat system ka niyam: ek section, EK accent -- aur
   rang sirf wahan jahan uska matlab ho (status/severity), sajaawat me
   nahi. Values wahi jo approved Payments page par hain (.zc-pay-kpi
   .zc-pay-tile = #eef4f3 / #0a474c). */
html body .zc-content .bc-kpis > * :is(.si, .ic),
html body .zc-content .bk-stats > * :is(.si, .ic),
html body .zc-content .jb-kpis > * :is(.si, .ic),
html body .zc-content .oc-kpis > * :is(.si, .ic),
html body .zc-content .pm-kpis > * :is(.si, .ic),
html body .zc-content .sv-kpis > * :is(.si, .ic),
html body .zc-content .ti-kpis > * :is(.si, .ic),
html body .zc-content .wl-kpis > * :is(.si, .ic),
html body .zc-content .zc-stats > * :is(.si, .ic) {
    background: #eef4f3 !important;
    color: #0a474c !important;
}
html body .zc-content .bc-kpis > * :is(.si, .ic) i,
html body .zc-content .bk-stats > * :is(.si, .ic) i,
html body .zc-content .jb-kpis > * :is(.si, .ic) i,
html body .zc-content .oc-kpis > * :is(.si, .ic) i,
html body .zc-content .pm-kpis > * :is(.si, .ic) i,
html body .zc-content .sv-kpis > * :is(.si, .ic) i,
html body .zc-content .ti-kpis > * :is(.si, .ic) i,
html body .zc-content .wl-kpis > * :is(.si, .ic) i,
html body .zc-content .zc-stats > * :is(.si, .ic) i {
    color: #0a474c !important;
}

/* KPI ka number + label ek doosre ke neeche, icon ke bagal me */
html body .zc-content .bc-kpis > *,
html body .zc-content .bk-stats > *,
html body .zc-content .jb-kpis > *,
html body .zc-content .oc-kpis > *,
html body .zc-content .pm-kpis > *,
html body .zc-content .sv-kpis > *,
html body .zc-content .ti-kpis > *,
html body .zc-content .wl-kpis > *,
html body .zc-content .zc-stats > * {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
html body .zc-content .bc-kpis > * b,
html body .zc-content .bk-stats > * b,
html body .zc-content .jb-kpis > * b,
html body .zc-content .oc-kpis > * b,
html body .zc-content .pm-kpis > * b,
html body .zc-content .sv-kpis > * b,
html body .zc-content .ti-kpis > * b,
html body .zc-content .wl-kpis > * b,
html body .zc-content .zc-stats > * b {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #1c1c1c !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
}
html body .zc-content .bc-kpis > * span,
html body .zc-content .bk-stats > * span,
html body .zc-content .jb-kpis > * span,
html body .zc-content .oc-kpis > * span,
html body .zc-content .pm-kpis > * span,
html body .zc-content .sv-kpis > * span,
html body .zc-content .ti-kpis > * span,
html body .zc-content .wl-kpis > * span,
html body .zc-content .zc-stats > * span {
    font-size: 12px !important;
    color: #8a938f !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* `br` hide karke b+span ek line me chipak gaye the ("0Services").
   b ko block karo — label apne aap neeche chala jaata hai. */
html body .zc-content .bc-kpis > * b,
html body .zc-content .bk-stats > * b,
html body .zc-content .jb-kpis > * b,
html body .zc-content .oc-kpis > * b,
html body .zc-content .pm-kpis > * b,
html body .zc-content .sv-kpis > * b,
html body .zc-content .ti-kpis > * b,
html body .zc-content .wl-kpis > * b,
html body .zc-content .zc-stats > * b { display: block !important; }

/* empty state ka icon tile nested hota hai (.ei / .si / .ic), sirf
   :first-child se nahi milta */
html body .zc-content :is(.bc-empty,.bk-empty,.bkl-empty,.jb-empty,.kb-empty,.oc-empty,.pm-empty,.sv-empty,.ti-empty,.wl-empty,.zc-empty,.iv-empty,.ev-empty) :is(.ei,.si,.ic) {
    width: 44px !important; height: 44px !important;
    border-radius: 10px !important;
    font-size: 19px !important;
    margin: 0 auto 12px !important;
    box-shadow: none !important;
    background: #e6f0ef !important;
    color: #0a474c !important;
}

/* ── empty state ka action: ghost, header ke primary se compete na kare ── */
html body .zc-content .bc-empty :is(a, button),
html body .zc-content .bk-empty :is(a, button),
html body .zc-content .bkl-empty :is(a, button),
html body .zc-content .jb-empty :is(a, button),
html body .zc-content .kb-empty :is(a, button),
html body .zc-content .oc-empty :is(a, button),
html body .zc-content .pm-empty :is(a, button),
html body .zc-content .sv-empty :is(a, button),
html body .zc-content .ti-empty :is(a, button),
html body .zc-content .wl-empty :is(a, button),
html body .zc-content .zc-empty :is(a, button),
html body .zc-content .iv-empty :is(a, button),
html body .zc-content .ev-empty :is(a, button) {
    background: #fff !important;
    color: #0a474c !important;
    border: 1px solid #ececec !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    padding: 9px 16px !important;
    border-radius: 8px !important;
}
html body .zc-content .bc-empty :is(a, button):hover,
html body .zc-content .bk-empty :is(a, button):hover,
html body .zc-content .bkl-empty :is(a, button):hover,
html body .zc-content .jb-empty :is(a, button):hover,
html body .zc-content .kb-empty :is(a, button):hover,
html body .zc-content .oc-empty :is(a, button):hover,
html body .zc-content .pm-empty :is(a, button):hover,
html body .zc-content .sv-empty :is(a, button):hover,
html body .zc-content .ti-empty :is(a, button):hover,
html body .zc-content .wl-empty :is(a, button):hover,
html body .zc-content .zc-empty :is(a, button):hover,
html body .zc-content .iv-empty :is(a, button):hover,
html body .zc-content .ev-empty :is(a, button):hover {
    background: #f7faf9 !important;
    border-color: #dfe6e4 !important;
    color: #083a3e !important;
}


/* --- Email Studio + baaki prefixes bhi usi flat card par (2026-08-25) ---
   Har module ne apna prefix bana liya tha (.zc-em-*, .ti-*, .oc-*), isliye
   upar wala block unhe nahi chhu raha tha -- Email Studio ka header peach
   border (#ffe6c7) + zero shadow ke saath card jaisa dikh hi nahi raha tha. */

html body .zc-content .zc-em-head {
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important;
    padding: 18px 20px !important;
}
html body .zc-content .zc-em-ico {
    width: 42px !important; height: 42px !important; border-radius: 11px !important;
    background: #e6f0ef !important; color: #0a474c !important;
    font-size: 18px !important; box-shadow: none !important;
}
html body .zc-content .zc-btn-primary {
    background: #0a474c !important; background-image: none !important;
    border: none !important; color: #fff !important;
    border-radius: 8px !important; height: 38px !important; padding: 0 16px !important;
    box-shadow: none !important;
}
html body .zc-content .zc-btn-primary:hover { background: #083a3e !important; color: #fff !important; }

/* KPI strip: ek card, teen stat (approved pattern) */
html body .zc-content .zc-stats {
    display: inline-grid !important;
    grid-template-columns: repeat(3, max-content) !important;
    width: max-content !important; gap: 0 !important;
    background: #fff !important; border-radius: 10px !important;
    box-shadow: 0 0 11px #e9e9e9 !important; margin-bottom: 16px !important;
}
html body .zc-content .zc-stats .zc-stat {
    background: transparent !important; border: none !important;
    border-right: 1px solid #eef1f1 !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 14px 22px !important;
}
html body .zc-content .zc-stats .zc-stat:last-child { border-right: none !important; }
/* class do baar dohrayi (0,5,2 = 502) taaki purana
   `.zc-stats > :nth-child(3) :is(.si...)` (0,4,2 = 402) neeche rahe --
   wo teesre KPI ko akela neela kar deta tha. Baaki premium pages par
   teeno tile ek jaise hain, isliye yahan bhi. */
html body .zc-content .zc-stats .zc-stat .si.si {
    background: #eef4f3 !important; color: #0a474c !important;
    border-radius: 10px !important; box-shadow: none !important;
}
html body .zc-content .zc-stats .zc-stat .si.si i { color: #0a474c !important; }

/* Team Inbox ka neela SLA box aur Omnichannel ka baingani note */
html body .zc-content .ti-sla-form {
    background: #fafbfb !important; border: 1px solid #ececec !important;
}
/* ek screen, EK primary: "Add canned reply" hi is page ka primary hai,
   SLA ka "Update" secondary hai -- do bhare hue dark button saath me
   compete karte the. */
html body .zc-content .ti-sla-form button,
html body .zc-content .ti-sla-form .btn {
    background: #fff !important; background-image: none !important;
    border: 1px solid #d5dedc !important; color: #0a474c !important;
    box-shadow: none !important;
}
html body .zc-content .ti-sla-form button:hover,
html body .zc-content .ti-sla-form .btn:hover {
    background: #f2f8f7 !important; border-color: #0a474c !important; color: #0a474c !important;
}
html body .zc-content .oc-note {
    background: #fafbfb !important; border: 1px solid #ececec !important;
    color: #6d7a76 !important;
}


/* ══════════════════════════════════════════════════════════════════
   Rail: account on top (2026-08-25)
   Avatar rail ke sabse neeche tha, aur uske upar `.zcv3-logo` ka slot
   khaali (`is-blank`) pada rehta tha — do jagah bekaar ja rahi thi.
   Ab account usi upar wali jagah par hai; bell neeche hi hai.
   ══════════════════════════════════════════════════════════════════ */
html body #zcSidebar.zcv3 .zcv3-top {
    flex-shrink: 0;
    padding: 8px 0 7px;
    border-bottom: 1px solid rgba(255,255,255,.13);
}
html body #zcSidebar.zcv3 .zcv3-top .zcv3-avatar-btn {
    padding-top: 0 !important;
    width: 100%;
}
/* foot me ab sirf bell bachi hai — uski upar wali line hata do,
   warna ek khaali patti dikhti hai */
html body #zcSidebar.zcv3 .zcv3-foot { border-top: none !important; }


/* ══════════════════════════════════════════════════════════════════
   Notification bell — panel ab sabse upar (2026-08-25)
   Bug: bell ka panel `z-index:1200` par tha, jabki rail ka pinned
   sub-nav `.zcv3-fly` **2600** par hai. Isliye kisi bhi section me
   bell dabao to panel sub-nav ke PEECHE khulta tha — sirf ek patli
   patti dikhti thi, aadmi ko lagta "background me khul raha hai".

   Do cheezein: (1) panel 2800 par — dropdown hamesha sabse upar;
   (2) jab sub-nav khula ho (`body.zc-fly-open`) to panel uske BAAD
   se shuru ho (70 rail + 288 panel + gap), taaki wo sub-nav ko dhake
   nahi — dono saath padhe ja sakein.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-bell { z-index: 2800 !important; }
html body .zc-bell__panel { z-index: 2800 !important; }
html body.zc-fly-open .zc-bell__panel { left: 366px !important; }

@media (max-width: 991px) {
    /* mobile par rail hi nahi hai — bell content ke upar fix hai */
    html body.zc-fly-open .zc-bell__panel { left: 8px !important; }
}


/* --- Khaali premium page ka maidan (2026-08-25) ---
   Aditya: "saare same hi hai, zero changes." Changes live the (proof page
   ne 3/3 marker dikhaye) par bahut halke the -- asli dikkat ye thi ki
   in pages ka 60-70% hissa khaali bhoora maidan tha, isliye page adhoora
   lagta tha. Ilaaj wahi jo approved Payments page par hai:
   panel ko asli height do aur empty line ko beech me column me rakho. */

html body .zc-content .zc-panel,
html body .zc-content .dashboard-container div[style*="1.5px dashed"] {
    min-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 20px !important;
}
html body .zc-content .zc-panel .zc-emptyline,
html body .zc-content .dashboard-container div[style*="1.5px dashed"] {
    gap: 12px !important;
    color: #8a938f !important;
}
html body .zc-content .zc-panel .zc-emptyline { flex-direction: column !important; }
html body .zc-content .zc-panel .zc-emptyline i,
html body .zc-content .dashboard-container div[style*="1.5px dashed"] > div:first-child i {
    font-size: 26px !important;
}
html body .zc-content .zc-panel .zc-emptyline span {
    max-width: 340px; text-align: center; line-height: 1.6;
}


/* --- Email Studio ka tile wapas (2026-08-25) ---
   custom-redesign.css:6384 me ek purana rule 9 module headers ke icon
   tile chhupa deta hai ("drop the coloured icon tile") -- wo core pages
   (Contacts/Campaigns/Flows/...) ke liye jaan-boojh ke tha. Par premium
   module pages par tile hai (Omnichannel, Team Inbox, White-label,
   Payments sab me), isliye Email Studio akela bina tile ke alag dikh
   raha tha. Sirf ise wapas laaya -- core pages ka faisla waisa hi. */
html body .zc-content .zc-em-ico {
    display: flex !important;
}


/* ══════════════════════════════════════════════════════════════════
   Rail ka kram — bell upar, Help neeche (2026-08-25)
   Bell ab `.zcv3-top` me account ke paas hai, isliye uska panel bhi
   upar se khulna chahiye (pehle wo `bottom:14px` par pinned tha, jab
   bell sabse neeche thi).
   ══════════════════════════════════════════════════════════════════ */
html body .zcv3-top .zc-bell { width: 100% !important; }
html body .zc-bell__panel {
    top: 96px !important;
    bottom: auto !important;
    max-height: min(430px, calc(100dvh - 120px)) !important;
}
/* Help rail ke bilkul neeche, upar ek hairline se alag */
html body .zcv3-foot.zcv3-helpfoot {
    border-top: 1px solid rgba(255,255,255,.10) !important;
    padding-top: 6px !important;
}

@media (max-width: 991px) {
    /* mobile par rail hoti hi nahi — bell content ke upar-daayein fix hai,
       to panel wapas uske neeche se khule */
    html body .zc-bell__panel { top: 52px !important; bottom: auto !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Rail account: avatar thoda bada (2026-08-25, Aditya: "bohot chota
   lag rha hai... isse jyada bhi bada mat kro")

   27px tha — rail ka sabse chhota element, jabki ye identity anchor
   hai aur sabse upar baitha hai. 34px par ja raha hoon, aur upar wala
   jhatka isliye nahi lagta kyunki GOL shakl usi naap ke CHOKOR se
   optically ~8% chhoti padhi jaati hai: 34px circle ≈ 31px tile, yaani
   project ke 26px 'Z' se sirf ek kadam upar — hierarchy saaf, shor nahi.
   Ring bhi 1.5px se 2px, warna bada circle patla-sa lagta hai.
   ══════════════════════════════════════════════════════════════════ */
html body #zcSidebar.zcv3 .zcv3-top .zcv3-avatar {
    width: 34px !important;
    height: 34px !important;
    border-width: 2px !important;
    border-color: rgba(255, 255, 255, .45) !important;
}
html body #zcSidebar.zcv3 .zcv3-top { padding: 10px 0 9px; }
/* naam avatar ke saath sanse le — pehle 34px ke bilkul chipka tha */
html body #zcSidebar.zcv3 .zcv3-top .zcv3-avatar-btn .zcv3-lb { margin-top: 5px; }
/* hover par ring jag jaye — clickable hai, ye batana chahiye */
html body #zcSidebar.zcv3 .zcv3-top .zcv3-avatar-btn:hover .zcv3-avatar {
    border-color: rgba(255, 255, 255, .8) !important;
}


/* ===============================================================
   Premium pages: shaant pass  (2026-08-25)

   Aditya: "sab dynamic lag rahe hai, dynamic nahi lagne chahiye bola."

   Jo hataya wo sajaawat thi, kaam ki cheez nahi:
   - KPI ke rangeen icon tile  -> ab sirf number + label (Stripe/Zoho jaisa)
   - section heading ke icon   -> ab sirf naam
   - gold PREMIUM badge        -> shaant grey chip
   - full-width dark button    -> apni naap ka
   - module header ka dark tile-> halka tint, sab ek jaise

   Card ka base (white / radius / hairline) waisa hi hai -- wo app ka
   approved system hai. "Shaant" ka matlab khaali kar dena nahi.
   =============================================================== */

/* KPI: ab number aur label hi, koi tile nahi */
html body .zc-content .bc-kpis > * :is(.si, .ic),
html body .zc-content .bk-stats > * :is(.si, .ic),
html body .zc-content .jb-kpis > * :is(.si, .ic),
html body .zc-content .oc-kpis > * :is(.si, .ic),
html body .zc-content .pm-kpis > * :is(.si, .ic),
html body .zc-content .sv-kpis > * :is(.si, .ic),
html body .zc-content .ti-kpis > * :is(.si, .ic),
html body .zc-content .wl-kpis > * :is(.si, .ic),
html body .zc-content .zc-stats > * :is(.si, .ic) {
    display: none !important;
}
html body .zc-content .bc-kpis > * ,
html body .zc-content .bk-stats > * ,
html body .zc-content .jb-kpis > * ,
html body .zc-content .oc-kpis > * ,
html body .zc-content .pm-kpis > * ,
html body .zc-content .sv-kpis > * ,
html body .zc-content .ti-kpis > * ,
html body .zc-content .wl-kpis > * ,
html body .zc-content .zc-stats > *  {
    padding-left: 22px !important;
}

/* section heading ka icon */
html body .zc-content [class*="-secttl"] > i,
html body .zc-content [class*="-sect"] > i:first-child {
    display: none !important;
}
html body .zc-content [class*="-secttl"] {
    gap: 0 !important;
    color: #22312e !important;
}

/* PREMIUM badge shaant.
   Pehle yahan `[class*="-prem"]` tha — wo poore Premium Suite page ko kha
   gaya tha: zc-prem-wrap/hero/crown/card/ico/grid sab par background
   #f2f4f4 aur box-shadow:none lag jaata tha, isliye premium bechne wala
   page hi flat dikhne laga. `btn-premium-primary/secondary` bhi isi me
   phans rahe the (kyunki "premium" me bhi "-prem" hai).
   Ab sirf wo chaar class jo sach me badge hain. */
html body .zc-content .zc-pill,
html body .zc-content .zc-pay-prem,
html body .zc-content .tpl-prem,
html body .zc-content .cdp2-prem {
    background: #f2f4f4 !important;
    border: none !important;
    color: #6d7a76 !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    box-shadow: none !important;
}
html body .zc-content .zc-pill i,
html body .zc-content .zc-pay-prem i { display: none !important; }

/* module header ka tile: sab jagah ek jaisa halka */
html body .zc-content .ti-hi,
html body .zc-content .oc-hi,
html body .zc-content .wl-hi,
html body .zc-content .zc-hi,
html body .zc-content .zc-em-ico {
    background: #eef4f3 !important;
    background-image: none !important;
    color: #0a474c !important;
    box-shadow: none !important;
    width: 40px !important; height: 40px !important;
    border-radius: 9px !important; font-size: 17px !important;
}

/* full-width dark button apni naap par -- patti jaisa nahi dikhna chahiye */
html body .zc-content .ti-btn[style*="width:100%"],
html body .zc-content .ti-btn[style*="width: 100%"] {
    width: auto !important;
    justify-content: center !important;
}


/* --- Full-width dark button bands (2026-08-25) ---
   Aditya ne White-label ki photo par phir kaha "same hi hai". Us page ka
   sabse bhaari hissa do poori-chaudai ke dark band the -- "Save branding"
   aur "Add client workspace". Premium blades me ye pattern 60 jagah hai
   (inline width:100% ya grid-column span). Settings page par button apni
   naap ka hota hai, patti nahi. Uski apni rule: ek screen, ek primary --
   aur dark band dohraana usi ka ulta hai. */
html body .zc-content .dashboard-container button[style*="width:100%"],
html body .zc-content .dashboard-container button[style*="width: 100%"],
html body .zc-content .dashboard-container a[style*="width:100%"],
html body .zc-content .dashboard-container a[style*="width: 100%"],
html body .zc-content .dashboard-container button[style*="grid-column"] {
    width: auto !important;
    justify-self: start !important;
    justify-content: center !important;
}


/* ===============================================================
   Dark buttons ko craft (2026-08-25)

   Aditya: "jahan bhi darker hai wo accha nahi lag raha, premium banao."
   Ye 16 module button classes flat blocky dark rectangle the -- 700-weight
   text, mota padding, koi depth nahi. Rang wahi brand #0a474c hai; farq
   craft ka hai: chhota qad, 600-weight, hairline inner highlight aur ek
   bahut halki brand-tinted chhaya. Gradient/glow nahi (banned) -- sirf
   ek pixel ka andar wala ujaala, wahi Stripe/Linear wali baat hai.
   =============================================================== */

html body .zc-content .cn-save:not([class*="ghost"]),
html body .zc-content .em-save:not([class*="ghost"]),
html body .zc-content .ev-save:not([class*="ghost"]),
html body .zc-content .fb-save:not([class*="ghost"]),
html body .zc-content .iv-save:not([class*="ghost"]),
html body .zc-content .jb-btn:not([class*="ghost"]),
html body .zc-content .kb-btn:not([class*="ghost"]),
html body .zc-content .oc-btn:not([class*="ghost"]),
html body .zc-content .pg-save:not([class*="ghost"]),
html body .zc-content .pm-btn:not([class*="ghost"]),
html body .zc-content .sv-btn:not([class*="ghost"]),
html body .zc-content .tb-save:not([class*="ghost"]),
html body .zc-content .ti-btn:not([class*="ghost"]),
html body .zc-content .wl-btn:not([class*="ghost"]),
html body .zc-content .zc-pri:not([class*="ghost"]),
html body .zc-content .zc-btn-primary:not([class*="ghost"]) {
    height: 36px !important;
    padding: 0 15px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    background: #0a474c !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 1px 1px rgba(10,71,76,.16),
                inset 0 1px 0 rgba(255,255,255,.10) !important;
    transition: background .15s ease !important;
}
html body .zc-content .cn-save:not([class*="ghost"]):hover,
html body .zc-content .em-save:not([class*="ghost"]):hover,
html body .zc-content .ev-save:not([class*="ghost"]):hover,
html body .zc-content .fb-save:not([class*="ghost"]):hover,
html body .zc-content .iv-save:not([class*="ghost"]):hover,
html body .zc-content .jb-btn:not([class*="ghost"]):hover,
html body .zc-content .kb-btn:not([class*="ghost"]):hover,
html body .zc-content .oc-btn:not([class*="ghost"]):hover,
html body .zc-content .pg-save:not([class*="ghost"]):hover,
html body .zc-content .pm-btn:not([class*="ghost"]):hover,
html body .zc-content .sv-btn:not([class*="ghost"]):hover,
html body .zc-content .tb-save:not([class*="ghost"]):hover,
html body .zc-content .ti-btn:not([class*="ghost"]):hover,
html body .zc-content .wl-btn:not([class*="ghost"]):hover,
html body .zc-content .zc-pri:not([class*="ghost"]):hover,
html body .zc-content .zc-btn-primary:not([class*="ghost"]):hover { background: #0d565c !important; }
html body .zc-content .cn-save:not([class*="ghost"]):active,
html body .zc-content .em-save:not([class*="ghost"]):active,
html body .zc-content .ev-save:not([class*="ghost"]):active,
html body .zc-content .fb-save:not([class*="ghost"]):active,
html body .zc-content .iv-save:not([class*="ghost"]):active,
html body .zc-content .jb-btn:not([class*="ghost"]):active,
html body .zc-content .kb-btn:not([class*="ghost"]):active,
html body .zc-content .oc-btn:not([class*="ghost"]):active,
html body .zc-content .pg-save:not([class*="ghost"]):active,
html body .zc-content .pm-btn:not([class*="ghost"]):active,
html body .zc-content .sv-btn:not([class*="ghost"]):active,
html body .zc-content .tb-save:not([class*="ghost"]):active,
html body .zc-content .ti-btn:not([class*="ghost"]):active,
html body .zc-content .wl-btn:not([class*="ghost"]):active,
html body .zc-content .zc-pri:not([class*="ghost"]):active,
html body .zc-content .zc-btn-primary:not([class*="ghost"]):active { background: #083a3e !important; }
html body .zc-content .cn-save:not([class*="ghost"]) i,
html body .zc-content .em-save:not([class*="ghost"]) i,
html body .zc-content .ev-save:not([class*="ghost"]) i,
html body .zc-content .fb-save:not([class*="ghost"]) i,
html body .zc-content .iv-save:not([class*="ghost"]) i,
html body .zc-content .jb-btn:not([class*="ghost"]) i,
html body .zc-content .kb-btn:not([class*="ghost"]) i,
html body .zc-content .oc-btn:not([class*="ghost"]) i,
html body .zc-content .pg-save:not([class*="ghost"]) i,
html body .zc-content .pm-btn:not([class*="ghost"]) i,
html body .zc-content .sv-btn:not([class*="ghost"]) i,
html body .zc-content .tb-save:not([class*="ghost"]) i,
html body .zc-content .ti-btn:not([class*="ghost"]) i,
html body .zc-content .wl-btn:not([class*="ghost"]) i,
html body .zc-content .zc-pri:not([class*="ghost"]) i,
html body .zc-content .zc-btn-primary:not([class*="ghost"]) i { font-size: 15px !important; opacity: .78 !important; }

/* colour picker: kaccha dark chowkor tha, ab asli swatch chip */
html body .zc-content input[type="color"] {
    width: 36px !important; height: 36px !important;
    padding: 3px !important;
    border: 1px solid #dfe5e4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
}
html body .zc-content input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
html body .zc-content input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
html body .zc-content input[type="color"]::-moz-color-swatch { border: none; border-radius: 5px; }

/* branding preview: rang client ka hai (inline), sirf naap-jokh sudhaari */
html body .zc-content .wl-preview {
    border: 1px solid #ececec !important; border-radius: 10px !important;
}
html body .zc-content .wl-pv-top {
    height: 48px !important; padding: 0 14px !important;
}
html body .zc-content .wl-pv-logo {
    width: 28px !important; height: 28px !important; border-radius: 7px !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) !important;
    font-size: 13px !important; font-weight: 600 !important;
}
html body .zc-content .wl-pv-top strong,
html body .zc-content .wl-pv-top > div:not(.wl-pv-logo) {
    font-size: 14px !important; font-weight: 600 !important; letter-spacing: -.01em !important;
}
html body .zc-content .wl-pv-btn {
    font-size: 11.5px !important; font-weight: 600 !important;
    padding: 7px 14px !important; border-radius: 7px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}
html body .zc-content .wl-pv-body .l { background: #f1f4f4 !important; }

/* note aur table head brand neutrals par */
html body .zc-content .wl-note {
    background: #fafbfb !important; border-color: #ececec !important; color: #6d7a76 !important;
}
html body .zc-content .wl-tbl th {
    text-transform: none !important; font-size: 13px !important;
    font-weight: 500 !important; color: #4a5350 !important; letter-spacing: 0 !important;
}


/* ===============================================================
   Features page ka key-feature block (2026-08-25)

   Aditya: "photos purane ZupiChat ke hain aur acche bhi nahi lag rahe."
   Photos alag kaam hai (wo DB se aati hain, admin se upload hoti hain).
   Yahan block ka roop theek kiya: card ka bhoora background, benefits
   ka mint tinted dabba, aur har block par ek hi icon -- teeno purane
   template ki nishaani thi.
   =============================================================== */

html body .key-feature-section .key-feature-wrapper {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #ececec !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,46,43,.05),
                0 18px 40px -28px rgba(15,46,43,.22) !important;
    padding: 40px !important;
    gap: 40px !important;
}

/* upar ka label: brand pill */
html body .key-feature-section .key-feature-wrapper__top {
    display: inline-flex !important; align-items: center; gap: 8px;
    background: #e8f1ef !important;
    color: #0F2E2B !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .04em !important; text-transform: uppercase !important;
    margin-bottom: 18px !important;
}
html body .key-feature-section .key-feature-wrapper__top .icon {
    background: none !important; box-shadow: none !important;
    width: auto !important; height: auto !important;
    color: #0F2E2B !important; font-size: 15px !important;
    display: inline-flex !important; align-items: center;
}

html body .key-feature-section .key-feature-wrapper__title {
    font-size: 30px !important; font-weight: 800 !important;
    letter-spacing: -.02em !important; color: #0f1f1b !important;
    margin-bottom: 12px !important;
}
html body .key-feature-section .key-feature-wrapper__desc {
    font-size: 15px !important; line-height: 1.7 !important;
    color: #5b6b66 !important; margin-bottom: 22px !important;
}

/* benefits: mint dabba hata, saada list */
html body .key-feature-section .why-choose-us {
    background: none !important; background-image: none !important;
    border: none !important; border-radius: 0 !important;
    padding: 0 !important;
}
html body .key-feature-section .why-choose-us ul { padding-left: 0 !important; margin: 0 !important; }
html body .key-feature-section .why-choose-us li {
    list-style: none !important;
    display: flex !important; align-items: flex-start; gap: 11px;
    font-size: 14.5px !important; color: #22312e !important;
    padding: 9px 0 !important; border-bottom: 1px solid #f1f4f4 !important;
}
html body .key-feature-section .why-choose-us li:last-child { border-bottom: none !important; }
html body .key-feature-section .why-choose-us li i,
html body .key-feature-section .why-choose-us li svg,
html body .key-feature-section .why-choose-us li img {
    color: #0F2E2B !important; fill: #0F2E2B !important;
    background: none !important; box-shadow: none !important;
    width: 17px !important; height: 17px !important; flex: none;
    margin-top: 2px;
}

/* screenshot ko frame do -- abhi khula float karta hai */
html body .key-feature-section .key-feature-wrapper__thumb img {
    border-radius: 12px !important;
    border: 1px solid #e6eae9 !important;
    box-shadow: 0 2px 4px rgba(15,46,43,.06),
                0 24px 48px -30px rgba(15,46,43,.30) !important;
    width: 100% !important; height: auto !important;
}

@media (max-width: 767.98px) {
    html body .key-feature-section .key-feature-wrapper { padding: 24px !important; gap: 24px !important; }
    html body .key-feature-section .key-feature-wrapper__title { font-size: 24px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   Rail ka kram — bell aur Project neeche (2026-08-25, Aditya)

   Dono upar account ke paas the, isliye Dashboard chauthe number par
   dhakela ja raha tha. Ab wo dono foot me hain (Help ke upar), upar
   sirf account bacha, aur Dashboard seedha DOOSRE number par hai.

   Dono ke panel viewport se fixed hain, isliye unka anchor bhi palatna
   pada: pehle `top` se khulte the (button upar tha), ab `bottom` se —
   warna button neeche hota aur panel screen ke SIRE par khulta.
   ══════════════════════════════════════════════════════════════════ */

/* foot me bell rail ki poori chaudai le, jaise pehle top me leti thi */
html body #zcSidebar.zcv3 .zcv3-accfoot { padding: 2px 0 0; }
html body #zcSidebar.zcv3 .zcv3-accfoot .zc-bell { width: 100% !important; }

/* Project ke neeche ki line hata do — wo tab thi jab uske NEECHE nav aata
   tha; ab uske neeche foot hai aur do lakeerein saath me bhaddi lagti hain */
html body #zcSidebar.zcv3 .zcv3-accfoot .zc-proj { border-bottom: 0 !important; }

/* upar wali patti me ab sirf avatar hai */
html body #zcSidebar.zcv3 .zcv3-top { padding: 10px 0 8px !important; }

/* bell ka panel wapas neeche se (ye upar wale `top:96px` block ko palatta hai) */
html body .zc-bell__panel {
    top: auto !important;
    bottom: 14px !important;
    max-height: min(430px, calc(100dvh - 28px)) !important;
}

/* Project ka panel bhi neeche se */
html body .zc-proj__panel {
    top: auto !important;
    bottom: 12px !important;
    max-height: min(460px, calc(100dvh - 24px)) !important;
    overflow-y: auto !important;
}

@media (max-width: 991px) {
    /* mobile par rail hoti hi nahi — bell content ke upar fix hai, to uska
       panel wapas uske NEECHE se khule (upar wala bottom rule yahan galat hai) */
    html body .zc-bell__panel { top: 58px !important; bottom: auto !important; }
}



/* ══════════════════════════════════════════════════════════════════
   Shared page header (section.breadcrumb) — har marketing page par
   yahi band hai, brand dark gradient ke saath. Uska ek hi h2 tha jise
   custom.css ka blanket `body:not(.dashboard) h2 { #111827 !important }`
   kaala kar deta tha — yaani SAB pages par page ka naam dark-on-dark
   pada rehta tha. Yahan specificity blanket rule se upar hai.
   ══════════════════════════════════════════════════════════════════ */
html body:not(.dashboard) section.breadcrumb .breadcrumb__title,
html body:not(.dashboard) section.breadcrumb h1,
html body:not(.dashboard) section.breadcrumb h2,
html body:not(.dashboard) section.breadcrumb h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body:not(.dashboard) section.breadcrumb p,
html body:not(.dashboard) section.breadcrumb li,
html body:not(.dashboard) section.breadcrumb a {
    color: rgba(255, 255, 255, .85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .85) !important;
}


/* ══════════════════════════════════════════════════════════════════
   Referral page ke dark chips (2026-08-25) — naap ke nikale gaye

   Ye chaar surfaces khud dark teal/emerald hain par unke andar ka text
   custom.css ke blanket span/heading rule se grey (#4b5563) ya slate
   (#1e293b) pad raha tha — button ka label dikhta hi nahi tha. Poore
   dark-band rule me span/a shaamil karna theek nahi tha (usse .ag-hero
   ke andar ka SAFED button apna teal label kho deta hai), isliye sirf
   yahi chaar naam se.
   ══════════════════════════════════════════════════════════════════ */
/* .rp-up-comm-earn aur .rpc-total-amount yahan se JAANBUJH KAR nikale gaye:
   wo `background-clip: text` wale hain, yaani unka gradient hi unka text hai.
   Unpar -webkit-text-fill-color set karte hi gradient mar jaata hai aur
   SAFED card par safed likha reh jaata hai (₹299/₹499/₹699 gayab ho gaye the).
   Unke gradient pehle se brand teal/emerald hain — unhe chhedna hi nahi. */
html body:not(.dashboard) .rp-copy-btn,
html body:not(.dashboard) .rp-copy-btn span,
html body:not(.dashboard) .rp-up-copy-btn,
html body:not(.dashboard) .rp-up-copy-btn span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* halke green chips par green text 3:1 se neeche tha — ek shade gehra */
html body:not(.dashboard) .rp-up-comm-pill,
html body:not(.dashboard) .rp-up-comm-pill span {
    color: #0f7a3d !important;
    -webkit-text-fill-color: #0f7a3d !important;
}
html body:not(.dashboard) .rpc-prog-pct,
html body:not(.dashboard) .rpc-prog-pct span {
    color: #046b4a !important;
    -webkit-text-fill-color: #046b4a !important;
}

/* ══════════════════════════════════════════════════════════════════
   Do aur jagah naap ke mili (2026-08-25)

   about: .ab-entity ek HALKA card (#f7f9f9) hai par uske andar ke link
   global mint (#48e5d0) le rahe the — 1.48 contrast, yaani padhe hi nahi
   jaate the. Brand teal me.

   compare: .cmp-vs-badge ka span dark hero par grey (#4b5563) pad raha
   tha — competitor ka naam (Wati) dikh hi nahi raha tha.
   ══════════════════════════════════════════════════════════════════ */
html body:not(.dashboard) .ab-entity a {
    color: #0a474c !important;
    -webkit-text-fill-color: #0a474c !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
html body:not(.dashboard) .ab-entity a:hover { color: #0d5c62 !important; -webkit-text-fill-color: #0d5c62 !important; }

html body:not(.dashboard) .cmp-hero .cmp-vs-badge,
html body:not(.dashboard) .cmp-hero .cmp-vs-badge span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* pricing: "Save 2 months FREE" badge ka SPAN apna emerald background rakhta
   hai — usme white chahiye. Par uska parent <p class="pricing-card-top__text">
   Monthly/Yearly ka label hai jo HALKE (#f8fafc) par baithta hai — usme white
   dena matlab label gayab. Isliye sirf span. (2026-08-25) */
html body:not(.dashboard) .pricing-card-top__text > span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body:not(.dashboard) .pricing-card-top__text {
    color: #1c1c1c !important;
    -webkit-text-fill-color: #1c1c1c !important;
}


/* ══════════════════════════════════════════════════════════════════
   zc-nav-smooth — app navigation ab reload jaisa nahi lagta (2026-08-25)
   Revert: bash /root/zupichat-nav-smooth-revert.sh

   Laravel MPA hai, har click par asli page load hota hai. Do cheezein
   usse "reload" dikhati thi: (a) beech me safed flash, (b) rail aur
   flyout ka dobara se ban-na. Cross-document View Transitions se dono
   theek ho jaate hain — bina kisi JS re-init ke, isliye charts/modals/
   datatables ko haath lagane ki zarurat nahi.

   Rail, flyout aur header ko apna `view-transition-name` de rahe hain:
   browser unhe dono page par EK HI element maanta hai, isliye wo fade
   nahi karte — bas content badalta hai. Yahi SPA wala ehsaas hai.
   ══════════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

/* sirf content crossfade kare — aur tez, warna sust lagta hai */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .16s;
    animation-timing-function: ease-out;
}

/* rail / flyout / topbar transition se bahar — ye hilne nahi chahiye */
html body #zcSidebar        { view-transition-name: zc-rail; }
html body #zcFly            { view-transition-name: zc-fly; }
html body .zc-topbar        { view-transition-name: zc-topbar; }
html body .crm-topnav       { view-transition-name: zc-crm-topnav; }
html body .crm-side         { view-transition-name: zc-crm-side; }

/* navigation progress — prefetch miss ho jaaye to bhi turant feedback */
#zc-nav-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: #0a474c; z-index: 2147483647;
    opacity: 0; pointer-events: none;
    transition: width .18s ease-out, opacity .18s;
    view-transition-name: zc-nav-progress;
}
#zc-nav-progress.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
    #zc-nav-progress { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Link colour brand ka ho (2026-08-25, Aditya)

   main.css me `a { color: hsl(var(--base)) }` hai, jo template ke default
   mint (#48e5d0) par resolve hota tha. Halke card par wo 1.45 contrast
   deta hai — about aur developers par email/doc links padhe hi nahi ja
   rahe the, aur wo ZupiChat ka rang bhi nahi hai.

   Sirf saade link (jinka apna class/rang nahi hai). CTA aur buttons apna
   rang khud dete hain — unhe :not() se chhoda gaya hai, warna dark hero
   ke andar baitha SAFED button apna teal label kho deta.
   ══════════════════════════════════════════════════════════════════ */
html body:not(.dashboard) main a:not([class]),
html body:not(.dashboard) section a:not([class]),
html body:not(.dashboard) .dv-card a,
html body:not(.dashboard) .dv-note a {
    color: #0a474c;
    -webkit-text-fill-color: #0a474c;
}
html body:not(.dashboard) main a:not([class]):hover,
html body:not(.dashboard) section a:not([class]):hover {
    color: #0d5c62;
    -webkit-text-fill-color: #0d5c62;
}

/* developers ke side-nav ka "On this page" 3.06 par tha — ek shade gehra */
html body:not(.dashboard) .dv-nav strong {
    color: #4a5350 !important;
    -webkit-text-fill-color: #4a5350 !important;
}

/* blog cards ka meta (date/category) template ke mint (#48e5d0) par tha —
   halke card par 1.5 contrast aur brand ka rang bhi nahi. (2026-08-25) */
html body:not(.dashboard) .content-list__item,
html body:not(.dashboard) .content-list__item a,
html body:not(.dashboard) .blog-item .content-list__item i {
    color: #1e6f68 !important;
    -webkit-text-fill-color: #1e6f68 !important;
}


/* ══════════════════════════════════════════════════════════════════
   WhatsApp Business profile picture (2026-08-26, Aditya)

   Dono avatar pehle ek icon / ek akshar dikhate the. Ab asli picture
   aati hai (cron se local store hoti hai), to use gol frame me poora
   bharna hai — object-fit: cover, warna non-square picture khinch
   jaati hai. Tint background waise ka waisa hai taaki picture na hone
   par fallback icon wahi purana dikhe.
   ══════════════════════════════════════════════════════════════════ */
html body .zc-side-profile__avatar { overflow: hidden; }
html body .zc-side-profile__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
html body .zc-mhero__ava { overflow: hidden; }
html body .zc-mhero__ava img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}


/* ══════════════════════════════════════════════════════════════════
   Page-head ka action button — chhoti screen par apni line (2026-08-25)
   .zc-page-head flex + nowrap tha, to 390px par title 91px me dabkar
   teen line ka ho jaata tha jabki button 251px le leta tha. Ab head
   wrap karta hai: title poori chaudai leta hai aur button neeche apni
   line par. Ye page_action use karne wali sabhi screens par lagta hai.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    html body .zc-content .zc-page-head { flex-wrap: wrap; }
    html body .zc-content .zc-page-head .zc-page-btn { margin-top: 2px; }
}


/* ══════════════════════════════════════════════════════════════════
   sub-pricing-tighten — Subscription > Pricing Plans (2026-08-25)
   Revert: bash /root/zupichat-sub-pricing-revert.sh

   Naapa gaya tha: card 712px lamba, jisme akeli feature-list 497px —
   gyarah row, har row 43px, font 15.2px. Itni badi list par nazar
   tikti hi nahi thi aur card "bada" lagta tha, premium nahi.

   Ab list ek asli pricing-table ki tarah hai: label baayein, value
   DAAYEIN (space-between), row 28px, font 12.8px. Sirf `#pills-plans`
   ke andar — `partials/pricing.blade.php` marketing /pricing aur
   homepage par bhi chalta hai, wahan haath nahi lagana.
   ══════════════════════════════════════════════════════════════════ */

/* ── card: thoda kasa hua ── */
html body #pills-plans .custom-plan {
    padding: 20px 18px !important;
    border-radius: 12px !important;
}
html body #pills-plans .custom-plan.featured {
    box-shadow: 0 0 0 1px rgba(10,71,76,.10), 0 0 14px #e6e6e6 !important;
}

/* ── header: naam eyebrow, daam hero ── */
html body #pills-plans .custom-plan-header {
    padding: 0 0 14px !important;
    margin: 0 0 14px !important;
    border-bottom: 1px solid #f0f2f2 !important;
}
html body #pills-plans .custom-plan-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: #8a938f !important;
    margin: 0 0 6px !important;
}
html body #pills-plans .custom-plan-price,
html body #pills-plans .custom-plan-price .monthly_price,
html body #pills-plans .custom-plan-price .yearly_price {
    font-size: 29px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
    margin: 0 !important;
}
/* "/ Month" daam ke barabar chillana band kare */
html body #pills-plans .custom-plan-price span span,
html body #pills-plans .custom-plan-price .monthly_price span,
html body #pills-plans .custom-plan-price .yearly_price span {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #8a938f !important;
    -webkit-text-fill-color: #8a938f !important;
    letter-spacing: 0 !important;
    margin-left: 3px !important;
}

/* ── feature list: ab pricing-table, bikhri hui list nahi ── */
html body #pills-plans .custom-plan-features {
    margin: 0 !important;
    padding: 0 !important;
}
html body #pills-plans .custom-plan-features li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    font-size: 12.8px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: #4a5350 !important;
    border-bottom: 0 !important;
}
/* value daayein kinare — yahi ek badlav list ko table bana deta hai */
html body #pills-plans .custom-plan-features li strong {
    margin-left: auto !important;
    font-size: 12.8px !important;
    font-weight: 600 !important;
    color: #1c1c1c !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    padding-left: 10px !important;
}
html body #pills-plans .custom-plan-features li i {
    font-size: 13px !important;
    width: 14px !important;
    flex: 0 0 14px !important;
    text-align: center !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
html body #pills-plans .custom-plan-features li i.la-check,
html body #pills-plans .custom-plan-features li i.fa-check { color: #0a474c !important; }
html body #pills-plans .custom-plan-features li i.la-times,
html body #pills-plans .custom-plan-features li i.fa-times { color: #c9d1cf !important; }
/* jo feature is plan me nahi hai wo shaant rahe */
html body #pills-plans .custom-plan-features li .text-muted {
    color: #b3bcb9 !important;
    text-decoration: line-through !important;
    text-decoration-color: #dde3e1 !important;
}

/* ── CTA ── */
html body #pills-plans .custom-plan-cta {
    margin-top: 16px !important;
    padding: 11px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* ── Monthly/Yearly toggle: poori chaudai se ek compact pill ── */
html body #pills-plans .zc-toggle-wrap { display: flex !important; justify-content: center !important; }
html body #pills-plans .pricing-card-top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 auto 20px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: #f7f9f8 !important;
    border: 1px solid #ececec !important;
}
html body #pills-plans .pricing-card-top__text {
    margin: 0 !important;
    font-size: 12.8px !important;
    font-weight: 500 !important;
    color: #4a5350 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
html body #pills-plans .zc-save-badge {
    font-size: 10px !important;
    letter-spacing: .05em !important;
    padding: 2px 7px !important;
    text-decoration: none !important;
}

/* ── heading block ── */
html body #pills-plans .zc-pricing-head { margin-bottom: 16px !important; }
html body #pills-plans .zc-pricing-title { margin: 8px 0 4px !important; }
html body #pills-plans .zc-pricing-sub { margin: 0 !important; max-width: 620px !important; }

@media (max-width: 575px) {
    html body #pills-plans .custom-plan { padding: 18px 16px !important; }
    html body #pills-plans .custom-plan-price,
    html body #pills-plans .custom-plan-price .monthly_price,
    html body #pills-plans .custom-plan-price .yearly_price { font-size: 26px !important; }
    html body #pills-plans .pricing-card-top { flex-wrap: wrap !important; justify-content: center !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Dark bands ka text padha jaana chahiye (2026-08-25, Aditya)

   custom.css me blanket `body:not(.dashboard) h1..h6 { color:#111827
   !important }` aur wahi `p` ke liye hai. Dark hero/CTA apne container
   par `color:#fff` dete hain — par wo INHERIT hota hai, aur seedha
   match karne wala rule inheritance ko hamesha hara deta hai. Isliye
   har dark band par heading kaali-par-kaali padi thi.

   Do list hain: (1) jo container khud #fff maangta hai — uske andar
   sab kuch white; (2) jo dark hai par text colour deta hi nahi — usme
   sirf heading aur copy, taaki uske andar baitha koi HALKA chip
   white-on-white na ho jaye.

   WhatsApp/Telegram/LinkedIn ke share buttons pehle se hi white-on-brand
   hain — inhe chhua nahi gaya, wahi unka asli look hai.
   ══════════════════════════════════════════════════════════════════ */
html body:not(.dashboard) .ab-hero h1,
html body:not(.dashboard) .ab-hero h2,
html body:not(.dashboard) .ab-hero h3,
html body:not(.dashboard) .ab-hero h4,
html body:not(.dashboard) .ab-hero h5,
html body:not(.dashboard) .ab-hero h6,
html body:not(.dashboard) .ab-hero p,
html body:not(.dashboard) .ab-hero li,
html body:not(.dashboard) .ab-cta h1,
html body:not(.dashboard) .ab-cta h2,
html body:not(.dashboard) .ab-cta h3,
html body:not(.dashboard) .ab-cta h4,
html body:not(.dashboard) .ab-cta h5,
html body:not(.dashboard) .ab-cta h6,
html body:not(.dashboard) .ab-cta p,
html body:not(.dashboard) .ab-cta li,
html body:not(.dashboard) .ag-hero h1,
html body:not(.dashboard) .ag-hero h2,
html body:not(.dashboard) .ag-hero h3,
html body:not(.dashboard) .ag-hero h4,
html body:not(.dashboard) .ag-hero h5,
html body:not(.dashboard) .ag-hero h6,
html body:not(.dashboard) .ag-hero p,
html body:not(.dashboard) .ag-hero li,
html body:not(.dashboard) .ag-plan-badge h1,
html body:not(.dashboard) .ag-plan-badge h2,
html body:not(.dashboard) .ag-plan-badge h3,
html body:not(.dashboard) .ag-plan-badge h4,
html body:not(.dashboard) .ag-plan-badge h5,
html body:not(.dashboard) .ag-plan-badge h6,
html body:not(.dashboard) .ag-plan-badge p,
html body:not(.dashboard) .ag-plan-badge li,
html body:not(.dashboard) .ag-plan-cta h1,
html body:not(.dashboard) .ag-plan-cta h2,
html body:not(.dashboard) .ag-plan-cta h3,
html body:not(.dashboard) .ag-plan-cta h4,
html body:not(.dashboard) .ag-plan-cta h5,
html body:not(.dashboard) .ag-plan-cta h6,
html body:not(.dashboard) .ag-plan-cta p,
html body:not(.dashboard) .ag-plan-cta li,
html body:not(.dashboard) .ag-step-num h1,
html body:not(.dashboard) .ag-step-num h2,
html body:not(.dashboard) .ag-step-num h3,
html body:not(.dashboard) .ag-step-num h4,
html body:not(.dashboard) .ag-step-num h5,
html body:not(.dashboard) .ag-step-num h6,
html body:not(.dashboard) .ag-step-num p,
html body:not(.dashboard) .ag-step-num li,
html body:not(.dashboard) .ag-cta h1,
html body:not(.dashboard) .ag-cta h2,
html body:not(.dashboard) .ag-cta h3,
html body:not(.dashboard) .ag-cta h4,
html body:not(.dashboard) .ag-cta h5,
html body:not(.dashboard) .ag-cta h6,
html body:not(.dashboard) .ag-cta p,
html body:not(.dashboard) .ag-cta li,
html body:not(.dashboard) .cs-hero h1,
html body:not(.dashboard) .cs-hero h2,
html body:not(.dashboard) .cs-hero h3,
html body:not(.dashboard) .cs-hero h4,
html body:not(.dashboard) .cs-hero h5,
html body:not(.dashboard) .cs-hero h6,
html body:not(.dashboard) .cs-hero p,
html body:not(.dashboard) .cs-hero li,
html body:not(.dashboard) .cs-card-header h1,
html body:not(.dashboard) .cs-card-header h2,
html body:not(.dashboard) .cs-card-header h3,
html body:not(.dashboard) .cs-card-header h4,
html body:not(.dashboard) .cs-card-header h5,
html body:not(.dashboard) .cs-card-header h6,
html body:not(.dashboard) .cs-card-header p,
html body:not(.dashboard) .cs-card-header li,
html body:not(.dashboard) .cs-cta h1,
html body:not(.dashboard) .cs-cta h2,
html body:not(.dashboard) .cs-cta h3,
html body:not(.dashboard) .cs-cta h4,
html body:not(.dashboard) .cs-cta h5,
html body:not(.dashboard) .cs-cta h6,
html body:not(.dashboard) .cs-cta p,
html body:not(.dashboard) .cs-cta li,
html body:not(.dashboard) .cl-hero h1,
html body:not(.dashboard) .cl-hero h2,
html body:not(.dashboard) .cl-hero h3,
html body:not(.dashboard) .cl-hero h4,
html body:not(.dashboard) .cl-hero h5,
html body:not(.dashboard) .cl-hero h6,
html body:not(.dashboard) .cl-hero p,
html body:not(.dashboard) .cl-hero li,
html body:not(.dashboard) .cmp-hero h1,
html body:not(.dashboard) .cmp-hero h2,
html body:not(.dashboard) .cmp-hero h3,
html body:not(.dashboard) .cmp-hero h4,
html body:not(.dashboard) .cmp-hero h5,
html body:not(.dashboard) .cmp-hero h6,
html body:not(.dashboard) .cmp-hero p,
html body:not(.dashboard) .cmp-hero li,
html body:not(.dashboard) .cmp-cta h1,
html body:not(.dashboard) .cmp-cta h2,
html body:not(.dashboard) .cmp-cta h3,
html body:not(.dashboard) .cmp-cta h4,
html body:not(.dashboard) .cmp-cta h5,
html body:not(.dashboard) .cmp-cta h6,
html body:not(.dashboard) .cmp-cta p,
html body:not(.dashboard) .cmp-cta li,
html body:not(.dashboard) .dv-hero h1,
html body:not(.dashboard) .dv-hero h2,
html body:not(.dashboard) .dv-hero h3,
html body:not(.dashboard) .dv-hero h4,
html body:not(.dashboard) .dv-hero h5,
html body:not(.dashboard) .dv-hero h6,
html body:not(.dashboard) .dv-hero p,
html body:not(.dashboard) .dv-hero li,
html body:not(.dashboard) .dv-ep b h1,
html body:not(.dashboard) .dv-ep b h2,
html body:not(.dashboard) .dv-ep b h3,
html body:not(.dashboard) .dv-ep b h4,
html body:not(.dashboard) .dv-ep b h5,
html body:not(.dashboard) .dv-ep b h6,
html body:not(.dashboard) .dv-ep b p,
html body:not(.dashboard) .dv-ep b li,
html body:not(.dashboard) .tools-hero h1,
html body:not(.dashboard) .tools-hero h2,
html body:not(.dashboard) .tools-hero h3,
html body:not(.dashboard) .tools-hero h4,
html body:not(.dashboard) .tools-hero h5,
html body:not(.dashboard) .tools-hero h6,
html body:not(.dashboard) .tools-hero p,
html body:not(.dashboard) .tools-hero li,
html body:not(.dashboard) .tool-btn h1,
html body:not(.dashboard) .tool-btn h2,
html body:not(.dashboard) .tool-btn h3,
html body:not(.dashboard) .tool-btn h4,
html body:not(.dashboard) .tool-btn h5,
html body:not(.dashboard) .tool-btn h6,
html body:not(.dashboard) .tool-btn p,
html body:not(.dashboard) .tool-btn li,
html body:not(.dashboard) .template-cat.active h1,
html body:not(.dashboard) .template-cat.active h2,
html body:not(.dashboard) .template-cat.active h3,
html body:not(.dashboard) .template-cat.active h4,
html body:not(.dashboard) .template-cat.active h5,
html body:not(.dashboard) .template-cat.active h6,
html body:not(.dashboard) .template-cat.active p,
html body:not(.dashboard) .template-cat.active li,
html body:not(.dashboard) .template-cat h1,
html body:not(.dashboard) .template-cat h2,
html body:not(.dashboard) .template-cat h3,
html body:not(.dashboard) .template-cat h4,
html body:not(.dashboard) .template-cat h5,
html body:not(.dashboard) .template-cat h6,
html body:not(.dashboard) .template-cat p,
html body:not(.dashboard) .template-cat li,
html body:not(.dashboard) .cta-box h1,
html body:not(.dashboard) .cta-box h2,
html body:not(.dashboard) .cta-box h3,
html body:not(.dashboard) .cta-box h4,
html body:not(.dashboard) .cta-box h5,
html body:not(.dashboard) .cta-box h6,
html body:not(.dashboard) .cta-box p,
html body:not(.dashboard) .cta-box li,
html body:not(.dashboard) .hc-hero h1,
html body:not(.dashboard) .hc-hero h2,
html body:not(.dashboard) .hc-hero h3,
html body:not(.dashboard) .hc-hero h4,
html body:not(.dashboard) .hc-hero h5,
html body:not(.dashboard) .hc-hero h6,
html body:not(.dashboard) .hc-hero p,
html body:not(.dashboard) .hc-hero li,
html body:not(.dashboard) .hc-btn-email h1,
html body:not(.dashboard) .hc-btn-email h2,
html body:not(.dashboard) .hc-btn-email h3,
html body:not(.dashboard) .hc-btn-email h4,
html body:not(.dashboard) .hc-btn-email h5,
html body:not(.dashboard) .hc-btn-email h6,
html body:not(.dashboard) .hc-btn-email p,
html body:not(.dashboard) .hc-btn-email li,
html body:not(.dashboard) .ind-hero h1,
html body:not(.dashboard) .ind-hero h2,
html body:not(.dashboard) .ind-hero h3,
html body:not(.dashboard) .ind-hero h4,
html body:not(.dashboard) .ind-hero h5,
html body:not(.dashboard) .ind-hero h6,
html body:not(.dashboard) .ind-hero p,
html body:not(.dashboard) .ind-hero li,
html body:not(.dashboard) .ind-cta h1,
html body:not(.dashboard) .ind-cta h2,
html body:not(.dashboard) .ind-cta h3,
html body:not(.dashboard) .ind-cta h4,
html body:not(.dashboard) .ind-cta h5,
html body:not(.dashboard) .ind-cta h6,
html body:not(.dashboard) .ind-cta p,
html body:not(.dashboard) .ind-cta li,
html body:not(.dashboard) .ind-usecase-icon h1,
html body:not(.dashboard) .ind-usecase-icon h2,
html body:not(.dashboard) .ind-usecase-icon h3,
html body:not(.dashboard) .ind-usecase-icon h4,
html body:not(.dashboard) .ind-usecase-icon h5,
html body:not(.dashboard) .ind-usecase-icon h6,
html body:not(.dashboard) .ind-usecase-icon p,
html body:not(.dashboard) .ind-usecase-icon li,
html body:not(.dashboard) .ind-flow-step-num h1,
html body:not(.dashboard) .ind-flow-step-num h2,
html body:not(.dashboard) .ind-flow-step-num h3,
html body:not(.dashboard) .ind-flow-step-num h4,
html body:not(.dashboard) .ind-flow-step-num h5,
html body:not(.dashboard) .ind-flow-step-num h6,
html body:not(.dashboard) .ind-flow-step-num p,
html body:not(.dashboard) .ind-flow-step-num li,
html body:not(.dashboard) .rp-copy-btn h1,
html body:not(.dashboard) .rp-copy-btn h2,
html body:not(.dashboard) .rp-copy-btn h3,
html body:not(.dashboard) .rp-copy-btn h4,
html body:not(.dashboard) .rp-copy-btn h5,
html body:not(.dashboard) .rp-copy-btn h6,
html body:not(.dashboard) .rp-copy-btn p,
html body:not(.dashboard) .rp-copy-btn li,
html body:not(.dashboard) .rp-faq-item.open .rp-faq-toggle h1,
html body:not(.dashboard) .rp-faq-item.open .rp-faq-toggle h2,
html body:not(.dashboard) .rp-faq-item.open .rp-faq-toggle h3,
html body:not(.dashboard) .rp-faq-item.open .rp-faq-toggle h4,
html body:not(.dashboard) .rp-faq-item.open .rp-faq-toggle h5,
html body:not(.dashboard) .rp-faq-item.open .rp-faq-toggle h6,
html body:not(.dashboard) .rp-faq-item.open .rp-faq-toggle p,
html body:not(.dashboard) .rp-faq-item.open .rp-faq-toggle li,
html body:not(.dashboard) .quiz-header h1,
html body:not(.dashboard) .quiz-header h2,
html body:not(.dashboard) .quiz-header h3,
html body:not(.dashboard) .quiz-header h4,
html body:not(.dashboard) .quiz-header h5,
html body:not(.dashboard) .quiz-header h6,
html body:not(.dashboard) .quiz-header p,
html body:not(.dashboard) .quiz-header li,
html body:not(.dashboard) .quiz-next h1,
html body:not(.dashboard) .quiz-next h2,
html body:not(.dashboard) .quiz-next h3,
html body:not(.dashboard) .quiz-next h4,
html body:not(.dashboard) .quiz-next h5,
html body:not(.dashboard) .quiz-next h6,
html body:not(.dashboard) .quiz-next p,
html body:not(.dashboard) .quiz-next li,
html body:not(.dashboard) .qr-hero h1,
html body:not(.dashboard) .qr-hero h2,
html body:not(.dashboard) .qr-hero h3,
html body:not(.dashboard) .qr-hero h4,
html body:not(.dashboard) .qr-hero h5,
html body:not(.dashboard) .qr-hero h6,
html body:not(.dashboard) .qr-hero p,
html body:not(.dashboard) .qr-hero li,
html body:not(.dashboard) .qr-btn-primary h1,
html body:not(.dashboard) .qr-btn-primary h2,
html body:not(.dashboard) .qr-btn-primary h3,
html body:not(.dashboard) .qr-btn-primary h4,
html body:not(.dashboard) .qr-btn-primary h5,
html body:not(.dashboard) .qr-btn-primary h6,
html body:not(.dashboard) .qr-btn-primary p,
html body:not(.dashboard) .qr-btn-primary li,
html body:not(.dashboard) .sec-hero h1,
html body:not(.dashboard) .sec-hero h2,
html body:not(.dashboard) .sec-hero h3,
html body:not(.dashboard) .sec-hero h4,
html body:not(.dashboard) .sec-hero h5,
html body:not(.dashboard) .sec-hero h6,
html body:not(.dashboard) .sec-hero p,
html body:not(.dashboard) .sec-hero li,
html body:not(.dashboard) .sec-cta h1,
html body:not(.dashboard) .sec-cta h2,
html body:not(.dashboard) .sec-cta h3,
html body:not(.dashboard) .sec-cta h4,
html body:not(.dashboard) .sec-cta h5,
html body:not(.dashboard) .sec-cta h6,
html body:not(.dashboard) .sec-cta p,
html body:not(.dashboard) .sec-cta li,
html body:not(.dashboard) .sp-hero h1,
html body:not(.dashboard) .sp-hero h2,
html body:not(.dashboard) .sp-hero h3,
html body:not(.dashboard) .sp-hero h4,
html body:not(.dashboard) .sp-hero h5,
html body:not(.dashboard) .sp-hero h6,
html body:not(.dashboard) .sp-hero p,
html body:not(.dashboard) .sp-hero li,
html body:not(.dashboard) .sp-submit h1,
html body:not(.dashboard) .sp-submit h2,
html body:not(.dashboard) .sp-submit h3,
html body:not(.dashboard) .sp-submit h4,
html body:not(.dashboard) .sp-submit h5,
html body:not(.dashboard) .sp-submit h6,
html body:not(.dashboard) .sp-submit p,
html body:not(.dashboard) .sp-submit li,
html body:not(.dashboard) .st-hero h1,
html body:not(.dashboard) .st-hero h2,
html body:not(.dashboard) .st-hero h3,
html body:not(.dashboard) .st-hero h4,
html body:not(.dashboard) .st-hero h5,
html body:not(.dashboard) .st-hero h6,
html body:not(.dashboard) .st-hero p,
html body:not(.dashboard) .st-hero li {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body:not(.dashboard) .cl-dot h1,
html body:not(.dashboard) .cl-dot h2,
html body:not(.dashboard) .cl-dot h3,
html body:not(.dashboard) .cl-dot h4,
html body:not(.dashboard) .cl-dot h5,
html body:not(.dashboard) .cl-dot h6,
html body:not(.dashboard) .cl-dot p,
html body:not(.dashboard) .cl-dot li,
html body:not(.dashboard) .dv-ep b.get h1,
html body:not(.dashboard) .dv-ep b.get h2,
html body:not(.dashboard) .dv-ep b.get h3,
html body:not(.dashboard) .dv-ep b.get h4,
html body:not(.dashboard) .dv-ep b.get h5,
html body:not(.dashboard) .dv-ep b.get h6,
html body:not(.dashboard) .dv-ep b.get p,
html body:not(.dashboard) .dv-ep b.get li,
html body:not(.dashboard) pre.dv-code h1,
html body:not(.dashboard) pre.dv-code h2,
html body:not(.dashboard) pre.dv-code h3,
html body:not(.dashboard) pre.dv-code h4,
html body:not(.dashboard) pre.dv-code h5,
html body:not(.dashboard) pre.dv-code h6,
html body:not(.dashboard) pre.dv-code p,
html body:not(.dashboard) pre.dv-code li,
html body:not(.dashboard) .rp-steps-line h1,
html body:not(.dashboard) .rp-steps-line h2,
html body:not(.dashboard) .rp-steps-line h3,
html body:not(.dashboard) .rp-steps-line h4,
html body:not(.dashboard) .rp-steps-line h5,
html body:not(.dashboard) .rp-steps-line h6,
html body:not(.dashboard) .rp-steps-line p,
html body:not(.dashboard) .rp-steps-line li,
html body:not(.dashboard) .rp-step-badge-dot-1 h1,
html body:not(.dashboard) .rp-step-badge-dot-1 h2,
html body:not(.dashboard) .rp-step-badge-dot-1 h3,
html body:not(.dashboard) .rp-step-badge-dot-1 h4,
html body:not(.dashboard) .rp-step-badge-dot-1 h5,
html body:not(.dashboard) .rp-step-badge-dot-1 h6,
html body:not(.dashboard) .rp-step-badge-dot-1 p,
html body:not(.dashboard) .rp-step-badge-dot-1 li,
html body:not(.dashboard) .rp-step-badge-dot-2 h1,
html body:not(.dashboard) .rp-step-badge-dot-2 h2,
html body:not(.dashboard) .rp-step-badge-dot-2 h3,
html body:not(.dashboard) .rp-step-badge-dot-2 h4,
html body:not(.dashboard) .rp-step-badge-dot-2 h5,
html body:not(.dashboard) .rp-step-badge-dot-2 h6,
html body:not(.dashboard) .rp-step-badge-dot-2 p,
html body:not(.dashboard) .rp-step-badge-dot-2 li,
html body:not(.dashboard) .rp-cta-section h1,
html body:not(.dashboard) .rp-cta-section h2,
html body:not(.dashboard) .rp-cta-section h3,
html body:not(.dashboard) .rp-cta-section h4,
html body:not(.dashboard) .rp-cta-section h5,
html body:not(.dashboard) .rp-cta-section h6,
html body:not(.dashboard) .rp-cta-section p,
html body:not(.dashboard) .rp-cta-section li,
html body:not(.dashboard) .rpc-head-tag span h1,
html body:not(.dashboard) .rpc-head-tag span h2,
html body:not(.dashboard) .rpc-head-tag span h3,
html body:not(.dashboard) .rpc-head-tag span h4,
html body:not(.dashboard) .rpc-head-tag span h5,
html body:not(.dashboard) .rpc-head-tag span h6,
html body:not(.dashboard) .rpc-head-tag span p,
html body:not(.dashboard) .rpc-head-tag span li {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Container ka apna text — sirf `color`. -webkit-text-fill-color yahan
   JAAN-BOOJH KAR nahi hai: wo inherit hota hai aur child ke apne `color` ko
   bhi hara deta hai, jisse in dark boxes ke andar baithi HALKI chip
   (.rp-hero-badge) ka teal text safed-par-safed ho gaya tha. */
html body:not(.dashboard) .cl-dot,
html body:not(.dashboard) .dv-ep b.get,
html body:not(.dashboard) pre.dv-code,
html body:not(.dashboard) .rp-steps-line,
html body:not(.dashboard) .rp-step-badge-dot-1,
html body:not(.dashboard) .rp-step-badge-dot-2,
html body:not(.dashboard) .rp-cta-section,
html body:not(.dashboard) .rpc-head-tag span {
    color: #ffffff !important;
}

/* Featured plan card (.rp-plan.featured) ka price block teal par baithta hai,
   baaki do plan cards SAFED par. Isliye sirf featured wale ka "/ mo" white —
   blanket rule doosre do card ka suffix gayab kar deta. (2026-08-26) */
html body:not(.dashboard) .rp-plan.featured .rp-plan-price,
html body:not(.dashboard) .rp-plan.featured .rp-plan-price span {
    color: #ffffff !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
}