:root {
  --uni-bg: #07080b;
  --uni-bg-soft: #0b0d12;
  --uni-panel: #11141b;
  --uni-panel-strong: #171b24;
  --uni-line: #2a303c;
  --uni-line-strong: #384252;
  --uni-text: #eef2f7;
  --uni-muted: #8f98a8;
  --uni-muted-2: #606979;
  --uni-accent: #3ba7ff;
  --uni-accent-strong: #66e7ff;
  --uni-cyan: #38bdf8;
  --uni-warn: #fbbf24;
  --uni-danger: #fb7185;
  --uni-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

html[data-blueperp-booting] body {
  visibility: hidden;
}

html[data-blueperp-local-ui] *,
html[data-blueperp-local-ui] *::before,
html[data-blueperp-local-ui] *::after {
  box-sizing: border-box;
  letter-spacing: 0 !important;
}

html[data-blueperp-local-ui] body {
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(ellipse at 52% -16%, rgba(56, 189, 248, 0.12), transparent 48%),
    linear-gradient(180deg, #090a0e 0%, var(--uni-bg) 58%, #050609 100%);
  background-size: 40px 40px, 40px 40px, auto, auto;
  color: var(--uni-text);
}

html[data-blueperp-local-ui] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(59, 167, 255, 0.05), transparent 220px);
  z-index: 0;
}

html[data-blueperp-local-ui] body > div {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

html[data-blueperp-local-ui] header,
[data-ui-header] {
  height: 60px !important;
  padding-inline: 18px !important;
  background: rgba(12, 14, 20, 0.86) !important;
  border-color: rgba(59, 167, 255, 0.12) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 14px 42px rgba(0, 0, 0, 0.28);
  overflow: visible !important;
  position: relative;
  z-index: 80;
}

html[data-blueperp-local-ui] header > .relative,
html[data-blueperp-local-ui] header [class~="relative"],
[data-ui-header] > .relative,
[data-ui-header] [class~="relative"] {
  overflow: visible !important;
  z-index: 90;
}

html[data-blueperp-local-ui] header [class*="absolute"],
html[data-blueperp-local-ui] header [role="menu"],
html[data-blueperp-local-ui] header [data-radix-popper-content-wrapper],
[data-ui-header] [class*="absolute"],
[data-ui-header] [role="menu"],
[data-ui-header] [data-radix-popper-content-wrapper] {
  z-index: 120 !important;
}

html[data-blueperp-local-ui] header img,
[data-ui-header] img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(59, 167, 255, 0.28), 0 0 22px rgba(59, 167, 255, 0.14);
}

html[data-blueperp-local-ui] header .text-accent.text-lg,
[data-ui-header] .text-accent.text-lg {
  color: var(--uni-text) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 24px rgba(59, 167, 255, 0.22);
}

html[data-blueperp-local-ui] header a,
[data-ui-header] a {
  align-items: center;
  border: 1px solid transparent !important;
  border-radius: 6px;
  color: var(--uni-muted) !important;
  display: inline-flex;
  height: 30px;
  padding: 0 8px;
  text-decoration: none !important;
}

html[data-blueperp-local-ui] header a:hover,
[data-ui-header] a:hover {
  background: rgba(59, 167, 255, 0.08);
  border-color: rgba(59, 167, 255, 0.25) !important;
  color: var(--uni-accent) !important;
}

[data-base-status] {
  align-items: center;
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 999px;
  color: var(--uni-warn);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  height: 26px;
  line-height: 1;
  margin-left: 6px;
  padding: 0 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-base-status][data-status="ready"] {
  border-color: rgba(59, 167, 255, 0.42);
  color: var(--uni-accent);
}

[data-base-status][data-status="missing"],
[data-base-status][data-status="error"] {
  border-color: rgba(251, 113, 133, 0.42);
  color: var(--uni-danger);
}

html[data-blueperp-local-ui] header button,
[data-ui-header] button {
  min-height: 34px;
  border-radius: 7px !important;
  background: rgba(59, 167, 255, 0.14) !important;
  border-color: rgba(59, 167, 255, 0.82) !important;
  color: var(--uni-accent) !important;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px rgba(59, 167, 255, 0.08);
}

html[data-blueperp-local-ui] header button:hover,
[data-ui-header] button:hover {
  background: rgba(59, 167, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 30px rgba(59, 167, 255, 0.16);
}

html[data-blueperp-local-ui] main,
[data-ui-main] {
  gap: 12px !important;
  padding: 12px !important;
}

html[data-blueperp-local-ui] main > aside,
html[data-blueperp-local-ui] main > section > div,
[data-ui-trade-panel],
[data-ui-chart-card],
[data-ui-positions-card] {
  border: 1px solid rgba(59, 167, 255, 0.11) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, var(--uni-panel-strong) 0%, var(--uni-panel) 100%) !important;
  box-shadow: var(--uni-shadow);
}

