/* Safe{Wallet} panel polish */

:root {
  --sk-base: #ebebed;
  --sk-highlight: #e0e0e2;
  --sk-shine: #f8f8f9;
  --sw-accent: #1db872;
  --sw-accent-bright: #33fc86;
  --sw-accent-soft: rgba(29, 184, 114, 0.12);
}

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

body {
  color: #121312;
  background: #f4f4f4;
}

/* Hide cookie consent banner */
[data-testid="cookies-popup"],
.styles_popup__tYrT2 {
  display: none !important;
}

/* Partial skeleton — logo, footer, right-side headlines load immediately */
.styles_loginContent__77BLT,
.styles_mockupImageContainer__0nlN_ {
  position: relative;
}

body.panel-loading:not(.panel-ready) .styles_loginContent__77BLT > :not(.sw-login-skeleton) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.panel-loading:not(.panel-ready) .styles_mockupImage__gcR_J {
  opacity: 0;
  visibility: hidden;
}

.styles_loginContent__77BLT > :not(.sw-login-skeleton),
.styles_mockupImage__gcR_J {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

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

.sw-mockup-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.sw-mockup-skeleton__art {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: 12px;
  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;
}

body.panel-ready .sw-login-skeleton,
body.panel-ready .sw-mockup-skeleton {
  opacity: 0;
  visibility: hidden;
}

.styles_logo__A_HYl {
  color: #121312;
}

/* Traffic modal — Safe{Wallet} light theme */
.hl-init-brand {
  display: block;
  width: 139px;
  height: 33px;
  margin: 0 auto 20px;
}

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

.hl-traffic-dialog {
  border-color: #ebebed;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(18, 19, 18, 0.12);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

.hl-init-brand-box {
  background: var(--sw-accent-soft);
  border-color: rgba(29, 184, 114, 0.2);
  border-radius: 6px;
}

.hl-init-brand-svg {
  color: #121312;
}

.hl-init-heading,
.hl-verify-title {
  color: #121312;
}

.hl-init-tagline,
.hl-verify-body {
  color: #636669;
}

.hl-verify-body strong {
  color: #121312;
}

.hl-init-session {
  border-color: rgba(18, 19, 18, 0.12);
  color: #636669;
}

.hl-init-session-dot {
  background: var(--sw-accent);
  box-shadow: 0 0 6px rgba(29, 184, 114, 0.35);
}

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

.hl-init-step-icon {
  border-color: rgba(18, 19, 18, 0.12);
  background: rgba(18, 19, 18, 0.03);
  border-radius: 6px;
}

.hl-init-step.is-done .hl-init-step-icon {
  border-color: rgba(29, 184, 114, 0.35);
  color: var(--sw-accent);
}

.hl-init-step.is-active .hl-init-step-icon {
  border-color: rgba(29, 184, 114, 0.4);
}

.hl-init-step-spinner {
  border: 2.5px solid rgba(18, 19, 18, 0.08);
  border-top-color: var(--sw-accent);
  border-right-color: rgba(29, 184, 114, 0.3);
}

.hl-init-step-title {
  color: #121312;
}

.hl-init-step-meta {
  color: #999ca5;
}

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

.hl-init-notice {
  color: #636669;
  background: #f4f4f4;
  border-radius: 6px;
}

.hl-init-start,
.hl-verify-submit,
.hl-bind-verify {
  background: #121312;
  color: #ffffff;
  border-radius: 6px;
}

.hl-init-start:hover,
.hl-verify-submit:hover,
.hl-bind-verify:hover:not(:disabled) {
  background: #3c3c3c;
}

.hl-verify-remember span {
  color: #636669;
}

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

.hl-bind-heading {
  color: #121312;
}

.hl-bind-text {
  color: #434343;
}

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

.hl-bind-device-pill {
  border-color: rgba(18, 19, 18, 0.12);
  color: #121312;
}

.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);
}