/* Только тёмная тема, фон #000 */
:root {
    color-scheme: dark;
}

html {
    background: #000000 !important;
}

[data-theme-toggle],
.theme-toggle,
.theme-toggle-tv {
    display: none !important;
}

:root[data-theme='dark'] {
    color-scheme: dark;
}

:root[data-theme='dark'] body {
    background: #000000 !important;
    color: #e5e7eb !important;
}

:root[data-theme='dark'] #__nuxt,
:root[data-theme='dark'] #app {
    background: #000000 !important;
    color: #e5e7eb !important;
}

:root[data-theme='dark'] header,
:root[data-theme='dark'] main,
:root[data-theme='dark'] footer,
:root[data-theme='dark'] section,
:root[data-theme='dark'] article,
:root[data-theme='dark'] .container,
:root[data-theme='dark'] .header,
:root[data-theme='dark'] .box,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .tariff-card,
:root[data-theme='dark'] .nord-container,
:root[data-theme='dark'] .bg-white,
:root[data-theme='dark'] .tw-bg-white,
:root[data-theme='dark'] [class*='bg-white'],
:root[data-theme='dark'] .tw-bg-light-400,
:root[data-theme='dark'] .bg-light-400,
:root[data-theme='dark'] .download-button,
:root[data-theme='dark'] .download-buttons-wrapper,
:root[data-theme='dark'] .download-buttons-grid,
:root[data-theme='dark'] [style*='background: white'],
:root[data-theme='dark'] [style*='background:white'],
:root[data-theme='dark'] [style*='background-color: white'],
:root[data-theme='dark'] [style*='background-color:white'],
:root[data-theme='dark'] [style*='background: #fff'],
:root[data-theme='dark'] [style*='background:#fff'],
:root[data-theme='dark'] [style*='background-color: #fff'],
:root[data-theme='dark'] [style*='background-color:#fff'],
:root[data-theme='dark'] [style*='background: rgb(255, 255, 255)'],
:root[data-theme='dark'] [style*='background-color: rgb(255, 255, 255)'] {
    background: #000000 !important;
    color: #e5e7eb !important;
}

:root[data-theme='dark'] [style*='background: linear-gradient(135deg, #f8f9ff'],
:root[data-theme='dark'] [style*='background: linear-gradient(135deg, #e3f2fd'],
:root[data-theme='dark'] [style*='background: linear-gradient(135deg, #f0f9ff'],
:root[data-theme='dark'] [style*='background: linear-gradient(135deg, #fff9e6'],
:root[data-theme='dark'] [style*='background: linear-gradient(90deg, #ffffff'],
:root[data-theme='dark'] [style*='background: #f'],
:root[data-theme='dark'] [style*='background-color: #f'] {
    background: #000000 !important;
}

:root[data-theme='dark'] [class*='text-dark'],
:root[data-theme='dark'] [class*='text-secondary'],
:root[data-theme='dark'] .text-black,
:root[data-theme='dark'] .text-grey-darkest,
:root[data-theme='dark'] .text-grey-dark,
:root[data-theme='dark'] p,
:root[data-theme='dark'] h1,
:root[data-theme='dark'] h2,
:root[data-theme='dark'] h3,
:root[data-theme='dark'] h4,
:root[data-theme='dark'] h5,
:root[data-theme='dark'] h6,
:root[data-theme='dark'] label,
:root[data-theme='dark'] span,
:root[data-theme='dark'] li {
    color: #f3f4f6 !important;
}

:root[data-theme='dark'] [class*='text-gray'],
:root[data-theme='dark'] [class*='text-slate'],
:root[data-theme='dark'] [class*='text-zinc'],
:root[data-theme='dark'] [class*='text-neutral'] {
    color: #e5e7eb !important;
}

:root[data-theme='dark'] .download-button-label,
:root[data-theme='dark'] .download-button-title,
:root[data-theme='dark'] .download-button-icon {
    color: #f3f4f6 !important;
}

