:root {
  --trejj-page: #050505;
  --trejj-surface: #0d0911;
  --trejj-surface-soft: #18111f;
  --trejj-surface-muted: rgba(24, 17, 31, .78);
  --trejj-text: #f8fafc;
  --trejj-text-soft: #d1d5db;
  --trejj-text-muted: #94a3b8;
  --trejj-border: rgba(255, 255, 255, .10);
  --trejj-purple: #a855f7;
  --trejj-purple-strong: #7e22ce;
  --trejj-focus: #e879f9;
}

html[data-theme="day"] {
  --trejj-page: #f7f4ff;
  --trejj-surface: #ffffff;
  --trejj-surface-soft: #f4effb;
  --trejj-surface-muted: rgba(248, 245, 255, .88);
  --trejj-text: #201629;
  --trejj-text-soft: #45384f;
  --trejj-text-muted: #655a70;
  --trejj-border: rgba(76, 29, 149, .16);
  --trejj-purple: #8b35da;
  --trejj-purple-strong: #6b21a8;
  --trejj-focus: #7e22ce;
}

html,
body {
  background-color: var(--trejj-page);
}

body {
  color: var(--trejj-text);
}

.theme-ready body,
.theme-ready .nav-glass,
.theme-ready .footer-panel,
.theme-ready .account-menu,
.theme-ready .mobile-panel,
.theme-ready .future-card,
.theme-ready .future-hero,
.theme-ready .future-table-wrap {
  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.theme-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid rgba(192, 132, 252, .28);
  border-radius: 999px;
  background: rgba(24, 17, 31, .82);
  color: #f5f3ff;
  padding: .38rem .68rem .38rem .44rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 10px 30px rgba(0, 0, 0, .18),
    0 0 24px rgba(168, 85, 247, .08);
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: rgba(232, 121, 249, .52);
  background: rgba(36, 24, 45, .94);
}

.theme-toggle__track {
  position: relative;
  display: inline-flex;
  width: 2.95rem;
  height: 1.55rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(216, 180, 254, .22);
  border-radius: 999px;
  background: rgba(2, 2, 3, .72);
  padding: 0 .25rem;
  overflow: hidden;
}

.theme-toggle__icon {
  position: relative;
  z-index: 2;
  width: .8rem;
  height: .8rem;
  pointer-events: none;
}

.theme-toggle__icon--sun {
  color: #fbbf24;
}

.theme-toggle__icon--moon {
  color: #e9d5ff;
}

