html.sub2-hacker-theme,
html.sub2-hacker-theme body,
html.sub2-hacker-theme #app {
  min-height: 100%;
  background:
    radial-gradient(circle at 14% 8%, rgba(42, 255, 129, .16), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(0, 255, 209, .08), transparent 30%),
    linear-gradient(135deg, #010604 0%, #03110b 44%, #000 100%) !important;
  color: #d9ffe8 !important;
}

html.sub2-hacker-theme body {
  color-scheme: dark;
}

html.sub2-hacker-theme body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(87, 255, 147, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 255, 147, .05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 86%, transparent);
}

html.sub2-hacker-theme body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, .06) 0,
      rgba(255, 255, 255, .06) 1px,
      transparent 1px,
      transparent 5px
    );
  mix-blend-mode: screen;
}

html.sub2-hacker-theme .sub2-matrix-canvas {
  display: none !important;
}

html.sub2-hacker-theme .sub2-code-float-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
}

html.sub2-hacker-theme .sub2-code-float {
  position: absolute;
  max-width: min(420px, 72vw);
  padding: 10px 13px;
  border: 1px solid rgba(72, 255, 143, .2);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 18, 9, .34), rgba(0, 0, 0, .12));
  color: rgba(111, 255, 163, .5);
  font: 600 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
  text-shadow: 0 0 12px rgba(45, 255, 124, .22);
  box-shadow: 0 0 24px rgba(31, 255, 131, .08), inset 0 1px 0 rgba(180, 255, 205, .08);
  transform: translate3d(0, 18px, 0);
  opacity: 0;
  animation: sub2CodeFloat var(--sub2-code-duration, 9s) ease-in-out forwards;
  will-change: transform, opacity;
}

html.sub2-hacker-theme #app {
  position: relative;
  z-index: 1;
}

html.sub2-hacker-theme .bg-gray-50,
html.sub2-hacker-theme .bg-gray-100,
html.sub2-hacker-theme .bg-white,
html.sub2-hacker-theme [class*="bg-gray-50"],
html.sub2-hacker-theme [class*="bg-slate-50"] {
  background-color: transparent !important;
}

html.sub2-hacker-theme .sidebar,
html.sub2-hacker-theme aside,
html.sub2-hacker-theme header,
html.sub2-hacker-theme nav,
html.sub2-hacker-theme .rounded-xl,
html.sub2-hacker-theme .rounded-lg,
html.sub2-hacker-theme .card,
html.sub2-hacker-theme table,
html.sub2-hacker-theme .modal,
html.sub2-hacker-theme [class*="shadow"],
html.sub2-hacker-theme [class*="border"] {
  border-color: rgba(76, 255, 139, .24) !important;
}

html.sub2-hacker-theme aside,
html.sub2-hacker-theme .sidebar {
  background:
    linear-gradient(180deg, rgba(0, 18, 10, .94), rgba(0, 5, 3, .96)) !important;
  box-shadow: inset -1px 0 0 rgba(80, 255, 143, .2), 12px 0 36px rgba(0, 0, 0, .28) !important;
}

html.sub2-hacker-theme header,
html.sub2-hacker-theme .topbar,
html.sub2-hacker-theme .navbar {
  background: rgba(0, 16, 9, .78) !important;
  border-bottom: 1px solid rgba(66, 255, 138, .22) !important;
  backdrop-filter: blur(18px);
}

html.sub2-hacker-theme main,
html.sub2-hacker-theme .main-content {
  background: transparent !important;
}

html.sub2-hacker-theme .rounded-xl,
html.sub2-hacker-theme .rounded-lg,
html.sub2-hacker-theme .card,
html.sub2-hacker-theme table,
html.sub2-hacker-theme .modal,
html.sub2-hacker-theme [role="dialog"],
html.sub2-hacker-theme .dropdown,
html.sub2-hacker-theme .popover {
  background:
    linear-gradient(145deg, rgba(2, 25, 14, .86), rgba(0, 7, 4, .9)) !important;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(154, 255, 190, .12),
    0 0 0 1px rgba(51, 255, 126, .12) !important;
  backdrop-filter: blur(14px);
}

html.sub2-hacker-theme h1,
html.sub2-hacker-theme h2,
html.sub2-hacker-theme h3,
html.sub2-hacker-theme h4,
html.sub2-hacker-theme .font-bold,
html.sub2-hacker-theme .font-semibold {
  color: #eafff1 !important;
  text-shadow: 0 0 14px rgba(32, 255, 115, .26);
}

html.sub2-hacker-theme p,
html.sub2-hacker-theme span,
html.sub2-hacker-theme div,
html.sub2-hacker-theme label,
html.sub2-hacker-theme td,
html.sub2-hacker-theme th,
html.sub2-hacker-theme a {
  border-color: rgba(76, 255, 139, .22);
}

html.sub2-hacker-theme [class*="text-gray-"],
html.sub2-hacker-theme [class*="text-slate-"],
html.sub2-hacker-theme [class*="text-zinc-"],
html.sub2-hacker-theme [class*="text-dark-"] {
  color: #baf8cf !important;
}