[data-ui-trade-panel] {
  padding: 13px !important;
}

[data-ui-market-panel] {
  gap: 12px !important;
}

@media (min-width: 768px) {
  html[data-blueperp-local-ui] main,
  [data-ui-main] {
    grid-template-columns: minmax(330px, 372px) minmax(0, 1fr) !important;
  }

  html[data-blueperp-local-ui] main > aside,
  html[data-blueperp-local-ui] main > section,
  [data-ui-main] > [data-ui-trade-panel],
  [data-ui-main] > [data-ui-market-panel] {
    grid-column: auto !important;
  }

  html[data-blueperp-local-ui] main > aside,
  [data-ui-trade-panel] {
    align-self: start;
    height: fit-content;
    max-height: calc(100vh - 84px);
  }
}

html[data-blueperp-local-ui] aside .flex.gap-1.mb-3,
[data-ui-tabs] {
  background: rgba(5, 6, 9, 0.72);
  border: 1px solid rgba(42, 48, 60, 0.9);
  border-radius: 8px;
  gap: 4px !important;
  margin-bottom: 14px !important;
  padding: 4px;
}

html[data-blueperp-local-ui] aside .flex.gap-1.mb-3 button,
button[data-local-swap-tab] {
  border-radius: 6px !important;
  border-color: transparent !important;
  min-height: 34px;
  outline: none;
}

button[data-local-swap-tab][aria-pressed="true"] {
  background:
    linear-gradient(180deg, rgba(59, 167, 255, 0.24), rgba(59, 167, 255, 0.12)) !important;
  border-color: rgba(59, 167, 255, 0.68) !important;
  color: var(--uni-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

button[data-local-swap-tab][aria-pressed="false"],
button[data-local-swap-tab][data-ui-state="idle"] {
  background: transparent !important;
  color: var(--uni-muted) !important;
}

button[data-local-swap-tab]:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--uni-text) !important;
}

button[data-local-swap-tab]:focus-visible {
  box-shadow: 0 0 0 2px rgba(59, 167, 255, 0.28);
}

[data-ui-order-content] {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
}

[data-ui-order-content] .text-accent.text-sm {
  align-items: center;
  color: var(--uni-accent) !important;
  display: flex;
  font-size: 13px !important;
  font-weight: 800 !important;
  justify-content: space-between;
  margin-bottom: 2px;
}

[data-ui-mode="trade"] [data-ui-order-content] .text-accent.text-sm::after {
  content: "isolated margin";
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 999px;
  color: var(--uni-cyan);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
}

[data-ui-trade-panel] label,
[data-ui-trade-panel] .text-muted,
.blueperp-swap-label {
  color: var(--uni-muted) !important;
}

[data-ui-amount-input],
[data-ui-trade-panel] input[type="number"] {
  background: rgba(5, 6, 9, 0.75) !important;
  border: 1px solid rgba(56, 189, 248, 0.12) !important;
  border-radius: 7px !important;
  color: var(--uni-text) !important;
  font-size: 16px !important;
  font-weight: 800;
  min-height: 42px;
  padding-inline: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

[data-ui-amount-input]:focus,
[data-ui-trade-panel] input[type="number"]:focus {
  border-color: rgba(59, 167, 255, 0.76) !important;
  box-shadow: 0 0 0 2px rgba(59, 167, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-ui-trade-panel] [class*="space-y-1"],
[data-ui-order-content] .bg-bg.border {
  background: rgba(5, 6, 9, 0.48) !important;
  border-color: rgba(42, 48, 60, 0.92) !important;
  border-radius: 7px !important;
}

[data-ui-trade-panel] [class*="space-y-1"] > div,
[data-ui-order-content] .bg-bg.border > div {
  min-height: 25px;
}

[data-ui-trade-panel] button {
  border-radius: 6px !important;
}

[data-ui-trade-panel] .bg-accent\/20,
[data-ui-trade-panel] button[class*="bg-accent"] {
  background: rgba(59, 167, 255, 0.18) !important;
  border-color: rgba(59, 167, 255, 0.7) !important;
  color: var(--uni-accent) !important;
}

[data-ui-trade-panel] button[class*="bg-bg"] {
  background: rgba(5, 6, 9, 0.62) !important;
  border-color: rgba(42, 48, 60, 0.94) !important;
}

[data-ui-trade-panel] button:hover {
  border-color: rgba(59, 167, 255, 0.45) !important;
}

[data-ui-trade-panel] .text-danger,
.text-danger {
  color: var(--uni-danger) !important;
}

[data-ui-trade-panel] .text-warn,
.text-warn {
  color: var(--uni-warn) !important;
}

[data-ui-chart-card] {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

[data-ui-chart-card]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.07), transparent 34%, rgba(59, 167, 255, 0.035));
  z-index: 0;
}