.theme-toggle__thumb {
  position: absolute;
  z-index: 1;
  top: .17rem;
  left: .18rem;
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #c084fc, #9333ea);
  box-shadow: 0 0 15px rgba(192, 132, 252, .48);
  transform: translateX(1.3rem);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.theme-toggle__label {
  min-width: 2.7rem;
  text-align: left;
}

.theme-toggle--compact {
  width: 2.75rem;
  padding: .38rem;
}

.theme-toggle--compact .theme-toggle__track {
  width: 1.7rem;
  border: 0;
  background: transparent;
  padding: 0;
}

.theme-toggle--compact .theme-toggle__thumb,
.theme-toggle--compact .theme-toggle__label {
  display: none;
}

.theme-toggle--compact .theme-toggle__icon {
  position: absolute;
  left: 50%;
  width: 1.15rem;
  height: 1.15rem;
  transform: translateX(-50%);
}

.theme-toggle--compact .theme-toggle__icon--sun,
html[data-theme="day"] .theme-toggle--compact .theme-toggle__icon--moon {
  opacity: 0;
}

html[data-theme="day"] .theme-toggle--compact .theme-toggle__icon--sun {
  opacity: 1;
}

html[data-theme="day"] .theme-toggle {
  border-color: rgba(107, 33, 168, .22);
  background: rgba(255, 255, 255, .88);
  color: #3b254a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 10px 30px rgba(76, 29, 149, .10);
}

html[data-theme="day"] .theme-toggle:hover {
  border-color: rgba(107, 33, 168, .42);
  background: #ffffff;
}

html[data-theme="day"] .theme-toggle__track {
  border-color: rgba(107, 33, 168, .18);
  background: #eee7f8;
}

html[data-theme="day"] .theme-toggle__icon--moon {
  color: #6b21a8;
}

html[data-theme="day"] .theme-toggle__thumb {
  background: linear-gradient(145deg, #fde68a, #f59e0b);
  box-shadow: 0 0 14px rgba(245, 158, 11, .34);
  transform: translateX(0);
}

.theme-guest-toggle {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 40;
}

html[data-theme="day"] body {
  background:
    radial-gradient(circle at 10% 0%, rgba(168, 85, 247, .12), transparent 31%),
    radial-gradient(circle at 90% 0%, rgba(217, 70, 239, .08), transparent 33%),
    #f7f4ff !important;
  color: var(--trejj-text);
}

html[data-theme="day"] .site-shell-grid {
  opacity: .18;
  background-image:
    linear-gradient(rgba(107, 33, 168, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 33, 168, .09) 1px, transparent 1px);
}

html[data-theme="day"] :is(
  [class*="bg-[#050505]"],
  [class*="bg-gray-950"],
  [class*="bg-slate-950"]
) {
  background-color: var(--trejj-page) !important;
}

html[data-theme="day"] :is(
  [class*="bg-gray-900"],
  [class*="bg-slate-900"]
) {
  background-color: var(--trejj-surface) !important;
}

html[data-theme="day"] :is(
  [class*="bg-gray-800"],
  [class*="bg-slate-800"],
  [class*="bg-gray-700"]
) {
  background-color: var(--trejj-surface-soft) !important;
}

html[data-theme="day"] :is(
  [class*="bg-black/"],
  [class*="bg-white/5"],
  [class*="bg-white/[."],
  [class*="bg-white/10"]
) {
  background-color: rgba(255, 255, 255, .72) !important;
}

html[data-theme="day"] :is(
  [class*="fixed"][class*="inset-0"][class*="bg-black/"],
  [class*="absolute"][class*="inset-0"][class*="bg-black/"]
) {
  background-color: rgba(18, 8, 28, .68) !important;
}

html[data-theme="day"] :is(
  [class*="from-gray-950"],
  [class*="from-gray-900"],
  [class*="from-slate-950"],
  [class*="from-slate-900"]
) {
  --tw-gradient-from: #ffffff !important;
  --tw-gradient-to: rgba(255, 255, 255, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-theme="day"] :is(
  [class*="via-gray-950"],
  [class*="via-gray-900"],
  [class*="via-slate-950"],
  [class*="via-slate-900"]
) {
  --tw-gradient-stops: var(--tw-gradient-from), #f7f4ff, var(--tw-gradient-to) !important;
}

html[data-theme="day"] :is(
  [class*="to-gray-950"],
  [class*="to-gray-900"],
  [class*="to-gray-800"],
  [class*="to-slate-950"],
  [class*="to-slate-900"]
) {
  --tw-gradient-to: #eee7f8 !important;
}

html[data-theme="day"] :is(
  [class*="text-white"],
  [class*="text-gray-100"],
  [class*="text-gray-200"],
  [class*="text-slate-100"],
  [class*="text-slate-200"]
) {
  color: var(--trejj-text) !important;
}

html[data-theme="day"] :is(
  [class*="text-gray-300"],
  [class*="text-gray-400"],
  [class*="text-slate-300"],
  [class*="text-slate-400"]
) {
  color: var(--trejj-text-soft) !important;
}

html[data-theme="day"] :is(
  [class*="text-gray-500"],
  [class*="text-gray-600"],
  [class*="text-gray-700"],
  [class*="text-slate-500"],
  [class*="text-slate-600"],
  [class*="text-slate-700"]
) {
  color: var(--trejj-text-muted) !important;
}

html[data-theme="day"] :is(
  [class*="text-violet-100"],
  [class*="text-violet-200"],
  [class*="text-violet-300"],
  [class*="text-violet-400"],
  [class*="text-purple-100"],
  [class*="text-purple-200"],
  [class*="text-purple-300"]
) {
  color: #6b21a8 !important;
}

html[data-theme="day"] :is(
  [class*="text-fuchsia-100"],
  [class*="text-fuchsia-200"],
  [class*="text-fuchsia-300"],
  [class*="text-fuchsia-400"]
) {
  color: #a21caf !important;
}

html[data-theme="day"] :is(
  [class*="text-red-100"],
  [class*="text-red-200"],
  [class*="text-red-300"],
  [class*="text-red-400"],
  [class*="text-rose-100"],
  [class*="text-rose-200"],
  [class*="text-rose-300"]
) {
  color: #b91c1c !important;
}

html[data-theme="day"] :is(
  [class*="text-amber-100"],
  [class*="text-amber-200"],
  [class*="text-amber-300"],
  [class*="text-amber-400"],
  [class*="text-yellow-100"],
  [class*="text-yellow-200"],
  [class*="text-yellow-300"]
) {
  color: #92400e !important;
}

html[data-theme="day"] :is(
  [class*="border-white/"],
  [class*="border-gray-6"],
  [class*="border-gray-7"],
  [class*="border-gray-8"],
  [class*="border-slate-6"],
  [class*="border-slate-7"],
  [class*="border-slate-8"]
) {
  border-color: var(--trejj-border) !important;
}

html[data-theme="day"] :is(
  [class*="divide-white/"],
  [class*="divide-gray-"],
  [class*="divide-slate-"]
) > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--trejj-border) !important;
}

html[data-theme="day"] :is(input, select, textarea) {
  border-color: rgba(76, 29, 149, .20);
  background-color: #ffffff;
  color: var(--trejj-text);
}

html[data-theme="day"] :is(input, textarea)::placeholder {
  color: #766b80 !important;
  opacity: 1;
}

html[data-theme="day"] option {
  background: #ffffff;
  color: #201629;
}

html[data-theme="day"] :is(pre, code, kbd) {
  border-color: rgba(76, 29, 149, .16);
}

html[data-theme="day"] pre {
  background: #f4effb !important;
  color: #32223f !important;
}

html[data-theme="day"] :is(table, th, td) {
  border-color: var(--trejj-border);
}

html[data-theme="day"] .nav-glass {
  border-bottom-color: rgba(76, 29, 149, .12);
  background: rgba(255, 255, 255, .88);
  box-shadow:
    0 18px 60px rgba(76, 29, 149, .10),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.adaptive-logo-day,
.nav-brand-mark .adaptive-logo-day {
  display: none;
}

html[data-theme="day"] .adaptive-logo-night {
  display: none;
}

html[data-theme="day"] .adaptive-logo-day,
html[data-theme="day"] .nav-brand-mark .adaptive-logo-day {
  display: block;
}

html[data-theme="day"] .nav-brand-mark {
  filter: drop-shadow(0 10px 24px rgba(76, 29, 149, .10));
}

html[data-theme="day"] .nav-link {
  color: #45384f;
}

html[data-theme="day"] .nav-link:hover {
  background: rgba(107, 33, 168, .08);
  color: #581c87;
}

html[data-theme="day"] .nav-link.active {
  background: #a855f7;
  color: #16071e !important;
}

html[data-theme="day"] .nav-status-pill {
  border-color: rgba(107, 33, 168, .18);
  background: rgba(168, 85, 247, .08);
  color: #6b21a8;
}

html[data-theme="day"] .auth-btn-dark {
  border-color: rgba(76, 29, 149, .16);
  background: rgba(244, 239, 251, .92);
  color: #34213f;
}

html[data-theme="day"] .auth-btn-dark:hover {
  background: #e9e0f4;
}

html[data-theme="day"] .account-menu,
html[data-theme="day"] .mobile-panel {
  border-color: rgba(76, 29, 149, .14);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 28px 80px rgba(76, 29, 149, .16);
}

html[data-theme="day"] .account-menu-link {
  color: #45384f;
}

html[data-theme="day"] .account-menu-link:hover,
html[data-theme="day"] .account-menu-link[aria-current="page"] {
  background: rgba(168, 85, 247, .10);
  color: #6b21a8;
}

html[data-theme="day"] .theme-nav-toggle {
  border-color: rgba(76, 29, 149, .16) !important;
  background: rgba(244, 239, 251, .92) !important;
}

html[data-theme="day"] .theme-nav-toggle svg {
  color: #34213f !important;
}

html[data-theme="day"] .ip-orbit {
  border-bottom-color: rgba(107, 33, 168, .14);
  background: linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(239, 226, 250, .98), rgba(255, 255, 255, .98));
  color: #51445c;
  box-shadow: 0 8px 30px rgba(76, 29, 149, .08);
}

html[data-theme="day"] .ip-orbit strong {
  color: #7e22ce;
  text-shadow: none;
}

html[data-theme="day"] .ip-orbit-country,
html[data-theme="day"] .ip-orbit-label {
  color: #51445c;
}

html[data-theme="day"] .ip-orbit-divider {
  background: rgba(76, 29, 149, .18);
}

html[data-theme="day"] .footer-panel {
  border-top-color: rgba(76, 29, 149, .12);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 -20px 70px rgba(76, 29, 149, .08);
}

html[data-theme="day"] .future-page {
  background: var(--trejj-page);
  color: var(--trejj-text);
}

html[data-theme="day"] .future-page::after {
  opacity: .16;
  background-image:
    linear-gradient(rgba(107, 33, 168, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 33, 168, .09) 1px, transparent 1px);
}

html[data-theme="day"] :is(.future-hero, .future-card, .future-table-wrap) {
  border-color: var(--trejj-border);
  background: rgba(255, 255, 255, .92);
  box-shadow:
    0 28px 80px rgba(76, 29, 149, .10),
    0 0 55px rgba(168, 85, 247, .05),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

html[data-theme="day"] .future-title,
html[data-theme="day"] .future-prose :where(h1, h2, h3, strong) {
  color: var(--trejj-text);
}

html[data-theme="day"] :is(.future-subtitle, .future-label, .future-prose) {
  color: var(--trejj-text-soft);
}

html[data-theme="day"] :is(.future-help, .future-muted) {
  color: var(--trejj-text-muted);
}

html[data-theme="day"] .future-input {
  border-color: rgba(76, 29, 149, .18);
  background: #ffffff;
  color: var(--trejj-text);
}

html[data-theme="day"] .future-input:focus {
  background: #ffffff;
}

html[data-theme="day"] :is(.future-mini-card, .future-table th) {
  border-color: var(--trejj-border);
  background: #f4effb;
  color: var(--trejj-text-soft);
}

html[data-theme="day"] .future-table {
  color: var(--trejj-text);
}

html[data-theme="day"] .future-table td {
  border-top-color: var(--trejj-border);
}

html[data-theme="day"] .future-btn-secondary {
  border-color: var(--trejj-border);
  background: #f4effb;
  color: var(--trejj-text);
}

html[data-theme="day"] .theme-guest-shell {
  background-color: var(--trejj-page) !important;
}

html[data-theme="day"] .theme-guest-card {
  border-color: rgba(76, 29, 149, .14) !important;
  background-color: rgba(255, 255, 255, .94) !important;
  color: var(--trejj-text) !important;
  box-shadow:
    0 30px 100px rgba(76, 29, 149, .12),
    0 0 65px rgba(168, 85, 247, .08) !important;
}

html[data-theme="day"] :is(
  [class~="bg-red-500"],
  [class~="bg-red-600"],
  [class~="bg-red-700"],
  [class~="bg-rose-500"],
  [class~="bg-rose-600"]
) {
  color: #ffffff !important;
}

html[data-theme="day"] :is(
  [class~="bg-red-500"],
  [class~="bg-red-600"],
  [class~="bg-red-700"],
  [class~="bg-rose-500"],
  [class~="bg-rose-600"]
) :is([class*="text-white"], [class*="text-gray-100"], [class*="text-gray-200"]) {
  color: #ffffff !important;
}

html[data-theme="day"] .waya-support {
  color: #34213f;
}

html[data-theme="day"] .waya-support__panel {
  border-color: rgba(76, 29, 149, .16);
  background: linear-gradient(160deg, rgba(255, 255, 255, .99), rgba(246, 240, 252, .99));
  box-shadow: 0 30px 90px rgba(76, 29, 149, .18);
}

html[data-theme="day"] .waya-support__header {
  border-bottom-color: rgba(76, 29, 149, .12);
  background: radial-gradient(circle at 0 0, rgba(168, 85, 247, .13), transparent 62%);
}

html[data-theme="day"] .waya-support__identity strong {
  color: #201629;
}

html[data-theme="day"] .waya-support__identity small {
  color: #7e22ce;
}

html[data-theme="day"] .waya-support__header-actions button {
  border-color: rgba(76, 29, 149, .16);
  background: rgba(239, 231, 248, .86);
  color: #45384f !important;
}

html[data-theme="day"] .waya-support__notice {
  background: rgba(168, 85, 247, .08);
  color: #6b21a8;
}

html[data-theme="day"] .waya-support__bubble--assistant {
  border-color: rgba(76, 29, 149, .14);
  background: #f1eaf8;
  color: #2e2036;
}

html[data-theme="day"] .waya-support__actions {
  color: #6b21a8;
}

html[data-theme="day"] .waya-support__action {
  background: rgba(168, 85, 247, .08);
  color: #6b21a8;
}

html[data-theme="day"] .waya-support__composer {
  border-top-color: rgba(76, 29, 149, .12);
  background: rgba(255, 255, 255, .94);
}

html[data-theme="day"] .waya-support__composer textarea,
html[data-theme="day"] .waya-support__ticket input,
html[data-theme="day"] .waya-support__ticket textarea {
  border-color: rgba(76, 29, 149, .18);
  background: #ffffff;
  color: #201629;
}

html[data-theme="day"] .waya-support__ticket {
  border-color: rgba(76, 29, 149, .18);
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 22px 65px rgba(76, 29, 149, .18);
}

html[data-theme="day"] .waya-support__ticket-head {
  color: #201629;
}

html[data-theme="day"] .waya-support__history-item {
  border-color: rgba(76, 29, 149, .14);
  background: #f4effb;
  color: #2e2036;
}

/*
 * Public and account pages contain a mixture of Tailwind utility surfaces and
 * named product components. Keep those named components on the same day-mode
 * palette so a white page never contains an accidental black-on-black island.
 */
html[data-theme="day"] :is(.home-hero, .pricing-hero) {
  border-color: rgba(168, 85, 247, .24);
  background: #faf7ff;
}

html[data-theme="day"] :is(.home-hero, .pricing-hero)::before {
  opacity: .10;
  background-image: radial-gradient(circle at center, rgba(107, 33, 168, .38) 0 1px, transparent 1.5px);
}

html[data-theme="day"] .theme-hero {
  border-color: rgba(168, 85, 247, .24);
  background: #faf7ff !important;
}

html[data-theme="day"] .theme-hero-overlay {
  background: radial-gradient(circle at 72% 12%, rgba(168, 85, 247, .12), transparent 44%) !important;
}

html[data-theme="day"] :is(
  .hero-console,
  .pricing-hero-console,
  .proxy-route-console,
  .download-command-card,
  .glow-card,
  .mode-card,
  .route-panel,
  .step-card,
  .use-card,
  .location-card,
  .faq-card,
  .final-cta,
  .mega-panel,
  .plan-card,
  .route-card,
  .download-card,
  .proxy-panel,
  .info-card,
  .policy-hero,
  .policy-section,
  .final-panel,
  .policy-nav,
  .action-button,
  .dropdown-panel,
  .waya-glass
) {
  border-color: rgba(168, 85, 247, .30);
  background: #fff;
  color: var(--trejj-text);
  box-shadow:
    0 24px 70px rgba(76, 29, 149, .10),
    0 0 45px rgba(168, 85, 247, .045),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

html[data-theme="day"] :is(
  .stat-glow,
  .mini-stat,
  .balance-card,
  .access-row,
  .console-stat,
  .feature-line,
  .mini-benefit,
  .metric-line,
  .location-metric,
  .proxy-route-choice,
  .download-method,
  .secret-box,
  .policy-nav a,
  .chip-glow,
  .mini-chip,
  .icon-shell
) {
  border-color: rgba(168, 85, 247, .24);
  background: #faf7ff;
  color: var(--trejj-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

html[data-theme="day"] :is(
  .home-choice-item strong,
  .section-title,
  .section-title-row h2,
  .mode-card h3,
  .route-panel h2,
  .step-card h3,
  .use-card h3,
  .route-card h3,
  .faq-card summary,
  .download-method h3,
  .download-card h3,
  .info-card h3,
  .section-head h2,
  .action-button
) {
  color: var(--trejj-text);
}

html[data-theme="day"] :is(
  .home-choice-item small,
  .section-copy,
  .section-title-row p,
  .mode-card p,
  .route-panel p,
  .step-card p,
  .use-card p,
  .route-card p,
  .faq-card p,
  .download-method p,
  .download-method > span,
  .download-card p,
  .info-card p,
  .info-card ol,
  .section-head p,
  .policy-body,
  .field-label,
  .dropdown-row
) {
  color: var(--trejj-text-soft);
}

html[data-theme="day"] :is(
  .section-kicker,
  .route-kicker,
  .step-num,
  .access-row > span,
  .metric-line dd,
  .mini-benefit span,
  .mode-card span,
  .use-card span,
  .faq-card p span,
  .secret-action,
  .home-choice-index,
  .download-method-number,
  .proxy-live-badge,
  .download-ready-badge,
  .future-kicker,
  .future-status.ok
) {
  color: #6b21a8;
}

html[data-theme="day"] :is(
  .home-choice-index.fuchsia,
  .mini-chip.fuchsia,
  .chip-glow.fuchsia,
  .download-method-proxy .download-method-number
) {
  color: #a21caf;
}

html[data-theme="day"] :is(
  .pricing-proof-chip,
  .proxy-route-choice p,
  .proxy-route-arrow
) {
  color: var(--trejj-text-soft);
}

html[data-theme="day"] :is(
  .access-icon,
  .mode-icon,
  .use-icon,
  .icon-shell,
  .action-icon
) {
  color: #6b21a8;
}

html[data-theme="day"] :is(.future-title span, .future-gradient-text) {
  background-image: linear-gradient(90deg, #6b21a8, #0e7490, #a21caf);
}

html[data-theme="day"] .future-status.warn {
  color: #92400e;
}

html[data-theme="day"] :is(.future-status.bad, .future-btn-danger) {
  color: #b91c1c;
}

html[data-theme="day"] :is(.btn-dark, .pricing-hero-secondary, .proxy-hero-secondary, .download-hero-secondary) {
  border-color: rgba(76, 29, 149, .17);
  background: #eee7f8;
  color: #34213f;
}

html[data-theme="day"] :is(.btn-dark, .pricing-hero-secondary, .proxy-hero-secondary, .download-hero-secondary):hover {
  border-color: rgba(107, 33, 168, .30);
  background: #e5d9f1;
}

html[data-theme="day"] .dropdown-row {
  border-color: rgba(76, 29, 149, .10);
}

html[data-theme="day"] .dropdown-row:hover {
  background: rgba(168, 85, 247, .09);
  color: #6b21a8;
}

html[data-theme="day"] :is(.notice.violet, .notice.fuchsia) {
  color: #3b254a;
}

html[data-theme="day"] .notice.red {
  color: #991b1b;
}

html[data-theme="day"] .notice.amber {
  color: #78350f;
}

html[data-theme="day"] :is(.mode-card, .route-panel, .step-card, .use-card, .final-cta, .glow-card, .policy-section, .final-panel)::before,
html[data-theme="day"] :is(.hero-console, .pricing-hero-console, .proxy-route-console, .download-command-card)::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(168, 85, 247, .10), transparent 44%),
    radial-gradient(circle at 100% 0%, rgba(217, 70, 239, .07), transparent 44%);
}

html[data-theme="day"] .mega-panel::after {
  opacity: .18;
  background-image:
    linear-gradient(rgba(107, 33, 168, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 33, 168, .07) 1px, transparent 1px);
}

/*
 * Safety net for page-specific or asynchronously inserted dark surfaces.
 * trejj-theme.js marks only text that actually resolves over a dark backdrop.
 */
html[data-theme="day"] .theme-on-dark:is(
  [class*="text-white"],
  [class*="text-gray-100"],
  [class*="text-gray-200"],
  [class*="text-slate-100"],
  [class*="text-slate-200"]
) {
  color: #f8fafc !important;
}

html[data-theme="day"] .theme-on-dark:is(
  [class*="text-gray-300"],
  [class*="text-gray-400"],
  [class*="text-slate-300"],
  [class*="text-slate-400"]
) {
  color: #d1d5db !important;
}

html[data-theme="day"] .theme-on-dark:is(
  [class*="text-gray-500"],
  [class*="text-gray-600"],
  [class*="text-gray-700"],
  [class*="text-slate-500"],
  [class*="text-slate-600"],
  [class*="text-slate-700"]
) {
  color: #9ca3af !important;
}

html[data-theme="day"] .theme-on-dark:is(
  [class*="text-violet-"],
  [class*="text-purple-"]
) {
  color: #d8b4fe !important;
}

html[data-theme="day"] .theme-on-dark[class*="text-fuchsia-"] {
  color: #f0abfc !important;
}

html[data-theme="day"] .theme-on-dark:is(
  [class*="text-amber-"],
  [class*="text-yellow-"]
) {
  color: #fcd34d !important;
}

html[data-theme="day"] .theme-on-dark:is(
  [class*="text-red-"],
  [class*="text-rose-"]
) {
  color: #fda4af !important;
}

@media (max-width: 520px) {
  html[data-theme="day"] .ip-orbit {
    border-color: rgba(107, 33, 168, .18);
    background: rgba(255, 255, 255, .94);
  }

  html[data-theme="day"] .waya-support__header {
    background: #f3eaf9;
  }

  html[data-theme="day"] .waya-support__mobile-collapse {
    border-color: rgba(107, 33, 168, .32);
    background: #ffffff;
    color: #6b21a8;
    box-shadow: 0 10px 30px rgba(76, 29, 149, .18);
  }
}

@media (max-width: 430px) {
  .theme-toggle--compact {
    min-height: 2.55rem;
    width: 2.55rem;
  }

  .nav-brand-mark {
    width: clamp(8.3rem, 38vw, 10rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-ready body,
  .theme-ready .nav-glass,
  .theme-ready .footer-panel,
  .theme-ready .account-menu,
  .theme-ready .mobile-panel,
  .theme-toggle__thumb {
    transition: none !important;
  }
}

/* Brand marks remain crisp and visible against either theme. */
.theme-brand-icon {
  display: block;
  color: #f5f3ff;
  filter: brightness(0) invert(1);
  opacity: .94;
}

html[data-theme="day"] .theme-brand-icon,
html[data-theme="day"] img[class*="brightness-0"][class*="invert"] {
  filter: brightness(0) saturate(100%) invert(18%) sepia(46%) saturate(3460%) hue-rotate(257deg) brightness(84%) contrast(103%) !important;
  opacity: .92 !important;
}

html[data-theme="day"] :is(.download-card, .icon-shell) :is(svg, i) {
  color: #6b21a8 !important;
}

/*
 * Bright-theme headings must never depend on transparent text plus a pale
 * gradient. The accent stays TREJJ purple and gains a quiet lavender backing
 * that is readable on every light hero surface.
 */
html[data-theme="day"] [class*="text-transparent"][class*="bg-clip-text"] {
  color: #681487 !important;
  -webkit-text-fill-color: #681487 !important;
  background-image: none !important;
  text-shadow: none !important;
}

html[data-theme="day"] .theme-heading-accent {
  width: fit-content;
  max-width: 100%;
  padding: .06em .2em .12em;
  border: 1px solid rgba(113, 28, 145, .16);
  border-radius: .24em;
  background: linear-gradient(135deg, rgba(238, 219, 247, .96), rgba(251, 247, 253, .94)) !important;
  box-shadow:
    inset 0 -2px 0 rgba(126, 34, 206, .14),
    0 .12em .45em rgba(76, 29, 149, .08);
  color: #681487 !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-text-fill-color: #681487 !important;
}

html[data-theme="day"] :is(.future-title span, .future-gradient-text) {
  padding-inline: .1em;
  border-radius: .16em;
  background: none !important;
  box-shadow: inset 0 -.34em 0 rgba(168, 85, 247, .14);
  color: #681487 !important;
  -webkit-text-fill-color: #681487 !important;
  text-shadow: none !important;
}

@media (max-width: 1023px) {
  html[data-theme="day"] .home-hero-title .theme-heading-accent {
    margin-inline: auto;
  }
}

/*
 * The users screen has its own legacy dark component sheet. These explicit
 * day-mode values take precedence without changing its night presentation.
 */
html[data-theme="day"] .admin-users-page {
  background: #f8f4fc !important;
  color: #24152f !important;
}

html[data-theme="day"] .admin-users-page > .pointer-events-none {
  opacity: .17 !important;
}

html[data-theme="day"] .admin-users-page :is(.glow-card, .summary-card, .mini-stat, .modal-card) {
  border-color: rgba(113, 28, 145, .19) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #24152f !important;
  box-shadow:
    0 18px 52px rgba(76, 29, 149, .09),
    inset 0 1px 0 #fff !important;
}

html[data-theme="day"] .admin-users-page :is(.glow-card, .summary-card, .modal-card)::before {
  background:
    radial-gradient(circle at 0 0, rgba(168, 85, 247, .10), transparent 44%),
    radial-gradient(circle at 100% 0, rgba(217, 70, 239, .055), transparent 44%) !important;
}

html[data-theme="day"] .admin-users-page :is(.summary-label, .table-head, .detail-line span, .detail-block span, .metric-box span, .empty-detail) {
  color: #68566f !important;
}

html[data-theme="day"] .admin-users-page :is(.summary-value, .detail-line strong, .detail-block strong, .metric-box strong) {
  color: #281631 !important;
}

html[data-theme="day"] .admin-users-page :is(.section-kicker, .modal-kicker) {
  color: #75199b !important;
}

html[data-theme="day"] .admin-users-page .form-label {
  color: #4d3956 !important;
}

html[data-theme="day"] .admin-users-page .form-input {
  border-color: rgba(113, 28, 145, .22) !important;
  background: #fff !important;
  color: #24152f !important;
}

html[data-theme="day"] .admin-users-page .form-input::placeholder {
  color: #83738b !important;
  opacity: 1;
}

html[data-theme="day"] .admin-users-page .form-input:focus {
  border-color: #8b22b4 !important;
  background: #fff !important;
}

html[data-theme="day"] .admin-users-page :is(.detail-line, .detail-block, .metric-box, .empty-detail) {
  border-color: rgba(113, 28, 145, .14) !important;
  background: #f7f0fa !important;
}

html[data-theme="day"] .admin-users-page .user-row {
  border-color: rgba(113, 28, 145, .12) !important;
}

html[data-theme="day"] .admin-users-page .user-row:hover {
  background: rgba(168, 85, 247, .07) !important;
}

html[data-theme="day"] .admin-users-page :is(.badge-violet, .badge-purple) {
  border-color: rgba(107, 33, 168, .25) !important;
  background: rgba(126, 34, 206, .10) !important;
  color: #6b21a8 !important;
}

html[data-theme="day"] .admin-users-page .badge-fuchsia {
  border-color: rgba(162, 28, 175, .24) !important;
  background: rgba(217, 70, 239, .09) !important;
  color: #86198f !important;
}

html[data-theme="day"] .admin-users-page .badge-gray {
  border-color: #d8cfe0 !important;
  background: #eee9f2 !important;
  color: #51445a !important;
}

html[data-theme="day"] .admin-users-page .badge-red {
  border-color: rgba(190, 18, 60, .22) !important;
  background: rgba(244, 63, 94, .09) !important;
  color: #9f1239 !important;
}

html[data-theme="day"] .admin-users-page :is(.btn-primary, .btn-view) {
  background: #8b22b4 !important;
  color: #fff !important;
}

html[data-theme="day"] .admin-users-page .btn-warning {
  border-color: rgba(180, 83, 9, .25) !important;
  background: #fff7e8 !important;
  color: #8a4308 !important;
}

html[data-theme="day"] .admin-users-page .btn-danger {
  border-color: rgba(190, 18, 60, .22) !important;
  background: #fff0f3 !important;
  color: #9f1239 !important;
}

html[data-theme="day"] .admin-users-page .pagination-wrap nav {
  color: #34213f !important;
}

/*
 * Wide displays should reveal more information, not add empty gutters. Forms
 * and prose keep their own inner measures; shared public and admin shells gain
 * useful width only when the viewport can support it.
 */
@media (min-width: 1536px) {
  .max-w-7xl {
    max-width: min(94vw, 112rem) !important;
  }

  .max-w-6xl {
    max-width: min(92vw, 100rem) !important;
  }

  .admin-shell .admin-main .max-w-7xl,
  .admin-shell .admin-main .max-w-6xl {
    width: calc(100% - 2rem);
    max-width: none !important;
  }

  .admin-users-page table {
    width: 100%;
  }
}

/* Preserve the approved TREJJ VPN globe mark in both themes. */
.vpn-brand-logo {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 .45rem rgba(217, 70, 239, .24))
    drop-shadow(0 .12rem .18rem rgba(0, 0, 0, .55));
}

html[data-theme="day"] .vpn-brand-logo {
  filter:
    drop-shadow(0 1px 0 rgba(42, 17, 51, .95))
    drop-shadow(0 0 .5rem rgba(126, 34, 206, .20));
}

/*
 * Authentication screens share one day-mode surface treatment. Night mode
 * remains dark; day mode uses readable white panels and purple framing.
 */
html[data-theme="day"] .waya-auth-glass {
  border-color: rgba(113, 28, 145, .22) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 239, 251, .97)) !important;
  color: #24152f !important;
  box-shadow:
    0 24px 70px rgba(76, 29, 149, .12),
    inset 0 1px 0 #fff !important;
}

html[data-theme="day"] .waya-auth-card {
  box-shadow:
    0 30px 90px rgba(76, 29, 149, .16),
    0 0 0 1px rgba(113, 28, 145, .05),
    0 0 60px rgba(168, 85, 247, .07) !important;
}

html[data-theme="day"] .waya-auth-card::after {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, .07), transparent 28%),
    radial-gradient(circle at 50% 0, rgba(168, 85, 247, .08), transparent 34%) !important;
}

html[data-theme="day"] .waya-auth-glass :is(
  h1,
  h2,
  h3,
  label,
  .text-white,
  .text-slate-100,
  .text-slate-200
) {
  color: #24152f !important;
}

html[data-theme="day"] .waya-auth-glass :is(
  p,
  .text-slate-300,
  .text-slate-400,
  .text-slate-500,
  .waya-auth-context,
  .waya-auth-footnote
) {
  color: #67556f !important;
}

html[data-theme="day"] .waya-auth-glass :is(
  .text-violet-100\/60,
  .text-violet-200,
  .text-violet-300,
  .text-fuchsia-100\/60,
  .text-fuchsia-200,
  .text-fuchsia-300
) {
  color: #75199b !important;
}

html[data-theme="day"] .waya-auth-glass :is(input:not([type="checkbox"]), select) {
  border-color: rgba(113, 28, 145, .20) !important;
  background: #fff !important;
  color: #24152f !important;
}

html[data-theme="day"] .waya-auth-glass :is(input:not([type="checkbox"]), select)::placeholder {
  color: #8b7b92 !important;
  opacity: 1;
}

html[data-theme="day"] .waya-auth-glass button:not(.waya-auth-submit) {
  border-color: rgba(113, 28, 145, .18) !important;
  color: #4d2b58 !important;
}

html[data-theme="day"] .waya-auth-glass input:-webkit-autofill,
html[data-theme="day"] .waya-auth-glass input:-webkit-autofill:hover,
html[data-theme="day"] .waya-auth-glass input:-webkit-autofill:focus {
  -webkit-text-fill-color: #24152f !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}

html[data-theme="day"] .waya-auth-footnote {
  border-top-color: rgba(113, 28, 145, .14) !important;
}

/*
 * Native admin choice controls
 * --------------------------------
 * Tailwind's dark input utilities can leave unchecked boxes and radios almost
 * indistinguishable from the panels behind them. Give every visible native
 * control a consistent high-contrast shape, while leaving custom peer-driven
 * controls (`sr-only`) untouched.
 */
html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only),
html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only) {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-grid !important;
  width: 1.125rem !important;
  min-width: 1.125rem !important;
  height: 1.125rem !important;
  min-height: 1.125rem !important;
  flex: 0 0 1.125rem !important;
  place-content: center;
  margin: 0;
  border: 2px solid #c4b5fd !important;
  background-color: #170d20 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 0 0 1px rgba(168, 85, 247, .24),
    0 0 .7rem rgba(168, 85, 247, .18) !important;
  vertical-align: middle;
  cursor: pointer;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only) {
  border-radius: .3rem !important;
}

