/**
 * Solid 5-color theme — light + dark.
 *
 * Light: White / Canvas / Brand / Ink / Mist
 * Dark:  Black shells with readable light text
 */
:root,
html[data-theme="light"] {
    --white: #FFFFFF;
    --canvas: #F3F6F5;
    --brand: #095650;
    --ink: #095650;
    --mist: #6B7872;

    --bg: var(--canvas);
    --bg-elevated: var(--white);
    --bg-card: var(--white);
    --text: var(--ink);
    --text-muted: var(--mist);
    --text-dim: var(--mist);
    --border: #D8E0DC;
    --shadow: 0 8px 24px rgba(20, 32, 28, 0.08);
    --shadow-sm: 0 2px 8px rgba(20, 32, 28, 0.06);
    --radius: 12px;
    --radius-lg: 16px;
    --container: 1180px;
    --nav-bg: rgba(255, 255, 255, 0.92);
    --header-bg: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --input-bg: #F8FAF9;
    --danger: #DC2626;
    --star: #F59E0B;
    color-scheme: light;
}

html[data-theme="dark"] {
    --white: #121212;
    --canvas: #0a0a0a;
    --brand: #14b8a6;
    --ink: #F3F4F6;
    --mist: #9CA3AF;

    --bg: #0a0a0a;
    --bg-elevated: #121212;
    --bg-card: #141414;
    --text: #F3F4F6;
    --text-muted: #9CA3AF;
    --text-dim: #9CA3AF;
    --border: #2a2a2a;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --nav-bg: rgba(10, 10, 10, 0.94);
    --header-bg: #0f0f0f;
    --sidebar-bg: #0f0f0f;
    --input-bg: #1a1a1a;
    --danger: #ef4444;
    --star: #FBBF24;
    color-scheme: dark;
}

/* ---------- Theme toggle button ---------- */
.theme-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0 !important;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text) !important;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
    box-shadow: var(--shadow-sm);
    line-height: 1;
    text-decoration: none !important;
    margin: 0;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    border-color: var(--brand);
    color: var(--brand) !important;
    transform: translateY(-1px);
}

.theme-toggle-btn i {
    font-size: 15px;
    width: auto !important;
    pointer-events: none;
}

.theme-toggle-btn [data-theme-icon="sun"] {
    display: none;
    color: #FBBF24;
}

html[data-theme="dark"] .theme-toggle-btn [data-theme-icon="moon"] {
    display: none;
}

html[data-theme="dark"] .theme-toggle-btn [data-theme-icon="sun"] {
    display: inline-block;
}

/* Nav theme toggle defaults */
.user-header-links .theme-toggle-btn {
    background: var(--bg-elevated);
}

/* ---------- Global dark surfaces ---------- */
html[data-theme="dark"] body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .bg-gradient,
html[data-theme="dark"] .bg-circles {
    opacity: 0.35;
    filter: saturate(0.8);
}

/* ===== Public nav: pure white (light) / pure black (dark) ===== */
html[data-theme="light"] nav,
html:not([data-theme]) nav {
    background: #FFFFFF !important;
    border-bottom: 1px solid #D8E0DC !important;
}

html[data-theme="dark"] nav {
    background: #000000 !important;
    border-bottom: 1px solid #222222 !important;
    backdrop-filter: none;
}

html[data-theme="dark"] nav .logo,
html[data-theme="dark"] .logo {
    color: #14b8a6 !important;
}

