/* ==========================================================
   GRIDSHOCK NEON PRESET THEME ENGINE V15
   ========================================================== */

:root {
  --gs-theme-primary: #a6ff00;
  --gs-theme-primary-rgb: 166, 255, 0;

  --gs-theme-secondary: #2de5f2;
  --gs-theme-secondary-rgb: 45, 229, 242;

  --gs-grid-rgb: 166, 255, 0;

  --gs-theme-page: #030706;
  --gs-theme-page-2: #06100c;

  --gs-theme-surface: #07110f;
  --gs-theme-surface-2: #0a1814;
  --gs-theme-surface-3: #0d211b;

  --gs-theme-text: #eef7f3;
  --gs-theme-muted: #81958c;

  --gs-ui-page: var(--gs-theme-page);
  --gs-ui-surface: var(--gs-theme-surface);
  --gs-ui-surface-2: var(--gs-theme-surface-2);
  --gs-ui-text: var(--gs-theme-text);

  --gs-ui-border: var(--gs-theme-primary);
  --gs-ui-border-rgb: var(--gs-theme-primary-rgb);

  --gs-ui-tab-icon: var(--gs-theme-primary);
}


/* ----------------------------------------------------------
   GLOBAL NEON GRID BACKGROUND
   ---------------------------------------------------------- */

html[data-gs-preset],
html[data-gs-preset] body {
  min-height: 100%;

  color-scheme: dark;
}


html[data-gs-preset] body {
  color:
    var(--gs-theme-text);

  background-color:
    var(--gs-theme-page)
    !important;

  background-image:
    linear-gradient(
      rgba(
        var(--gs-grid-rgb),
        .045
      ) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(
        var(--gs-grid-rgb),
        .045
      ) 1px,
      transparent 1px
    ),

    radial-gradient(
      circle at 82% 10%,
      rgba(
        var(--gs-theme-primary-rgb),
        .075
      ),
      transparent 31%
    ),

    radial-gradient(
      circle at 13% 46%,
      rgba(
        var(--gs-theme-secondary-rgb),
        .035
      ),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      var(--gs-theme-page),
      var(--gs-theme-page-2)
    )
    !important;

  background-size:
    44px 44px,
    44px 44px,
    auto,
    auto,
    auto
    !important;

  background-position:
    center top
    !important;

  background-attachment:
    fixed
    !important;
}


/* ----------------------------------------------------------
   TOP HEADER
   ---------------------------------------------------------- */

html[data-gs-preset]
.site-header,

html[data-gs-preset]
.portal-header,

html[data-gs-preset]
.auth-header {
  background:
    color-mix(
      in srgb,
      var(--gs-theme-page) 94%,
      var(--gs-theme-primary) 6%
    )
    !important;

  border-color:
    rgba(
      var(--gs-theme-primary-rgb),
      .30
    )
    !important;

  box-shadow:
    0 8px 30px
    rgba(0,0,0,.18)
    !important;
}


/* ----------------------------------------------------------
   BRAND
   ---------------------------------------------------------- */

html[data-gs-preset]
.brand-badge {
  color:
    var(--gs-theme-primary)
    !important;

  border-color:
    var(--gs-theme-primary)
    !important;
}


html[data-gs-preset]
.brand small {
  color:
    var(--gs-theme-primary)
    !important;
}


/* ----------------------------------------------------------
   COMMON CUSTOMER SURFACES
   ---------------------------------------------------------- */

html[data-gs-preset]
.portal-section,

html[data-gs-preset]
.portal-metrics,

html[data-gs-preset]
.gs-account-card,

html[data-gs-preset]
.gs-settings-panel,

html[data-gs-preset]
.auth-terminal,

html[data-gs-preset]
.gs-account-dropdown,

html[data-gs-preset]
.gs-account-trigger {
  background:
    color-mix(
      in srgb,
      var(--gs-theme-surface) 97%,
      var(--gs-theme-primary) 3%
    )
    !important;

  border-color:
    rgba(
      var(--gs-theme-primary-rgb),
      .20
    )
    !important;
}


/* ----------------------------------------------------------
   FORMS
   ---------------------------------------------------------- */

html[data-gs-preset]
input,

html[data-gs-preset]
select,

html[data-gs-preset]
textarea {
  color:
    var(--gs-theme-text)
    !important;

  background:
    var(--gs-theme-surface)
    !important;

  border-color:
    rgba(
      var(--gs-theme-primary-rgb),
      .22
    )
    !important;
}


html[data-gs-preset]
input:focus,

html[data-gs-preset]
select:focus,