html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only) {
  border-radius: 999px !important;
}

html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only)::before,
html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only)::before {
  content: "";
  display: block;
  transform: scale(0);
  transition: transform .14s ease;
}

html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only)::before {
  width: .58rem;
  height: .34rem;
  border: solid #fff;
  border-width: 0 0 .14rem .14rem;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}

html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only)::before {
  width: .48rem;
  height: .48rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 .4rem rgba(255, 255, 255, .8);
}

html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only):checked,
html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only):checked {
  border-color: #f0abfc !important;
  background-color: #9333ea !important;
  background-image: linear-gradient(145deg, #c026d3, #7e22ce) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 0 0 1px rgba(240, 171, 252, .42),
    0 0 .85rem rgba(192, 38, 211, .48) !important;
}

html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only):checked::before {
  transform: rotate(-45deg) scale(1);
}

html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only):checked::before {
  transform: scale(1);
}

html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only):indeterminate::before {
  width: .58rem;
  height: .14rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  transform: none;
}

html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only):hover,
html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only):hover {
  border-color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 0 0 2px rgba(192, 132, 252, .28),
    0 0 .9rem rgba(168, 85, 247, .32) !important;
}

html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only):focus-visible,
html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only):focus-visible {
  outline: 3px solid #e879f9 !important;
  outline-offset: 3px !important;
}

