@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Orbitron:wght@500;700;800&display=swap");

:root {
  --surex-bg: #050313;
  --surex-bg-soft: #10062f;
  --surex-panel: rgba(12, 10, 42, 0.72);
  --surex-panel-strong: rgba(14, 12, 50, 0.9);
  --surex-border: rgba(113, 139, 255, 0.24);
  --surex-border-strong: rgba(138, 193, 255, 0.42);
  --surex-text: #f7fbff;
  --surex-text-soft: rgba(221, 230, 255, 0.78);
  --surex-blue: #5bd8ff;
  --surex-blue-deep: #4a72ff;
  --surex-violet: #a55bff;
  --surex-pink: #ff7bf7;
  --surex-glow: 0 0 24px rgba(104, 223, 255, 0.35), 0 0 46px rgba(165, 91, 255, 0.28);
}

.surex-theme {
  color: var(--surex-text);
  background:
    radial-gradient(circle at top, rgba(103, 79, 255, 0.14), transparent 34%),
    radial-gradient(circle at 20% 18%, rgba(92, 216, 255, 0.13), transparent 25%),
    linear-gradient(180deg, #050313 0%, #09051f 34%, #050313 100%);
  font-family: "Manrope", "Inter", sans-serif;
}

.surex-theme body,
.surex-theme button,
.surex-theme input,
.surex-theme select,
.surex-theme textarea {
  font-family: "Manrope", "Inter", sans-serif;
}

.surex-theme .wc-neo-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.surex-theme .wc-surex-stars,
.surex-theme .wc-surex-nebula,
.surex-theme .wc-neo-grid,
.surex-theme .wc-neo-glow,
.surex-theme .wc-surex-meteor {
  position: absolute;
  inset: 0;
}

.surex-theme .wc-surex-stars {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.4px),
    radial-gradient(circle at 24% 70%, rgba(114, 184, 255, 0.78) 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 42% 28%, rgba(255, 255, 255, 0.82) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 64% 14%, rgba(124, 214, 255, 0.9) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 84% 67%, rgba(255, 255, 255, 0.86) 0 1.3px, transparent 2px),
    radial-gradient(circle at 88% 26%, rgba(173, 121, 255, 0.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 30% 50%, rgba(106, 225, 255, 0.88) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 84%, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.7px);
  opacity: 0.95;
}

.surex-theme .wc-surex-nebula {
  background:
    radial-gradient(circle at 50% 12%, rgba(191, 120, 255, 0.45), transparent 18%),
    radial-gradient(circle at 18% 62%, rgba(98, 122, 255, 0.28), transparent 22%),
    radial-gradient(circle at 78% 58%, rgba(93, 226, 255, 0.22), transparent 18%),
    radial-gradient(circle at 52% 42%, rgba(88, 98, 255, 0.24), transparent 24%);
  filter: blur(18px);
  opacity: 0.9;
}

.surex-theme .wc-neo-grid {
  background:
    linear-gradient(140deg, rgba(91, 216, 255, 0.08), transparent 35%),
    linear-gradient(320deg, rgba(164, 91, 255, 0.08), transparent 38%);
  opacity: 0.85;
}

.surex-theme .wc-neo-glow-a {
  background: radial-gradient(circle at 50% 18%, rgba(255, 123, 247, 0.24), transparent 22%);
  filter: blur(20px);
}

.surex-theme .wc-neo-glow-b {
  background: radial-gradient(circle at 50% 66%, rgba(91, 216, 255, 0.18), transparent 26%);
  filter: blur(32px);
}

.surex-theme .wc-surex-meteor {
  inset: auto;
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(107, 236, 255, 0.95));
  transform: rotate(-28deg);
  transform-origin: right center;
  box-shadow: 0 0 10px rgba(91, 216, 255, 0.7);
  opacity: 0.82;
}

.surex-theme .wc-surex-meteor::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #dff7ff;
  box-shadow: 0 0 14px rgba(116, 229, 255, 0.9);
}

.surex-theme .wc-surex-meteor-a {
  top: 13%;
  left: 20%;
  animation: surexMeteorA 10s linear infinite;
}

.surex-theme .wc-surex-meteor-b {
  top: 22%;
  right: 17%;
  width: 170px;
  animation: surexMeteorB 12s linear infinite;
}

.surex-theme .wc-surex-meteor-c {
  top: 30%;
  left: 58%;
  width: 130px;
  animation: surexMeteorC 9s linear infinite;
}

.surex-theme .wc-neo-app,
.surex-theme .wc-neo-main {
  position: relative;
  z-index: 1;
}

