/* Iridescent alien shell. Shapes and color only. Ledger behavior is untouched. */
@property --iris-turn {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

:root {
  --iris-turn: 18deg;
}

@keyframes iris-drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 1%, 0) scale(1); }
}

@keyframes iris-blob {
  0%, 100% { border-radius: 1.7rem 2.2rem 1.5rem 2rem; }
  50% { border-radius: 2.2rem 1.4rem 2rem 1.6rem; }
}

#app-ink::before {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none !important;
  background:
    radial-gradient(42% 32% at 18% 22%, rgba(125, 255, 232, 0.42), transparent 62%),
    radial-gradient(36% 40% at 82% 12%, rgba(255, 150, 220, 0.34), transparent 64%),
    radial-gradient(48% 36% at 64% 84%, rgba(170, 150, 255, 0.36), transparent 66%),
    radial-gradient(28% 22% at 40% 48%, rgba(255, 230, 150, 0.18), transparent 70%),
    repeating-radial-gradient(circle at 50% 42%, transparent 0 22px, rgba(255, 255, 255, 0.045) 23px 24px);
  animation: iris-drift 26s ease-in-out infinite alternate;
}

html[data-sky="dark"] #app-ink::before {
  background:
    radial-gradient(40% 34% at 16% 18%, rgba(90, 255, 220, 0.28), transparent 64%),
    radial-gradient(34% 38% at 84% 16%, rgba(190, 120, 255, 0.32), transparent 66%),
    radial-gradient(46% 34% at 58% 86%, rgba(80, 160, 255, 0.26), transparent 68%),
    repeating-radial-gradient(circle at 48% 40%, transparent 0 26px, rgba(180, 255, 240, 0.035) 27px 28px);
}

html[data-day="midday"] #app-ink::before {
  background:
    radial-gradient(44% 36% at 20% 20%, rgba(255, 255, 255, 0.38), transparent 64%),
    radial-gradient(36% 40% at 78% 18%, rgba(186, 190, 198, 0.45), transparent 66%),
    radial-gradient(48% 34% at 50% 82%, rgba(150, 156, 166, 0.4), transparent 68%),
    repeating-radial-gradient(circle at 50% 40%, transparent 0 24px, rgba(255, 255, 255, 0.08) 25px 26px);
}

.panel,
.glass-bar,
.login-card,
.lfqp-menubar {
  position: relative;
  border-radius: 1.8rem !important;
  animation: iris-blob 16s ease-in-out infinite;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.18)),
    conic-gradient(from var(--iris-turn), rgba(125, 255, 232, 0.45), rgba(255, 170, 230, 0.38), rgba(255, 226, 150, 0.36), rgba(160, 180, 255, 0.42), rgba(125, 255, 232, 0.45)) !important;
  background-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 18px 40px -28px rgba(40, 20, 80, 0.45) !important;
}

.well,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  border-radius: 1.15rem !important;
  background-color: rgba(255, 255, 255, 0.38) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.12)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(160, 220, 255, 0.45) !important;
}

button:not(.currency-bill),
.lfqp-menubar-btn,
[role="tab"],
.lfqp-site-footer a,
nav a {
  border-radius: 999px !important;
}

nav.lfqp-menubar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem !important;
  overflow: hidden;
  isolation: auto;
  border-radius: 999px !important;
  animation: none !important;
  background-color: rgba(255, 255, 255, 0.22) !important;
  background-image: linear-gradient(
    105deg,
    rgba(125, 255, 232, 0.22),
    rgba(255, 180, 234, 0.18) 34%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(183, 198, 255, 0.18) 68%,
    rgba(255, 226, 154, 0.16)
  ) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

nav.lfqp-menubar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  backdrop-filter: blur(22px) saturate(1.45);
}

.lfqp-menubar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    rgba(125, 255, 232, 0.16) 0%,
    rgba(255, 255, 255, 0.34) 18%,
    rgba(255, 180, 234, 0.22) 36%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(183, 198, 255, 0.2) 68%,
    rgba(255, 226, 154, 0.16) 84%,
    rgba(125, 255, 232, 0.16) 100%
  );
}

.lfqp-menubar-btn,
a.lfqp-menubar-btn {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  z-index: 3;
}

.lfqp-swipe-thumb,
.lfqp-swipe-thumb::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

button.bg-accent,
.bg-accent {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 46%),
    conic-gradient(from var(--iris-turn), #7dffe8, #ffb4ea, #ffe29a, #b7c6ff, #7dffe8) !important;
  color: #102018 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 20px -12px rgba(80, 40, 140, 0.65) !important;
}

html[data-sky="dark"] nav.lfqp-menubar {
  background-color: rgba(8, 10, 22, 0.28) !important;
  background-image: linear-gradient(
    105deg,
    rgba(80, 255, 220, 0.16),
    rgba(150, 110, 255, 0.14) 34%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 140, 210, 0.12) 68%,
    rgba(80, 180, 255, 0.14)
  ) !important;
  color: #f7f4ff !important;
  animation: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(170, 255, 230, 0.38),
    0 0 28px rgba(140, 90, 255, 0.22),
    0 22px 40px -28px rgba(0, 0, 0, 0.8) !important;
}

