/* Dark-mode overlay derived from globaldark.php lines 2340-2587. * Selectors rewritten from `body.btg-site-dark` to `[data-theme="dark"] body` * so the toggle works via attribute (boot script * applies the attribute before first paint, no FOUC). */ /* Subtle black hairline outside boxed panels (under green border / glow) */ [data-theme="dark"] body { color: #e4f0e8 !important; background: #071912 !important; background-image: linear-gradient(rgba(110, 220, 143, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 220, 143, 0.07) 1px, transparent 1px) !important; background-size: 20px 20px !important; } [data-theme="dark"] body .matrix-rain { opacity: 0.14 !important; } [data-theme="dark"] body .matrix-column { color: #5ecf8a !important; } [data-theme="dark"] body .neon-glow { text-shadow: 0 0 8px rgba(94, 207, 138, 0.45), 0 0 22px rgba(30, 92, 54, 0.35) !important; } [data-theme="dark"] body .neon-border { border-color: #3d8a5c !important; box-shadow: 0 0 10px rgba(94, 207, 138, 0.2), inset 0 0 10px rgba(94, 207, 138, 0.06) !important; } [data-theme="dark"] body .header { background: rgba(15, 36, 24, 0.96) !important; border-bottom: 2px solid #2d5a40 !important; box-shadow: 0 4px 28px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] body .logo { color: #6edc8f !important; text-shadow: 0 0 20px rgba(110, 220, 143, 0.35) !important; } [data-theme="dark"] body .nav a { color: #8fb9a0 !important; } [data-theme="dark"] body .nav a:hover, [data-theme="dark"] body .nav a.active { color: #5ecf8a !important; text-shadow: 0 0 12px rgba(94, 207, 138, 0.35) !important; } [data-theme="dark"] body .cta-button { background: linear-gradient(180deg, #3d8a5c 0%, #1e5c36 100%) !important; color: #f0faf3 !important; border: 1px solid #6edc8f !important; box-shadow: 0 0 0 1px #0a0a0a, 0 0 16px rgba(94, 207, 138, 0.2) !important; } [data-theme="dark"] body .cta-button:hover { filter: brightness(1.08) !important; color: #ffffff !important; } [data-theme="dark"] body .btg-header-login-toggle, [data-theme="dark"] body .btg-header-menu-btn { background: #1e5c36 !important; color: #e4f0e8 !important; border-color: #2d5a40 !important; } [data-theme="dark"] body .btg-mobile-login-dropdown { background: rgba(7, 25, 18, 0.98) !important; border-bottom: 1px solid #2d5a40 !important; } [data-theme="dark"] body .hero { background: linear-gradient(180deg, #0f281c 0%, #071912 100%) !important; border-bottom-color: #2d5a40 !important; } [data-theme="dark"] body .hero::before { background: radial-gradient(circle at 20% 50%, rgba(94, 207, 138, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(61, 138, 92, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(30, 92, 54, 0.15) 0%, transparent 50%) !important; } [data-theme="dark"] body .hero-content, [data-theme="dark"] body .hero h1 { color: #e4f0e8 !important; text-shadow: 0 0 24px rgba(94, 207, 138, 0.25), 0 0 48px rgba(30, 92, 54, 0.4) !important; } [data-theme="dark"] body .hero-content > p { color: #8fb9a0 !important; text-shadow: none !important; } [data-theme="dark"] body .hero .ip-display, [data-theme="dark"] body .hero a.ip-display.ip-display-socks-cta { background: rgba(15, 36, 24, 0.95) !important; border-color: #3d8a5c !important; color: #e4f0e8 !important; box-shadow: 0 0 0 1px #0a0a0a, 0 0 24px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(94, 207, 138, 0.04) !important; } [data-theme="dark"] body .ip-info h3, [data-theme="dark"] body .ip-info .value { color: #6edc8f !important; text-shadow: 0 0 8px rgba(110, 220, 143, 0.25) !important; } [data-theme="dark"] body .ip-info .torrent-ip-hint { color: #8fb9a0 !important; } [data-theme="dark"] body .feature { background: rgba(15, 36, 24, 0.92) !important; border-color: #2d5a40 !important; box-shadow: 0 0 0 1px #0a0a0a !important; } [data-theme="dark"] body .feature i, [data-theme="dark"] body .feature h3 { color: #6edc8f !important; } [data-theme="dark"] body .feature p { color: #8fb9a0 !important; } [data-theme="dark"] body .main-content { background: #071912 !important; border-top-color: #2d5a40 !important; } [data-theme="dark"] body .content-main, [data-theme="dark"] body .sidebar { background: rgba(15, 36, 24, 0.92) !important; border-color: #2d5a40 !important; box-shadow: 0 0 0 1px #0a0a0a, 0 0 20px rgba(0, 0, 0, 0.35), inset 0 0 16px rgba(94, 207, 138, 0.03) !important; } [data-theme="dark"] body .sidebar h3 { color: #6edc8f !important; text-shadow: 0 0 10px rgba(110, 220, 143, 0.2) !important; } [data-theme="dark"] body .sidebar h4 { color: #6edc8f !important; text-shadow: 0 0 10px rgba(110, 220, 143, 0.2) !important; } [data-theme="dark"] body .user-info { background: #0f281c !important; border: 1px solid #2d6b45 !important; box-shadow: 0 0 0 1px #080808, inset 0 0 24px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] body .user-info h4 { color: #8fb9a0 !important; text-shadow: none !important; } [data-theme="dark"] body .user-info p { color: #e4f0e8 !important; text-shadow: none !important; } [data-theme="dark"] body .user-info p.status-active { color: #5ecf8a !important; text-shadow: 0 0 8px rgba(94, 207, 138, 0.25) !important; } [data-theme="dark"] body .user-info p.status-pending { color: #d4a82a !important; } [data-theme="dark"] body .user-info p.status-suspended { color: #f0a8a0 !important; } [data-theme="dark"] body .sidebar p, [data-theme="dark"] body .content-main { color: #e4f0e8 !important; } [data-theme="dark"] body .user-actions a { background: rgba(30, 92, 54, 0.35) !important; border-color: #3d8a5c !important; color: #e4f0e8 !important; box-shadow: 0 0 0 1px #0a0a0a !important; } [data-theme="dark"] body .user-actions a:hover { background: #1e5c36 !important; color: #ffffff !important; } [data-theme="dark"] body .user-actions span.user-actions-link-disabled { color: #5a6b62 !important; border-color: #2d5a40 !important; } [data-theme="dark"] body .login-form label, [data-theme="dark"] body .form-group label { color: #8fb9a0 !important; } [data-theme="dark"] body .login-form input, [data-theme="dark"] body .login-form textarea, [data-theme="dark"] body .content-main input, [data-theme="dark"] body .content-main textarea, [data-theme="dark"] body .content-main select, [data-theme="dark"] body .sidebar input { background: #0f2418 !important; border-color: #2d5a40 !important; color: #e4f0e8 !important; box-shadow: 0 0 0 1px #080808 inset !important; } [data-theme="dark"] body .footer { background: #0a1f14 !important; color: #8fb9a0 !important; border-top-color: #2d5a40 !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] body .footer a { color: #5ecf8a !important; } [data-theme="dark"] body .footer a:hover { color: #6edc8f !important; } [data-theme="dark"] body .title { color: #6edc8f !important; text-shadow: 0 0 16px rgba(110, 220, 143, 0.3) !important; } [data-theme="dark"] body .list1, [data-theme="dark"] body .list1 li { color: #e4f0e8 !important; text-shadow: none !important; } [data-theme="dark"] body .matrix-offer-box, [data-theme="dark"] body .matrix-join-box { background: rgba(15, 36, 24, 0.95) !important; border-color: #3d8a5c !important; box-shadow: 0 0 0 1px #0a0a0a, 0 0 24px rgba(94, 207, 138, 0.12), inset 0 0 20px rgba(94, 207, 138, 0.04) !important; } [data-theme="dark"] body .matrix-offer-box:hover, [data-theme="dark"] body .matrix-join-box:hover { border-color: #6edc8f !important; box-shadow: 0 0 0 1px #080808, 0 0 32px rgba(94, 207, 138, 0.2) !important; } [data-theme="dark"] body .matrix-offer-text, [data-theme="dark"] body .matrix-join-text, [data-theme="dark"] body .matrix-price { color: #e4f0e8 !important; text-shadow: none !important; } [data-theme="dark"] body .matrix-offer-text .service-title, [data-theme="dark"] body .matrix-join-text .service-title { color: #6edc8f !important; text-decoration-color: #5ecf8a !important; text-shadow: 0 0 12px rgba(110, 220, 143, 0.25) !important; } [data-theme="dark"] body .matrix-join-btn { background: rgba(30, 92, 54, 0.4) !important; border-color: #5ecf8a !important; color: #e4f0e8 !important; box-shadow: 0 0 0 1px #0a0a0a !important; } [data-theme="dark"] body .matrix-join-btn:hover { background: #1e5c36 !important; color: #ffffff !important; } [data-theme="dark"] body .status-active { color: #5ecf8a !important; } [data-theme="dark"] body .status-pending { color: #d4a82a !important; } [data-theme="dark"] body .terminal-text { background: rgba(15, 36, 24, 0.95) !important; border-color: #3d8a5c !important; color: #e4f0e8 !important; box-shadow: 0 0 0 1px #0a0a0a, inset 0 0 10px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] body .error, [data-theme="dark"] body .error a { color: #f0a8a0 !important; } [data-theme="dark"] body a.link1 { color: #5ecf8a !important; } /* ============================================================ Windows VPN app promo (rendered by index.php for logged-in users) Light defaults live inline in index.php (.btg-app-promo*). Overrides target the same selectors with [data-theme="dark"]. ============================================================ */ [data-theme="dark"] .btg-app-promo { background: rgba(15, 36, 24, 0.95) !important; border-color: #3d8a5c !important; } [data-theme="dark"] .btg-app-promo:hover, [data-theme="dark"] .btg-app-promo:focus-visible { box-shadow: 0 0 22px rgba(94, 207, 138, 0.28) !important; } [data-theme="dark"] .btg-app-promo:focus-visible { outline-color: #5ecf8a !important; } [data-theme="dark"] .btg-app-promo__mark { background: rgba(110, 220, 143, 0.14) !important; border-color: #5ecf8a !important; color: #5ecf8a !important; } [data-theme="dark"] .btg-app-promo__eyebrow { color: #6edc8f !important; text-shadow: 0 0 8px rgba(110, 220, 143, 0.4) !important; } [data-theme="dark"] .btg-app-promo__headline { color: #e4f0e8 !important; text-shadow: 0 0 10px rgba(110, 220, 143, 0.32) !important; } [data-theme="dark"] .btg-app-promo__bullets { color: #aac3b3 !important; text-shadow: 0 0 3px rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .btg-app-promo__bullets li::before { background: #5ecf8a !important; box-shadow: 0 0 0 2px rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .btg-app-promo__bullets strong { color: #6edc8f !important; } /* ============================================================ payment.php — re-themes the .pt-page subtree. Most colors flow from the --pt-* custom properties defined on .pt-page; we override those once here. Hardcoded color literals (alerts, gradients, autofill, native ): the original hardcodes background:#ffffff!important — replace with a matching dark gradient, focus glow, and dark autofill background. */ [data-theme="dark"] .pt-page #pt_stripe_form input[type="text"], [data-theme="dark"] .pt-page #pt_stripe_panel input[type="text"] { background: linear-gradient(180deg, #0e2a1c 0%, #122f22 50%, #163d2a 100%) !important; background-color: #122f22 !important; border-color: rgba(94, 207, 138, 0.28) !important; color: #e4f0e8 !important; } [data-theme="dark"] .pt-page #pt_stripe_form input[type="text"]::placeholder, [data-theme="dark"] .pt-page #pt_stripe_panel input[type="text"]::placeholder { color: #5a7a5a !important; } [data-theme="dark"] .pt-page #pt_stripe_form input[type="text"]:focus, [data-theme="dark"] .pt-page #pt_stripe_panel input[type="text"]:focus { border-color: #6edc8f !important; box-shadow: 0 0 0 3px rgba(94, 207, 138, 0.22), 0 0 12px rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .pt-page #pt_stripe_form input[type="text"]:-webkit-autofill, [data-theme="dark"] .pt-page #pt_stripe_form input[type="text"]:-webkit-autofill:hover, [data-theme="dark"] .pt-page #pt_stripe_form input[type="text"]:-webkit-autofill:focus { -webkit-text-fill-color: #e4f0e8 !important; -webkit-box-shadow: 0 0 0 1000px #122f22 inset !important; box-shadow: 0 0 0 1000px #122f22 inset !important; } [data-theme="dark"] .pt-crypto-select-wrap select#np_pay_currency { background-color: #122f22 !important; color: #e4f0e8 !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ecf8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important; } [data-theme="dark"] .pt-crypto-select-wrap select#np_pay_currency:focus, [data-theme="dark"] .pt-crypto-select-wrap select#np_pay_currency:hover { background-color: #122f22 !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236edc8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important; color: #e4f0e8 !important; } [data-theme="dark"] .pt-crypto-select-wrap select#np_pay_currency option, [data-theme="dark"] .pt-crypto-select-wrap select#np_pay_currency optgroup { background: #0f2418 !important; background-color: #0f2418 !important; color: #e4f0e8 !important; } [data-theme="dark"] .pt-crypto-select-wrap select#np_pay_currency optgroup { color: #aac3b3 !important; } [data-theme="dark"] .pt-crypto-select-wrap select#np_pay_currency option:hover { background: #173a2c !important; background-color: #173a2c !important; color: #e4f0e8 !important; } [data-theme="dark"] .pt-crypto-select-wrap select#np_pay_currency option:checked { background: #1f4a38 !important; background-color: #1f4a38 !important; color: #e4f0e8 !important; } [data-theme="dark"] button.pt-stripe-pay { color: #06170f !important; background: linear-gradient(180deg, #82e0a8 0%, #5ecf8a 60%, #3d8a5c 100%) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } [data-theme="dark"] button.pt-stripe-pay:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } [data-theme="dark"] #pt_paypal_panel { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important; } /* ============================================================ /install/ section — install_docs.css uses no custom properties, so we override hardcoded colors selector-by-selector. ============================================================ */ [data-theme="dark"] .install-docs-box { color: #e4f0e8 !important; } [data-theme="dark"] .install-docs__breadcrumb { border-bottom-color: rgba(94, 207, 138, 0.22) !important; } [data-theme="dark"] .install-docs__crumbs { color: #aac3b3 !important; } [data-theme="dark"] .install-docs__crumb:not(:last-child)::after { color: #5a7a5a !important; } [data-theme="dark"] .install-docs__crumb a { color: #5ecf8a !important; } [data-theme="dark"] .install-docs__intro, [data-theme="dark"] .install-docs__app-desc { color: #aac3b3 !important; } [data-theme="dark"] .install-docs__page-title { color: #e4f0e8 !important; text-shadow: 0 0 10px rgba(110, 220, 143, 0.18) !important; } [data-theme="dark"] .install-docs__section-title { color: #aac3b3 !important; border-bottom-color: rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .install-docs__card { background: rgba(15, 36, 24, 0.92) !important; border-color: rgba(94, 207, 138, 0.22) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .install-docs__card:hover { border-color: rgba(94, 207, 138, 0.5) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .install-docs__card-title { color: #5ecf8a !important; } [data-theme="dark"] .install-docs__card--recommended { border-color: rgba(94, 207, 138, 0.6) !important; background: linear-gradient(155deg, rgba(15, 36, 24, 1) 0%, rgba(20, 53, 42, 0.95) 42%, rgba(30, 73, 56, 0.5) 100%) !important; box-shadow: 0 0 0 1px rgba(94, 207, 138, 0.22), 0 4px 20px rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .install-docs__card--recommended:hover { border-color: rgba(94, 207, 138, 0.85) !important; box-shadow: 0 0 0 1px rgba(94, 207, 138, 0.32), 0 6px 24px rgba(94, 207, 138, 0.24) !important; } [data-theme="dark"] .install-docs__card-tab { color: #06170f !important; background: linear-gradient(135deg, #5ecf8a 0%, #3d8a5c 100%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .install-docs__card-badge { color: #06170f !important; background: #5ecf8a !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .install-docs__cards--member-is-vpn .install-docs__card--vpn, [data-theme="dark"] .install-docs__cards--member-is-proxy .install-docs__card--proxy { border-color: rgba(94, 207, 138, 0.6) !important; background: linear-gradient(160deg, rgba(15, 36, 24, 1) 0%, rgba(23, 58, 44, 0.98) 55%, rgba(30, 73, 56, 0.95) 100%) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .install-docs__cards--member-is-vpn .install-docs__card--vpn .install-docs__card-title, [data-theme="dark"] .install-docs__cards--member-is-proxy .install-docs__card--proxy .install-docs__card-title { color: #82e0a8 !important; } [data-theme="dark"] .install-docs__cards--member-is-vpn .install-docs__card--proxy, [data-theme="dark"] .install-docs__cards--member-is-proxy .install-docs__card--vpn { border-color: rgba(94, 207, 138, 0.14) !important; background: rgba(15, 36, 24, 0.6) !important; } [data-theme="dark"] .install-docs__cards--member-is-vpn .install-docs__card--proxy .install-docs__card-title, [data-theme="dark"] .install-docs__cards--member-is-proxy .install-docs__card--vpn .install-docs__card-title { color: #7a9a7a !important; } [data-theme="dark"] .install-docs__column-head { color: #5ecf8a !important; border-bottom-color: rgba(94, 207, 138, 0.3) !important; } [data-theme="dark"] .install-docs__column-head-badge { color: #aac3b3 !important; background: rgba(94, 207, 138, 0.08) !important; border-color: rgba(94, 207, 138, 0.22) !important; } [data-theme="dark"] .install-docs__article-meta { color: #8fb9a0 !important; } [data-theme="dark"] .install-docs__prose { background: rgba(15, 36, 24, 0.92) !important; border-color: rgba(94, 207, 138, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; color: #e4f0e8 !important; } [data-theme="dark"] .install-docs__prose h2 { color: #82e0a8 !important; } [data-theme="dark"] .install-docs__prose h3 { color: #6edc8f !important; } [data-theme="dark"] .install-docs__prose h4 { color: #5ecf8a !important; } [data-theme="dark"] .install-docs__prose blockquote { border-left-color: rgba(94, 207, 138, 0.45) !important; background: rgba(94, 207, 138, 0.07) !important; color: #aac3b3 !important; } [data-theme="dark"] .install-docs__prose code { background: rgba(94, 207, 138, 0.10) !important; color: #c8efd6 !important; } [data-theme="dark"] .install-docs__prose pre { background: #051510 !important; color: #c8efd6 !important; border-color: rgba(94, 207, 138, 0.32) !important; } [data-theme="dark"] .install-docs__prose hr { border-top-color: rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .install-docs__prose a { color: #6edc8f !important; } [data-theme="dark"] .install-docs__prose img { border-color: rgba(94, 207, 138, 0.22) !important; } [data-theme="dark"] .install-docs__empty { color: #8fb9a0 !important; } [data-theme="dark"] .install-docs__back { color: #5ecf8a !important; } /* Account-mismatch alert: keep it amber but invert for dark surface */ [data-theme="dark"] .install-docs__account-mismatch { border-color: #c2410c !important; background: linear-gradient(165deg, rgba(124, 45, 18, 0.30) 0%, rgba(124, 45, 18, 0.20) 45%, rgba(124, 45, 18, 0.12) 100%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 200, 150, 0.06) !important; color: #fed7aa !important; } [data-theme="dark"] .install-docs__account-mismatch-icon { background: rgba(234, 88, 12, 0.22) !important; color: #ffb380 !important; } [data-theme="dark"] .install-docs__account-mismatch-a { color: #ffb380 !important; } [data-theme="dark"] .install-docs__account-mismatch-a:hover { color: #ffd2a8 !important; } /* ============================================================ /support/index.php — tickets list + FAQ ============================================================ */ [data-theme="dark"] .support-content .support-title { color: #6edc8f !important; text-shadow: 0 0 12px rgba(110, 220, 143, 0.22) !important; } [data-theme="dark"] .support-content .support-text { color: #aac3b3 !important; } [data-theme="dark"] .support-content .support-link { color: #5ecf8a !important; } [data-theme="dark"] .support-content .support-link:hover { color: #82e0a8 !important; } [data-theme="dark"] .support-content .support-btn { background: linear-gradient(180deg, #82e0a8 0%, #5ecf8a 60%, #3d8a5c 100%) !important; color: #06170f !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } [data-theme="dark"] .support-content .support-btn:hover { filter: brightness(1.08) !important; color: #06170f !important; box-shadow: 0 4px 14px rgba(94, 207, 138, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } [data-theme="dark"] .support-content th { color: #6edc8f !important; border-bottom-color: rgba(94, 207, 138, 0.32) !important; } [data-theme="dark"] .support-content td { color: #c8efd6 !important; border-bottom-color: rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .support-content tbody tr:hover td { background: rgba(94, 207, 138, 0.10) !important; color: #e4f0e8 !important; } [data-theme="dark"] .support-content .support-ticket-unread-icon, [data-theme="dark"] .support-content .support-ticket-unread-inline .support-ticket-unread-icon, [data-theme="dark"] .support-content .support-ticket-unread-inline .fa-solid { color: #ff8a80 !important; } /* FAQ panel — base, hover, and open states with the same shifting green gradient family used on the payment plan rows so the page feels cohesive. */ [data-theme="dark"] .support-faq .support-faq-search { background: linear-gradient(180deg, #0e2a1c 0%, #122f22 50%, #163d2a 100%) !important; border-color: rgba(94, 207, 138, 0.4) !important; color: #6edc8f !important; } [data-theme="dark"] .support-faq .support-faq-search::placeholder { color: rgba(94, 207, 138, 0.55) !important; } [data-theme="dark"] .support-faq .support-faq-search:focus { border-color: #6edc8f !important; box-shadow: 0 0 0 3px rgba(94, 207, 138, 0.22), 0 0 12px rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .support-faq details { background: linear-gradient( 135deg, #0c1f15 0%, #122f22 22%, #18402d 50%, #122f22 78%, #0c1f15 100% ) !important; background-size: 220% 220% !important; animation: ptDarkPlanShift 14s ease-in-out infinite !important; border-color: rgba(94, 207, 138, 0.28) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(94, 207, 138, 0.06) !important; color: #e4f0e8 !important; } [data-theme="dark"] .support-faq details:hover { border-color: rgba(94, 207, 138, 0.5) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 18px rgba(94, 207, 138, 0.16) !important; } [data-theme="dark"] .support-faq details[open] { background: linear-gradient( 135deg, #0e2a1c 0%, #143626 25%, #1a4530 50%, #143626 75%, #0e2a1c 100% ) !important; border-color: rgba(94, 207, 138, 0.55) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 22px rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .support-faq summary { color: #c8efd6 !important; } [data-theme="dark"] .support-faq summary:hover { color: #e4f0e8 !important; } [data-theme="dark"] .support-faq details[open] summary { color: #6edc8f !important; text-shadow: 0 0 8px rgba(110, 220, 143, 0.2) !important; } [data-theme="dark"] .support-faq .support-faq-answer { color: #aac3b3 !important; border-top-color: rgba(94, 207, 138, 0.22) !important; } @media (prefers-reduced-motion: reduce) { [data-theme="dark"] .support-faq details { animation: none !important; } } /* ============================================================ /network.php — page chrome (top text was unreadable in dark mode) + Leaflet map dark variant. The basemap is CARTO Voyager (light); inverting only the .leaflet-tile-pane gives a dark map while leaving vector markers + popups unaffected. ============================================================ */ [data-theme="dark"] .btg-net { --net-fg: #c8efd6 !important; --net-fg-soft: rgba(200, 239, 214, 0.7) !important; --net-line: rgba(94, 207, 138, 0.22) !important; --net-accent: #5ecf8a !important; } [data-theme="dark"] .btg-net__intro h1 { color: #e4f0e8 !important; text-shadow: 0 0 14px rgba(94, 207, 138, 0.3) !important; } [data-theme="dark"] .btg-net__tag { color: #aac3b3 !important; } [data-theme="dark"] .btg-net__tag strong { color: #6edc8f !important; } [data-theme="dark"] .btg-net__meta { color: #5ecf8a !important; border-top-color: rgba(94, 207, 138, 0.22) !important; } [data-theme="dark"] .btg-net__hint { color: #aac3b3 !important; } [data-theme="dark"] .btg-net__map-wrap { background: linear-gradient(165deg, #0c1f15 0%, #122f22 100%) !important; border-color: rgba(94, 207, 138, 0.28) !important; box-shadow: 0 1px 0 rgba(94, 207, 138, 0.06) inset, 0 20px 50px -12px rgba(0, 0, 0, 0.7) !important; } [data-theme="dark"] .btg-net__map-wrap .leaflet-container { background: #0a1f15 !important; } [data-theme="dark"] .btg-net__map-wrap .leaflet-popup-content-wrapper { background: #122f22 !important; border-color: rgba(94, 207, 138, 0.45) !important; color: #e4f0e8 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important; } [data-theme="dark"] .btg-net__map-wrap .leaflet-popup-tip { background: #122f22 !important; } [data-theme="dark"] .btg-net__map-wrap .leaflet-popup-content { color: #c8efd6 !important; } [data-theme="dark"] .btg-net__map-wrap .leaflet-control-attribution { background: rgba(15, 36, 24, 0.85) !important; color: #8fb9a0 !important; } [data-theme="dark"] .btg-net__map-wrap .leaflet-control-attribution a { color: #5ecf8a !important; } [data-theme="dark"] .btg-net__map-wrap .leaflet-control-zoom a { background: #122f22 !important; color: #c8efd6 !important; border-color: rgba(94, 207, 138, 0.32) !important; } [data-theme="dark"] .btg-net__map-wrap .leaflet-control-zoom a:hover { background: #18402d !important; color: #e4f0e8 !important; } [data-theme="dark"] .btg-net__empty { background: rgba(15, 36, 24, 0.7) !important; color: #aac3b3 !important; } /* (Universal a.link1 button treatment lives at the bottom of this file.) */ /* ============================================================ /wireguard/index.php — inline-styled .wg-* classes .cta-button + .content-main input/select already get dark styling from rules earlier in this file; below covers everything else. ============================================================ */ [data-theme="dark"] .wg-notice { background: linear-gradient(145deg, rgba(20, 53, 42, 0.95), rgba(15, 36, 24, 0.9)) !important; border-color: rgba(94, 207, 138, 0.42) !important; color: #c8efd6 !important; box-shadow: inset 0 0 0 1px rgba(94, 207, 138, 0.08) !important; } [data-theme="dark"] .wg-card { background: linear-gradient(135deg, #0c1f15 0%, #122f22 50%, #18402d 100%) !important; border-color: rgba(94, 207, 138, 0.32) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(94, 207, 138, 0.06) !important; } [data-theme="dark"] .wg-card h3 { color: #6edc8f !important; text-shadow: 0 0 10px rgba(110, 220, 143, 0.2) !important; } [data-theme="dark"] .wg-subtle { color: #aac3b3 !important; } [data-theme="dark"] .wg-form-row label { color: #aac3b3 !important; } [data-theme="dark"] .wg-form-row input::placeholder { color: #5a7a5a !important; } [data-theme="dark"] .wg-form-row select option, [data-theme="dark"] .wg-form-row select optgroup { background-color: #122f22 !important; color: #e4f0e8 !important; } [data-theme="dark"] .wg-table { border-color: rgba(94, 207, 138, 0.28) !important; background: rgba(15, 36, 24, 0.6) !important; } [data-theme="dark"] .wg-table th, [data-theme="dark"] .wg-table td { border-bottom-color: rgba(94, 207, 138, 0.18) !important; color: #c8efd6 !important; } [data-theme="dark"] .wg-table thead th { background: rgba(94, 207, 138, 0.10) !important; color: #5ecf8a !important; } [data-theme="dark"] .wg-table tbody tr:nth-child(even) { background: rgba(94, 207, 138, 0.04) !important; } [data-theme="dark"] .wg-table tbody tr:hover { background: rgba(94, 207, 138, 0.10) !important; } [data-theme="dark"] .wg-tag { border-color: #5ecf8a !important; color: #6edc8f !important; background: rgba(94, 207, 138, 0.08) !important; } [data-theme="dark"] .wg-tag--revoked { border-color: #f0a8a0 !important; color: #f0a8a0 !important; background: rgba(240, 168, 160, 0.08) !important; } [data-theme="dark"] .wg-alert { background: rgba(108, 199, 255, 0.12) !important; border-color: rgba(108, 199, 255, 0.45) !important; color: #6cc7ff !important; } [data-theme="dark"] .wg-alert--error { background: rgba(240, 168, 160, 0.12) !important; border-color: rgba(240, 168, 160, 0.45) !important; color: #f0a8a0 !important; } [data-theme="dark"] .wg-config { background: #051510 !important; border-color: rgba(94, 207, 138, 0.32) !important; color: #c8efd6 !important; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.45) !important; } [data-theme="dark"] .wg-config:focus { outline: none !important; border-color: #6edc8f !important; box-shadow: 0 0 0 3px rgba(94, 207, 138, 0.22), inset 0 0 12px rgba(0, 0, 0, 0.45) !important; } /* QR code container: keep the WHITE inner background (required for the QR pattern to be scannable) but frame it with a green ring so it doesn't look pasted onto the dark surface. */ [data-theme="dark"] #wgQrCode { border: 1px solid rgba(94, 207, 138, 0.5) !important; box-shadow: 0 0 18px rgba(94, 207, 138, 0.18), 0 4px 14px rgba(0, 0, 0, 0.5) !important; } /* Restricted-access notice on /wireguard/ when user has no active VPN. That div uses inline styles only, so we match it via attribute selector. */ [data-theme="dark"] body div[style*="border:2px solid #b45309"], [data-theme="dark"] body div[style*="border: 2px solid #b45309"] { background: linear-gradient(165deg, rgba(124, 45, 18, 0.30) 0%, rgba(124, 45, 18, 0.18) 100%) !important; border-color: #c2410c !important; color: #fed7aa !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 200, 150, 0.06) !important; } /* ============================================================ /support/view.php — individual ticket conversation view. Subject-table header (.support-subject-table) is already dark green by design; we leave that alone and only fix the white surfaces: message bubbles, agent replies, the reply textarea, and the attachment chips. ============================================================ */ [data-theme="dark"] .support-content .support-msg { background: linear-gradient(135deg, #0c1f15 0%, #122f22 50%, #18402d 100%) !important; border-color: rgba(94, 207, 138, 0.28) !important; color: #c8efd6 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(94, 207, 138, 0.06) !important; } [data-theme="dark"] .support-content .support-msg.agent { background: linear-gradient(135deg, #0e2a1c 0%, #143626 50%, #1a4530 100%) !important; border-color: rgba(94, 207, 138, 0.4) !important; border-left: 4px solid #5ecf8a !important; color: #e4f0e8 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 14px rgba(94, 207, 138, 0.1), inset 0 1px 0 rgba(94, 207, 138, 0.08) !important; } [data-theme="dark"] .support-content .support-msg .msg-meta { color: #6edc8f !important; text-shadow: 0 0 6px rgba(110, 220, 143, 0.18) !important; } [data-theme="dark"] .support-content .support-msg .msg-body { color: #c8efd6 !important; } [data-theme="dark"] .support-content .support-msg.agent .msg-meta { color: #82e0a8 !important; text-shadow: 0 0 8px rgba(110, 220, 143, 0.25) !important; } [data-theme="dark"] .support-content .support-msg.agent .msg-body { color: #e4f0e8 !important; } /* Reply textarea — .content-main textarea earlier in this file already sets a dark background, but view.php's inline rule fights it; redeclare here with higher specificity + a focus ring to match the rest of the dark form fields. */ [data-theme="dark"] .support-content textarea { background: linear-gradient(180deg, #0e2a1c 0%, #122f22 50%, #163d2a 100%) !important; border: 1px solid rgba(94, 207, 138, 0.32) !important; color: #e4f0e8 !important; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .support-content textarea::placeholder { color: #5a7a5a !important; } [data-theme="dark"] .support-content textarea:focus { outline: none !important; border-color: #6edc8f !important; box-shadow: 0 0 0 3px rgba(94, 207, 138, 0.22), 0 0 12px rgba(94, 207, 138, 0.18), inset 0 0 12px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .support-content .support-label { color: #aac3b3 !important; } [data-theme="dark"] .support-content .support-err { color: #f0a8a0 !important; } /* Attach button — style it like the rest of the bright green CTA buttons */ [data-theme="dark"] .support-content .support-attach-btn { background: linear-gradient(180deg, #82e0a8 0%, #5ecf8a 60%, #3d8a5c 100%) !important; color: #06170f !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } [data-theme="dark"] .support-content .support-attach-btn:hover { filter: brightness(1.08) !important; background: linear-gradient(180deg, #82e0a8 0%, #5ecf8a 60%, #3d8a5c 100%) !important; color: #06170f !important; box-shadow: 0 4px 14px rgba(94, 207, 138, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } [data-theme="dark"] .support-content .support-attach-status { color: #8fb9a0 !important; } /* Attachment chips: link-style file pills below messages */ [data-theme="dark"] .support-content .support-attach-file { background: rgba(15, 36, 24, 0.85) !important; border-color: rgba(94, 207, 138, 0.32) !important; color: #c8efd6 !important; } [data-theme="dark"] .support-content .support-attach-file:hover { border-color: #6edc8f !important; color: #6edc8f !important; background: rgba(15, 36, 24, 0.95) !important; } [data-theme="dark"] .support-content .support-msg-attachments img { border-color: rgba(94, 207, 138, 0.32) !important; } /* ============================================================ /check_torrent_ip.php — title legibility + dark surfaces for the .cti-box panels (steps + waiting/result status). ============================================================ */ [data-theme="dark"] .cti-title { color: #6edc8f !important; text-shadow: 0 0 14px rgba(110, 220, 143, 0.32) !important; } [data-theme="dark"] .cti-text { color: #c8efd6 !important; } [data-theme="dark"] .cti-text b, [data-theme="dark"] .cti-text strong { color: #6edc8f !important; } [data-theme="dark"] .cti-box { background: linear-gradient(135deg, #0c1f15 0%, #122f22 50%, #18402d 100%) !important; border-color: rgba(94, 207, 138, 0.32) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(94, 207, 138, 0.06) !important; } [data-theme="dark"] .cti-status-wait { color: #ffb380 !important; text-shadow: 0 0 8px rgba(255, 179, 128, 0.25) !important; } [data-theme="dark"] .cti-status-ok { color: #06170f !important; background: linear-gradient(180deg, #82e0a8 0%, #5ecf8a 60%, #3d8a5c 100%) !important; border-color: #6edc8f !important; box-shadow: 0 2px 8px rgba(94, 207, 138, 0.22) !important; } [data-theme="dark"] .cti-status-bad { color: #ffffff !important; background: linear-gradient(180deg, #c93535 0%, #a02020 60%, #7a1414 100%) !important; border-color: #f0a8a0 !important; box-shadow: 0 2px 8px rgba(240, 168, 160, 0.2) !important; } [data-theme="dark"] .cti-mono { color: #6edc8f !important; } [data-theme="dark"] .cti-seen-label { color: #aac3b3 !important; } [data-theme="dark"] .cti-seen-value { color: #e4f0e8 !important; } /* "Open Magnet Link" button — already has its own bright gradient; the only thing to tweak in dark mode is the focus outline so it doesn't get lost against the now-dark surface. */ [data-theme="dark"] .cti-btn:focus-visible { outline-color: #6edc8f !important; } /* ============================================================ Universal button treatment for dark mode. Matches the .matrix-join-btn (JOIN NOW) dark style: a subtle dark-green "ghost" panel with a bright green border and light text, that fills with darker green on hover. Pairs with the light-mode .link1 rule in global.php (white panel + dark green border + dark green text → fills #006b00 on hover). Covers every class="link1" in the codebase (Apply, Continue, Set Password, OK, Submit, Clear, Get It!, Browse, Download…) because all 26 instances wrap their label in .... ============================================================ */ [data-theme="dark"] a.link1 { background: rgba(30, 92, 54, 0.4) !important; border: 2px solid #5ecf8a !important; color: #e4f0e8 !important; text-shadow: 0 0 8px rgba(94, 207, 138, 0.35) !important; box-shadow: 0 0 0 1px #0a0a0a, inset 0 0 16px rgba(94, 207, 138, 0.06) !important; } [data-theme="dark"] a.link1 em, [data-theme="dark"] a.link1 b { font-style: normal !important; font-weight: bold !important; color: inherit !important; } [data-theme="dark"] a.link1:visited { color: #e4f0e8 !important; } [data-theme="dark"] a.link1:hover { background: #1e5c36 !important; color: #ffffff !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.35) !important; box-shadow: 0 0 0 1px #0a0a0a, 0 0 24px rgba(94, 207, 138, 0.28), inset 0 0 16px rgba(94, 207, 138, 0.1) !important; transform: translateY(-1px); } [data-theme="dark"] a.link1:active { transform: translateY(0); filter: brightness(0.96) !important; } [data-theme="dark"] a.link1:focus-visible { outline: 2px solid #6edc8f !important; outline-offset: 3px !important; }