html[data-gs-preset]
textarea:focus {
  outline:
    none
    !important;

  border-color:
    var(--gs-theme-primary)
    !important;

  box-shadow:
    0 0 0 2px
    rgba(
      var(--gs-theme-primary-rgb),
      .065
    )
    !important;
}


/* ----------------------------------------------------------
   HEADER TABS
   ---------------------------------------------------------- */

html[data-gs-preset]
#gsNodeTabs
.gs-node-tab {
  color:
    var(--gs-theme-muted)
    !important;

  background:
    var(--gs-theme-surface)
    !important;

  border-color:
    rgba(
      var(--gs-theme-primary-rgb),
      .17
    )
    !important;
}


html[data-gs-preset]
#gsNodeTabs
.gs-node-tab:hover {
  color:
    var(--gs-theme-text)
    !important;

  border-color:
    rgba(
      var(--gs-theme-primary-rgb),
      .45
    )
    !important;
}


html[data-gs-preset]
#gsNodeTabs
.gs-node-tab.is-active {
  color:
    var(--gs-theme-primary)
    !important;

  background:
    color-mix(
      in srgb,
      var(--gs-theme-surface) 82%,
      var(--gs-theme-primary) 18%
    )
    !important;

  border-color:
    var(--gs-theme-primary)
    !important;

  box-shadow:
    inset 0 -2px 0
      var(--gs-theme-primary),
    0 0 16px
      rgba(
        var(--gs-theme-primary-rgb),
        .09
      )
    !important;
}


/* ----------------------------------------------------------
   TAB ICONS
   ---------------------------------------------------------- */

html[data-gs-preset]
#gsNodeTabs
:is(
  .tab-icon,
  .nav-icon,
  .icon,
  i,
  svg
) {
  color:
    var(--gs-theme-primary)
    !important;
}


html[data-gs-preset]
#gsNodeTabs
svg [fill]:not([fill="none"]) {
  fill:
    var(--gs-theme-primary)
    !important;
}


html[data-gs-preset]
#gsNodeTabs
svg [stroke]:not([stroke="none"]) {
  stroke:
    var(--gs-theme-primary)
    !important;
}


/* ----------------------------------------------------------
   ACCOUNT MENU
   ---------------------------------------------------------- */

html[data-gs-preset]
.gs-account-trigger {
  border-color:
    rgba(
      var(--gs-theme-primary-rgb),
      .27
    )
    !important;
}


html[data-gs-preset]
.gs-account-trigger:hover,

html[data-gs-preset]
.gs-account-dropdown
a:hover,

html[data-gs-preset]
.gs-account-dropdown
button:hover {
  color:
    var(--gs-theme-primary)
    !important;
}


/* ----------------------------------------------------------
   PRIMARY BUTTONS
   ---------------------------------------------------------- */

html[data-gs-preset]
.button-primary,

html[data-gs-preset]
.gs-account-primary,

html[data-gs-preset]
.gs-settings-primary {
  color:
    #050708
    !important;

  background:
    var(--gs-theme-primary)
    !important;

  border-color:
    var(--gs-theme-primary)
    !important;
}


/* ----------------------------------------------------------
   LINKS / ACCENTS
   ---------------------------------------------------------- */

html[data-gs-preset]
a:hover {
  color:
    var(--gs-theme-primary);
}


/* ----------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------- */

html[data-gs-preset] * {
  scrollbar-color:
    var(--gs-theme-primary)
    var(--gs-theme-surface);
}


html[data-gs-preset]
*::-webkit-scrollbar-thumb {
  background:
    var(--gs-theme-primary);
}


html[data-gs-preset]
*::-webkit-scrollbar-track {
  background:
    var(--gs-theme-surface);
}


/* ----------------------------------------------------------
   TEXT SELECTION
   ---------------------------------------------------------- */

html[data-gs-preset]
::selection {
  color:
    var(--gs-theme-text);

  background:
    rgba(
      var(--gs-theme-primary-rgb),
      .28
    );
}


/* ----------------------------------------------------------
   SEMANTIC DANGER IS ALWAYS RED
   ---------------------------------------------------------- */

html[data-gs-preset]
:is(
  .danger,
  .stop,
  [data-action="stop"],
  [data-action="delete"]
) {
  border-color:
    #e44d62
    !important;
}


/* ----------------------------------------------------------
   RESPECT REDUCED MOTION
   ---------------------------------------------------------- */

@media (
  prefers-reduced-motion:
  no-preference
) {
  html[data-gs-preset]
  body {
    transition:
      background-color .15s ease,
      color .15s ease;
  }
}