.surex-theme .wc-neo-sidebar,
.surex-theme .wc-neo-main-head,
.surex-theme .wc-neo-mobile-tabbar,
.surex-theme .m2-card,
.surex-theme .m2-keys-modal-box,
.surex-theme .m2-install-sidebar,
.surex-theme .m2-install-main,
.surex-theme .m2-platform-card,
.surex-theme .m2-auth-main,
.surex-theme .m2-auth-side,
.surex-theme .m2-table-wrap,
.surex-theme .m2-modal-box {
  background: linear-gradient(180deg, rgba(17, 13, 51, 0.88), rgba(8, 8, 31, 0.86));
  border: 1px solid var(--surex-border);
  box-shadow: 0 18px 60px rgba(3, 3, 17, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.surex-theme .m2-card,
.surex-theme .m2-install-main,
.surex-theme .m2-install-sidebar,
.surex-theme .m2-keys-modal-box,
.surex-theme .m2-auth-main,
.surex-theme .m2-auth-side {
  border-radius: 26px;
  position: relative;
  overflow: hidden;
}

.surex-theme .m2-card::before,
.surex-theme .m2-install-main::before,
.surex-theme .m2-install-sidebar::before,
.surex-theme .m2-auth-main::before,
.surex-theme .m2-auth-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 24%),
    radial-gradient(circle at top right, rgba(91, 216, 255, 0.16), transparent 28%);
  pointer-events: none;
}

.surex-theme .wc-neo-sidebar {
  background:
    linear-gradient(180deg, rgba(11, 9, 36, 0.95), rgba(7, 6, 24, 0.92)),
    radial-gradient(circle at top, rgba(108, 92, 255, 0.18), transparent 24%);
}

.surex-theme .wc-neo-main-head,
.surex-theme .wc-neo-mobile-tabbar {
  border-color: rgba(131, 197, 255, 0.22);
}

.surex-theme .m2-brand-title,
.surex-theme .m2-topbar-title,
.surex-theme .m2-card h1,
.surex-theme .m2-card h2,
.surex-theme .m2-card h3,
.surex-theme .m2-metric,
.surex-theme .wc-neo-badge,
.surex-theme .m2-kpi-pill,
.surex-theme .m2-chip {
  font-family: "Orbitron", "Manrope", sans-serif;
  letter-spacing: 0.04em;
}

.surex-theme .m2-brand-title {
  font-size: 1.25rem;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(91, 216, 255, 0.22);
}

.surex-theme .m2-brand-sub,
.surex-theme .m2-muted,
.surex-theme .m2-topbar-sub,
.surex-theme .wc-neo-legal-links a,
.surex-theme .m2-field span,
.surex-theme .m2-props span {
  color: var(--surex-text-soft);
}

.surex-theme .m2-brand-logo,
.surex-theme .m2-brand-logo-img {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.08) 20%, transparent 24%),
    linear-gradient(180deg, rgba(255, 124, 250, 0.98), rgba(84, 78, 255, 0.96) 60%, rgba(77, 223, 255, 0.98));
  border: 1px solid rgba(203, 234, 255, 0.35);
  box-shadow: var(--surex-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.25rem;
  position: relative;
}

.surex-theme .m2-brand-logo::before {
  content: "";
  position: absolute;
  inset: 9px 14px 15px;
  clip-path: polygon(50% 0%, 86% 40%, 66% 40%, 66% 100%, 34% 100%, 34% 40%, 14% 40%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(212, 233, 255, 0.72));
  opacity: 0.9;
}

.surex-theme .m2-brand-logo-img {
  padding: 6px;
  object-fit: cover;
}

.surex-theme a {
  color: #9adfff;
}

.surex-theme .wc-neo-nav-link,
.surex-theme .wc-neo-mobile-tab span,
.surex-theme .wc-neo-mobile-tab-btn span {
  color: var(--surex-text-soft);
}

.surex-theme .wc-neo-nav-link:hover,
.surex-theme .wc-neo-nav-link.is-active,
.surex-theme .wc-neo-mobile-tab.is-active span,
.surex-theme .wc-neo-mobile-tab:hover span {
  color: #ffffff;
}