:root[data-theme='dark'] .vpn-instructions-wrapper,
:root[data-theme='dark'] .vpn-instructions-card,
:root[data-theme='dark'] .vpn-instructions-list,
:root[data-theme='dark'] .vpn-instruction-step,
:root[data-theme='dark'] .vpn-instructions-help-wrap {
    background: #000000 !important;
    color: #e5e7eb !important;
}

:root[data-theme='dark'] .vpn-instructions-title,
:root[data-theme='dark'] .vpn-instruction-text,
:root[data-theme='dark'] .vpn-instruction-num,
:root[data-theme='dark'] .vpn-instruction-icon,
:root[data-theme='dark'] .vpn-instructions-help-btn,
:root[data-theme='dark'] .vpn-instructions-help-btn span {
    color: #f3f4f6 !important;
}

:root[data-theme='dark'] .vpn-instruction-step {
    border-color: #222222 !important;
}

:root[data-theme='dark'] .one-vpn-badge {
    background: #000000 !important;
    background-image: none !important;
    border-color: #222222 !important;
    box-shadow: none !important;
}

:root[data-theme='dark'] .one-vpn-badge span,
:root[data-theme='dark'] .one-vpn-badge strong {
    color: #e5e7eb !important;
}

:root[data-theme='dark'] a {
    color: #93c5fd !important;
}

:root[data-theme='dark'] input,
:root[data-theme='dark'] textarea,
:root[data-theme='dark'] select {
    background: #0a0a0a !important;
    color: #e5e7eb !important;
    border-color: #222222 !important;
}

/* Auth / primary buttons: keep dark-theme hover readable.
   Upstream css sets light hover color (#ffb664) for nord blue buttons. */
:root[data-theme='dark'] .nord-button--v-contained.nord-button--c-blue,
:root[data-theme='dark'] .nord-button--v-contained.nord-button--c-blue:hover:not(:focus):not(:active):not([disabled]),
:root[data-theme='dark'] .nord-button--v-contained.nord-button--c-blue:focus,
:root[data-theme='dark'] .nord-button--v-contained.nord-button--c-blue:active:not([disabled]) {
    background-color: #007cba !important;
    border-color: #007cba !important;
    color: #ffffff !important;
}

/* Disable global "glow"/brightness on hover in dark theme (button-animations.css). */
:root[data-theme='dark'] .nord-button--c-blue:hover,
:root[data-theme='dark'] .nord-button--c-blue:focus,
:root[data-theme='dark'] .nord-button--c-blue:active {
    filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Toasts/alerts (right-side blocks) in dark theme */
:root[data-theme='dark'] .success,
:root[data-theme='dark'] .sucess1,
:root[data-theme='dark'] .wait,
:root[data-theme='dark'] .wait1,
:root[data-theme='dark'] .error,
:root[data-theme='dark'] .error1 {
    background: #000000 !important;
    color: #e5e7eb !important;
    border: 1px solid #222222 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

/* Partner modal (dashboard/index.php) */
:root[data-theme='dark'] #partner-modal-overlay > div {
    background: #000000 !important;
    color: #e5e7eb !important;
    border: 1px solid #222222 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55) !important;
}

:root[data-theme='dark'] #partner-modal-overlay h1,
:root[data-theme='dark'] #partner-modal-overlay h2,
:root[data-theme='dark'] #partner-modal-overlay p,
:root[data-theme='dark'] #partner-modal-overlay span,
:root[data-theme='dark'] #partner-modal-overlay label,
:root[data-theme='dark'] #partner-modal-overlay strong,
:root[data-theme='dark'] #partner-modal-overlay button {
    color: #e5e7eb !important;
}

:root[data-theme='dark'] #partner-modal-overlay input[type='text'],
:root[data-theme='dark'] #partner-modal-overlay input[type='number'] {
    background: #0a0a0a !important;
    color: #e5e7eb !important;
    border-color: #222222 !important;
}

:root[data-theme='dark'] #partnerModalToggleRow {
    background: #0a0a0a !important;
    border-color: #222222 !important;
}

