/* Uniswap panel polish */

:root {
  --sk-base: #f2f2f2;
  --sk-highlight: #e8e8e8;
  --sk-shine: #fafafa;
  --uni-accent: #ff37c7;
  --uni-accent-hover: #e500a5;
  --uni-accent-soft: rgba(255, 55, 199, 0.1);
  --uni-text: #131313;
  --uni-text-muted: rgba(19, 19, 19, 0.63);
  --uni-surface: #ffffff;
}

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

body {
  color: var(--uni-text);
  background: var(--uni-surface);
}

/* Hero — centered column like OG (headline → swap → subtext) */
[data-testid="landing-page"] [class*="_alignSelf-center"][class*="_maxWidth-85vw"] {
  align-items: center !important;
  width: 100%;
}

[data-testid="landing-page"] [class*="_maxWidth-920px"][class*="_alignItems-center"] {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  width: 100%;
}

[data-testid="landing-page"] h1.font_heading {
  display: block !important;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  text-align: center !important;
  white-space: nowrap !important;
}

[data-testid="landing-page"] h1.font_heading span {
  display: inline !important;
  width: auto !important;
  text-align: inherit !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

[data-testid="landing-page"] [class*="ccImNK"],
[data-testid="landing-page"] [class*="ccImNR"] {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  pointer-events: auto !important;
}

[data-testid="landing-page"] [class*="ccImNR"] > span {
  display: block;
  text-align: center;
  max-width: 430px;
}

/* Partial skeleton — nav + headline load immediately; swap widget stays skeleton forever */
.uni-swap-card-host {
  position: relative;
  width: 480px;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  min-height: 380px;
}

body.uni-swap-stuck .uni-swap-card-host > :not(.uni-swap-skeleton) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.uni-swap-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 0;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.uni-swap-skeleton__field {
  border-radius: 20px;
  border: 1px solid rgba(19, 19, 19, 0.08);
  background: var(--uni-surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uni-swap-skeleton__field-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.uni-swap-skeleton__field-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.uni-swap-skeleton__token {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uni-swap-skeleton__arrow {
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    var(--sk-base) 0%,
    var(--sk-highlight) 50%,
    var(--sk-base) 100%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  margin: -8px 0;
  z-index: 1;
}

.uni-swap-skeleton__cta {
  margin-top: 4px;
}

.uni-swap-skeleton__cta .sk-bar {
  border-radius: 20px;
  height: 3.5rem !important;
  background: linear-gradient(
    90deg,
    rgba(255, 55, 199, 0.08) 0%,
    rgba(255, 55, 199, 0.14) 50%,
    rgba(255, 55, 199, 0.08) 100%
  ) !important;
  background-size: 200% 100%;
}

/* Traffic modal — Uniswap light theme */
.hl-init-brand {
  display: block;
  width: 140px;
  height: 28px;
  margin: 0 auto 20px;
}

.hl-init-brand--sm {
  width: 120px;
  height: 24px;
  margin-bottom: 16px;
}

.hl-traffic-dialog {
  border-color: rgba(19, 19, 19, 0.08);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(19, 19, 19, 0.12);
  font-family: Basel, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hl-traffic-close {
  display: none !important;
}

.hl-init-brand-box {
  background: var(--uni-accent-soft);
  border-color: rgba(255, 55, 199, 0.18);
  border-radius: 16px;
}

.hl-init-brand-svg {
  color: var(--uni-accent);
}

.hl-init-heading,
.hl-verify-title {
  color: var(--uni-text);
}

.hl-init-tagline,
.hl-verify-body {
  color: var(--uni-text-muted);
}

.hl-verify-body strong {
  color: var(--uni-text);
}

.hl-init-session {
  border-color: rgba(19, 19, 19, 0.1);
  color: var(--uni-text-muted);
}

.hl-init-session-dot {
  background: var(--uni-accent);
  box-shadow: 0 0 6px rgba(255, 55, 199, 0.35);
}

.hl-init-step:not(:last-child)::before {
  background: rgba(19, 19, 19, 0.08);
}

.hl-init-step-icon {
  border-color: rgba(19, 19, 19, 0.1);
  background: rgba(19, 19, 19, 0.02);
  border-radius: 12px;
}

.hl-init-step.is-done .hl-init-step-icon {
  border-color: rgba(255, 55, 199, 0.35);
  color: var(--uni-accent);
}

.hl-init-step.is-active .hl-init-step-icon {
  border-color: rgba(255, 55, 199, 0.4);
}

.hl-init-step-spinner {
  border: 2.5px solid rgba(19, 19, 19, 0.08);
  border-top-color: var(--uni-accent);
  border-right-color: rgba(255, 55, 199, 0.3);
}

.hl-init-step-title {
  color: var(--uni-text);
}

.hl-init-step-meta {
  color: rgba(19, 19, 19, 0.45);
}

.hl-init-step-badge {
  background: var(--uni-accent-soft);
  color: var(--uni-accent);
}

.hl-init-notice {
  color: var(--uni-text-muted);
  background: #f9f9f9;
  border-radius: 16px;
}

.hl-init-start,
.hl-verify-submit,
.hl-bind-verify {
  background: var(--uni-accent);
  color: #ffffff;
  border-radius: 20px;
}

.hl-init-start:hover,
.hl-verify-submit:hover,
.hl-bind-verify:hover:not(:disabled) {
  background: var(--uni-accent-hover);
}

.hl-verify-remember span {
  color: var(--uni-text-muted);
}

.hl-verify-remember input {
  accent-color: var(--uni-accent);
}

.hl-bind-heading {
  color: var(--uni-text);
}

.hl-bind-text {
  color: rgba(19, 19, 19, 0.75);
}

.hl-bind-num {
  color: var(--uni-accent);
}

.hl-bind-device-pill {
  border-color: rgba(19, 19, 19, 0.1);
  color: var(--uni-text);
}

.hl-bind-verify .hl-bind-verify-spinner {
  border: 2.5px solid rgba(255, 255, 255, 0.22);
  border-top-color: #ffffff;
  border-right-color: rgba(255, 255, 255, 0.55);
}