:root {
  --p3d-bg: #050816;
  --p3d-bg-soft: rgba(9, 16, 29, 0.9);
  --p3d-panel: rgba(11, 22, 39, 0.88);
  --p3d-panel-strong: rgba(15, 29, 52, 0.94);
  --p3d-line: rgba(179, 208, 242, 0.14);
  --p3d-text: #eff5ff;
  --p3d-muted: #9ab0cf;
  --p3d-cyan: #a8b9cc;
  --p3d-orange: #ff9a3d;
  --p3d-green: #44d17a;
  --p3d-red: #ff6178;
  --p3d-shadow-sm: 0 10px 22px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.14);
  --p3d-shadow-md: 0 18px 42px rgba(0, 0, 0, 0.26), 0 6px 16px rgba(0, 0, 0, 0.18);
  --p3d-shadow-lg: 0 28px 66px rgba(0, 0, 0, 0.34), 0 10px 24px rgba(0, 0, 0, 0.22);
  --p3d-shadow-xl: 0 40px 90px rgba(0, 0, 0, 0.42), 0 14px 32px rgba(0, 0, 0, 0.26);
  --p3d-glow-cyan: rgba(168, 185, 204, 0.09);
  --p3d-glow-orange: rgba(255, 154, 61, 0.16);
  --p3d-shine: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 22%, transparent 100%);
}

html, body, #app {
  min-height: 100%;
}

body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  color: var(--p3d-text);
  background:
    radial-gradient(circle at 10% 14%, rgba(168, 185, 204, 0.10), transparent 22%),
    radial-gradient(circle at 88% 16%, rgba(255, 154, 61, 0.13), transparent 20%),
    radial-gradient(circle at 52% 82%, rgba(168, 185, 204, 0.06), transparent 34%),
    linear-gradient(180deg, #050816 0%, #07111f 44%, #04060d 100%);
  background-attachment: fixed;
  letter-spacing: 0.012em;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(168, 185, 204, 0.14), transparent 34%),
    radial-gradient(circle at 12% 18%, rgba(255, 198, 102, 0.08), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(168, 185, 204, 0.08), transparent 22%);
}

body::after {
  z-index: 0;
  background-image: url('/themes/pterodactyl/images/vektal-watermark.svg');
  background-repeat: no-repeat;
  background-position: center top 10%;
  background-size: clamp(760px, 72vw, 1340px);
  opacity: 0.08;
  mix-blend-mode: screen;
  filter: saturate(1.16) contrast(1.06) drop-shadow(0 18px 30px rgba(3, 8, 16, 0.28));
}

#app, .wrapper, .content-wrapper {
  position: relative;
  z-index: 1;
}

body.skin-blue .main-header .navbar,
body.skin-blue .main-header .logo,
body.skin-blue .main-sidebar,
body.skin-blue .content-wrapper,
body.skin-blue .right-side,
body.skin-blue .main-footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015) 20%, transparent 100%),
    var(--p3d-panel);
}