/* Extend modal (dashboard/index.php): make payment method texts white in dark theme */
:root[data-theme='dark'] #vp-extend-modal-overlay .vp-extend-dialog-panel {
    background: #000000 !important;
    color: #e5e7eb !important;
}

:root[data-theme='dark'] #vp-extend-modal-overlay h3,
:root[data-theme='dark'] #vp-extend-modal-overlay h4,
:root[data-theme='dark'] #vp-extend-modal-overlay p,
:root[data-theme='dark'] #vp-extend-modal-overlay .payment-method div {
    color: #e5e7eb !important;
}

:root[data-theme='dark'] #vp-extend-modal-overlay .payment-method {
    background: #0a0a0a !important;
    border-color: #222222 !important;
}

:root[data-theme='dark'] #vp-extend-modal-overlay button[onclick="closeExtendModal()"] {
    background: #0a0a0a !important;
    color: #e5e7eb !important;
    border-color: #222222 !important;
}

/* Promo code modal (dashboard/index.php) */
:root[data-theme='dark'] #promo-code-modal-overlay > div {
    background: #000000 !important;
    color: #e5e7eb !important;
    border-color: #222222 !important;
}

:root[data-theme='dark'] #promo-code-modal-overlay * {
    color: #e5e7eb !important;
}

:root[data-theme='dark'] #promo-code-modal-overlay input {
    background: #0a0a0a !important;
    color: #e5e7eb !important;
    border-color: #222222 !important;
}

:root[data-theme='dark'] #promo-code-modal-overlay .promo-save {
    color: #ffffff !important;
}

/* Promo choice modal (dashboard/index.php) */
:root[data-theme='dark'] #promo-choice-overlay > div {
    background: #000000 !important;
    color: #e5e7eb !important;
    border-color: #222222 !important;
}

:root[data-theme='dark'] #promo-choice-overlay * {
    color: #e5e7eb !important;
}

:root[data-theme='dark'] #promo-choice-overlay button {
    border-color: #222222 !important;
}

:root[data-theme='dark'] #promo-choice-overlay .promo-choice-create {
    background: #0a0a0a !important;
}

:root[data-theme='dark'] #promo-choice-overlay #promo-extend-key-panel > div:first-child {
    color: #e5e7eb !important;
}

:root[data-theme='dark'] #promo-choice-overlay .promo-key-name-btn {
    background: #0a0a0a !important;
    color: #e5e7eb !important;
    border-color: #222222 !important;
}

:root[data-theme='dark'] #promo-choice-overlay .promo-key-name-btn:hover {
    background: rgba(148, 163, 184, 0.12) !important;
}

/* Projects modal (dashboard/index.php) */
:root[data-theme='dark'] #projects-modal-overlay > div {
    background: #000000 !important;
    color: #e5e7eb !important;
    border: 1px solid #222222 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55) !important;
}

:root[data-theme='dark'] #projects-modal-overlay * {
    color: #e5e7eb !important;
}

:root[data-theme='dark'] #projects-modal-overlay a {
    background: #0a0a0a !important;
    border-color: #222222 !important;
}

:root[data-theme='dark'] #projects-modal-overlay a:hover {
    background: rgba(148, 163, 184, 0.10) !important;
}

/* "Add to app" platform buttons: make compact, no filled background */
#addToAppModal .btn-outline-primary,
#addToAppModal .btn-outline-success,
#addToAppModal .btn-outline-info,
#addToAppModal .btn-outline-secondary,
#addToAppModal .btn-outline-warning,
#addToAppModal .platform-btn {
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    height: 86px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 6px !important;
}

#addToAppModal .btn-outline-primary:hover,
#addToAppModal .btn-outline-success:hover,
#addToAppModal .btn-outline-info:hover,
#addToAppModal .btn-outline-secondary:hover,
#addToAppModal .btn-outline-warning:hover,
#addToAppModal .platform-btn:hover {
    background: rgba(2, 6, 23, 0.04) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12) !important;
}