[data-ui-chart-card] > * {
  position: relative;
  z-index: 1;
}

[data-ui-chart-card] .border-b {
  border-color: rgba(42, 48, 60, 0.9) !important;
  background: rgba(6, 7, 11, 0.24);
}

[data-ui-chart-card] .text-accent {
  color: var(--uni-accent-strong) !important;
}

[data-ui-chart-card] .text-muted {
  color: var(--uni-muted) !important;
}

[data-ui-chart-card] button {
  background: rgba(5, 6, 9, 0.62) !important;
  border-color: rgba(42, 48, 60, 0.9) !important;
  border-radius: 6px !important;
}

[data-ui-chart-card] button:hover {
  border-color: rgba(59, 167, 255, 0.46) !important;
}

[data-ui-chart-card] svg {
  color: #2b3442;
}

[data-ui-chart-card] svg path[stroke="#3ba7ff"] {
  stroke: var(--uni-accent-strong);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 10px rgba(59, 167, 255, 0.22));
}

[data-ui-chart-card] svg line.text-border {
  color: #26303d !important;
}

[data-ui-chart-card] svg text {
  fill: var(--uni-muted-2) !important;
}

[data-ui-chart-card] svg circle.text-warn {
  color: var(--uni-warn) !important;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.28));
}

[data-ui-positions-card] {
  overflow: hidden;
}

[data-ui-positions-card] .border-b {
  background: rgba(6, 7, 11, 0.34);
  border-color: rgba(42, 48, 60, 0.9) !important;
}

[data-ui-positions-card] button {
  border-radius: 6px !important;
  min-width: 66px;
}

[data-ui-positions-card] button.bg-bg {
  background: var(--uni-text) !important;
  color: var(--uni-bg) !important;
}

[data-ui-positions-card] .italic {
  align-self: center;
  background: rgba(5, 6, 9, 0.5);
  border: 1px dashed rgba(143, 152, 168, 0.24);
  border-radius: 8px;
  color: var(--uni-muted) !important;
  display: flex;
  flex: 0 0 auto !important;
  font-style: normal !important;
  justify-content: center;
  min-height: 74px;
  padding: 14px 18px;
  width: min(420px, calc(100% - 32px));
}

[data-local-swap-panel] {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
}

.blueperp-swap-form {
  min-height: 100%;
}

.blueperp-mode-pill {
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 999px;
  color: var(--uni-cyan);
  float: right;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 7px;
}

.blueperp-swap-field {
  background: rgba(5, 6, 9, 0.48);
  border: 1px solid rgba(42, 48, 60, 0.92);
  border-radius: 7px;
  padding: 9px;
}

