/**
 * KIE TTS — тёмная тема и анимации кнопок
 */

:root {
    --kie-bg: #080c14;
    --kie-bg-elevated: #0f1520;
    --kie-surface: #151d2e;
    --kie-surface-hover: #1c2740;
    --kie-border: rgba(148, 163, 184, 0.14);
    --kie-border-strong: rgba(129, 140, 248, 0.35);
    --kie-text: #f1f5f9;
    --kie-text-muted: #94a3b8;
    --kie-primary: #6366f1;
    --kie-primary-light: #818cf8;
    --kie-primary-glow: rgba(99, 102, 241, 0.45);
    --kie-accent: #22d3ee;
    --kie-success: #34d399;
    --kie-danger: #f87171;
    --kie-radius: 14px;
    --kie-radius-sm: 10px;
    --kie-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --kie-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --kie-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ——— Страница (body) ——— */
body.kie-tts-plugin-page-body,
body.kie-tts-dashboard-page-body,
body.kie-tts-auth-page-body {
    background: var(--kie-bg) !important;
    color: var(--kie-text);
}

body.kie-tts-dashboard-page-body .l-section,
body.kie-tts-auth-page-body .l-section {
    background: transparent !important;
}

/* ——— Обёртки ——— */
.kie-tts-dashboard,
.kie-tts-auth-page {
    color: var(--kie-text);
}

.kie-tts-dashboard,
.kie-tts-dashboard.zv-like-dashboard,
.kie-tts-dashboard.api-docs-page {
    background:
        radial-gradient(ellipse 80% 50% at 0% -10%, rgba(99, 102, 241, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 45% at 100% 0%, rgba(34, 211, 238, 0.1), transparent 50%),
        linear-gradient(180deg, #0c1018 0%, var(--kie-bg) 100%) !important;
    border: 1px solid var(--kie-border) !important;
    box-shadow: var(--kie-shadow) !important;
}

.kie-tts-auth-page {
    background:
        radial-gradient(ellipse 90% 60% at 0% 0%, rgba(99, 102, 241, 0.15), transparent 50%),
        radial-gradient(ellipse 80% 50% at 100% 0%, rgba(34, 211, 238, 0.08), transparent 45%),
        var(--kie-bg) !important;
}

.zv-like-dashboard {
    background: transparent !important;
    border: none !important;
}

/* ——— Карточки и панели ——— */
.kie-tts-header,
.kie-tts-form-container,
.kie-tts-generations,
.kie-tts-sidebar-menu,
.api-access-card,
.api-docs-card,
.api-keys-table-wrap,
.auth-container,
.topup-modal-content,
.insufficient-balance-content,
.modal-content,
.zv-why-section,
.zv-steps-section,
.zv-service-chip,
.zv-mini-stat,
.generation-result-card,
.audio-tags-hint,
.balance-info,
.tts-dialogue-row,
.sound-item {
    background: var(--kie-surface) !important;
    border-color: var(--kie-border) !important;
    color: var(--kie-text);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

.kie-tts-header h1,
.kie-tts-form-container h2,
.kie-tts-generations h2,
.zv-hero-header h1,
.dashboard-title-section h1 {
    color: var(--kie-text) !important;
}

.zv-hero-header p,
.topup-description,
.kie-tts-form label,
.stat-label,
.generations-table th,
.zv-hero-header p {
    color: var(--kie-text-muted) !important;
}

.kie-tts-header {
    border-bottom-color: var(--kie-border) !important;
}

/* ——— Редактор: верхнее меню и боковая панель ——— */
.kie-tts-top-nav {
    background: var(--kie-surface) !important;
    border-color: var(--kie-border) !important;
}

.kie-tts-editor-sidebar-card,
.kie-tts-editor-cost-bar,
.kie-tts-audio-tags-modal__content {
    background: var(--kie-bg-elevated) !important;
    border-color: var(--kie-border) !important;
}

.kie-tts-editor-topbar {
    border-bottom-color: var(--kie-border) !important;
}

/* ——— Topbar ——— */
.zv-topbar {
    background: rgba(15, 21, 32, 0.85) !important;
    border-bottom-color: var(--kie-border) !important;
    backdrop-filter: blur(12px);
}

.zv-brand {
    color: var(--kie-text) !important;
}

.zv-topbar-links a {
    color: var(--kie-text-muted) !important;
}

.zv-topbar-links a:hover {
    background: var(--kie-surface-hover) !important;
    color: var(--kie-primary-light) !important;
}

.zv-service-chip h3,
.zv-mini-stat strong {
    color: var(--kie-primary-light) !important;
}

.zv-service-chip p,
.zv-mini-stat span {
    color: var(--kie-text-muted) !important;
}

/* ——— Меню ——— */
.kie-tts-menu-item {
    background: var(--kie-bg-elevated) !important;
    border-color: var(--kie-border) !important;
    color: var(--kie-text-muted) !important;
    transition:
        background 0.25s var(--kie-ease-out),
        border-color 0.25s var(--kie-ease-out),
        color 0.25s var(--kie-ease-out),
        transform 0.2s var(--kie-ease-spring),
        box-shadow 0.25s ease !important;
}

.kie-tts-menu-item:hover {
    transform: translateX(4px);
    background: var(--kie-surface-hover) !important;
    border-color: var(--kie-border-strong) !important;
    color: var(--kie-text) !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
}

.kie-tts-menu-item.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(34, 211, 238, 0.08) 100%) !important;
    border-color: var(--kie-border-strong) !important;
    color: var(--kie-primary-light) !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3), 0 4px 20px rgba(99, 102, 241, 0.2);
}

/* ——— Поля ввода ——— */
.kie-tts-form input[type="text"],
.kie-tts-form input[type="number"],
.kie-tts-form input[type="email"],
.kie-tts-form input[type="password"],
.kie-tts-form select,
.kie-tts-form textarea,
.search-input,
.filter-select {
    background: var(--kie-bg-elevated) !important;
    border-color: var(--kie-border) !important;
    color: var(--kie-text) !important;
}

.kie-tts-form input:focus,
.kie-tts-form select:focus,
.kie-tts-form textarea:focus,
.search-input:focus,
.filter-select:focus {
    border-color: var(--kie-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

.char-count,
.form-col small,
.telegram-auth-note {
    color: var(--kie-text-muted) !important;
}

/* ——— Таблицы ——— */
.generations-table {
    border-color: var(--kie-border) !important;
}

.generations-table thead,
.generations-table thead th {
    background: var(--kie-bg-elevated) !important;
    color: var(--kie-text-muted) !important;
}

.generations-table tbody tr:hover {
    background: var(--kie-surface-hover) !important;
}

.generations-table td {
    border-bottom-color: var(--kie-border) !important;
    color: var(--kie-text);
}

.generations-stats,
.generations-stats .stat-item {
    background: var(--kie-bg-elevated) !important;
    border-color: var(--kie-border) !important;
}

.stat-value {
    color: var(--kie-text) !important;
}

/* ——— Баланс ——— */
.kie-tts-balance {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #818cf8 100%) !important;
    box-shadow: 0 8px 28px var(--kie-primary-glow) !important;
}

/* ——— Модалки ——— */
.topup-modal-header,
.insufficient-balance-header {
    background: var(--kie-bg-elevated) !important;
    border-bottom-color: var(--kie-border) !important;
}

.topup-modal-header h3,
.insufficient-balance-header h3,
.suggestion-text {
    color: var(--kie-text) !important;
}

.topup-modal-close,
.insufficient-balance-close,
.message-close {
    color: var(--kie-text-muted) !important;
}

.topup-modal-close:hover,
.insufficient-balance-close:hover {
    color: var(--kie-text) !important;
}

.topup-amount-btn {
    background: var(--kie-bg-elevated) !important;
    border-color: var(--kie-border) !important;
    color: var(--kie-text) !important;
}

/* ——— Сообщения ——— */
.kie-tts-message-success {
    background: rgba(52, 211, 153, 0.12) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

.kie-tts-message-error {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

.generation-progress {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: var(--kie-border-strong) !important;
}

.generation-result-card {
    background: rgba(52, 211, 153, 0.08) !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
}

/* ——— Auth колонка ——— */
.auth-info-column {
    background:
        radial-gradient(ellipse 80% 60% at -20% -20%, rgba(99, 102, 241, 0.4), transparent 55%),
        radial-gradient(ellipse 70% 50% at 120% 0%, rgba(34, 211, 238, 0.2), transparent 50%),
        linear-gradient(165deg, #0f172a 0%, #1e1b4b 45%, #312e81 100%) !important;
}

.auth-tab {
    background: var(--kie-bg-elevated);
    color: var(--kie-text-muted);
    border-color: var(--kie-border);
}

.auth-tab.active {
    background: var(--kie-surface);
    color: var(--kie-primary-light);
    border-color: var(--kie-border-strong);
}

.divider::before {
    background: var(--kie-border) !important;
}

.divider span {
    background: var(--kie-surface) !important;
    color: var(--kie-text-muted) !important;
}

.toggle-settings-btn,
.kie-tts-secondary-btn,
.voice-demo-btn {
    background: var(--kie-bg-elevated) !important;
    border-color: var(--kie-border) !important;
    color: var(--kie-text) !important;
}

.advanced-settings,
.audio-tags-hint {
    background: var(--kie-bg-elevated) !important;
}

.sounds-category-index-item {
    background: var(--kie-surface) !important;
    border-color: var(--kie-border) !important;
}

.sounds-category-index-item a,
.sounds-catalog-back {
    color: var(--kie-primary-light) !important;
}

/* SaaS overrides */
.kie-tts-dashboard.zv-like-dashboard {
    --saas-surface: var(--kie-surface);
    --saas-border: var(--kie-border);
    --saas-text: var(--kie-text);
    --saas-muted: var(--kie-text-muted);
    --saas-primary: var(--kie-primary);
    --saas-primary-weak: rgba(99, 102, 241, 0.15);
}

.kie-tts-dashboard.zv-like-dashboard .generations-stats .stat-item {
    background: var(--kie-bg-elevated) !important;
}

.kie-tts-dashboard.zv-like-dashboard .generations-table thead th {
    background: var(--kie-bg-elevated) !important;
}

/* =========================================================
   Анимации кнопок
   ========================================================= */

.kie-tts-btn-animated,
.kie-tts-submit-btn,
#generate-btn.kie-tts-submit-btn,
.topup-toggle-btn,
.topup-amount-btn,
.topup-link-btn,
.quick-topup-btn,
.load-more-btn,
.scroll-to-generations-btn,
.logout-btn,
.action-btn,
.telegram-auth-btn,
.chatbot-generate-btn,
.vk-auth-btn,
.auth-tab,
.kie-tts-menu-item,
.toggle-settings-btn,
.kie-tts-secondary-btn,
.voice-demo-btn,
.remove-dialogue-row,
.download-btn,
.api-copy-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.22s var(--kie-ease-spring),
        box-shadow 0.25s ease,
        filter 0.2s ease,
        border-color 0.2s ease,
        background 0.25s ease !important;
}

/* Блик при наведении */
.kie-tts-btn-animated::after,
.kie-tts-submit-btn::after,
#generate-btn.kie-tts-submit-btn::after,
.topup-toggle-btn::after,
.topup-amount-btn::after,
.topup-link-btn::after,
.quick-topup-btn::after,
.load-more-btn::after,
.scroll-to-generations-btn::after,
.telegram-auth-btn::after,
.chatbot-generate-btn::after,
.action-btn::after,
.api-copy-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    transition: transform 0.55s var(--kie-ease-out);
    pointer-events: none;
    z-index: 1;
}

.kie-tts-btn-animated:hover::after,
.kie-tts-submit-btn:hover:not(:disabled)::after,
#generate-btn.kie-tts-submit-btn:hover:not(:disabled)::after,
.topup-toggle-btn:hover::after,
.topup-amount-btn:hover::after,
.topup-link-btn:hover::after,
.quick-topup-btn:hover::after,
.load-more-btn:hover:not(:disabled)::after,
.scroll-to-generations-btn:hover::after,
.telegram-auth-btn:hover::after,
.chatbot-generate-btn:hover::after,
.action-btn:hover::after,
.api-copy-btn:hover::after {
    transform: translateX(120%);
}

/* Ripple (добавляется JS) */
.kie-tts-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: kieRipple 0.55s var(--kie-ease-out) forwards;
    pointer-events: none;
    z-index: 2;
}

@keyframes kieRipple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Hover / active primary */
.kie-tts-submit-btn,
#generate-btn.kie-tts-submit-btn,
.topup-toggle-btn,
.load-more-btn,
.topup-link-btn,
.quick-topup-btn,
.scroll-to-generations-btn,
.telegram-auth-btn,
.chatbot-generate-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 45%, #818cf8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px var(--kie-primary-glow) !important;
}

.topup-toggle-btn,
.quick-topup-btn,
.scroll-to-generations-btn {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%) !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35) !important;
}