:root[data-theme='dark'] #addToAppModal .btn-outline-primary:hover,
:root[data-theme='dark'] #addToAppModal .btn-outline-success:hover,
:root[data-theme='dark'] #addToAppModal .btn-outline-info:hover,
:root[data-theme='dark'] #addToAppModal .btn-outline-secondary:hover,
:root[data-theme='dark'] #addToAppModal .btn-outline-warning:hover,
:root[data-theme='dark'] #addToAppModal .platform-btn:hover {
    background: rgba(148, 163, 184, 0.10) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45) !important;
}

#addToAppModal .btn i,
#addToAppModal .btn svg {
    font-size: 24px !important;
    margin-bottom: 2px !important;
}

/* Compact outline platform buttons (emoji + label) */
#addToAppModal .vp-platform-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 10px !important;
    height: 82px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.55) !important;
    background: transparent !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    color: #0a0a0a !important;
}

:root[data-theme='dark'] #addToAppModal .vp-platform-btn {
    border-color: #222222 !important;
    color: #e5e7eb !important;
}

#addToAppModal .vp-platform-btn:hover {
    background: rgba(2, 6, 23, 0.04) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12) !important;
}

:root[data-theme='dark'] #addToAppModal .vp-platform-btn:hover {
    background: rgba(148, 163, 184, 0.10) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45) !important;
}

#addToAppModal .vp-platform-emoji {
    font-size: 22px;
    line-height: 1;
}

:root[data-theme='dark'] .theme-toggle {
    background: transparent !important;
    color: #f9fafb !important;
    border: none !important;
    box-shadow: none !important;
}

.theme-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

:root[data-theme='dark'] .tw-border,
:root[data-theme='dark'] [class*='border-'],
:root[data-theme='dark'] [style*='border: 1px solid'],
:root[data-theme='dark'] [style*='border: 2px solid'],
:root[data-theme='dark'] [style*='border: 3px solid'] {
    border-color: #222222 !important;
}

:root[data-theme='dark'] [data-forced-dark-bg='1'] {
    background: #000000 !important;
    color: #e5e7eb !important;
}

:root[data-theme='dark'] .download-button {
    border-color: #222222 !important;
}

/* ЛК: почта рефералов — две иконки в одном слоте (overflow:hidden в style.css иначе режет штрих) */
.ref-email-toggle {
    position: relative;
    overflow: visible !important;
    box-sizing: border-box;
}

.ref-email-toggle svg {
    overflow: visible !important;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: inherit;
}

.ref-email-wrap .ref-email-full {
    display: none !important;
}

.ref-email-wrap.is-open .ref-email-short {
    display: none !important;
}

.ref-email-wrap.is-open .ref-email-full {
    display: inline !important;
    word-break: break-all;
}

.ref-email-toggle .ref-eye-show {
    display: block !important;
}

.ref-email-toggle .ref-eye-hide {
    display: none !important;
}

.ref-email-wrap.is-open .ref-email-toggle .ref-eye-show {
    display: none !important;
}