.blueperp-swap-field:focus-within {
  border-color: rgba(59, 167, 255, 0.76);
  box-shadow: 0 0 0 2px rgba(59, 167, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.blueperp-swap-input-row,
.blueperp-swap-output-row {
  align-items: center;
  background: rgba(5, 6, 9, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.12);
  border-radius: 7px;
  display: flex;
  gap: 10px;
  min-height: 42px;
  padding: 0 8px 0 10px;
}

.blueperp-swap-amount,
.blueperp-swap-output {
  background: transparent !important;
  border: 0 !important;
  color: var(--uni-text) !important;
  flex: 1 1 auto;
  font-size: 16px !important;
  font-weight: 800;
  min-width: 0;
  outline: none;
  padding: 0 !important;
}

.blueperp-swap-output {
  align-items: center;
  display: flex;
  min-height: 40px;
}

.blueperp-balance-button {
  color: var(--uni-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  max-width: 58%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blueperp-balance-button:hover {
  color: var(--uni-accent);
}

.blueperp-token-button {
  align-items: center;
  background: rgba(59, 167, 255, 0.12);
  border: 1px solid rgba(59, 167, 255, 0.46);
  border-radius: 6px;
  color: var(--uni-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  min-width: 64px;
  padding: 0 10px;
}

.blueperp-token-button:hover {
  background: rgba(59, 167, 255, 0.18);
  border-color: rgba(59, 167, 255, 0.78);
  color: var(--uni-accent);
}

.blueperp-swap-card {
  background: rgba(5, 6, 9, 0.68);
  border: 1px solid rgba(42, 48, 60, 0.95);
  border-radius: 8px;
  padding: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.blueperp-swap-card:focus-within {
  border-color: rgba(59, 167, 255, 0.76);
  box-shadow: 0 0 0 2px rgba(59, 167, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.blueperp-swap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.blueperp-swap-label {
  font-size: 11px;
}

.blueperp-swap-input {
  width: 100%;
  min-width: 0;
  background: transparent;
  color: var(--uni-text);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  padding: 7px 0 0;
}

.blueperp-swap-input::placeholder {
  color: #3f4856;
}

.blueperp-token-pill {
  align-items: center;
  background: rgba(56, 189, 248, 0.09);
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 7px;
  color: var(--uni-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  min-width: 66px;
  padding: 0 10px;
  white-space: nowrap;
}

.blueperp-swap-flip {
  align-items: center;
  background: #10141c;
  border: 1px solid rgba(59, 167, 255, 0.38);
  border-radius: 999px;
  color: var(--uni-accent);
  display: flex;
  height: 34px;
  justify-content: center;
  margin: -2px auto;
  width: 42px;
}

.blueperp-swap-flip:hover {
  background: rgba(59, 167, 255, 0.14);
  border-color: rgba(59, 167, 255, 0.82);
}

.blueperp-swap-summary {
  background: rgba(5, 6, 9, 0.52);
  border: 1px solid rgba(42, 48, 60, 0.92);
  border-radius: 8px;
  padding: 9px 10px;
}

.blueperp-swap-summary-row {
  align-items: center;
  color: var(--uni-muted);
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  padding: 3px 0;
}

.blueperp-swap-summary-row span:last-child {
  color: var(--uni-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.blueperp-swap-action {
  background: linear-gradient(180deg, rgba(59, 167, 255, 0.22), rgba(59, 167, 255, 0.12));
  border: 1px solid rgba(59, 167, 255, 0.82);
  border-radius: 7px;
  color: var(--uni-accent);
  font-size: 12px;
  font-weight: 800;
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

.blueperp-swap-action:hover {
  background: rgba(59, 167, 255, 0.25);
}

.blueperp-swap-action:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.blueperp-secondary-action {
  background: rgba(5, 6, 9, 0.62);
  border: 1px solid rgba(42, 48, 60, 0.94);
  border-radius: 7px;
  color: var(--uni-muted);
  font-size: 12px;
  font-weight: 800;
  min-height: 38px;
  padding: 9px 12px;
  width: 100%;
}

.blueperp-secondary-action:hover {
  border-color: rgba(59, 167, 255, 0.45);
  color: var(--uni-text);
}

.blueperp-secondary-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.blueperp-swap-status {
  align-items: center;
  background: rgba(5, 6, 9, 0.48);
  border: 1px solid rgba(42, 48, 60, 0.78);
  border-radius: 7px;
  color: var(--uni-muted);
  display: flex;
  font-size: 11px;
  gap: 8px;
  justify-content: space-between;
  line-height: 1.35;
  min-height: 34px;
  padding: 8px 10px;
}

.blueperp-swap-status a {
  color: var(--uni-accent);
  flex: 0 0 auto;
  text-decoration: none;
}

.blueperp-swap-status a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  html[data-blueperp-local-ui],
  html[data-blueperp-local-ui] body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  [data-ui-header] {
    height: auto !important;
    min-height: 58px;
    padding: 10px 12px !important;
  }

  [data-ui-header] > div:first-child {
    gap: 8px !important;
    min-width: 0;
    overflow: hidden;
  }

  [data-ui-header] button {
    font-size: 11px !important;
    min-height: 32px;
    padding-inline: 10px !important;
    white-space: nowrap;
  }

  [data-ui-main] {
    padding: 10px !important;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  [data-ui-trade-panel] {
    align-self: stretch;
    min-width: 0;
    overflow: hidden;
    width: 100%;
  }

  [data-ui-tabs],
  [data-ui-trade-panel] .flex.gap-1 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  [data-ui-trade-panel] .flex.gap-1 button,
  button[data-local-swap-tab] {
    min-width: 0;
    padding-inline: 4px !important;
  }

  [data-ui-chart-card],
  [data-ui-positions-card] {
    min-width: 0;
    width: 100%;
  }

  [data-ui-chart-card] {
    min-height: 340px;
  }

  [data-ui-chart-card] > div > .border-b {
    align-items: flex-start !important;
  }

  [data-ui-chart-card] button[aria-label*="copy token"] {
    display: none !important;
  }
}

@media (max-width: 520px) {
  [data-ui-header] a[href="/whitepaper"],
  [data-ui-header] a[href="whitepaper.html"] {
    display: none !important;
  }

  [data-ui-header] .text-accent.text-lg {
    font-size: 18px !important;
  }
}