warpbox-dev/backend/static/css/18-cyberpunk.css

/*
 * CyberPunk theme polish.
 *
 * Inspired by neon Cyberpunk 2077 UI treatments: warning yellow surfaces,
 * cyan/magenta light, hard edges, scanlines, and high-contrast panels.
 */

:root[data-theme="cyberpunk"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 242, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 3px, 3rem 100%;
  mix-blend-mode: screen;
}

:root[data-theme="cyberpunk"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255, 242, 0, 0.06) 18% 19%, transparent 19% 100%),
    linear-gradient(245deg, transparent 0 76%, rgba(255, 42, 109, 0.08) 76% 77%, transparent 77% 100%);
}

:root[data-theme="cyberpunk"] .site-header {
  border-bottom-color: rgba(255, 242, 0, 0.32);
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.12);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

:root[data-theme="cyberpunk"] .brand {
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

:root[data-theme="cyberpunk"] .brand-mark {
  background: #fff200;
  color: #08070d;
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.45), 0 0 18px rgba(255, 242, 0, 0.42);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 78% 100%, 0 100%);
}

:root[data-theme="cyberpunk"] h1 {
  color: #fff200;
  text-shadow: 2px 0 0 rgba(255, 42, 109, 0.58), -2px 0 0 rgba(0, 240, 255, 0.46);
}

:root[data-theme="cyberpunk"] .card,
:root[data-theme="cyberpunk"] .app-sidebar,
:root[data-theme="cyberpunk"] .storage-card,
:root[data-theme="cyberpunk"] .storage-op-card,
:root[data-theme="cyberpunk"] .metric-card,
:root[data-theme="cyberpunk"] .logs-filter-card,
:root[data-theme="cyberpunk"] .advanced-options {
  position: relative;
  background:
    linear-gradient(145deg, rgba(22, 19, 31, 0.96), rgba(13, 10, 20, 0.96)),
    linear-gradient(90deg, rgba(255, 242, 0, 0.16), rgba(0, 240, 255, 0.08));
  border-color: rgba(255, 242, 0, 0.28);
  box-shadow: var(--shadow);
}

:root[data-theme="cyberpunk"] .card::before,
:root[data-theme="cyberpunk"] .storage-card::before,
:root[data-theme="cyberpunk"] .metric-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 1px solid rgba(0, 240, 255, 0.4);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

:root[data-theme="cyberpunk"] .admin-shell .app-sidebar {
  border-color: rgba(255, 42, 109, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 42, 109, 0.16), rgba(8, 7, 13, 0.94)),
    #16131f;
}

:root[data-theme="cyberpunk"] .sidebar-link:hover,
:root[data-theme="cyberpunk"] .sidebar-link.is-active,
:root[data-theme="cyberpunk"] .admin-shell .sidebar-link.is-active {
  border-color: rgba(255, 242, 0, 0.42);
  background: linear-gradient(90deg, rgba(255, 242, 0, 0.2), rgba(0, 240, 255, 0.08));
  color: #fff200;
}

:root[data-theme="cyberpunk"] .kicker,
:root[data-theme="cyberpunk"] .admin-shell .kicker {
  color: #00f0ff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.36);
}

:root[data-theme="cyberpunk"] .button-primary,
:root[data-theme="cyberpunk"] .button.is-active {
  border-color: #fff200;
  background: #fff200;
  color: #08070d;
  box-shadow: 4px 4px 0 rgba(255, 42, 109, 0.7), 0 0 18px rgba(255, 242, 0, 0.3);
  clip-path: polygon(0 0, calc(100% - 0.7rem) 0, 100% 0.7rem, 100% 100%, 0.7rem 100%, 0 calc(100% - 0.7rem));
}

:root[data-theme="cyberpunk"] .button-primary:hover,
:root[data-theme="cyberpunk"] .button.is-active:hover {
  background: #00f0ff;
  border-color: #00f0ff;
  color: #08070d;
  box-shadow: 4px 4px 0 rgba(255, 42, 109, 0.78), 0 0 22px rgba(0, 240, 255, 0.42);
}

:root[data-theme="cyberpunk"] .button-outline,
:root[data-theme="cyberpunk"] .button-ghost {
  border-color: rgba(0, 240, 255, 0.28);
}

:root[data-theme="cyberpunk"] .button-outline:hover,
:root[data-theme="cyberpunk"] .button-ghost:hover {
  border-color: rgba(255, 242, 0, 0.46);
  background: rgba(255, 242, 0, 0.1);
}

:root[data-theme="cyberpunk"] input,
:root[data-theme="cyberpunk"] select,
:root[data-theme="cyberpunk"] textarea {
  background: rgba(8, 7, 13, 0.92);
  border-color: rgba(0, 240, 255, 0.34);
}

:root[data-theme="cyberpunk"] input:focus,
:root[data-theme="cyberpunk"] select:focus,
:root[data-theme="cyberpunk"] textarea:focus {
  border-color: #fff200;
  box-shadow: 0 0 0 3px rgba(255, 242, 0, 0.16), 0 0 22px rgba(0, 240, 255, 0.18);
}

:root[data-theme="cyberpunk"] .badge {
  border: 1px solid rgba(0, 240, 255, 0.22);
  background: rgba(0, 240, 255, 0.08);
  color: #9bfaff;
}

:root[data-theme="cyberpunk"] .badge-active,
:root[data-theme="cyberpunk"] .storage-detail-test.is-ok > span:last-child {
  color: #00ff9f;
}

:root[data-theme="cyberpunk"] .badge-disabled,
:root[data-theme="cyberpunk"] .storage-detail-test.is-err > span:last-child,
:root[data-theme="cyberpunk"] .form-error {
  color: #ff2a6d;
}

:root[data-theme="cyberpunk"] .drop-zone {
  border-color: rgba(255, 242, 0, 0.34);
  background:
    linear-gradient(145deg, rgba(255, 242, 0, 0.08), transparent 38%),
    rgba(8, 7, 13, 0.76);
}

:root[data-theme="cyberpunk"] .drop-zone:hover,
:root[data-theme="cyberpunk"] .drop-zone.is-dragging {
  border-color: #00f0ff;
  background:
    linear-gradient(145deg, rgba(0, 240, 255, 0.14), transparent 42%),
    rgba(8, 7, 13, 0.82);
}

:root[data-theme="cyberpunk"] ::selection {
  background: #ff2a6d;
  color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="cyberpunk"] .brand-mark,
  :root[data-theme="cyberpunk"] h1 {
    animation: cyberpunk-pulse 4s ease-in-out infinite;
  }
}

@keyframes cyberpunk-pulse {
  0%, 100% {
    filter: none;
  }
  50% {
    filter: drop-shadow(0 0 0.45rem rgba(0, 240, 255, 0.28));
  }
}