/* 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). Page chrome (body, header, main-content, hero) is intentionally near- black so floating panels (.content-main, .sidebar) read as lifted surfaces. Grid overlay alpha is also dropped so it stays a hint of texture rather than glowing against the darker base. */ [data-theme="dark"] body { color: #e4f0e8 !important; background: #020805 !important; background-image: linear-gradient(rgba(110, 220, 143, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 220, 143, 0.04) 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(5, 13, 9, 0.98) !important; border-bottom: 2px solid #2d5a40 !important; box-shadow: 0 4px 28px rgba(0, 0, 0, 0.65) !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; } /* Dark mode: neutralize sticky :hover/:focus once the matching drawer is * closed so the button reverts to its muted closed-state look (instead of * keeping the brightness(1.08) filter from the generic .cta-button:hover). */ [data-theme="dark"] body:not(.btg-mobile-login-open) .btg-header-login-toggle:hover, [data-theme="dark"] body:not(.btg-mobile-login-open) .btg-header-login-toggle:focus, [data-theme="dark"] body:not(.btg-mobile-login-open) .btg-header-login-toggle:focus-visible, [data-theme="dark"] body:not(.btg-mobile-sidebar-open) .btg-header-menu-btn:hover, [data-theme="dark"] body:not(.btg-mobile-sidebar-open) .btg-header-menu-btn:focus, [data-theme="dark"] body:not(.btg-mobile-sidebar-open) .btg-header-menu-btn:focus-visible { background: #1e5c36 !important; color: #e4f0e8 !important; border-color: #2d5a40 !important; filter: none !important; transform: none !important; box-shadow: 0 0 0 1px #0a0a0a, 0 0 16px rgba(94, 207, 138, 0.2) !important; } /* Dark mode: bright contrasting open-state for both drawer toggles. */ [data-theme="dark"] body.btg-mobile-login-open .btg-header-login-toggle, [data-theme="dark"] body.btg-mobile-sidebar-open .btg-header-menu-btn { background: linear-gradient(180deg, #6edc8f 0%, #3d8a5c 100%) !important; color: #062012 !important; border-color: #6edc8f !important; box-shadow: 0 0 0 1px #0a0a0a, 0 0 22px rgba(110, 220, 143, 0.55) !important; filter: none !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, #06140e 0%, #020805 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: #020805 !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; } /* Tone the sidebar's vertical scanline overlay way down for dark mode. Light mode uses rgba(0,255,0,0.05) which is barely visible on white, but the same green stripes glow too brightly against the near-black panel. Drop the alpha and shift to the muted dark-palette green so the overlay reads as "scanline" not "racing stripes". */ [data-theme="dark"] body .sidebar::before { background: repeating-linear-gradient( 90deg, transparent, transparent 5px, rgba(110, 220, 143, 0.018) 5px, rgba(110, 220, 143, 0.018) 10px ) !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; } /* VPN <-> Proxy toggle + confirmation modal (payment.php upper-right). */ [data-theme="dark"] .pt-svc-toggle { background: rgba(94, 207, 138, 0.08) !important; border-color: rgba(94, 207, 138, 0.3) !important; } [data-theme="dark"] .pt-svc-toggle__label { color: rgba(110, 220, 143, 0.7) !important; } [data-theme="dark"] .pt-svc-toggle__btn { color: #c8efd6 !important; } [data-theme="dark"] .pt-svc-toggle__btn:hover { background: rgba(94, 207, 138, 0.18) !important; } [data-theme="dark"] .pt-svc-toggle__btn--on, [data-theme="dark"] .pt-svc-toggle__btn--on:hover { background: rgba(34, 197, 94, 0.45) !important; color: #e4f0e8 !important; box-shadow: 0 0 0 1px rgba(94, 207, 138, 0.4) inset, 0 0 12px rgba(34, 197, 94, 0.5) !important; } [data-theme="dark"] .pt-svc-modal-backdrop { background: rgba(0, 0, 0, 0.7) !important; } [data-theme="dark"] .pt-svc-modal { background: #0a1f15 !important; border-color: rgba(94, 207, 138, 0.45) !important; color: #c8efd6 !important; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(94, 207, 138, 0.2) inset !important; } [data-theme="dark"] .pt-svc-modal h3 { color: #e4f0e8 !important; text-shadow: 0 0 14px rgba(94, 207, 138, 0.3) !important; } [data-theme="dark"] .pt-svc-modal p { color: #c8efd6 !important; } [data-theme="dark"] .pt-svc-modal__detail { background: rgba(94, 207, 138, 0.08) !important; border-color: rgba(94, 207, 138, 0.3) !important; color: #d6f0e0 !important; } [data-theme="dark"] .pt-svc-modal__warn { background: rgba(217, 119, 6, 0.18) !important; border-color: rgba(217, 119, 6, 0.5) !important; color: #fed7aa !important; } [data-theme="dark"] .pt-svc-modal__btn { background: #122f22 !important; border-color: rgba(94, 207, 138, 0.4) !important; color: #c8efd6 !important; } [data-theme="dark"] .pt-svc-modal__btn:hover { background: #18402d !important; } [data-theme="dark"] .pt-svc-modal__btn--primary { background: rgba(34, 197, 94, 0.55) !important; border-color: rgba(94, 207, 138, 0.5) !important; color: #e4f0e8 !important; } [data-theme="dark"] .pt-svc-modal__btn--primary:hover { background: rgba(34, 197, 94, 0.7) !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; text-shadow: 0 0 10px rgba(110, 220, 143, 0.45) !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__protocols { border-top-color: rgba(94, 207, 138, 0.22) !important; } [data-theme="dark"] .btg-net__protocol { background: rgba(94, 207, 138, 0.08) !important; border-color: rgba(94, 207, 138, 0.34) !important; box-shadow: inset 0 0 0 1px rgba(94, 207, 138, 0.05) !important; color: #c8efd6 !important; text-shadow: 0 0 8px rgba(94, 207, 138, 0.4) !important; } [data-theme="dark"] .btg-net__protocol::before { background: #6edc8f !important; box-shadow: 0 0 0 1px rgba(94, 207, 138, 0.35), 0 0 10px rgba(94, 207, 138, 0.7) !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; } /* ============================================================ /ikev2/ and /openvpn/ configurator pages — dark theme ============================================================ Both pages share an inline