html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only):disabled,
html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only):disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.25);
}

html[data-theme="night"] .admin-shell input[type="checkbox"][class*="text-red"]:not(.sr-only):checked {
  border-color: #fda4af !important;
  background-color: #e11d48 !important;
  background-image: linear-gradient(145deg, #f43f5e, #be123c) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 0 0 1px rgba(251, 113, 133, .42),
    0 0 .85rem rgba(225, 29, 72, .42) !important;
}

/*
 * Custom admin controls keep their native input visually hidden. Style the
 * adjacent tile in both states so it remains discoverable before selection.
 */
html[data-theme="night"] .admin-shell #selectVisibleServers:not(:checked) + span,
html[data-theme="night"] .admin-shell input.peer:not(:checked) + .toggle-box,
html[data-theme="night"] .admin-shell input.peer:not(:checked) + .fake-check {
  border-color: #a78bfa !important;
  background: #170d20 !important;
  color: #c4b5fd !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 0 0 1px rgba(168, 85, 247, .18),
    0 0 .75rem rgba(168, 85, 247, .2) !important;
}

html[data-theme="night"] .admin-shell #selectVisibleServers:checked + span,
html[data-theme="night"] .admin-shell input.peer:checked + .toggle-box,
html[data-theme="night"] .admin-shell input.peer:checked + .fake-check {
  border-color: #f0abfc !important;
  background: linear-gradient(145deg, #c026d3, #7e22ce) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 0 0 1px rgba(240, 171, 252, .42),
    0 0 1rem rgba(192, 38, 211, .42) !important;
}

html[data-theme="night"] .admin-shell #selectVisibleServers:focus-visible + span,
html[data-theme="night"] .admin-shell input.sr-only:focus-visible + .toggle-box,
html[data-theme="night"] .admin-shell input.sr-only:focus-visible + .fake-check {
  outline: 3px solid #e879f9 !important;
  outline-offset: 3px !important;
}

html[data-theme="night"] .admin-shell input.sr-only:disabled + .toggle-box,
html[data-theme="night"] .admin-shell input.sr-only:disabled + .fake-check {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.25);
}

@media (forced-colors: active) {
  html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only),
  html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only) {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    border: initial !important;
    background: initial !important;
    box-shadow: none !important;
    forced-color-adjust: auto;
  }

  html[data-theme="night"] .admin-shell input[type="checkbox"]:not(.sr-only)::before,
  html[data-theme="night"] .admin-shell input[type="radio"]:not(.sr-only)::before {
    display: none;
  }
}