html[data-theme="dark"] .nav-links a {
    color: #E5E7EB !important;
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.nav-link-active {
    color: #5eead4 !important;
}

html[data-theme="dark"] .nav-btn {
    background: #095650 !important;
    color: #FFFFFF !important;
    border-color: #095650 !important;
}

html[data-theme="dark"] .nav-btn:hover {
    background: #0F766E !important;
    border-color: #0F766E !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .hamburger span {
    background: #FFFFFF !important;
}

html[data-theme="light"] .hamburger span,
html:not([data-theme]) .hamburger span {
    background: #095650 !important;
}

/* Desktop: keep link row transparent (bar supplies bg) */
html[data-theme="dark"] .nav-links {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Mobile drawer: pure black when dark, pure white when light */
@media (max-width: 992px) {
    html[data-theme="light"] .nav-links,
    html[data-theme="light"] .nav-links.active,
    html:not([data-theme]) .nav-links,
    html:not([data-theme]) .nav-links.active {
        background: #FFFFFF !important;
        border-bottom: 1px solid #D8E0DC !important;
        box-shadow: 0 16px 40px rgba(20, 32, 28, 0.12) !important;
    }

    html[data-theme="light"] .nav-links a,
    html:not([data-theme]) .nav-links a {
        color: #4B5563 !important;
        border-bottom-color: #E5E7EB !important;
    }

    html[data-theme="dark"] .nav-links,
    html[data-theme="dark"] .nav-links.active {
        background: #000000 !important;
        border-bottom: 1px solid #222222 !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
    }

    html[data-theme="dark"] .nav-links a {
        color: #E5E7EB !important;
        border-bottom-color: #222222 !important;
    }

    html[data-theme="dark"] .nav-links .theme-toggle-btn {
        background: #111111 !important;
        border-color: #333333 !important;
        color: #F3F4F6 !important;
    }

    html[data-theme="light"] .nav-links .theme-toggle-btn,
    html:not([data-theme]) .nav-links .theme-toggle-btn {
        background: #FFFFFF !important;
        border-color: #D8E0DC !important;
        color: #095650 !important;
    }
}

html[data-theme="dark"] .nav-links .theme-toggle-btn {
    background: #111111 !important;
    border-color: #333333 !important;
    color: #F3F4F6 !important;
}

/* Sections / cards on marketing site */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .features,
html[data-theme="dark"] .trusted-by,
html[data-theme="dark"] .reviews-section,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .integration-showcase,
html[data-theme="dark"] section.documentation,
html[data-theme="dark"] #docs,
html[data-theme="dark"] .documentation {
    background: #0a0a0a !important;
    color: #F3F4F6 !important;
    border-color: #2a2a2a !important;
}

/* Documentation block (homepage #docs + docs pages) */
html[data-theme="dark"] section.documentation,
html[data-theme="dark"] #docs.documentation {
    background: #0a0a0a !important;
}

html[data-theme="dark"] .documentation .section-title,
html[data-theme="dark"] #docs .section-title,
html[data-theme="dark"] .doc-content h3,
html[data-theme="dark"] .doc-item h4,
html[data-theme="dark"] .doc-menu .doc-item h4,
html[data-theme="dark"] .surface-card h3 {
    color: #F3F4F6 !important;
}

html[data-theme="dark"] .documentation .section-subtitle,
html[data-theme="dark"] #docs .section-subtitle,
html[data-theme="dark"] .doc-content p,
html[data-theme="dark"] .doc-content li,
html[data-theme="dark"] .doc-content ol,
html[data-theme="dark"] .doc-item p,
html[data-theme="dark"] .doc-menu .doc-item p,
html[data-theme="dark"] .surface-card p,
html[data-theme="dark"] .surface-card li,
html[data-theme="dark"] .surface-card ol {
    color: #9CA3AF !important;
}

html[data-theme="dark"] .doc-content,
html[data-theme="dark"] .surface-card,
html[data-theme="dark"] .section-panel,
html[data-theme="dark"] .content-section {
    background: #141414 !important;
    border-color: #2a2a2a !important;
    color: #F3F4F6 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .doc-item,
html[data-theme="dark"] .doc-menu .doc-item {
    background: #141414 !important;
    border-color: #2a2a2a !important;
    border-left-color: #2a2a2a !important;
    color: #F3F4F6 !important;
}

html[data-theme="dark"] .doc-item.active,
html[data-theme="dark"] .doc-item:hover,
html[data-theme="dark"] .doc-menu .doc-item.active,
html[data-theme="dark"] .doc-menu .doc-item:hover {
    background: #1a1a1a !important;
    border-color: var(--brand) !important;
    border-left-color: var(--brand) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .doc-content pre,
html[data-theme="dark"] .content-section pre {
    background: #0f0f0f !important;
    border-color: #2a2a2a !important;
    color: #E5E7EB !important;
}

html[data-theme="dark"] .doc-content code,
html[data-theme="dark"] .content-section code {
    color: #5eead4 !important;
}

html[data-theme="dark"] .doc-content strong,
html[data-theme="dark"] .content-section strong {
    color: #F3F4F6 !important;
}

html[data-theme="dark"] .doc-content a,
html[data-theme="dark"] .content-section a {
    color: var(--brand) !important;
}

/* Inline light colors used in homepage docs list */
html[data-theme="dark"] #docs ol,
html[data-theme="dark"] #docs ol li {
    color: #9CA3AF !important;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .hero-text h1 {
    color: var(--text) !important;
}

html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .hero-text p,
html[data-theme="dark"] p {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .update-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .hero-stat,
html[data-theme="dark"] .hero-badge,
html[data-theme="dark"] .hero-float-card,
html[data-theme="dark"] .app-preloader-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .pricing-card h3,
html[data-theme="dark"] .review-name,
html[data-theme="dark"] .hero-float-card strong {
    color: var(--text) !important;
}

html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .pricing-card li,
html[data-theme="dark"] .review-text,
html[data-theme="dark"] .review-role,
html[data-theme="dark"] .hero-float-card span {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .btn-secondary {
    background: #1a1a1a !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .btn-secondary:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background: #141414 !important;
}

html[data-theme="dark"] .btn:not(.btn-secondary):not(.header-logout-btn):not(.sidebar-logout-btn) {
    color: #FFFFFF !important;
}

html[data-theme="dark"] footer {
    background: #0a0a0a !important;
    border-top-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] footer a,
html[data-theme="dark"] .footer-col a,
html[data-theme="dark"] .copyright {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] footer a:hover {
    color: var(--brand) !important;
}

html[data-theme="dark"] .hero-wave path {
    fill: #0a0a0a !important;
}

html[data-theme="dark"] .hero.hero-animated {
    background:
        radial-gradient(1200px 600px at 10% 10%, rgba(20, 184, 166, 0.12), transparent 55%),
        radial-gradient(900px 500px at 90% 20%, rgba(9, 86, 80, 0.08), transparent 50%),
        linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%) !important;
}

html[data-theme="dark"] .hero-dashboard-img {
    border-color: var(--border) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .sticker-wrapper,
html[data-theme="dark"] .brand-item {
    filter: brightness(0.95) contrast(1.05);
}

html[data-theme="dark"] .reviews-progress {
    background: #222 !important;
}

html[data-theme="dark"] .review-region.is-india {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .review-region.is-global {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: rgba(129, 140, 248, 0.35) !important;
    color: #a5b4fc !important;
}

html[data-theme="dark"] #cookie-consent-banner {
    background: #141414 !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .cookie-consent-copy h3 {
    color: var(--text) !important;
}

html[data-theme="dark"] .cookie-consent-copy p {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .cookie-btn-essential {
    background: #1a1a1a !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] #app-preloader {
    background: rgba(10, 10, 10, 0.92) !important;
}

html[data-theme="dark"] .app-preloader-text {
    color: var(--text) !important;
}

html[data-theme="dark"] .app-preloader-sub {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .app-preloader-bar {
    background: #222 !important;
}

/* Pricing cards */
html[data-theme="dark"] .price {
    color: var(--text) !important;
}

html[data-theme="dark"] .pricing-card ul li {
    color: var(--text-muted) !important;
}

/* ---------- User dashboard shell ---------- */
html[data-theme="dark"] body.user-shell {
    background: #0a0a0a !important;
    color: var(--text) !important;
}

/* User header: pure black / pure white to match public nav */
html[data-theme="light"] .user-header,
html:not([data-theme]) .user-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #D8E0DC !important;
}

html[data-theme="dark"] .user-header {
    background: #000000 !important;
    border-bottom: 1px solid #222222 !important;
}

html[data-theme="dark"] .user-header .logo,
html[data-theme="dark"] .user-header .logo span {
    color: var(--brand) !important;
}

html[data-theme="dark"] .user-header-links a {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .user-header-links a:hover {
    color: var(--brand) !important;
}

html[data-theme="dark"] .header-btn {
    background: #1a1a1a !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .header-btn:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background: #141414 !important;
}

html[data-theme="dark"] .hamburger span {
    background: var(--text) !important;
}

html[data-theme="dark"] .sidebar {
    background: var(--sidebar-bg) !important;
    border-right-color: var(--border) !important;
}

html[data-theme="dark"] .sidebar-link {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .sidebar-link:hover {
    background: #1a1a1a !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .sidebar-link.active {
    background: var(--brand) !important;
    color: #FFFFFF !important;
    border-color: var(--brand) !important;
}

html[data-theme="dark"] .sidebar-logout {
    border-top-color: var(--border) !important;
}

html[data-theme="dark"] .main-content,
html[data-theme="dark"] #app-main {
    background: #0a0a0a !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .main-content h1,
html[data-theme="dark"] .main-content h2,
html[data-theme="dark"] .main-content h3,
html[data-theme="dark"] .main-content h4,
html[data-theme="dark"] .page-sub,
html[data-theme="dark"] .review-page h1 {
    color: var(--text) !important;
}

html[data-theme="dark"] .main-content p,
html[data-theme="dark"] .main-content label,
html[data-theme="dark"] .main-content small,
html[data-theme="dark"] .review-page .page-sub {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .dashboard-stat,
html[data-theme="dark"] .yt-gmb-card,
html[data-theme="dark"] .yt-gmb-stat-card,
html[data-theme="dark"] .yt-gmb-stats-grid .yt-gmb-stat-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .coupon-card,
html[data-theme="dark"] .review-profile-card,
html[data-theme="dark"] .review-form-card,
html[data-theme="dark"] .inbox-item,
html[data-theme="dark"] .connect-card,
html[data-theme="dark"] .empty-card {
    background: var(--bg-card, #141414) !important;
    background-color: var(--bg-card, #141414) !important;
    border-color: var(--border, #2a2a2a) !important;
    color: var(--text, #F3F4F6) !important;
}

html[data-theme="dark"] .yt-gmb-stat-card h3,
html[data-theme="dark"] .yt-gmb-stats-grid h3 {
    color: var(--text, #E5E7EB) !important;
}

html[data-theme="dark"] .yt-gmb-stat-card .value,
html[data-theme="dark"] .yt-gmb-stats-grid .value {
    color: #2dd4bf !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] #review_text,
html[data-theme="dark"] #couponCodeInput,
html[data-theme="dark"] .reply-modal textarea.form-control {
    background: var(--input-bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #6b7280 !important;
}

html[data-theme="dark"] .reply-modal,
html[data-theme="dark"] .reply-modal-overlay {
    /* overlay handled separately */
}

html[data-theme="dark"] .reply-modal-overlay {
    background: rgba(0, 0, 0, 0.72) !important;
}

html[data-theme="dark"] .reply-modal {
    background: #141414 !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .reply-modal-header h3,
html[data-theme="dark"] .reply-modal label {
    color: var(--text) !important;
}

html[data-theme="dark"] .reply-modal-close,
html[data-theme="dark"] .reply-modal-actions .btn-cancel {
    background: #1a1a1a !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .tab-btn {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .tab-btn.active {
    color: var(--brand) !important;
    border-bottom-color: var(--brand) !important;
}

html[data-theme="dark"] .tabs {
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .sidebar-overlay {
    background: #000 !important;
}

html[data-theme="dark"] .plan-name,
html[data-theme="dark"] .price-amount,
html[data-theme="dark"] .header-section h1 {
    color: var(--text) !important;
}

html[data-theme="dark"] .feature-list li,
html[data-theme="dark"] .price-sub,
html[data-theme="dark"] .header-section p {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .plan-card {
    background: #141414 !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .alert-box.success,
html[data-theme="dark"] .alert.success {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .alert-box.error,
html[data-theme="dark"] .alert.error {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .region-pill.india {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="dark"] .region-pill.intl {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #a5b4fc !important;
    border-color: rgba(129, 140, 248, 0.35) !important;
}

html[data-theme="dark"] .star-rating label {
    color: #374151;
}

html[data-theme="dark"] .star-rating label:hover,
html[data-theme="dark"] .star-rating label:hover ~ label,
html[data-theme="dark"] .star-rating input:checked ~ label {
    color: var(--star) !important;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
    color: var(--text) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] th {
    background: #1a1a1a !important;
}

/* Upsell modal */
html[data-theme="dark"] .upsell-modal {
    background: #141414 !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .upsell-modal h2,
html[data-theme="dark"] .upsell-modal .price {
    color: var(--text) !important;
}

html[data-theme="dark"] .upsell-modal p {
    color: var(--text-muted) !important;
}