.kie-tts-submit-btn:hover:not(:disabled),
#generate-btn.kie-tts-submit-btn:hover:not(:disabled),
.topup-toggle-btn:hover,
.load-more-btn:hover:not(:disabled),
.topup-link-btn:hover,
.quick-topup-btn:hover,
.scroll-to-generations-btn:hover,
.telegram-auth-btn:hover,
.chatbot-generate-btn:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 10px 32px var(--kie-primary-glow) !important;
    filter: brightness(1.06);
}

.kie-tts-submit-btn:active:not(:disabled),
#generate-btn.kie-tts-submit-btn:active:not(:disabled),
.topup-toggle-btn:active,
.topup-amount-btn:active,
.topup-link-btn:active,
.quick-topup-btn:active,
.load-more-btn:active:not(:disabled),
.action-btn:active,
.telegram-auth-btn:active,
.chatbot-generate-btn:active,
.kie-tts-menu-item:active {
    transform: translateY(0) scale(0.97) !important;
    transition-duration: 0.1s !important;
}

.topup-amount-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    border-color: var(--kie-primary-light) !important;
    color: #fff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px var(--kie-primary-glow) !important;
}

.topup-amount-btn.is-loading {
    pointer-events: none;
    opacity: 0.75;
    animation: kieBtnPulse 1s ease-in-out infinite;
}

