/*
  3DWebStudio — semantic neon buttons.
  Only real text/action buttons are styled here. Cards, standalone arrows,
  icon-only controls and attachment blocks intentionally stay untouched.
*/

:root {
  --nb-font: 'Unbounded', 'Golos Text', 'Segoe UI', Arial, sans-serif;
  --nb-a: #8a63ff;
  --nb-b: #25dfff;
  --nb-a-rgb: 138, 99, 255;
  --nb-b-rgb: 37, 223, 255;
  --nb-text: #f5f3ff;
  --nb-muted: #d8d2f2;
  --nb-orbit-duration: 58s;
  --nb-particle-space: 18px;
  --nb-pointer-x: 50%;
  --nb-pointer-y: 50%;
}

:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
) {
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 18px;
  border: 1.5px solid transparent;
  border-radius: 999px !important;
  background:
    linear-gradient(94deg, rgba(var(--nb-a-rgb), .19), rgba(2, 5, 29, .995) 47%, rgba(var(--nb-b-rgb), .17)) padding-box,
    linear-gradient(90deg, var(--nb-a) 0%, var(--nb-a) 18%, color-mix(in srgb, var(--nb-a) 48%, var(--nb-b)) 54%, var(--nb-b) 100%) border-box;
  color: var(--nb-text);
  font-family: Inter, 'Golos Text', 'Segoe UI', Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(255, 255, 255, .55),
    inset 18px 0 28px rgba(var(--nb-a-rgb), .16),
    inset -18px 0 30px rgba(var(--nb-b-rgb), .15),
    0 0 5px rgba(var(--nb-a-rgb), .82),
    -8px 0 20px rgba(var(--nb-a-rgb), .42),
    8px 0 22px rgba(var(--nb-b-rgb), .38),
    0 12px 28px rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    filter .22s ease,
    color .18s ease;
}

/* These are the same two crisp inner contours used by the selected prototype. */
:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):not(.action-state):not(.upload-state)::before,
:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):not(.action-state):not(.upload-state)::after {
  content: '';
  position: absolute;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
}

:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):not(.action-state):not(.upload-state)::before {
  inset: 2px;
  border: 1px solid rgba(255, 255, 255, .64);
  box-shadow:
    inset 0 0 6px rgba(var(--nb-a-rgb), .5),
    0 0 4px rgba(var(--nb-b-rgb), .4);
  opacity: .9;
}

:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):not(.action-state):not(.upload-state)::after {
  inset: 5px;
  border: 1px solid transparent;
  background: linear-gradient(90deg, rgba(var(--nb-a-rgb), .8), rgba(111, 104, 255, .2) 52%, rgba(var(--nb-b-rgb), .8)) border-box;
  box-shadow:
    inset 0 0 8px rgba(var(--nb-a-rgb), .18),
    0 0 7px rgba(var(--nb-b-rgb), .2);
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Literal, scaled copies of the prototype's inner visual layers. */
.nb-button-edge,
.nb-button-circuitry,
.nb-button-dark-core,
.nb-button-sheen {
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.nb-button-edge {
  inset: 5px;
  z-index: 1;
  background:
    radial-gradient(circle at 5% 50%, rgba(var(--nb-a-rgb), .31), transparent 28%),
    radial-gradient(circle at 95% 50%, rgba(var(--nb-b-rgb), .28), transparent 29%),
    linear-gradient(180deg, rgba(var(--nb-a-rgb), .16), transparent 29%, transparent 72%, rgba(var(--nb-b-rgb), .12));
  filter: blur(1.5px);
  animation: nbEdgeBreathe 3.8s ease-in-out infinite alternate;
}

.nb-button-circuitry {
  inset: 6px 9px;
  z-index: 2;
  opacity: .48;
  background-image:
    linear-gradient(90deg, rgba(var(--nb-a-rgb), .68), transparent 28%, transparent 72%, rgba(var(--nb-b-rgb), .67)),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(151, 223, 255, .29) 7px, transparent 8px 11px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(97, 199, 255, .36) 19px, transparent 20px 31px);
  background-position: 0 0, 0 0, 0 0;
  background-size: 100% 1px, 100% 100%, 100% 100%;
  mask-image: radial-gradient(ellipse 58% 52% at center, transparent 0 58%, rgba(0, 0, 0, .82) 76%, black 100%);
  animation: nbCircuitryDrift 8s linear infinite;
}

.nb-button-circuitry::before,
.nb-button-circuitry::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  height: 32%;
  border: 1px solid rgba(142, 226, 255, .5);
  border-right-color: rgba(var(--nb-b-rgb), .62);
  border-left-color: rgba(var(--nb-a-rgb), .64);
  clip-path: polygon(0 58%, 4% 58%, 7% 12%, 17% 12%, 20% 0, 80% 0, 83% 12%, 93% 12%, 96% 58%, 100% 58%, 100% 100%, 0 100%);
}