body.skin-blue .main-header .navbar,
body.skin-blue .main-header .logo {
  box-shadow: var(--p3d-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.skin-blue .main-header .logo {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

body.skin-blue .main-sidebar {
  box-shadow: var(--p3d-shadow-lg), inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

body.skin-blue .content-wrapper {
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}

body.skin-blue .main-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.18);
}

body.skin-blue .sidebar-menu > li > a,
body.skin-blue .sidebar-menu > li.header,
body.skin-blue .sidebar-menu > li > a > .fa,
body.skin-blue .sidebar-menu > li > a > .ion {
  color: var(--p3d-text);
}

body.skin-blue .sidebar-menu > li > a {
  margin: 0 10px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

body.skin-blue .sidebar-menu > li > a:hover,
body.skin-blue .sidebar-menu > li.active > a {
  transform: translateX(3px);
  background: linear-gradient(90deg, rgba(168, 185, 204, 0.08), rgba(255, 154, 61, 0.05));
  border-color: rgba(168, 185, 204, 0.16);
  box-shadow: var(--p3d-shadow-sm), 0 0 18px rgba(168, 185, 204, 0.05);
}

.box,
.small-box,
.info-box,
.nav-tabs-custom,
.panel,
.modal-content,
.dropdown-menu,
.callout,
.alert,
.table,
.table-responsive,
.card,
.content-block,
.content-box {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 24%, transparent 100%),
    var(--p3d-panel);
  border: 1px solid rgba(186, 214, 244, 0.12) !important;
  box-shadow: var(--p3d-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.box::before,
.small-box::before,
.info-box::before,
.nav-tabs-custom::before,
.panel::before,
.modal-content::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  pointer-events: none;
}

.box:hover,
.small-box:hover,
.info-box:hover,
.panel:hover,
.card:hover {
  box-shadow: var(--p3d-shadow-xl), 0 0 28px var(--p3d-glow-cyan);
}

.box-header,
.box-footer,
.modal-header,
.modal-footer,
.nav-tabs-custom > .nav-tabs,
.nav-tabs-custom > .tab-content {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.btn,
.button,
.action-button {
  border-radius: 999px !important;
  border: 1px solid rgba(186, 214, 244, 0.12) !important;
  box-shadow: var(--p3d-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.btn:hover,
.button:hover,
.action-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--p3d-shadow-md), 0 0 18px rgba(255, 154, 61, 0.12);
}

.btn-primary,
.btn-success,
.btn-info {
  background: linear-gradient(135deg, #ffc781 0%, #ff9a3d 48%, #ff7d36 100%) !important;
  border-color: rgba(255, 199, 129, 0.3) !important;
  color: #09131f !important;
}

.btn-default,
.btn-secondary {
  background: linear-gradient(180deg, rgba(31, 46, 69, 0.94), rgba(11, 20, 34, 0.9)) !important;
  color: var(--p3d-text) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ff6178, #b83247) !important;
  color: #fff !important;
}

.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.select2-search--dropdown .select2-search__field,
textarea,
input,
select {
  color: var(--p3d-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(8, 18, 31, 0.9) !important;
  border: 1px solid rgba(186, 214, 244, 0.12) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.26), 0 10px 22px rgba(0, 0, 0, 0.12) !important;
}

select option,
select optgroup,
.select2-results__option {
  background: #0c1626 !important;
  color: #eef4ff !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: color-mix(in srgb, var(--p3d-orange) 24%, #0c1626) !important;
  color: #fff5eb !important;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

a,
.text-primary,
.text-info,
.text-cyan {
  color: #e2e8f0 !important;
}

.text-warning,
.text-orange {
  color: var(--p3d-orange) !important;
}

.text-danger,
.text-red {
  color: var(--p3d-red) !important;
}

.alert,
.callout,
.label,
.badge,
.progress,
.progress-bar {
  border-radius: 14px !important;
}

.alert-success,
.callout.callout-success,
.label-success,
.badge-success,
.progress-bar-success {
  background: color-mix(in srgb, var(--p3d-green) 18%, rgba(9, 18, 31, 0.9)) !important;
  border-color: color-mix(in srgb, var(--p3d-green) 34%, transparent) !important;
}

.alert-warning,
.callout.callout-warning,
.label-warning,
.badge-warning,
.progress-bar-warning {
  background: color-mix(in srgb, var(--p3d-orange) 18%, rgba(9, 18, 31, 0.9)) !important;
  border-color: color-mix(in srgb, var(--p3d-orange) 34%, transparent) !important;
}

.alert-danger,
.callout.callout-danger,
.label-danger,
.badge-danger,
.progress-bar-danger {
  background: color-mix(in srgb, var(--p3d-red) 18%, rgba(9, 18, 31, 0.9)) !important;
  border-color: color-mix(in srgb, var(--p3d-red) 34%, transparent) !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
  border-radius: 12px 12px 0 0 !important;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  margin-right: 6px;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li > a:hover {
  background: linear-gradient(180deg, rgba(168, 185, 204, 0.08), rgba(255, 154, 61, 0.04));
  border-color: rgba(168, 185, 204, 0.16);
}

.main-header .navbar .nav > li > a,
.main-header .logo,
.main-header .sidebar-toggle {
  color: var(--p3d-text) !important;
}

.breadcrumb,
.breadcrumb > li + li:before,
.content-header > .breadcrumb {
  color: var(--p3d-muted) !important;
}

.main-footer {
  color: var(--p3d-muted);
}

.modal-backdrop.in {
  opacity: 0.7;
}

.modal-content {
  border-radius: 22px !important;
}

.dropdown-menu {
  background: rgba(8, 18, 31, 0.98) !important;
  color: var(--p3d-text) !important;
}

.dropdown-menu > li > a {
  color: var(--p3d-text) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: rgba(168, 185, 204, 0.08) !important;
}

.code,
code,
pre {
  background: rgba(8, 18, 31, 0.94) !important;
  color: #eef4ff !important;
  border-color: rgba(186, 214, 244, 0.12) !important;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  .box:hover,
  .small-box:hover,
  .info-box:hover,
  .panel:hover,
  .card:hover,
  .btn:hover,
  .button:hover,
  .action-button:hover {
    transform: translateY(-1px);
  }
}