.ref-email-wrap.is-open .ref-email-toggle .ref-eye-hide {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- Страницы статей и блога (articles.php, article.php, blog.php) — свои классы с жёсткими светлыми цветами --- */
:root[data-theme='dark'] .articles-container,
:root[data-theme='dark'] .article-container,
:root[data-theme='dark'] .blog-container {
    color: #e5e7eb;
}

:root[data-theme='dark'] .article-card,
:root[data-theme='dark'] .blog-card {
    background: #000000 !important;
    color: #e5e7eb !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

:root[data-theme='dark'] .article-card:hover,
:root[data-theme='dark'] .blog-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important;
}

:root[data-theme='dark'] .article-title,
:root[data-theme='dark'] .page-title,
:root[data-theme='dark'] .blog-title {
    color: #f3f4f6 !important;
}

:root[data-theme='dark'] .article-excerpt,
:root[data-theme='dark'] .page-description,
:root[data-theme='dark'] .blog-excerpt {
    color: #cbd5e1 !important;
}

:root[data-theme='dark'] .article-date,
:root[data-theme='dark'] .blog-date {
    color: #94a3b8 !important;
}

/* articles.php: заголовок и подзаголовок над сеткой — белые; под фото — отдельный тёмный блок и светлый текст */
:root[data-theme='dark'] .articles-container > .page-title,
:root[data-theme='dark'] .articles-container > .page-description {
    color: #ffffff !important;
}

:root[data-theme='dark'] .articles-container .article-card .article-content {
    background: #020617 !important;
    color: #f8fafc !important;
    border-top: 1px solid #1e293b;
}

:root[data-theme='dark'] .articles-container .article-card .article-title {
    color: #ffffff !important;
}

:root[data-theme='dark'] .articles-container .article-card .article-excerpt {
    color: #e2e8f0 !important;
}

:root[data-theme='dark'] .articles-container .article-card .article-date {
    color: #cbd5e1 !important;
}

:root[data-theme='dark'] .single-article,
:root[data-theme='dark'] .single-blog {
    background: #000000 !important;
    color: #e5e7eb !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

:root[data-theme='dark'] .single-article h1,
:root[data-theme='dark'] .single-blog h1 {
    color: #f9fafb !important;
}

:root[data-theme='dark'] .article-subtitle,
:root[data-theme='dark'] .single-blog h2 {
    color: #e2e8f0 !important;
}

:root[data-theme='dark'] .article-description {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-left-color: #6366f1 !important;
}

:root[data-theme='dark'] .single-article p,
:root[data-theme='dark'] .article-text-content,
:root[data-theme='dark'] .single-blog p {
    color: #e2e8f0 !important;
}

:root[data-theme='dark'] .article-text-content strong,
:root[data-theme='dark'] .article-text-content b,
:root[data-theme='dark'] .single-article p strong,
:root[data-theme='dark'] .single-article p b {
    color: #f9fafb !important;
}

:root[data-theme='dark'] .image-caption {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-left-color: #6366f1 !important;
    box-shadow: none !important;
}

:root[data-theme='dark'] .image-caption a {
    color: #93c5fd !important;
    border-bottom-color: rgba(147, 197, 253, 0.5) !important;
}

:root[data-theme='dark'] .back-link {
    background: #1e293b !important;
    color: #93c5fd !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

:root[data-theme='dark'] .back-link:hover {
    color: #bfdbfe !important;
}

:root[data-theme='dark'] .article-date {
    color: #94a3b8 !important;
    border-top-color: #222222 !important;
}

:root[data-theme='dark'] .single-article img,
:root[data-theme='dark'] .single-blog img {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Футер: иконка Telegram — контраст в тёмной теме */
:root[data-theme='dark'] a.footer-social-tg {
    background: #222222 !important;
    fill: #f8fafc !important;
}

:root[data-theme='dark'] a.footer-social-tg:hover {
    background: #0369a1 !important;
    fill: #ffffff !important;
}

/* Принудительно чёрный фон везде (без светлой темы) */
:root[data-theme='dark'] header,
:root[data-theme='dark'] main,
:root[data-theme='dark'] footer,
:root[data-theme='dark'] #burger-menu-chunk,
:root[data-theme='dark'] .tw-bg-light-400,
:root[data-theme='dark'] .bg-light-400,
:root[data-theme='dark'] .one-vpn-badge {
    background-color: #000000 !important;
    background-image: none !important;
}

:root[data-theme='dark'] .one-vpn-badge {
    border-color: #222222 !important;
}

/* Логотип favicon.webp в шапке и футере */
.kitvpn-logo-wrap {
    flex-shrink: 0;
}

.kitvpn-logo-wrap .kitvpn-logo-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
}

/* Иллюстрации KitVPN на главной (SVG, чёрный фон) */
.kitvpn-page-img {
    background: #000000;
    border-radius: 1rem;
}

:root[data-theme='dark'] .hero-cta-below-tv-banner,
:root[data-theme='dark'] .hero-cta-below-tv-banner img {
    background: #000000 !important;
}