@keyframes kieBtnPulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

.logout-btn {
   background: linear-gradient(135deg, #451f1f 0%, #6b2222 100%) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
}

.logout-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4) !important;
}

.action-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.action-btn:hover {
    transform: translateY(-1px) scale(1.03) !important;
    filter: brightness(1.1);
}

.play-btn {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
}

.repeat-btn {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important;
    color: #fff !important;
}

.info-btn {
    background: linear-gradient(135deg, #0e7490 0%, #22d3ee 100%) !important;
}

.download-btn {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
}

/* Статусы в тёмной теме */
.status-pending {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

.status-completed {
    background: rgba(52, 211, 153, 0.12) !important;
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}

.status-failed {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

/* Скрытие шапки/подвала темы на всех страницах плагина */
body.kie-tts-plugin-page-body #page-header,
body.kie-tts-plugin-page-body header,
body.kie-tts-plugin-page-body .l-header,
body.kie-tts-plugin-page-body header#page-header,
body.kie-tts-plugin-page-body footer,
body.kie-tts-plugin-page-body .site-footer,
body.kie-tts-plugin-page-body #footer,
body.kie-tts-plugin-page-body .l-footer,
body.kie-tts-plugin-page-body footer#footer,
body.kie-tts-plugin-page-body #wpadminbar {
    display: none !important;
}

body.kie-tts-plugin-page-body .l-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.kie-tts-plugin-page-body #page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.kie-tts-plugin-page-body .l-section.height_custom {
	background-color: #394869 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .kie-tts-btn-animated::after,
    .kie-tts-submit-btn::after,
    .topup-amount-btn::after,
    .kie-tts-ripple {
        animation: none !important;
        transition: none !important;
    }

    .kie-tts-menu-item:hover {
        transform: none;
    }
}