html[data-sky="dark"] nav.lfqp-menubar::after {
  background: rgba(8, 12, 24, 0.28);
}
html[data-sky="dark"] .panel,
html[data-sky="dark"] .glass-bar,
html[data-sky="dark"] .login-card {
  background-color: rgba(8, 10, 22, 0.78) !important;
  background-image:
    linear-gradient(165deg, rgba(255, 255, 255, 0.16), transparent 36%, rgba(80, 255, 210, 0.08) 58%, rgba(190, 120, 255, 0.12)),
    conic-gradient(from var(--iris-turn), rgba(80, 255, 220, 0.22), rgba(150, 110, 255, 0.2), rgba(255, 140, 210, 0.16), rgba(80, 180, 255, 0.2), rgba(80, 255, 220, 0.22)) !important;
  color: #f7f4ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(170, 255, 230, 0.38),
    0 0 28px rgba(140, 90, 255, 0.22),
    0 22px 40px -28px rgba(0, 0, 0, 0.8) !important;
}

html[data-sky="dark"] .well,
html[data-sky="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-sky="dark"] textarea,
html[data-sky="dark"] select {
  background-color: rgba(4, 6, 14, 0.62) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2)) !important;
  color: #f4f7ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(150, 230, 255, 0.28) !important;
}

html[data-sky="dark"] :where(h1, h2, h3, h4, p, a, label, li, td, th, span, .font-display, .font-mono) {
  text-shadow: 0 0 12px rgba(160, 230, 255, 0.28) !important;
}

html[data-day="midday"] {
  --color-fg: #1c1e22;
  --color-muted: #2c3036;
  --color-subtle: #3a3e46;
  --color-accent: #4a5160;
  --color-accent-fg: #f6f7f8;
  --color-bg: #b7bcc4;
  --color-surface: #c5c9d0;
  --color-raised: #d5d8de;
}

html[data-day="midday"],
html[data-day="midday"] body {
  color: #1c1e22 !important;
  background-color: #b7bcc4 !important;
}

html[data-day="midday"] nav.lfqp-menubar {
  background-color: rgba(198, 202, 208, 0.28) !important;
  background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.35), rgba(176, 180, 188, 0.12)) !important;
}

html[data-day="midday"] nav.lfqp-menubar::after {
  background: rgba(210, 214, 220, 0.28);
}
html[data-day="midday"] .glass-bar,
html[data-day="midday"] .login-card,
html[data-day="midday"] .lfqp-menubar,
html[data-day="midday"] .well,
html[data-day="midday"] input:not([type="checkbox"]):not([type="radio"]),
html[data-day="midday"] textarea,
html[data-day="midday"] select {
  background-color: rgba(198, 202, 208, 0.88) !important;
  background-image:
    linear-gradient(165deg, rgba(255, 255, 255, 0.82), rgba(176, 180, 188, 0.35) 48%, rgba(230, 232, 236, 0.7)),
    conic-gradient(from var(--iris-turn), rgba(255, 255, 255, 0.55), rgba(190, 194, 202, 0.45), rgba(255, 255, 255, 0.4), rgba(168, 172, 180, 0.4), rgba(255, 255, 255, 0.55)) !important;
  color: #1c1e22 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(92, 96, 104, 0.28),
    0 16px 32px -24px rgba(30, 32, 38, 0.45) !important;
}

html[data-day="midday"] .lfqp-menubar::before {
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.82) 22%,
    rgba(210, 214, 220, 0.45) 50%,
    rgba(255, 255, 255, 0.7) 78%,
    rgba(186, 190, 198, 0.4) 100%
  );
}

html[data-day="midday"] button.bg-accent,
html[data-day="midday"] .bg-accent,
html[data-day="midday"] .bg-accent * {
  background-image: linear-gradient(180deg, #f4f5f7, #8d939e) !important;
  background-color: #9aa1ab !important;
  color: #1c1e22 !important;
}

html[data-day="midday"] :where(h1, h2, h3, h4, p, a, button, label, li, td, th, span, .font-display, .font-mono, .text-fg, .text-muted) {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.currency-bill,
.currency-bill * {
  animation: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html:has(#lfqp-login) #app-ink::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#lfqp-login,
#lfqp-login .login-card,
#lfqp-login .panel,
#lfqp-login .well,
#lfqp-login form,
#lfqp-login button,
#lfqp-login input,
#lfqp-login textarea,
#lfqp-login a {
  animation: none !important;
  filter: none !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

#lfqp-login .login-card,
#lfqp-login .login-card.panel {
  overflow: visible !important;
  max-height: none !important;
}

#lfqp-login input,
#lfqp-login textarea {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  text-shadow: none !important;
  font-size: 16px !important;
  min-height: 48px !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 30 !important;
}

#lfqp-login button[type="submit"],
#lfqp-login .bg-accent,
#lfqp-login a.x-signin {
  background-color: #102018 !important;
  background-image: none !important;
  color: #f4fff8 !important;
  -webkit-text-fill-color: #f4fff8 !important;
  text-shadow: none !important;
  min-height: 48px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 30 !important;
  opacity: 1 !important;
}

#app-ink::before,
#app-ink::after,
.sky-root,
.sky-root *,
#lfqp-aurora,
#lfqp-aurora * {
  pointer-events: none !important;
}

#app-ink > .relative {
  position: relative !important;
  z-index: 40 !important;
  pointer-events: auto !important;
}

.panel,
.xfer-card,
.well,
.glass-bar,
.xfer-tabs,
.xfer-tabs.well {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  animation: none !important;
}

.xfer-body > [data-tab-panel][hidden] {
  display: none !important;
}

.xfer-tabs,
.xfer-tabs.well {
  position: relative !important;
  z-index: 80 !important;
  pointer-events: auto !important;
  isolation: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  animation: none !important;
}

.xfer-tabs > a,
.xfer-tabs > button {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  touch-action: manipulation;
  filter: none !important;
  backdrop-filter: none !important;
}

html,
body,
.lfqp-desk {
  overflow-x: hidden !important;
}