.nb-button-circuitry::before { top: 0; }
.nb-button-circuitry::after { bottom: 0; transform: scaleY(-1); }

.nb-button-dark-core {
  inset: 14% 7%;
  z-index: 4;
  background: radial-gradient(ellipse at center, rgba(2, 3, 18, .99) 0%, rgba(2, 4, 20, .96) 66%, rgba(3, 6, 26, .44) 86%, transparent 100%);
  filter: blur(1.5px);
}

.nb-button-sheen {
  inset: 0;
  z-index: 5;
  opacity: 0;
  background: radial-gradient(circle 70px at var(--nb-pointer-x) var(--nb-pointer-y), rgba(255, 255, 255, .16), transparent 67%);
  transition: opacity 180ms ease;
}

.nb-button-label {
  position: relative;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  min-width: 0;
  white-space: inherit;
}

/* The canvas is injected only into actual text/action controls. It is larger
   than the pill, so the orbit and particles stay outside the label area. */
.nb-particle-canvas {
  position: absolute;
  inset: calc(var(--nb-particle-space) * -1);
  z-index: 0;
  display: block;
  width: calc(100% + var(--nb-particle-space) * 2) !important;
  max-width: none !important;
  height: calc(100% + var(--nb-particle-space) * 2) !important;
  border-radius: 999px;
  overflow: visible;
  opacity: 1;
  pointer-events: none;
}

/* Stateful admin controls reuse their pseudo-elements for progress/feedback. */
:where(button, a, input, label, [role='button']):is(.action-state, .upload-state) {
  overflow: hidden;
}

:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):hover {
  transform: translateY(-1px) scale(1.004);
  filter: saturate(1.16) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .7),
    inset 21px 0 33px rgba(var(--nb-a-rgb), .23),
    inset -21px 0 35px rgba(var(--nb-b-rgb), .22),
    0 0 7px rgba(255, 255, 255, .88),
    -10px 0 27px rgba(var(--nb-a-rgb), .58),
    10px 0 29px rgba(var(--nb-b-rgb), .55),
    0 14px 31px rgba(0, 0, 0, .46);
}

:where(button, a, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):hover .nb-button-sheen { opacity: 1; }

:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):active {
  transform: translateY(1px) scale(.987);
  filter: brightness(1.12);
}

:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):focus-visible {
  outline: 2px solid rgba(255, 255, 255, .96);
  outline-offset: 6px;
  box-shadow:
    0 0 5px rgba(255, 255, 255, .9),
    -8px 0 24px rgba(var(--nb-a-rgb), .55),
    8px 0 26px rgba(var(--nb-b-rgb), .52);
}

:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):is(:disabled, [aria-disabled='true']) {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
  filter: saturate(.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

:where(button, a, input, label, [role='button']):is(
  .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
  .public-btn:not(.public-btn-round),
  .drawer-action,
  .rowbtn,
  .miniBtn
):is(:disabled, [aria-disabled='true'])::after {
  display: none;
}

.btn-icon,
.public-btn-icon {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  flex: none;
  display: block;
}

.btn.lg,
.public-btn.lg {
  min-height: 48px;
  padding: 11px 22px;
  font-size: 12.4px;
}

.btn.small,
.btn.mini,
.public-btn.compact-btn,
.compact-btn,
.rowbtn,
.miniBtn {
  min-height: 34px;
  padding: 7px 13px;
  font-size: 10.5px;
}

.rowbtn,
.miniBtn {
  gap: 5px;
  margin-right: 5px;
}

/* Authentication CTAs use the same component as the rest of the public site.
   Keep provider icons recognisable while replacing the legacy flat shells. */
.auth-redesign .auth-redesign__view button.auth-redesign__submit.public-btn {
  width: 100%;
  min-height: 47px;
  padding: 12px 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(94deg, rgba(var(--nb-a-rgb), .19), rgba(2, 5, 29, .995) 47%, rgba(var(--nb-b-rgb), .17)) padding-box,
    linear-gradient(90deg, var(--nb-a) 0%, var(--nb-a) 18%, color-mix(in srgb, var(--nb-a) 48%, var(--nb-b)) 54%, var(--nb-b) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(255, 255, 255, .55),
    inset 18px 0 28px rgba(var(--nb-a-rgb), .16),
    inset -18px 0 30px rgba(var(--nb-b-rgb), .15),
    0 0 5px rgba(var(--nb-a-rgb), .82),
    -8px 0 20px rgba(var(--nb-a-rgb), .42),
    8px 0 22px rgba(var(--nb-b-rgb), .38),
    0 12px 28px rgba(0, 0, 0, .42);
}

.auth-redesign .auth-redesign__view .auth-redesign__oauth button.public-btn {
  --nb-particle-space: 13px;
  --nb-orbit-duration: 82s;
  flex: 1;
  width: auto;
  min-height: 44px;
  height: 44px;
  padding: 8px 16px;
  border: 1.5px solid transparent;
  border-radius: 999px !important;
  background:
    linear-gradient(94deg, rgba(var(--nb-a-rgb), .17), rgba(2, 5, 29, .995) 47%, rgba(var(--nb-b-rgb), .15)) padding-box,
    linear-gradient(90deg, var(--nb-a) 0%, var(--nb-a) 18%, color-mix(in srgb, var(--nb-a) 48%, var(--nb-b)) 54%, var(--nb-b) 100%) border-box;
  color: var(--nb-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    inset 0 -1px 0 rgba(255, 255, 255, .46),
    inset 14px 0 24px rgba(var(--nb-a-rgb), .13),
    inset -14px 0 24px rgba(var(--nb-b-rgb), .13),
    0 0 5px rgba(var(--nb-a-rgb), .68),
    -6px 0 16px rgba(var(--nb-a-rgb), .3),
    6px 0 18px rgba(var(--nb-b-rgb), .28),
    0 9px 22px rgba(0, 0, 0, .34);
}

.auth-redesign .auth-redesign__view .auth-redesign__oauth button.public-btn:hover {
  background:
    linear-gradient(94deg, rgba(var(--nb-a-rgb), .21), rgba(2, 5, 29, .995) 47%, rgba(var(--nb-b-rgb), .2)) padding-box,
    linear-gradient(90deg, var(--nb-a) 0%, var(--nb-a) 18%, color-mix(in srgb, var(--nb-a) 48%, var(--nb-b)) 54%, var(--nb-b) 100%) border-box;
}

/* Compact icon-only header controls use the prototype's layers without
   turning navigation arrows or other icon buttons into neon components. */
.public-header-stack .nb-header-control {
  --nb-particle-space: 12px;
  --nb-orbit-duration: 82s;
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px !important;
  background:
    linear-gradient(135deg, rgba(var(--nb-a-rgb), .16), rgba(2, 5, 24, .98) 48%, rgba(var(--nb-b-rgb), .15)) padding-box,
    linear-gradient(135deg, var(--nb-a), var(--nb-b)) border-box;
  color: var(--nb-text);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(255, 255, 255, .3),
    0 0 7px rgba(var(--nb-a-rgb), .44),
    0 0 18px rgba(var(--nb-b-rgb), .22);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}

.public-header-stack .nb-header-control::before,
.public-header-stack .nb-header-control::after {
  content: '';
  position: absolute;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
}

.public-header-stack .nb-header-control::before {
  inset: 2px;
  border: 1px solid rgba(255, 255, 255, .52);
  box-shadow: inset 0 0 5px rgba(var(--nb-a-rgb), .46);
}

.public-header-stack .nb-header-control::after {
  inset: 5px;
  border: 1px solid rgba(var(--nb-b-rgb), .42);
}

.public-header-stack .nb-header-control .nb-button-edge {
  inset: 4px;
}

.public-header-stack .nb-header-control .nb-button-circuitry {
  inset: 5px;
  opacity: .34;
}

.public-header-stack .nb-header-control .nb-button-dark-core {
  inset: 20%;
  border-radius: 7px;
  opacity: .7;
}

.public-header-stack .nb-header-control .nb-button-label {
  width: 100%;
  height: 100%;
}

.public-header-stack .nb-header-login svg {
  width: 21px;
  height: 21px;
}

.public-header-stack .nb-header-control .nb-particle-canvas {
  opacity: .8;
}

.public-header-stack .nb-header-control:hover {
  transform: translateY(-1px) scale(1.035);
  filter: saturate(1.15) brightness(1.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 0 9px rgba(var(--nb-a-rgb), .62),
    0 0 24px rgba(var(--nb-b-rgb), .36);
}

.public-header-stack .nb-header-control:active {
  transform: translateY(1px) scale(.95);
}

.public-header-stack .nb-header-control:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .94);
  outline-offset: 4px;
}

.public-header-stack .nb-header-search {
  --nb-a: #22e1ff;
  --nb-b: #2d70ff;
  --nb-a-rgb: 34, 225, 255;
  --nb-b-rgb: 45, 112, 255;
  --nb-text: #dffbff;
}

.public-header-stack .nb-header-favorite {
  --nb-a: #ff3aa4;
  --nb-b: #ff174f;
  --nb-a-rgb: 255, 58, 164;
  --nb-b-rgb: 255, 23, 79;
  --nb-text: #fff0f7;
}

.public-header-stack .nb-header-login {
  --nb-a: #43f4df;
  --nb-b: #10bd91;
  --nb-a-rgb: 67, 244, 223;
  --nb-b-rgb: 16, 189, 145;
  --nb-text: #eafffa;
}

.public-header-stack .public-search {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
}

.public-header-stack .public-favorite-link {
  min-width: 42px;
  gap: 0;
  font-size: 0;
}

.public-header-stack .public-favorite-label {
  display: none;
}

@media (max-width: 1080px) {
  .public-header-stack .nb-header-control,
  .public-header-stack .public-search,
  .public-header-stack .public-favorite-link {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    flex-basis: 36px;
    border-radius: 9px !important;
  }
}

/* Primary navigation, room/chat actions. */
:is(
  .btn.primary,
  .btn.play,
  .btn.hero-master-cta,
  .btn.refreshbtn,
  .public-btn-primary,
  .drawer-action.primary,
  .rowbtn.message
) {
  --nb-a: #19dcff;
  --nb-b: #ee36ff;
  --nb-a-rgb: 25, 220, 255;
  --nb-b-rgb: 238, 54, 255;
  --nb-text: #ffffff;
  --nb-orbit-duration: 54s;
}

/* Save, approve and completed actions. */
:is(
  .btn.save,
  .btn.success,
  .btn.voted,
  .public-btn-success,
  .rowbtn.success,
  .rowbtn.approve,
  .btn[id*='save' i],
  .btn[onclick*='save' i],
  .btn[data-system-save],
  .btn[data-staff-save],
  .btn[data-roleaccess-staff-save],
  .btn[data-cms-save-draft],
  .rowbtn[data-visual-save-settings],
  .rowbtn[data-visual-save-banner],
  .rowbtn[data-media-save],
  .rowbtn[data-cat-save],
  .rowbtn[data-tag-save],
  .rowbtn[data-banner-save],
  .rowbtn[data-article-save],
  .rowbtn[data-provider-save],
  .rowbtn[data-match-save],
  .rowbtn[data-rating-rule-save]
) {
  --nb-a: #43f4df;
  --nb-b: #10bd91;
  --nb-a-rgb: 67, 244, 223;
  --nb-b-rgb: 16, 189, 145;
  --nb-text: #f0fffc;
  --nb-orbit-duration: 66s;
}

/* Upload and import actions. */
:is(
  .btn.uploadbtn,
  .public-btn-upload,
  .btn[id*='upload' i],
  .btn[onclick*='upload' i],
  .btn[data-upload],
  .btn[data-service-upload]
) {
  --nb-a: #9f55ff;
  --nb-b: #ed35ff;
  --nb-a-rgb: 159, 85, 255;
  --nb-b-rgb: 237, 53, 255;
  --nb-text: #fff5ff;
  --nb-orbit-duration: 72s;
}

/* Download and export actions. */
:is(
  .btn.download,
  .btn.exportbtn,
  .public-btn-download,
  .btn[download],
  .public-btn[download],
  .rowbtn[download],
  .btn[id*='download' i],
  .btn[id*='export' i],
  .btn[onclick*='download' i],
  .btn[onclick*='export' i],
  .btn[data-system-export],
  .btn[data-contest-original-download],
  .btn[data-tax-document-export]
) {
  --nb-a: #22e1ff;
  --nb-b: #2d70ff;
  --nb-a-rgb: 34, 225, 255;
  --nb-b-rgb: 45, 112, 255;
  --nb-text: #f3fbff;
  --nb-orbit-duration: 62s;
}

/* Buy and checkout actions stay green in every product variation. */
:is(
  .btn.buy,
  .public-btn-buy,
  .btn[id*='buy' i],
  .btn[id*='checkout' i]
) {
  --nb-a: #63ff83;
  --nb-b: #09c85e;
  --nb-a-rgb: 99, 255, 131;
  --nb-b-rgb: 9, 200, 94;
  --nb-text: #f2fff5;
  --nb-orbit-duration: 68s;
}

/* Warnings remain a separate semantic category. */
:is(
  .btn.warn,
  .btn.gold,
  .public-btn-warning,
  .rowbtn.warningbtn
) {
  --nb-a: #ffd35a;
  --nb-b: #ff9635;
  --nb-a-rgb: 255, 211, 90;
  --nb-b-rgb: 255, 150, 53;
  --nb-text: #fff8df;
}

/* Delete, reject, archive and report actions. */
:is(
  .btn.danger,
  .btn.archive,
  .btn.dangerbtn,
  .btn.danger-soft,
  .btn.bad,
  .btn.listing-report-btn,
  .public-btn-danger,
  .public-btn-danger-soft,
  .rowbtn.reject,
  .rowbtn.danger,
  .miniBtn[data-live-action='decline'],
  .miniBtn[data-order-action='reject']
) {
  --nb-a: #ff3aa4;
  --nb-b: #ff174f;
  --nb-a-rgb: 255, 58, 164;
  --nb-b-rgb: 255, 23, 79;
  --nb-text: #fff5fa;
  --nb-orbit-duration: 60s;
}

/* Override legacy !important fills while keeping the new dark centre. */
:is(.btn.danger, .btn.archive, .btn.dangerbtn, .rowbtn.reject, .rowbtn.danger) {
  border-color: transparent !important;
  background:
    linear-gradient(94deg, rgba(var(--nb-a-rgb), .19), rgba(15, 2, 17, .995) 47%, rgba(var(--nb-b-rgb), .17)) padding-box,
    linear-gradient(90deg, var(--nb-a) 0%, var(--nb-a) 18%, color-mix(in srgb, var(--nb-a) 48%, var(--nb-b)) 54%, var(--nb-b) 100%) border-box !important;
  color: var(--nb-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(255, 255, 255, .55),
    inset 18px 0 28px rgba(var(--nb-a-rgb), .16),
    inset -18px 0 30px rgba(var(--nb-b-rgb), .15),
    0 0 5px rgba(var(--nb-a-rgb), .82),
    -8px 0 20px rgba(var(--nb-a-rgb), .42),
    8px 0 22px rgba(var(--nb-b-rgb), .38),
    0 12px 28px rgba(0, 0, 0, .42) !important;
}

:is(.btn.warn, .btn.gold, .public-btn-warning, .rowbtn.warningbtn) {
  border-color: transparent !important;
  background:
    linear-gradient(94deg, rgba(var(--nb-a-rgb), .18), rgba(17, 11, 2, .995) 47%, rgba(var(--nb-b-rgb), .16)) padding-box,
    linear-gradient(90deg, var(--nb-a) 0%, var(--nb-a) 18%, color-mix(in srgb, var(--nb-a) 48%, var(--nb-b)) 54%, var(--nb-b) 100%) border-box !important;
  color: var(--nb-text) !important;
}

/* Unified dropdown affordance: one clean cyan caret and one safe edge inset
   across public pages, customer/creator cabinets and the admin workspace. */
select:not([multiple]):not([size]):not([data-creator-select-decorated="1"]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 46px !important;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #30e0ee 50%),
    linear-gradient(135deg, #30e0ee 50%, transparent 50%),
    radial-gradient(circle at calc(100% - 19px) 50%, rgba(48, 224, 238, .13), transparent 13px) !important;
  background-position:
    calc(100% - 24px) 50%,
    calc(100% - 18px) 50%,
    0 0 !important;
  background-size: 6px 6px, 6px 6px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

select:not([multiple]):not([size]):not([data-creator-select-decorated="1"]):focus {
  border-color: rgba(48, 224, 238, .76);
}

select:not([multiple]):not([size]):not([data-creator-select-decorated="1"]):disabled {
  cursor: not-allowed;
}

details > summary::marker {
  color: #30e0ee;
}

@keyframes nbEdgeBreathe {
  from { opacity: .68; filter: blur(2px) brightness(.9); }
  to { opacity: 1; filter: blur(1px) brightness(1.2); }
}

@keyframes nbCircuitryDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 7px, 31px 0; }
}

@media (min-width: 1181px) {
  .public-site-header .public-header-container {
    padding-right: 10px;
  }
}

@media (max-width: 920px) {
  :where(button, a, input, label, [role='button']):is(.btn:not(.btn-round):not(.iconbtn):not(.info-btn), .public-btn:not(.public-btn-round), .drawer-action) {
    min-height: 44px;
    padding-inline: 16px;
  }

  :where(button, a, input, label, [role='button']):is(.rowbtn, .miniBtn) {
    min-height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(button, a, input, label, [role='button']):is(
    .btn:not(.btn-round):not(.iconbtn):not(.info-btn),
    .public-btn:not(.public-btn-round),
    .drawer-action,
    .rowbtn,
    .miniBtn
  ) {
    transition-duration: .01ms;
  }

  .nb-particle-canvas { opacity: .72; }

  .nb-button-edge,
  .nb-button-circuitry { animation: none; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 760px),
  (prefers-reduced-motion: no-preference) and (pointer: coarse) {
  .nb-button-edge {
    animation: nbEdgeBreathe 6s steps(24, end) infinite alternate;
  }

  .nb-button-circuitry {
    animation: nbCircuitryDrift 14s steps(28, end) infinite;
  }
}