.surex-theme .wc-neo-nav-link.is-active,
.surex-theme .wc-neo-nav-link:hover,
.surex-theme .wc-neo-badge,
.surex-theme .m2-kpi-pill,
.surex-theme .m2-chip {
  background: linear-gradient(135deg, rgba(91, 216, 255, 0.18), rgba(165, 91, 255, 0.16));
  border: 1px solid rgba(145, 210, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.surex-theme .m2-topbar {
  margin-bottom: 22px;
}

.surex-theme .m2-hero-card {
  min-height: 280px;
  background:
    radial-gradient(circle at 50% 0%, rgba(130, 110, 255, 0.3), transparent 34%),
    linear-gradient(145deg, rgba(12, 10, 46, 0.94), rgba(9, 8, 28, 0.9));
}

.surex-theme .m2-hero-card::after,
.surex-theme .m2-hero-card::before,
.surex-theme .wc-guest-auth-page .m2-auth-side::after {
  content: none !important;
  display: none !important;
}

.surex-theme .m2-hero-card .m2-actions,
.surex-theme .hero-actions,
.surex-theme .m2-subscription-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.surex-theme .m2-btn,
.surex-theme button.m2-btn,
.surex-theme a.m2-btn {
  color: #ffffff;
  background: linear-gradient(135deg, #53dfff, #7057ff 55%, #f470ff);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 16px 30px rgba(65, 76, 219, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.surex-theme .m2-btn:hover,
.surex-theme button.m2-btn:hover,
.surex-theme a.m2-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.surex-theme .m2-btn-ghost,
.surex-theme .wc-neo-logout,
.surex-theme .wc-neo-mobile-tab-btn {
  background: rgba(12, 10, 42, 0.68);
  border: 1px solid rgba(145, 210, 255, 0.24);
  color: #ebf5ff;
  box-shadow: none;
}

.surex-theme .m2-field input,
.surex-theme .m2-field select,
.surex-theme .m2-field textarea,
.surex-theme .m2-input,
.surex-theme .m2-select {
  background: rgba(4, 8, 26, 0.64);
  color: #f7fbff;
  border: 1px solid rgba(133, 201, 255, 0.24);
  border-radius: 16px;
}

.surex-theme .m2-field input:focus,
.surex-theme .m2-field select:focus,
.surex-theme .m2-field textarea:focus,
.surex-theme .m2-input:focus,
.surex-theme .m2-select:focus {
  outline: none;
  border-color: rgba(91, 216, 255, 0.76);
  box-shadow: 0 0 0 4px rgba(91, 216, 255, 0.12);
}

.surex-theme .m2-notice,
.surex-theme .m2-success,
.surex-theme .m2-error {
  border-radius: 18px;
  border: 1px solid rgba(145, 210, 255, 0.2);
  background: rgba(11, 10, 36, 0.82);
}

.surex-theme .m2-table,
.surex-theme .m2-table th,
.surex-theme .m2-table td {
  color: #eef6ff;
  border-color: rgba(132, 184, 255, 0.14);
}

.surex-theme .m2-table thead th {
  color: #9ed8ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
}

.surex-theme .m2-metric {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(91, 216, 255, 0.18);
}

.surex-theme .m2-tariff-item,
.surex-theme .m2-metric-card,
.surex-theme .m2-quick-panel {
  background: linear-gradient(180deg, rgba(13, 11, 46, 0.88), rgba(7, 7, 28, 0.84));
  border-radius: 24px;
}

.surex-theme .m2-list-steps li::marker {
  color: #71dfff;
}

.surex-theme .m2-auth-layout {
  align-items: stretch;
}

.surex-theme .wc-guest-auth-page .m2-auth-side {
  background:
    radial-gradient(circle at 50% 18%, rgba(199, 105, 255, 0.26), transparent 24%),
    linear-gradient(180deg, rgba(12, 10, 46, 0.96), rgba(7, 6, 24, 0.92));
}

.surex-theme .m2-platform-tabs button.is-active,
.surex-theme .m2-platform-tab.is-active {
  background: linear-gradient(135deg, rgba(91, 216, 255, 0.2), rgba(165, 91, 255, 0.2));
  color: #ffffff;
}

.surex-theme .trial-welcome-grid .m2-card,
.surex-theme .trial-app-card,
.surex-theme .trial-key-box {
  background: linear-gradient(180deg, rgba(12, 10, 46, 0.9), rgba(8, 8, 31, 0.88));
}

.surex-theme .m2-subscription-extend-form {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}

.surex-theme .m2-subscription-days-input,
.surex-theme .m2-subscription-extend-form .m2-input,
.surex-theme .m2-subscription-extend-form .m2-btn {
  width: auto !important;
  flex: 0 0 auto;
}

.surex-theme .m2-subscription-actions .m2-btn,
.surex-theme .m2-subscription-extend-form .m2-btn,
.surex-theme .m2-subscription-extend-form .m2-input {
  min-height: 38px !important;
  height: 38px;
}

.surex-theme .m2-subscription-extend-form .m2-input {
  padding-top: 0;
  padding-bottom: 0;
}

.surex-theme .m2-table td > input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  display: block;
  margin: 0 auto;
  padding: 0 !important;
}

@keyframes surexMeteorA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-28deg); opacity: 0; }
  8%, 52% { opacity: 0.82; }
  60% { transform: translate3d(180px, 130px, 0) rotate(-28deg); opacity: 0; }
}

@keyframes surexMeteorB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-28deg); opacity: 0; }
  10%, 48% { opacity: 0.7; }
  58% { transform: translate3d(-150px, 110px, 0) rotate(-28deg); opacity: 0; }
}

@keyframes surexMeteorC {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-28deg); opacity: 0; }
  16%, 48% { opacity: 0.65; }
  56% { transform: translate3d(120px, 90px, 0) rotate(-28deg); opacity: 0; }
}

@media (max-width: 960px) {
  .surex-theme .wc-neo-main-head,
  .surex-theme .wc-neo-mobile-tabbar,
  .surex-theme .m2-card,
  .surex-theme .m2-auth-main,
  .surex-theme .m2-auth-side {
    border-radius: 22px;
  }
}