html.sub2-hacker-theme .text-gray-400,
html.sub2-hacker-theme .text-gray-500,
html.sub2-hacker-theme .text-slate-400,
html.sub2-hacker-theme .text-slate-500 {
  color: #79c995 !important;
}

html.sub2-hacker-theme a,
html.sub2-hacker-theme .text-primary-500,
html.sub2-hacker-theme .text-primary-600,
html.sub2-hacker-theme .text-blue-500,
html.sub2-hacker-theme .text-blue-600 {
  color: #3dff8f !important;
}

html.sub2-hacker-theme button,
html.sub2-hacker-theme .btn,
html.sub2-hacker-theme [role="button"] {
  border-color: rgba(63, 255, 137, .35) !important;
}

html.sub2-hacker-theme button:not(:disabled):hover,
html.sub2-hacker-theme [role="button"]:not(:disabled):hover,
html.sub2-hacker-theme a:hover {
  filter: brightness(1.08);
  text-shadow: 0 0 12px rgba(67, 255, 132, .36);
}

html.sub2-hacker-theme .bg-primary-500,
html.sub2-hacker-theme .bg-primary-600,
html.sub2-hacker-theme .bg-blue-500,
html.sub2-hacker-theme .bg-blue-600,
html.sub2-hacker-theme button[class*="bg-primary"],
html.sub2-hacker-theme button[class*="bg-blue"] {
  background:
    linear-gradient(135deg, #0f9f54, #1fff83 48%, #0a6f3a) !important;
  color: #001b0c !important;
  box-shadow: 0 0 0 1px rgba(131, 255, 178, .42), 0 0 24px rgba(31, 255, 131, .28) !important;
}

html.sub2-hacker-theme input,
html.sub2-hacker-theme textarea,
html.sub2-hacker-theme select,
html.sub2-hacker-theme .input,
html.sub2-hacker-theme [contenteditable="true"] {
  background: rgba(0, 14, 8, .82) !important;
  border-color: rgba(72, 255, 143, .32) !important;
  color: #e7fff0 !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .3) !important;
}

html.sub2-hacker-theme input::placeholder,
html.sub2-hacker-theme textarea::placeholder {
  color: rgba(154, 236, 182, .58) !important;
}

html.sub2-hacker-theme table thead,
html.sub2-hacker-theme thead tr {
  background: rgba(8, 46, 25, .72) !important;
}

html.sub2-hacker-theme table tbody tr:hover,
html.sub2-hacker-theme tr:hover {
  background: rgba(30, 255, 120, .08) !important;
}

html.sub2-hacker-theme .sidebar a,
html.sub2-hacker-theme aside a,
html.sub2-hacker-theme nav a,
html.sub2-hacker-theme .sidebar button,
html.sub2-hacker-theme aside button,
html.sub2-hacker-theme nav button {
  color: #a9f8c2 !important;
}

html.sub2-hacker-theme .router-link-active,
html.sub2-hacker-theme nav .active,
html.sub2-hacker-theme aside .active,
html.sub2-hacker-theme [aria-current="page"] {
  background: rgba(34, 255, 118, .14) !important;
  color: #5dff9e !important;
  box-shadow: inset 3px 0 0 #35ff85, 0 0 20px rgba(53, 255, 133, .12) !important;
}

html.sub2-hacker-theme .badge,
html.sub2-hacker-theme .tag,
html.sub2-hacker-theme [class*="rounded-full"] {
  border-color: rgba(67, 255, 132, .34) !important;
  background-color: rgba(20, 83, 45, .38) !important;
  color: #bfffd3 !important;
}

html.sub2-hacker-theme ::selection {
  background: rgba(31, 255, 131, .38);
  color: #fff;
}

html.sub2-hacker-theme .sub2-activity-card {
  background:
    linear-gradient(145deg, rgba(3, 32, 17, .94), rgba(0, 8, 4, .94)) !important;
  border-color: rgba(67, 255, 132, .35) !important;
}

html.sub2-hacker-theme .sub2-activity-card .sub2-plan-title,
html.sub2-hacker-theme .sub2-activity-card .sub2-plan-feature,
html.sub2-hacker-theme .sub2-activity-card .sub2-plan-metrics,
html.sub2-hacker-theme .sub2-activity-card .sub2-plan-metrics *,
html.sub2-hacker-theme .sub2-activity-card .sub2-plan-desc {
  color: #d9ffe8 !important;
}

@media (prefers-reduced-motion: reduce) {
  html.sub2-hacker-theme .sub2-matrix-canvas,
  html.sub2-hacker-theme .sub2-code-float-layer {
    display: none;
  }
}

@keyframes sub2CodeFloat {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.98);
  }
  18% {
    opacity: .72;
  }
  72% {
    opacity: .46;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--sub2-code-drift, 34px), -42px, 0) scale(1.02);
  }
}