:root {
  --bg: #eef4f8;
  --bg-soft: #e7eff6;
  --panel: #ffffff;
  --panel-2: #f4f9fc;
  --panel-3: #e9f2f8;
  --line: rgba(38, 92, 128, 0.14);
  --line-strong: rgba(38, 92, 128, 0.26);
  --green: #2394cf;
  --green-bright: #3fb6ea;
  --green-deep: #1a6f9f;
  --teal: #58a9c4;
  --text: #0c2233;
  --muted: #5c7688;
  --muted-2: #8aa1b1;
  --danger: #d4685f;
  --gold: #b98a3c;
  --shadow: 0 18px 46px rgba(24, 62, 92, 0.13);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cryo-glow: rgba(86, 186, 235, 0.55);
}


* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(circle at 50% 0%, rgba(152, 188, 207, .140), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(177, 204, 220, .160), transparent 38%),
    #edf3f6;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 3px;
}

.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 16px;
  background-image: linear-gradient(rgba(71, 148, 191, .030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 148, 191, .030) 1px, transparent 1px);
  background-size: 48px 48px;
}

.stage-note {
  margin: 0;
  color: rgba(103, 123, 135, .450);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.device {
  width: min(100%, 452px);
  height: min(940px, calc(100dvh - 92px));
  min-height: 620px;
  border-radius: 24px;
  border: 1px solid rgba(36, 121, 165, .200);
  background: var(--bg);
  box-shadow:
    0 0 0 1px rgba(16, 38, 54, .275),
    0 0 0 7px rgba(232, 239, 242, .880),
    0 0 0 8px rgba(46, 128, 171, .080),
    0 38px 90px rgba(16, 38, 54, .385),
    0 0 80px rgba(120, 188, 225, .080);
  overflow: hidden;
}

.app {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(170, 199, 215, .240), transparent 40%),
    linear-gradient(180deg, #e4ecf0 0%, #e9eff2 100%);
}

.app-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(71, 144, 183, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 144, 183, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 50% 42%, black, transparent 78%);
  z-index: 0;
}

.app::before,
.app::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 68%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(35, 129, 180, .380), transparent);
  z-index: 2;
  pointer-events: none;
}

.app::before {
  top: 0;
}

.app::after {
  bottom: 0;
}

.hud-corners {
  position: absolute;
  inset: 8px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(46, 131, 177, .080);
  clip-path: polygon(0 22px, 22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.hud-corners::before,
.hud-corners::after {
  content: "";
  position: absolute;
  top: 0;
  width: 56px;
  height: 1px;
  background: rgba(57, 140, 185, .250);
}

.hud-corners::before {
  left: 44px;
}

.hud-corners::after {
  right: 44px;
}

/* Top bar ---------------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 30;
  flex: 0 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 10px 4px;
}

.topbar-inner {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 2px;
}

.nav-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #44718d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-btn:active {
  transform: scale(0.92);
}

.nav-btn svg {
  width: 23px;
  height: 23px;
  filter: drop-shadow(0 0 5px rgba(63, 138, 181, .300));
}

.banner {
  position: relative;
  height: 59px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 13px rgba(50, 150, 205, .120));
}

.banner::before,
.banner::after {
  content: "";
  position: absolute;
  clip-path: polygon(0 0, 25% 0, 25% 10%, 75% 10%, 75% 0, 100% 0, 92.5% 100%, 7.5% 100%);
}

.banner::before {
  inset: 0;
  background: linear-gradient(180deg, rgba(89, 157, 197, .900), rgba(181, 205, 220, .900));
  opacity: 0.82;
}

.banner::after {
  inset: 1px;
  background:
    radial-gradient(circle at 50% 15%, rgba(60, 143, 188, .140), transparent 70%),
    linear-gradient(180deg, #cddee9 0%, #d8e5ed 55%, #dee9ef 100%);
}

.banner span {
  position: relative;
  z-index: 1;
  font-size: 20px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: 0.015em;
  color: #0b1215;
  text-shadow: 0 1px 16px rgba(26, 81, 111, .230);
  white-space: nowrap;
}

.banner span.is-wide {
  font-size: 17px;
}

.banner span.is-extra-wide {
  font-size: 14.5px;
}

/* Main viewport ---------------------------------------------------------- */

.view {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.view::-webkit-scrollbar {
  display: none;
}

.view > .screen {
  min-height: 100%;
  animation: screen-in 360ms cubic-bezier(0.22, 0.74, 0.3, 1) both;
}

.view--home {
  overflow: hidden;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Launch ----------------------------------------------------------------- */

.launch-screen {
  position: relative;
  min-height: 100%;
  padding: 14px 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.launch-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(87, 170, 216, .090), transparent 31%),
    radial-gradient(circle at 50% 105%, rgba(95, 172, 216, .120), transparent 45%);
}

.radar {
  position: relative;
  width: min(82vw, 342px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: radar-breathe 5s ease-in-out infinite;
}

.radar::before,
.radar::after,
.ring {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.radar::before {
  inset: 0;
  border: 1px solid rgba(77, 138, 172, .130);
}

.radar::after {
  inset: 7.5%;
  border: 1px solid rgba(77, 138, 172, .090);
}

.ring--mid {
  inset: 15%;
  border: 1px solid rgba(56, 129, 171, .110);
}

.ring--dotted {
  inset: 4.5%;
  border: 2px dotted rgba(41, 119, 164, .520);
  animation: spin 34s linear infinite;
}

.ring--dashes {
  inset: 16%;
  border: 2px dashed rgba(51, 124, 166, .200);
  animation: spin-reverse 26s linear infinite;
}

.arc {
  inset: 10%;
  border: 2px solid transparent;
  border-top-color: rgba(30, 109, 154, .550);
  border-right-color: rgba(30, 109, 154, .170);
  transform: rotate(36deg);
  filter: drop-shadow(0 0 5px rgba(32, 124, 176, .250));
  animation: spin 12s linear infinite;
}

.arc--two {
  inset: 20%;
  border-top-color: transparent;
  border-right-color: rgba(30, 109, 154, .400);
  border-bottom-color: rgba(30, 109, 154, .120);
  transform: rotate(210deg);
  animation: spin-reverse 15s linear infinite;
}

.arc--three {
  inset: 28%;
  border-top-color: rgba(26, 101, 143, .400);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(96deg);
  animation: spin 9s linear infinite;
}

.go-orb {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(154px, 36vw, 178px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, #1574a9 0%, #3896ca 38%, #50a6d6 68%, #7bbce2 100%);
  box-shadow:
    0 0 0 1px rgba(24, 76, 104, .240),
    0 0 32px rgba(37, 138, 194, .420),
    0 0 90px rgba(62, 160, 215, .280),
    inset 0 -14px 36px rgba(195, 224, 241, .300),
    inset 0 14px 30px rgba(23, 70, 97, .180);
  color: rgba(255, 255, 255, .750);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.go-orb::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px solid rgba(25, 115, 166, .120);
}

.go-orb::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .068), transparent 65%);
}

.go-orb:hover {
  transform: translate(-50%, -50%) scale(1.025);
  box-shadow:
    0 0 0 1px rgba(24, 76, 104, .320),
    0 0 40px rgba(37, 138, 194, .550),
    0 0 110px rgba(62, 160, 215, .360),
    inset 0 -14px 36px rgba(195, 224, 241, .300),
    inset 0 14px 30px rgba(23, 70, 97, .200);
}

.go-orb:active {
  transform: translate(-50%, -50%) scale(0.97);
}

.go-orb span {
  position: relative;
  z-index: 2;
  margin-left: 0.08em;
  font-size: 49px;
  font-weight: 650;
  letter-spacing: 0.035em;
  text-shadow: 0 2px 20px rgba(202, 227, 241, .300);
}

.launch-foot {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(87, 115, 131, .550);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Home ------------------------------------------------------------------- */

.home-screen {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #e6edf1;
}

.home-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  pointer-events: none;
}

.home-art--backdrop {
  filter: blur(24px) saturate(0.45) brightness(0.34) contrast(1.02);
  transform: scale(1.18);
  opacity: 0.82;
}

.home-art--fg {
  filter: saturate(0.42) brightness(0.64) contrast(1.04);
  transform: scale(0.78) translateY(-7%);
  transform-origin: 50% 50%;
  transition: filter 500ms ease, transform 700ms ease;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(16, 38, 54, 1) 9%, rgba(16, 38, 54, 1) 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(16, 38, 54, 1) 6%, rgba(16, 38, 54, 1) 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(16, 38, 54, 1) 9%, rgba(16, 38, 54, 1) 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(16, 38, 54, 1) 6%, rgba(16, 38, 54, 1) 82%, transparent 100%);
  mask-composite: intersect;
}

.home-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(234, 240, 244, .820) 0%, rgba(233, 240, 244, .080) 21%, rgba(236, 242, 245, .040) 58%, rgba(235, 242, 245, .880) 87%, #eaf0f4 100%),
    radial-gradient(circle at 50% 35%, transparent 18%, rgba(236, 243, 246, .220) 75%);
}

.home-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(227, 238, 243, .110) 3px 4px);
  mix-blend-mode: multiply;
  opacity: 0.45;
}

.home-screen.is-working .home-art--backdrop {
  filter: blur(24px) saturate(0.82) brightness(0.48) contrast(1.04);
  opacity: 0.95;
}

.home-screen.is-working .home-art--fg {
  filter: saturate(1.02) brightness(0.9) contrast(1.08);
  transform: scale(0.79) translateY(-7%);
}

.home-screen.is-paused .home-art--backdrop {
  filter: blur(24px) saturate(0.5) brightness(0.38) contrast(1.02);
}

.home-screen.is-paused .home-art--fg {
  filter: saturate(0.58) brightness(0.72) contrast(1.04);
}

.home-screen.is-complete .home-art--fg {
  filter: saturate(0.7) brightness(0.73) contrast(1.04);
}

.home-screen.is-working::before {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(18, 138, 203, .130) 0%, rgba(110, 188, 232, .050) 27%, transparent 54%),
    linear-gradient(180deg, rgba(234, 240, 244, .820) 0%, rgba(233, 240, 244, .060) 21%, rgba(236, 242, 245, .030) 58%, rgba(235, 242, 245, .880) 87%, #eaf0f4 100%),
    radial-gradient(circle at 50% 35%, transparent 18%, rgba(236, 243, 246, .200) 75%);
}

.home-screen.is-working::after {
  opacity: 0.62;
  animation: scanline-drift 7s linear infinite;
}

.robot-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 360ms ease;
}

.home-screen.is-working .robot-fx {
  opacity: 1;
}

.home-screen.is-paused .robot-fx {
  opacity: 0.28;
}

.home-screen.is-complete .robot-fx {
  opacity: 0.12;
}

.fx-aura {
  position: absolute;
  left: 50%;
  top: 39.5%;
  width: min(84vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(7, 114, 172, .200) 0%, rgba(32, 151, 215, .080) 33%, transparent 67%);
  filter: blur(14px);
  mix-blend-mode: screen;
}

.home-screen.is-working .fx-aura {
  animation: aura-breathe 3.4s ease-in-out infinite;
}

.fx-frame {
  position: absolute;
  left: 50%;
  top: 38.5%;
  width: min(66vw, 280px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.fx-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
}

.fx-orbit--a {
  inset: 0;
  border-top-color: rgba(8, 105, 156, .660);
  border-right-color: rgba(8, 105, 156, .080);
  border-bottom-color: rgba(8, 105, 156, .120);
  filter: drop-shadow(0 0 5px rgba(16, 124, 181, .200));
}

.fx-orbit--b {
  inset: 10%;
  border-bottom-color: rgba(8, 105, 156, .500);
  border-left-color: rgba(8, 105, 156, .100);
}

.home-screen.is-working .fx-orbit--a {
  animation: fx-spin 11s linear infinite;
}

.home-screen.is-working .fx-orbit--b {
  animation: fx-spin-reverse 16s linear infinite;
}

.fx-bracket {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(28, 88, 119, .650);
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 0 4px rgba(16, 124, 181, .200));
}

.fx-bracket--tl { top: -8px; left: -8px; border-top-width: 1px; border-left-width: 1px; }
.fx-bracket--tr { top: -8px; right: -8px; border-top-width: 1px; border-right-width: 1px; }
.fx-bracket--bl { bottom: -8px; left: -8px; border-bottom-width: 1px; border-left-width: 1px; }
.fx-bracket--br { bottom: -8px; right: -8px; border-bottom-width: 1px; border-right-width: 1px; }

.home-screen.is-working .fx-bracket {
  animation: bracket-pulse 2.6s ease-in-out infinite;
}

.fx-scan {
  position: absolute;
  left: 50%;
  top: 24%;
  width: 66%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(28, 87, 118, .800), transparent);
  box-shadow: 0 0 12px rgba(15, 129, 189, .650);
  opacity: 0;
}

.home-screen.is-working .fx-scan {
  animation: scan-pass 4.6s ease-in-out infinite;
}

.fx-readout {
  position: absolute;
  top: 43%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  opacity: 0;
}

.fx-readout--left {
  left: 9px;
  padding-left: 6px;
  border-left: 1px solid rgba(18, 114, 164, .400);
  text-align: left;
}

.fx-readout--right {
  right: 9px;
  padding-right: 6px;
  border-right: 1px solid rgba(18, 114, 164, .400);
  text-align: right;
}

.home-screen.is-working .fx-readout {
  animation: readout-in 600ms 160ms ease both;
}

.fx-readout b {
  color: #839ca9;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.fx-readout i {
  color: #14628a;
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.04em;
}

.fx-particles {
  position: absolute;
  inset: 18% 8% 38%;
}

.fx-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #1b5371;
  box-shadow: 0 0 7px rgba(8, 114, 170, .850);
  opacity: 0;
}

.home-screen.is-working .fx-particles i {
  animation: particle-rise var(--dur) linear infinite;
  animation-delay: var(--delay);
}

.fx-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(6, 96, 146, .240), transparent 38%);
  mix-blend-mode: screen;
  opacity: 0;
}

.home-screen.is-working .fx-flash {
  animation: fx-flash 1.1s ease-out both;
}

.home-screen.is-working .side-action {
  border-color: rgba(27, 121, 172, .220);
  box-shadow: 0 9px 28px rgba(16, 38, 54, .138), 0 0 18px rgba(33, 145, 207, .060);
}

.home-screen.is-paused .home-status {
  border-color: rgba(145, 104, 27, .450);
}

.wallet-pill {
  position: absolute;
  z-index: 7;
  top: 9px;
  left: 12px;
  max-width: calc(100% - 90px);
  min-height: 28px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(36, 120, 166, .160);
  border-radius: 15px;
  background: rgba(231, 239, 244, .780);
  backdrop-filter: blur(8px);
  color: #40525c;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}

.wallet-pill svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: #396e8d;
}

.wallet-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-pill.is-test {
  border-color: rgba(154, 107, 25, .400);
  color: #574321;
  background: rgba(235, 224, 209, .720);
  box-shadow: 0 0 16px rgba(193, 137, 46, .100);
}

.wallet-pill.is-test::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 7px rgba(145, 104, 27, .600);
}

.wallet-pill.is-connected {
  border-color: rgba(16, 116, 169, .380);
  color: #152b37;
  box-shadow: 0 0 16px rgba(63, 159, 211, .100);
}

.wallet-pill.is-connected::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 7px rgba(20, 120, 173, .700);
}

.wallet-pill:active {
  transform: scale(0.98);
}

.side-actions {
  position: absolute;
  z-index: 4;
  right: 7px;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.side-action {
  position: relative;
  width: 66px;
  min-height: 70px;
  padding: 8px 4px 6px;
  border: 1px solid rgba(32, 105, 145, .100);
  border-radius: 6px;
  background: rgba(230, 238, 242, .800);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 9px 28px rgba(16, 38, 54, .138);
}

.side-action:active {
  transform: scale(0.96);
}

.side-action svg {
  width: 25px;
  height: 25px;
}

.side-action .side-label {
  max-width: 100%;
  font-size: 10.5px;
  line-height: 1.15;
  text-align: center;
  color: #232a2e;
  overflow-wrap: anywhere;
}

.home-status {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%);
  width: calc(100% - 108px);
  max-width: 306px;
  min-height: 64px;
  padding: 7px 12px 9px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid rgba(30, 117, 165, .520);
  border-radius: 5px;
  background: rgba(233, 241, 245, .920);
  box-shadow:
    0 0 0 1px rgba(16, 38, 54, .220),
    0 0 22px rgba(72, 168, 223, .100),
    inset 0 0 24px rgba(181, 210, 226, .200);
  color: #0b1013;
  text-align: center;
  animation: status-in 650ms 180ms cubic-bezier(0.21, 0.84, 0.38, 1) both;
}

.home-status::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: rgba(233, 241, 245, .900);
  border-right: 1px solid rgba(30, 117, 165, .500);
  border-bottom: 1px solid rgba(30, 117, 165, .500);
  transform: translateX(-50%) rotate(45deg);
}

.status-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #56707e;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  line-height: 1.2;
  text-transform: uppercase;
}

.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8296a1;
  box-shadow: 0 0 0 3px rgba(130, 150, 161, .100);
}

.status-running .status-dot {
  background: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(24, 119, 170, .120), 0 0 10px rgba(24, 119, 170, .550);
  animation: dot-pulse 1.6s ease-in-out infinite;
}

.status-paused .status-dot {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(145, 104, 27, .100);
}

.status-complete .status-dot {
  background: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(24, 119, 170, .140);
}

.status-main {
  margin-top: 1px;
  color: #051014;
  font-size: 22px;
  font-weight: 620;
  line-height: 1.06;
  letter-spacing: 0.025em;
  text-shadow: 0 1px 16px rgba(26, 81, 111, .160);
  font-variant-numeric: tabular-nums;
}

.home-status.status-idle .status-main {
  font-size: 14.5px;
  letter-spacing: 0.01em;
}

.status-complete .status-main {
  color: #106a99;
  font-size: 18px;
}

.status-sub {
  margin-top: 2px;
  overflow: hidden;
  color: #495a64;
  font-size: 8.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cycle-meter {
  height: 2px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(50, 125, 166, .120);
}

.cycle-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #90b8cf, #1976a7);
  box-shadow: 0 0 8px rgba(28, 131, 186, .500);
  transition: width 260ms linear;
}

.status-collect {
  min-height: 24px;
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid rgba(20, 108, 155, .360);
  border-radius: 3px;
  background: rgba(87, 168, 213, .150);
  color: #1d4255;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.status-collect:active {
  transform: scale(0.98);
}

@keyframes dot-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes status-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.hex-play {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 66px;
  height: 74px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 12px 20px rgba(16, 38, 54, .220));
}

.hex-play::before,
.hex-play::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.hex-play::before {
  inset: 0;
  background: linear-gradient(145deg, #185d82, #5da8d2 50%, #c0d5e1);
  box-shadow: 0 0 30px rgba(50, 150, 205, .240);
}

.hex-play::after {
  inset: 2px;
  background:
    radial-gradient(circle at 45% 32%, rgba(34, 84, 112, .280), transparent 50%),
    linear-gradient(145deg, #2b7eab, #5aa8d2 55%, #9cbed2);
}

.hex-play:active {
  transform: translateX(-50%) scale(0.96);
}

.hex-play:disabled {
  cursor: default;
  opacity: 0.36;
  filter: grayscale(0.75) drop-shadow(0 12px 20px rgba(16, 38, 54, .220));
}

.hex-play:disabled:active {
  transform: translateX(-50%);
}

.hex-play .play-glyph {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
}

.hex-play .play-glyph::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #051016;
  margin-left: 5px;
  filter: drop-shadow(0 1px 5px rgba(204, 226, 239, .300));
}

.home-screen.is-working .hex-play::before {
  animation: play-pulse 1.8s ease-in-out infinite;
}

.home-screen.is-working .hex-play .play-glyph::before {
  width: 12px;
  height: 17px;
  border: 0;
  margin-left: 0;
  background: linear-gradient(90deg, #051016 0 4px, transparent 4px 8px, #051016 8px 12px);
}

.home-screen.is-working .home-status {
  border-color: rgba(6, 103, 156, .700);
}

@keyframes play-pulse {
  0%,
  100% {
    box-shadow: 0 0 22px rgba(50, 150, 205, .240);
  }
  50% {
    box-shadow: 0 0 54px rgba(30, 144, 206, .500);
  }
}

/* Dock ------------------------------------------------------------------- */

.dock {
  position: relative;
  z-index: 28;
  flex: 0 0 auto;
  height: 79px;
  padding: 0 25px max(4px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: linear-gradient(180deg, rgba(230, 237, 241, .920), #e8eff2 75%);
  border-top: 1px solid rgba(52, 132, 177, .120);
  box-shadow: 0 -18px 40px rgba(16, 38, 54, .165);
}

.dock[hidden] {
  display: none;
}

.dock-button {
  height: 100%;
  padding: 4px 0 2px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #4c5b64;
  cursor: pointer;
}

.dock-button svg {
  width: 31px;
  height: 31px;
  stroke-width: 1.55;
}

.dock-button span {
  font-size: 15px;
  letter-spacing: 0.01em;
}

.dock-button:active {
  color: var(--green-bright);
}

/* Shared page styles ----------------------------------------------------- */

.page {
  padding: 14px 20px 34px;
}

.page--menu,
.page--mine {
  padding-left: 20px;
  padding-right: 20px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-item {
  position: relative;
  width: 100%;
  min-height: 67px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(65, 135, 174, .055);
  border-radius: 3px;
  display: grid;
  grid-template-columns: 48px 1fr 22px;
  align-items: center;
  gap: 12px;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(204, 220, 228, .580), rgba(219, 230, 236, .550)),
    var(--panel);
  color: #3d515b;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(25, 94, 132, .025);
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  bottom: 17px;
  width: 1px;
  background: rgba(29, 127, 182, .220);
}

.menu-item:hover {
  border-color: rgba(43, 128, 175, .150);
  background:
    linear-gradient(90deg, rgba(187, 208, 219, .700), rgba(218, 230, 236, .700)),
    var(--panel);
}

.menu-item:active {
  transform: scale(0.993);
}

.menu-item .label {
  font-size: 15.5px;
  color: #3a4349;
  letter-spacing: 0.005em;
}

.menu-item .chevron {
  justify-self: end;
  color: #5792b5;
}

.hex-icon {
  position: relative;
  width: 44px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 8px rgba(50, 146, 201, .120));
}

.hex-icon::before,
.hex-icon::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.hex-icon::before {
  inset: 0;
  background: rgba(71, 148, 193, .360);
}

.hex-icon::after {
  inset: 1px;
  background:
    radial-gradient(circle at 50% 30%, rgba(44, 137, 189, .160), transparent 62%),
    linear-gradient(180deg, #d1e0e8, #dde7ec);
}

.hex-icon svg,
.hex-icon .glyph {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  color: #2d7aa7;
}

.hex-icon .glyph {
  font-size: 20px;
  font-weight: 650;
  line-height: 1;
  display: grid;
  place-items: center;
}

.menu-foot {
  margin-top: 22px;
  text-align: center;
  color: rgba(104, 125, 137, .420);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Mine ------------------------------------------------------------------- */

.profile-row {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 5px 9px 15px;
}

.avatar-hex {
  position: relative;
  width: 61px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1b2830;
  cursor: pointer;
  filter: drop-shadow(0 0 16px rgba(55, 155, 214, .200));
}

.avatar-hex::before,
.avatar-hex::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.avatar-hex::before {
  inset: 0;
  background: linear-gradient(160deg, #1f6993, #4699c6 55%, #a3c4d7);
}

.avatar-hex::after {
  inset: 2px;
  background:
    radial-gradient(circle at 50% 30%, rgba(26, 80, 111, .250), transparent 56%),
    linear-gradient(160deg, #4f9bc5, #68b2dd 60%, #a6c7da);
}

.avatar-hex svg {
  position: relative;
  z-index: 1;
  width: 33px;
  height: 33px;
  opacity: 0.7;
  color: #14222a;
}

.profile-name {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.profile-id {
  margin: 0;
  color: #3b4348;
  font-size: 13px;
}

.profile-level {
  align-self: start;
  padding-top: 5px;
  color: #0d1112;
  font-size: 15px;
  white-space: nowrap;
  text-align: right;
}

.profile-level small {
  display: block;
  margin-bottom: 2px;
  color: #80939e;
  font-size: 7px;
  letter-spacing: 0.14em;
}

.wallet-card {
  width: 100%;
  min-height: 59px;
  margin-bottom: 8px;
  padding: 9px 13px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(65, 135, 174, .080);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(211, 224, 232, .680), rgba(221, 232, 238, .720));
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.wallet-card.is-connected {
  border-color: rgba(35, 128, 178, .180);
  box-shadow: inset 2px 0 0 rgba(50, 142, 191, .280);
}

.wallet-card.is-test {
  border-color: rgba(145, 104, 27, .260);
  box-shadow: inset 2px 0 0 rgba(145, 104, 27, .380);
}

.wallet-card.is-test .wallet-card-copy small,
.wallet-card.is-test .wallet-card-meta em {
  color: var(--gold);
}

.wallet-card.is-test .wallet-card-icon {
  background: linear-gradient(150deg, #c3995a, #d9c5ab);
}

.wallet-card-icon {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #5fa7d1, #aecbdb);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: #152630;
}

.wallet-card-icon svg {
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

.wallet-card-copy {
  min-width: 0;
}

.wallet-card-copy small {
  display: block;
  margin-bottom: 2px;
  color: #758994;
  font-size: 7px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wallet-card-copy strong {
  display: block;
  overflow: hidden;
  color: #1b2226;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-card-meta {
  text-align: right;
  white-space: nowrap;
}

.wallet-card-meta span,
.wallet-card-meta em {
  display: block;
  font-style: normal;
}

.wallet-card-meta span {
  color: #1d2428;
  font-size: 10.5px;
}

.wallet-card-meta em {
  margin-top: 2px;
  color: #3a89b5;
  font-size: 9.5px;
}

.wallet-card:active {
  transform: scale(0.995);
}

.storage-block {
  padding: 19px 16px 17px;
  margin-bottom: 8px;
  border: 1px solid rgba(71, 140, 178, .060);
  background: linear-gradient(180deg, rgba(212, 226, 233, .720), rgba(220, 231, 237, .700));
  text-align: center;
}

.storage-value {
  font-size: 25px;
  font-weight: 520;
  letter-spacing: 0.015em;
  line-height: 1.1;
}

.storage-label {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #3e474c;
  font-size: 14px;
}

.refresh-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: #80929b;
  cursor: pointer;
}

.refresh-icon svg {
  width: 16px;
  height: 16px;
}

.refresh-icon.spinning svg {
  animation: spin 700ms linear;
}

.storage-meta {
  margin-top: 8px;
  color: #7d8f99;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pending-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  padding: 13px 14px;
  border: 1px solid rgba(65, 135, 174, .070);
  background: linear-gradient(90deg, rgba(212, 226, 233, .700), rgba(221, 232, 238, .750));
}

.pending-block.has-earnings {
  border-color: rgba(25, 118, 167, .200);
  box-shadow: inset 0 0 24px rgba(93, 172, 215, .060);
}

.pending-label {
  color: #52646d;
  font-size: 11px;
  letter-spacing: 0.025em;
}

.pending-value {
  margin-top: 3px;
  color: #0e1619;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.pending-value small {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
}

.btn-collect {
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(25, 112, 158, .300);
  border-radius: 3px;
  background: rgba(91, 169, 211, .140);
  color: #176188;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-collect:active {
  transform: translateY(1px);
}

.btn-collect:disabled {
  border-color: rgba(105, 130, 143, .100);
  background: rgba(255, 255, 255, .015);
  color: #85969f;
  cursor: default;
}

.btn-primary:disabled {
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
}

.balance-block {
  padding: 17px 14px 18px;
  border: 1px solid rgba(71, 140, 178, .060);
  background: linear-gradient(180deg, #dae6ec, rgba(223, 233, 238, .900));
}

.balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.balance-value {
  font-size: 26px;
  line-height: 1.05;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.balance-value small {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin-left: 2px;
}

.balance-label {
  margin-top: 4px;
  font-size: 13px;
  color: #363c3f;
}

.btn-primary {
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid rgba(19, 60, 82, .120);
  border-radius: 3px;
  background: linear-gradient(180deg, #3b95c6, #60afdb);
  color: #050f14;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(92, 178, 227, .180), inset 0 1px 0 rgba(255, 255, 255, .112);
}

.btn-primary:active {
  transform: translateY(1px);
}

.balance-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 24px 4px 23px;
}

.split-item .value {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.split-item .value small {
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-left: 1px;
}

.split-item .label {
  margin-top: 5px;
  color: #363c3f;
  font-size: 13px;
}

.wallet-actions {
  border-top: 1px solid rgba(69, 138, 177, .075);
  padding: 6px 0 0;
}

.row-action {
  width: 100%;
  min-height: 66px;
  padding: 4px 8px;
  display: grid;
  grid-template-columns: 34px 1fr 20px;
  align-items: center;
  gap: 13px;
  border: 0;
  border-bottom: 1px solid rgba(69, 138, 177, .060);
  background: transparent;
  color: #1f2629;
  text-align: left;
  cursor: pointer;
}

.row-action:last-child {
  border-bottom: 0;
}

.row-action > svg {
  width: 22px;
  height: 22px;
  color: #181f22;
}

.row-action .row-label {
  font-size: 14.5px;
}

.row-action .chevron {
  justify-self: end;
  color: #80929b;
}

/* Coin ------------------------------------------------------------------- */

.coin-layout {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: rgba(231, 239, 242, .600);
}

.coin-rail {
  height: 100%;
  padding: 12px 7px 30px;
  overflow-y: auto;
  border-right: 1px solid rgba(81, 147, 185, .060);
  background: linear-gradient(180deg, rgba(220, 230, 235, .750), rgba(230, 237, 241, .600));
  scrollbar-width: none;
}

.coin-rail::-webkit-scrollbar {
  display: none;
}

.coin-tab {
  width: 100%;
  min-height: 78px;
  padding: 8px 2px 7px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #363d40;
  font-size: 11px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.coin-tab.active {
  background: #2a2318;
  color: #c7ced1;
}

.coin-logo {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .112);
}

.coin-logo.btc {
  background: linear-gradient(145deg, #c47508, #e78411);
  color: rgba(255, 255, 255, .750);
  font-family: Georgia, serif;
  font-size: 24px;
}

.coin-logo.eth {
  background: linear-gradient(145deg, #0e1013, #30353a);
  color: #b8bfc6;
}

.coin-logo.eth i {
  width: 17px;
  height: 27px;
  display: block;
  background: linear-gradient(160deg, #919faa 0 48%, #626e79 49% 100%);
  clip-path: polygon(50% 0, 100% 50%, 50% 72%, 0 50%);
  transform: rotate(0.001deg);
}

.coin-logo.xrp {
  background: linear-gradient(145deg, #bbbfc5, #e5e9ed);
  color: rgba(255, 255, 255, .750);
  font-size: 21px;
  font-weight: 500;
}

.coin-logo.ada {
  background: radial-gradient(circle at 40% 35%, #4888e1, #a6bce2);
  position: relative;
}

.coin-logo.ada::before {
  content: "";
  width: 21px;
  height: 21px;
  background-image: radial-gradient(circle, #185db6 1.5px, transparent 1.8px);
  background-size: 6px 6px;
  transform: rotate(30deg);
}

.coin-logo.doge {
  background: linear-gradient(145deg, #896a11, #c39c36);
  color: #dfbd74;
  font-family: Georgia, serif;
  font-size: 24px;
}

.coin-logo.sol {
  background: linear-gradient(145deg, #0b0f15, #1e262c);
  overflow: hidden;
}

.coin-logo.sol i {
  width: 26px;
  height: 18px;
  display: block;
  background:
    linear-gradient(110deg, #2c91d6 0 33%, #18668d 33% 66%, #2e7ea7 66%);
  clip-path: polygon(8% 0, 100% 0, 92% 30%, 0 30%, 0 38%, 92% 38%, 100% 68%, 8% 68%, 8% 76%, 100% 76%, 92% 100%, 0 100%);
}

.market-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.market-head {
  flex: 0 0 auto;
  min-height: 62px;
  padding: 9px 14px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(77, 141, 177, .080);
  background: linear-gradient(180deg, rgba(220, 230, 236, .720), rgba(225, 235, 240, .550));
}

.market-heading {
  min-width: 0;
}

.market-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.market-title strong {
  overflow: hidden;
  color: #0f1619;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-title > small {
  color: #7c8f98;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.market-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border: 1px solid rgba(39, 133, 182, .220);
  border-radius: 2px;
  color: #1d709c;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.market-badge i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.market-badge.cached {
  border-color: rgba(145, 104, 27, .250);
  color: var(--gold);
}

.market-badge.connecting {
  border-color: rgba(104, 130, 143, .200);
  color: #586a74;
}

.market-badge.offline {
  border-color: rgba(137, 18, 18, .250);
  color: #662a2a;
}

.market-meta {
  max-width: 300px;
  margin-top: 3px;
  overflow: hidden;
  color: #7b8d97;
  font-size: 8.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-refresh {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(67, 138, 176, .140);
  border-radius: 50%;
  background: rgba(223, 233, 238, .700);
  color: #47758f;
  cursor: pointer;
}

.market-refresh svg {
  width: 14px;
  height: 14px;
}

.market-refresh.is-loading svg {
  animation: spin 900ms linear infinite;
}

.market-refresh:active {
  transform: scale(0.94);
}

.coin-logo.bnb {
  background: linear-gradient(145deg, #d2990c, #eeb125);
  color: #f1ead6;
  font-size: 20px;
}

.coin-logo.trx {
  background: linear-gradient(145deg, #aa0f18, #df3b45);
  color: rgba(255, 255, 255, .750);
  font-size: 20px;
}

.coin-logo.ton {
  background: linear-gradient(145deg, #0d8dca, #3bacf7);
  color: rgba(255, 255, 255, .750);
  font-size: 21px;
}

.coin-logo.avax {
  background: linear-gradient(145deg, #aa0f10, #dc3940);
  color: rgba(255, 255, 255, .750);
  font-size: 18px;
}

.coin-logo.link {
  background: linear-gradient(145deg, #0f42c8, #5478e0);
  color: rgba(255, 255, 255, .750);
  border-radius: 8px;
  font-size: 18px;
}

.coin-logo.dot {
  background: linear-gradient(145deg, #1081b9, #42bbf7);
  color: rgba(255, 255, 255, .750);
  font-size: 23px;
}

.coin-logo.ltc {
  background: linear-gradient(145deg, #272727, #6a6a6a);
  color: rgba(255, 255, 255, .750);
  font-family: Georgia, serif;
  font-size: 23px;
}

.coin-logo.bch {
  background: linear-gradient(145deg, #327ea4, #71d3d3);
  color: rgba(255, 255, 255, .750);
  font-size: 17px;
}

.coin-logo.sui {
  background: linear-gradient(145deg, #065499, #3577db);
  color: rgba(255, 255, 255, .750);
  font-size: 20px;
}

.exchange-list {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 3px 14px 28px;
  overflow-y: auto;
  scrollbar-width: none;
}

.exchange-list::-webkit-scrollbar {
  display: none;
}

.exchange-row {
  min-height: 55px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(74, 138, 174, .080);
}

.exchange-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #171c1f;
  font-size: 13.5px;
}

.exchange-name small {
  margin-left: 5px;
  color: #8396a1;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.08em;
  vertical-align: 2px;
}

.exchange-value {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.exchange-price {
  color: #2e8abd;
  font-size: 12.5px;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.exchange-change {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 7.5px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.exchange-change.up { color: #277fad; }
.exchange-change.down { color: #802e23; }
.exchange-change.flat { color: #768b95; }

.exchange-logo {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 750;
  line-height: 1;
  color: rgba(255, 255, 255, .750);
  border-radius: 5px;
}

.exchange-logo.okx {
  background: #eef1f2;
  border: 1px solid #c2c7ca;
  color: #111517;
  font-size: 7px;
  letter-spacing: -0.03em;
}

.exchange-logo.bybit {
  background: #f5aa11;
  color: #ede8e1;
  font-size: 15px;
  border-radius: 4px;
}

.exchange-logo.mexc {
  background: #39a8f7;
  color: #d8e6f0;
  font-size: 12px;
}

.exchange-logo.kraken {
  background: #1f0db0;
  color: rgba(255, 255, 255, .750);
  font-size: 15px;
  border-radius: 50%;
}

.exchange-logo.kucoin {
  color: #2b97d3;
  background: transparent;
  font-size: 19px;
  font-weight: 800;
}

.exchange-logo.huobi {
  color: #18a0d5;
  background: transparent;
  font-size: 21px;
  transform: rotate(-12deg);
}

.exchange-logo.gemini {
  color: #2273d0;
  border: 2px solid currentColor;
  border-radius: 40% 60% 55% 45%;
  background: transparent;
  font-size: 0;
}

.exchange-logo.bitflyer {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: transparent;
  width: 23px;
  height: 23px;
}

.exchange-logo.bitflyer i {
  width: 8px;
  height: 8px;
  background: #141719;
  border-radius: 1px;
}

.exchange-logo.bitflyer i:nth-child(2) {
  background: #c76010;
}

.exchange-logo.gateio {
  background: #348de5;
  border-radius: 50%;
  color: rgba(255, 255, 255, .750);
  font-size: 16px;
}

.exchange-logo.lbank {
  color: #191e22;
  background: transparent;
  font-size: 13px;
  letter-spacing: -0.06em;
}

.exchange-logo.bitstamp {
  color: #39889e;
  background: transparent;
  font-size: 21px;
  font-family: Georgia, serif;
}

.exchange-logo.bitfinex {
  color: #3993bd;
  background: transparent;
  font-size: 23px;
  transform: rotate(-22deg);
}

.exchange-logo.cryptocom {
  background: #171c1f;
  border-radius: 50%;
  color: #d8dfe3;
  font-size: 15px;
}

.exchange-logo.coinbase {
  background: #1760e2;
  border-radius: 50%;
  color: rgba(255, 255, 255, .750);
  font-size: 15px;
}

.exchange-logo.binance {
  background: transparent;
  color: #d49e0f;
  font-size: 23px;
  transform: rotate(45deg);
}

.market-footnote {
  padding: 20px 2px 8px;
  color: #8ea1ab;
  font-size: 8.5px;
  line-height: 1.5;
  text-align: center;
}

.market-loading {
  min-height: 300px;
  padding: 48px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  text-align: center;
  color: #758690;
}

.market-loading b {
  color: #2b3439;
  font-size: 13px;
  font-weight: 500;
}

.market-loading small {
  max-width: 260px;
  font-size: 10px;
  line-height: 1.5;
}

.market-loading--error small {
  color: #73342b;
}

.market-loading .btn-collect {
  margin-top: 10px;
}

.market-spinner {
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  border: 2px solid rgba(42, 129, 175, .140);
  border-top-color: #2382b6;
  border-radius: 50%;
  animation: spin 900ms linear infinite;
  box-shadow: 0 0 16px rgba(38, 142, 199, .120);
}

/* Notifications / news --------------------------------------------------- */

.empty-state {
  min-height: 360px;
  padding: 34px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #707f87;
  font-size: 14px;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 24px;
}

.news-card {
  padding: 17px 17px 15px;
  border: 1px solid rgba(82, 147, 183, .060);
  background: linear-gradient(90deg, rgba(213, 226, 232, .550), rgba(223, 233, 238, .700));
}

.news-title {
  margin: 0 0 11px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #101416;
}

.news-date {
  margin: 0;
  font-size: 13px;
  color: #74848d;
}

.news-card.is-dynamic {
  border-color: rgba(41, 131, 179, .160);
  box-shadow: inset 2px 0 0 rgba(51, 142, 191, .300);
}

.notification-card {
  position: relative;
}

.notification-card::after {
  content: "";
  position: absolute;
  top: 17px;
  right: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(48, 143, 194, .700);
}

.no-more {
  padding: 22px 0 32px;
  text-align: center;
  font-size: 14px;
  color: #8898a1;
}

/* FAQ -------------------------------------------------------------------- */

.faq-list {
  padding: 12px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  scroll-margin-top: 10px;
  border: 1px solid rgba(82, 146, 183, .070);
  background: linear-gradient(180deg, rgba(215, 227, 234, .600), rgba(223, 233, 238, .700));
}

.faq-item.open {
  border-color: rgba(43, 131, 178, .180);
  background: linear-gradient(180deg, rgba(209, 223, 231, .700), rgba(221, 232, 238, .780));
  box-shadow: inset 2px 0 0 rgba(44, 137, 187, .320);
}

.faq-question {
  width: 100%;
  padding: 16px 15px;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 1fr 17px;
  gap: 12px;
  align-items: start;
  color: #4289b3;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.faq-arrow {
  width: 0;
  height: 0;
  margin-top: 4px;
  justify-self: end;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #4b98c5;
  transition: transform 180ms ease;
}

.faq-item.open .faq-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: 0 15px 18px;
  color: #262c30;
  font-size: 13.5px;
  line-height: 1.55;
}

.faq-answer p {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-item.open .faq-answer {
  display: block;
  animation: answer-in 220ms ease both;
}

@keyframes answer-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Robots ----------------------------------------------------------------- */

.level-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 9px 0 0;
  background: linear-gradient(180deg, #e2ebf0 60%, rgba(226, 235, 240, .940));
  border-bottom: 1px solid rgba(89, 152, 188, .060);
}

.level-tab {
  position: relative;
  padding: 9px 2px 13px;
  border: 0;
  background: transparent;
  color: #181d20;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
}

.level-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 30px;
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  background: #509ac5;
  transition: transform 180ms ease;
}

.level-tab.active {
  color: #3a8cbc;
  font-weight: 600;
}

.level-tab.active::after {
  transform: translateX(-50%) scaleX(1);
}

.robot-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 0 28px;
}

.robot-card.is-active {
  border-color: rgba(30, 125, 176, .200);
  background:
    linear-gradient(90deg, rgba(199, 217, 226, .820), rgba(220, 232, 238, .720));
  box-shadow: inset 2px 0 0 rgba(43, 139, 190, .380);
}

.active-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 5px;
  border: 1px solid rgba(28, 118, 167, .300);
  border-radius: 2px;
  color: #186690;
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  vertical-align: 2px;
}

.robot-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 24px;
  gap: 9px;
  align-items: center;
  padding: 11px 12px 12px 5px;
  border: 1px solid rgba(86, 149, 184, .060);
  background: linear-gradient(90deg, rgba(216, 227, 234, .700), rgba(222, 233, 238, .620));
}

.robot-thumb-wrap {
  align-self: stretch;
  min-height: 108px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.robot-thumb {
  width: 76px;
  height: 104px;
  object-fit: cover;
  object-position: center;
  opacity: 0.96;
  filter: saturate(0.92) contrast(1.04);
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 48%, rgba(16, 38, 54, 1) 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 78% at 50% 48%, rgba(16, 38, 54, 1) 58%, transparent 100%);
}

.robot-info {
  min-width: 0;
  padding: 2px 0;
}

.robot-name {
  margin: 0 0 9px;
  font-size: 15px;
  font-weight: 500;
}

.robot-spec {
  margin: 0;
  color: #21282b;
  font-size: 12.5px;
  line-height: 1.48;
  white-space: nowrap;
}

.robot-spec span {
  color: #47565e;
}

.rank-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  align-self: start;
  margin-top: 3px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .525), transparent 28%),
    linear-gradient(135deg, #554220, #966d27 55%, #b48946);
  box-shadow: 0 0 12px rgba(145, 104, 27, .150);
  color: rgba(212, 185, 152, .800);
  font-size: 13px;
}

.rank-badge.cyan {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .525), transparent 28%),
    linear-gradient(135deg, #162739, #254b7b 58%, #5793ac);
  color: #83a5d0;
}

.rank-badge.silver {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .600), transparent 28%),
    linear-gradient(135deg, #101315, #3b4045 58%, #6a737f);
  color: #8b94a0;
}

.rank-badge.rose {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .600), transparent 28%),
    linear-gradient(135deg, #2d0b10, #582730 58%, #994858);
  color: #bd7c87;
}

.storage-explainer {
  margin: 3px 0 0;
  padding: 20px 17px 22px;
  border: 1px solid rgba(84, 148, 183, .065);
  background: linear-gradient(180deg, rgba(217, 228, 234, .720), rgba(223, 233, 238, .840));
}

.storage-explainer h2 {
  margin: 0 0 15px;
  text-align: center;
  font-size: 15.5px;
  font-weight: 600;
}

.storage-explainer p {
  margin: 0 0 14px;
  color: #282f32;
  font-size: 13px;
  line-height: 1.55;
}

.storage-explainer p:last-child {
  margin-bottom: 0;
}

/* Settings --------------------------------------------------------------- */

.settings-card {
  margin-top: 5px;
  padding: 0 17px;
  border: 1px solid rgba(82, 147, 183, .070);
  background: linear-gradient(180deg, rgba(215, 227, 234, .620), rgba(223, 233, 238, .700));
}

.setting-row {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(78, 140, 175, .080);
  font-size: 14.5px;
}

.setting-row:last-child {
  border-bottom: 0;
}

.setting-row .setting-value {
  color: #192023;
}

.setting-avatar {
  width: 35px;
  height: 39px;
  position: relative;
  display: grid;
  place-items: center;
  color: #1c2d37;
}

.setting-avatar::before,
.setting-avatar::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.setting-avatar::before {
  inset: 0;
  background: #6396b4;
}

.setting-avatar::after {
  inset: 1px;
  background: #9ab6c7;
}

.setting-avatar svg {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  opacity: 0.6;
}

.logout-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border: 1px solid rgba(18, 57, 77, .120);
  border-radius: 3px;
  background: linear-gradient(180deg, #459bca, #6cb4db);
  color: #050f14;
  font-size: 15px;
  cursor: pointer;
}

.reset-link {
  display: block;
  margin: 14px auto 0;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  color: #738690;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.reset-link:active {
  color: #3f5560;
}

.demo-note {
  margin: 26px 8px 0;
  text-align: center;
  color: rgba(98, 118, 130, .420);
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Share ------------------------------------------------------------------ */

.share-page {
  padding-top: 8px;
}

.qr-shell {
  width: 196px;
  margin: 10px auto 14px;
  padding: 12px;
  background: #0d1011;
  border-radius: 3px;
  box-shadow: 0 12px 40px rgba(16, 38, 54, .132);
}

#share-qr {
  display: block;
  width: 172px;
  height: 172px;
  image-rendering: pixelated;
}

.share-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
  color: #151a1d;
  font-size: 14.5px;
  padding: 0 8px;
}

.share-code strong {
  color: #4093c2;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.copy-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #323a3e;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.copy-btn svg {
  width: 14px;
  height: 14px;
}

.share-link {
  margin: 15px auto 19px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #1d2326;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.share-link .link-text {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-stat {
  min-height: 70px;
  margin-top: 6px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(65, 135, 174, .070);
  background: linear-gradient(90deg, rgba(213, 226, 233, .700), rgba(222, 233, 238, .720));
  font-size: 15px;
}

.share-stat strong {
  font-size: 14px;
  font-weight: 500;
}

.rebate-block {
  margin-top: 8px;
  padding: 15px 14px 18px;
  border: 1px solid rgba(65, 135, 174, .070);
  background: linear-gradient(180deg, rgba(217, 228, 235, .680), rgba(223, 233, 238, .700));
}

.rebate-title {
  margin: 0 0 11px;
  font-size: 14px;
  font-weight: 500;
}

.rebate-row {
  min-height: 60px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(79, 141, 177, .070);
}

.rebate-row:first-of-type {
  border-top: 0;
}

.rebate-id {
  color: #191f22;
  font-size: 13.5px;
}

.rebate-time {
  margin-top: 2px;
  color: #778790;
  font-size: 10.5px;
}

.rebate-amount {
  align-self: start;
  padding-top: 13px;
  color: #368cbd;
  font-size: 12.5px;
}

.rebate-hex {
  width: 26px;
  height: 29px;
  display: grid;
  place-items: center;
  background: rgba(165, 189, 202, .500);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.rebate-hex svg {
  width: 11px;
  height: 11px;
  color: #29719b;
}

/* Modal ------------------------------------------------------------------ */

.modal-layer {
  position: absolute;
  inset: 0;
  z-index: 100;
  padding: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(236, 244, 248, .680);
  backdrop-filter: blur(5px);
  animation: fade-in 180ms ease both;
}

.modal-layer[hidden] {
  display: none;
}

.modal-card {
  width: 100%;
  max-width: 380px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(55, 133, 174, .240) transparent;
  margin-bottom: max(7px, env(safe-area-inset-bottom));
  padding: 21px 19px 19px;
  border: 1px solid rgba(39, 119, 164, .220);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 0%, rgba(114, 179, 216, .150), transparent 42%),
    linear-gradient(180deg, #d5e3ea, #e0eaf0);
  box-shadow: 0 25px 70px rgba(16, 38, 54, .341), inset 0 1px 0 rgba(22, 68, 93, .070);
  animation: modal-in 240ms cubic-bezier(0.21, 0.82, 0.36, 1) both;
}

.modal-card h2 {
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 600;
}

.modal-card .modal-kicker {
  margin: 0 0 17px;
  color: #637781;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.modal-card p {
  margin: 0 0 14px;
  color: #2d363a;
  font-size: 13.5px;
  line-height: 1.55;
}

.modal-balance {
  padding: 13px 14px;
  margin: 2px 0 14px;
  border: 1px solid rgba(67, 140, 179, .120);
  background: rgba(229, 238, 242, .500);
}

.modal-balance .label {
  color: #667984;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.modal-balance .amount {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 600;
}

.modal-balance .amount small {
  margin-left: 3px;
  font-size: 11px;
}

.modal-field {
  margin: 0 0 14px;
}

.modal-field label {
  display: block;
  margin-bottom: 6px;
  color: #576870;
  font-size: 11.5px;
}

.modal-field input,
.modal-field select {
  width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid rgba(60, 136, 176, .180);
  border-radius: 2px;
  background: rgba(232, 240, 244, .700);
  color: var(--text);
  font-size: 14px;
}

.modal-field input:focus,
.modal-field select:focus {
  outline: 1px solid rgba(37, 134, 188, .450);
}

.modal-subline {
  margin-top: 5px;
  color: #637781;
  font-size: 10.5px;
}

.test-mode-pill {
  display: inline-block;
  margin: 0 0 13px;
  padding: 5px 8px;
  border: 1px solid rgba(145, 104, 27, .300);
  border-radius: 2px;
  background: rgba(227, 182, 119, .130);
  color: var(--gold);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.wallet-address {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 13px;
  padding: 10px 12px;
  border: 1px solid rgba(62, 136, 176, .120);
  border-radius: 3px;
  background: rgba(231, 240, 244, .440);
  color: #2b3439;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.wallet-address-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 8px rgba(20, 120, 173, .600);
}

.wallet-address .copy-btn {
  margin-left: auto;
}

.wallet-network-label {
  margin: 12px 0 6px;
  color: #73858e;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.network-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 13px;
}

.network-chip {
  min-height: 31px;
  padding: 0 8px;
  border: 1px solid rgba(79, 140, 173, .120);
  border-radius: 3px;
  background: rgba(229, 238, 242, .450);
  color: #51636d;
  font-size: 10.5px;
  cursor: pointer;
}

.network-chip.active {
  border-color: rgba(31, 123, 172, .340);
  background: rgba(95, 170, 211, .140);
  color: #196186;
}

.network-chip:active {
  transform: translateY(1px);
}

.wallet-readonly {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 2px;
  padding: 9px 11px;
  border-left: 2px solid rgba(38, 129, 177, .380);
  background: rgba(112, 176, 212, .070);
  color: #5a6d77;
  font-size: 10px;
  line-height: 1.45;
}

.wallet-readonly strong {
  color: #33424a;
  font-size: 10px;
  font-weight: 600;
}

.wallet-error {
  margin: 0 0 14px;
  padding: 10px 11px;
  border: 1px solid rgba(141, 31, 24, .200);
  background: rgba(211, 128, 126, .120);
  color: #562d27;
  font-size: 11.5px;
  line-height: 1.45;
}

.wallet-conversion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 3px 0 15px;
  padding: 12px;
  border: 1px solid rgba(65, 137, 176, .100);
  background: rgba(230, 239, 244, .460);
  color: #242e33;
  font-size: 12px;
}

.wallet-conversion strong {
  color: #438ab1;
  font-weight: 500;
}

.wallet-install {
  display: block;
  margin: 3px 0 14px;
  padding: 11px 13px;
  border: 1px solid rgba(37, 125, 172, .200);
  border-radius: 3px;
  background: rgba(98, 171, 212, .080);
  color: #1a5e81;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}

.wallet-loader {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 24px 0 8px;
}

.wallet-loader i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3186b4;
  animation: wallet-dot 1s ease-in-out infinite;
}

.wallet-loader i:nth-child(2) {
  animation-delay: 120ms;
}

.wallet-loader i:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes wallet-dot {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.modal-error {
  display: none;
  margin: -3px 0 11px;
  color: #572121;
  font-size: 11.5px;
  line-height: 1.4;
}

.modal-error.show {
  display: block;
}

.ledger-scroll {
  max-height: min(330px, 43dvh);
  margin: 3px -2px 0;
  padding: 0 2px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(55, 133, 174, .240) transparent;
}

.ledger-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 55px;
  border-bottom: 1px solid rgba(78, 140, 175, .080);
}

.ledger-row:last-child {
  border-bottom: 0;
}

.ledger-sign {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}

.ledger-sign.in {
  background: rgba(55, 145, 194, .110);
  color: #1c77a6;
}

.ledger-sign.out {
  background: rgba(146, 52, 32, .090);
  color: #66362b;
}

.ledger-label {
  overflow: hidden;
  color: #1f2629;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-time {
  margin-top: 2px;
  color: #788992;
  font-size: 9.5px;
}

.ledger-amount {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ledger-amount.in {
  color: #277ead;
}

.ledger-amount.out {
  color: #66362a;
}

.ledger-empty {
  padding: 28px 10px 22px;
  color: #75858e;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.modal-actions button {
  flex: 1 1 100px;
  min-width: 0;
  min-height: 44px;
  border-radius: 3px;
  cursor: pointer;
}

.btn-ghost {
  border: 1px solid rgba(70, 108, 130, .180);
  background: rgba(255, 255, 255, .019);
  color: #3f474b;
}

.modal-demo {
  margin-top: 13px;
  text-align: center;
  color: rgba(105, 124, 135, .550);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Toast ------------------------------------------------------------------ */

.toast {
  position: absolute;
  z-index: 120;
  left: 50%;
  bottom: 104px;
  max-width: calc(100% - 42px);
  padding: 10px 16px;
  border: 1px solid rgba(36, 119, 165, .250);
  border-radius: 4px;
  background: rgba(225, 236, 242, .950);
  color: #142026;
  font-size: 12.5px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 180ms ease;
  box-shadow: 0 10px 30px rgba(16, 38, 54, .193);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Home sci-fi effects ---------------------------------------------------- */

@keyframes aura-breathe {
  0%, 100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes fx-spin {
  to { transform: rotate(360deg); }
}

@keyframes fx-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes bracket-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes scan-pass {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  10% {
    opacity: 0.85;
  }
  55% {
    opacity: 0.5;
    transform: translate(-50%, 205px);
  }
  90% {
    opacity: 0.1;
  }
}

@keyframes readout-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 0.9; transform: translateY(0); }
}

@keyframes particle-rise {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.5);
  }
  18% {
    opacity: 0.85;
  }
  78% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: translateY(-72px) scale(1.25);
  }
}

@keyframes fx-flash {
  0% { opacity: 0; }
  14% { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes scanline-drift {
  from { background-position-y: 0; }
  to { background-position-y: 32px; }
}

/* Animations ------------------------------------------------------------- */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes radar-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.008);
    opacity: 1;
  }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 520px) {
  .stage {
    padding: 0;
    gap: 0;
    justify-content: stretch;
  }

  .device {
    width: 100%;
    height: 100dvh;
    min-height: 560px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .stage-note {
    display: none;
  }

  .hud-corners {
    inset: 4px;
  }
}

@media (max-width: 370px) {
  .page {
    padding-left: 14px;
    padding-right: 14px;
  }

  .topbar {
    padding-left: 4px;
    padding-right: 4px;
  }

  .topbar-inner {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .banner {
    height: 54px;
  }

  .banner span {
    font-size: 18px;
  }

  .banner span.is-wide {
    font-size: 15px;
  }

  .exchange-list {
    padding-left: 10px;
    padding-right: 10px;
  }

  .exchange-name {
    font-size: 12.5px;
  }

  .exchange-price {
    font-size: 11.5px;
  }

  .coin-layout {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .coin-tab {
    min-height: 71px;
  }

  .coin-logo {
    width: 38px;
    height: 38px;
  }

  .robot-card {
    grid-template-columns: 70px minmax(0, 1fr) 20px;
    padding-right: 8px;
  }

  .robot-spec {
    font-size: 11.5px;
  }

  .home-status {
    width: calc(100% - 82px);
    font-size: 13.5px;
  }

  .side-actions {
    right: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-height: 700px) {
  .fx-readout {
    display: none;
  }

  .home-art--fg {
    transform: scale(0.72) translateY(-9%);
  }

  .home-screen.is-working .home-art--fg {
    transform: scale(0.73) translateY(-9%);
  }

  .fx-frame {
    top: 36%;
    width: min(58vw, 190px);
  }

  .fx-aura {
    top: 37%;
    width: min(72vw, 240px);
  }

  .fx-scan {
    top: 20%;
  }

  .home-status {
    bottom: 92px;
    width: calc(100% - 82px);
    max-width: 250px;
    min-height: 58px;
    padding: 6px 10px 7px;
  }

  .status-kicker {
    font-size: 6.5px;
  }

  .status-main {
    font-size: 19px;
  }

  .home-status.status-idle .status-main {
    font-size: 13px;
  }

  .status-complete .status-main {
    font-size: 15px;
  }

  .status-sub {
    font-size: 7.5px;
  }

  .cycle-meter {
    margin-top: 5px;
  }

  .status-collect {
    min-height: 21px;
    margin-top: 5px;
    font-size: 9px;
  }

  .hex-play {
    bottom: 10px;
    width: 56px;
    height: 63px;
  }

  .hex-play .play-glyph::before {
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 15px;
  }

  .side-actions {
    top: 65px;
    transform: scale(0.9);
    transform-origin: top right;
  }

  .dock {
    height: 72px;
  }

  .dock-button span {
    font-size: 13px;
  }

  .dock-button svg {
    width: 27px;
    height: 27px;
  }

  .launch-foot {
    bottom: 12px;
  }
}

.app[data-screen="home"] .toast {
  display: none;
}

.app.modal-open .toast {
  display: none;
}

/* Customer support ------------------------------------------------------- */

.support-layer {
  position: absolute;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.support-layer[hidden] {
  display: none;
}

.support-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(236, 244, 248, .700);
  backdrop-filter: blur(5px);
}

.support-sheet {
  position: relative;
  width: 100%;
  min-height: 64%;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(35, 121, 167, .220);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(109, 179, 217, .140), transparent 36%),
    linear-gradient(180deg, #d8e5ec, #e3ecf1 72%);
  box-shadow: 0 -22px 70px rgba(16, 38, 54, .341), inset 0 1px 0 rgba(24, 76, 103, .060);
  animation: support-in 260ms cubic-bezier(0.21, 0.82, 0.36, 1) both;
}

.support-head {
  flex: 0 0 auto;
  min-height: 67px;
  padding: 12px 14px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(59, 134, 174, .100);
  background: rgba(225, 235, 241, .700);
}

.support-heading { min-width: 0; }
.support-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #839ca9;
  font-size: 7px;
  letter-spacing: 0.18em;
}
.support-heading h2 {
  margin: 0;
  color: #0d1418;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.support-heading p {
  max-width: 280px;
  margin: 3px 0 0;
  overflow: hidden;
  color: #617782;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-online {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 7px rgba(24, 119, 170, .700);
  animation: dot-pulse 1.8s ease-in-out infinite;
}

.support-close {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(70, 136, 173, .120);
  border-radius: 50%;
  background: rgba(225, 235, 240, .720);
  color: #506a78;
  cursor: pointer;
}
.support-close svg { width: 15px; height: 15px; }
.support-close:active { transform: scale(0.93); }

.support-messages {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 15px 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(rgba(66, 140, 181, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 140, 181, .025) 1px, transparent 1px);
  background-size: 28px 28px;
  scrollbar-width: none;
}
.support-messages::-webkit-scrollbar { display: none; }

.support-welcome {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 16px;
  padding: 11px 12px;
  border: 1px solid rgba(68, 140, 179, .100);
  border-radius: 4px;
  background: rgba(208, 223, 232, .480);
}
.support-welcome-icon {
  width: 30px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(150deg, #60a8d1, #b1cedf);
  color: #172c38;
}
.support-welcome-icon svg { width: 16px; height: 16px; }
.support-welcome strong {
  display: block;
  color: #1b262c;
  font-size: 11px;
  font-weight: 600;
}
.support-welcome p {
  margin: 3px 0 0;
  color: #667c88;
  font-size: 9.5px;
  line-height: 1.45;
}

.support-empty {
  padding: 16px 8px 8px;
  color: #798c96;
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center;
}

.support-message {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
  max-width: 86%;
}
.support-message.is-admin {
  align-items: flex-start;
  margin-right: auto;
}
.support-message.is-user {
  align-items: flex-end;
  margin-left: auto;
}
.support-message-label {
  padding-left: 2px;
  color: #7d94a0;
  font-size: 7.5px;
  letter-spacing: 0.04em;
}
.support-message-time {
  padding-right: 2px;
  color: #8b9ea8;
  font-size: 7.5px;
}
.support-bubble {
  padding: 9px 11px;
  border: 1px solid rgba(59, 132, 172, .100);
  border-radius: 7px 7px 7px 2px;
  background: #d1e0e9;
  color: #1f282d;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.support-message.is-user .support-bubble {
  border-color: rgba(11, 98, 145, .160);
  border-radius: 7px 7px 2px 7px;
  background: linear-gradient(145deg, #8fb8ce, #aac8da);
  color: #051016;
}

.support-image-link {
  display: block;
  max-width: 100%;
}

.support-image {
  display: block;
  max-width: min(230px, 100%);
  max-height: 230px;
  border: 1px solid rgba(32, 114, 157, .180);
  border-radius: 6px;
  object-fit: cover;
}

.support-error {
  margin: 0 15px;
  padding: 8px 10px;
  border: 1px solid rgba(142, 38, 28, .200);
  border-radius: 3px;
  background: rgba(201, 151, 149, .160);
  color: #582f2a;
  font-size: 10px;
  line-height: 1.4;
}
.support-error[hidden] { display: none; }

.support-form {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px 8px;
  border-top: 1px solid rgba(59, 134, 174, .100);
  background: rgba(229, 238, 242, .880);
}

.support-attach {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(59, 134, 174, .160);
  border-radius: 5px;
  background: rgba(225, 236, 241, .720);
  color: #3f6479;
  cursor: pointer;
}

.support-attach svg {
  width: 18px;
  height: 18px;
}

.support-attach:active {
  transform: scale(0.94);
}

.support-attach:disabled {
  opacity: 0.45;
  cursor: default;
}

.support-attachment {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 12px;
  padding: 7px;
  border: 1px solid rgba(56, 133, 174, .140);
  border-radius: 4px;
  background: rgba(223, 233, 238, .620);
}

.support-attachment[hidden] {
  display: none;
}

.support-attachment img {
  width: 46px;
  height: 46px;
  border-radius: 3px;
  object-fit: cover;
}

.support-attachment-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.support-attachment-meta strong {
  overflow: hidden;
  color: #24323a;
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-attachment-meta span {
  color: #738792;
  font-size: 8.5px;
}

.support-attachment-remove {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(135, 61, 50, .160);
  border-radius: 50%;
  background: transparent;
  color: #713931;
  cursor: pointer;
}

.support-attachment-remove svg {
  width: 12px;
  height: 12px;
}
.support-form input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(59, 134, 174, .160);
  border-radius: 5px;
  background: rgba(232, 241, 245, .740);
  color: #0e1619;
  font-size: 12.5px;
}
.support-form input::placeholder { color: #8a9da7; }
.support-form input:focus { outline: 1px solid rgba(29, 123, 174, .420); }
.support-form input:disabled { opacity: 0.55; }
.support-send {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(25, 79, 108, .200);
  border-radius: 5px;
  background: linear-gradient(180deg, #3b95c5, #6cb3db);
  color: #061117;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}
.support-send svg { width: 17px; height: 17px; }
.support-send:active { transform: scale(0.94); }
.support-send:disabled { opacity: 0.45; cursor: default; }

.support-foot {
  flex: 0 0 auto;
  padding: 0 12px max(9px, env(safe-area-inset-bottom));
  background: rgba(229, 238, 242, .880);
  color: #95a9b4;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

@keyframes support-in {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.support-unread-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(91, 68, 21, .350);
  border-radius: 8px;
  background: #b5842d;
  color: #ede7dc;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 10px rgba(176, 127, 34, .400);
}

/* Invitation gate -------------------------------------------------------- */

.invite-modal {
  position: relative;
  overflow: hidden;
  border-color: rgba(31, 120, 168, .260);
  background:
    radial-gradient(circle at 50% 0%, rgba(88, 168, 211, .150), transparent 38%),
    linear-gradient(180deg, #d8e5ec, #e3ecf0 75%);
}

.invite-mark {
  width: 46px;
  height: 52px;
  margin-bottom: 13px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%);
  background: linear-gradient(150deg, #3c95c6, #a9c8da);
  color: #081922;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  box-shadow: 0 0 26px rgba(41, 149, 208, .180);
}

.invite-modal .modal-field input {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invite-modal .modal-actions .btn-primary {
  min-width: 130px;
}

/* Settings & share functional rows -------------------------------------- */

.setting-row--button {
  width: 100%;
  padding: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.setting-row--button:hover {
  background: rgba(123, 179, 209, .070);
}

.setting-row .setting-value {
  max-width: 62%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-note {
  max-width: 330px;
  margin: 9px auto 0;
  padding: 0 8px;
  color: #778993;
  font-size: 9.5px;
  line-height: 1.5;
  text-align: center;
}

.share-copy {
  margin: 0 0 12px;
  color: #697d88;
  font-size: 11px;
  line-height: 1.6;
}

.share-support-btn {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(36, 124, 171, .200);
  border-radius: 3px;
  background: rgba(125, 189, 223, .180);
  color: #224051;
  font-size: 11px;
  cursor: pointer;
}

.share-support-btn:hover {
  background: rgba(95, 173, 216, .280);
}

.menu-badge {
  min-width: 17px;
  height: 17px;
  margin-left: auto;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(97, 73, 23, .300);
  border-radius: 9px;
  background: #bd8e36;
  color: #eee7db;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 8px;
  font-weight: 700;
}

/* Very short screens: keep the robot fully visible beside compact controls */
@media (max-height: 620px) {
  .home-art--fg {
    transform: scale(0.62) translateY(-11%);
  }

  .home-screen.is-working .home-art--fg {
    transform: scale(0.63) translateY(-11%);
  }

  .home-status {
    left: 10px;
    right: auto;
    bottom: 12px;
    width: calc(100% - 92px);
    max-width: none;
    min-height: 56px;
    padding: 6px 9px 7px;
    transform: none;
    animation: none;
  }

  .home-status::after {
    display: none;
  }

  .status-kicker {
    font-size: 6px;
  }

  .status-main {
    font-size: 18px;
  }

  .home-status.status-idle .status-main {
    font-size: 12px;
  }

  .status-complete .status-main {
    font-size: 14px;
  }

  .status-sub {
    font-size: 7px;
  }

  .cycle-meter {
    margin-top: 4px;
  }

  .status-collect {
    min-height: 20px;
    margin-top: 4px;
    font-size: 8px;
  }

  .hex-play {
    left: auto;
    right: 10px;
    bottom: 12px;
    width: 56px;
    height: 62px;
    transform: none;
  }

  .hex-play .play-glyph::before {
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 15px;
  }

  .fx-frame {
    top: 33%;
    width: min(48vw, 150px);
  }

  .fx-aura {
    top: 34%;
    width: min(58vw, 190px);
  }

  .fx-scan {
    top: 18%;
  }
}

/* Ethereum-only network gate */
.network-error-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(205, 150, 147, .280), transparent 55%),
    rgba(236, 243, 246, .940);
  backdrop-filter: blur(12px);
}

.network-error-layer[hidden] {
  display: none;
}

.network-error-card {
  width: min(100%, 360px);
  padding: 26px 22px;
  border: 1px solid rgba(146, 51, 35, .280);
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(233, 218, 217, .980), rgba(230, 239, 242, .980));
  box-shadow: 0 24px 80px rgba(16, 38, 54, .303);
  text-align: center;
}

.network-error-card .eyebrow {
  color: #772d21;
}

.network-error-card h2 {
  margin: 8px 0 10px;
  color: #231815;
  font-size: 22px;
  font-weight: 500;
}

.network-error-card p {
  margin: 0 0 18px;
  color: #6c4e48;
  font-size: 12px;
  line-height: 1.6;
}

.network-error-card p strong {
  color: #542e27;
  font-family: var(--mono);
}

.network-error-card .btn-primary,
.network-error-card .btn-ghost {
  width: 100%;
  margin-top: 8px;
}

/* Mandatory Ethereum wallet entry gate */
.wallet-gate-layer {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 25%, rgba(102, 172, 211, .200), transparent 55%),
    rgba(236, 243, 246, .950);
  backdrop-filter: blur(12px);
}

.wallet-gate-layer[hidden] {
  display: none;
}

.wallet-gate-card {
  width: min(100%, 370px);
  padding: 27px 22px 22px;
  border: 1px solid rgba(57, 134, 174, .220);
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(216, 229, 236, .990), rgba(232, 240, 244, .990));
  box-shadow: 0 24px 80px rgba(16, 38, 54, .303);
  text-align: center;
}

.wallet-gate-card h2 {
  margin: 9px 0 10px;
  color: #151d22;
  font-size: 22px;
  font-weight: 500;
}

.wallet-gate-card p {
  margin: 0 0 18px;
  color: #4f6774;
  font-size: 12px;
  line-height: 1.65;
}

.wallet-gate-card .btn-primary,
.wallet-gate-install {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.wallet-gate-card .btn-primary:disabled {
  opacity: 0.55;
}

.wallet-gate-error {
  margin: 0 0 14px;
  padding: 9px 10px;
  border: 1px solid rgba(147, 49, 36, .280);
  border-radius: 3px;
  background: rgba(213, 173, 170, .280);
  color: #5c332b;
  font-size: 10px;
  line-height: 1.5;
  text-align: left;
}

.wallet-gate-foot {
  margin-top: 14px;
  color: #879eab;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.network-error-foot {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  color: #977770 !important;
  font-size: 9px !important;
}


/* Fixed mobile viewport: fit the screen and disable page zoom gestures. */
@media (max-width: 520px) {
  .stage {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    gap: 0;
  }

  .device {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .stage-note {
    display: none;
  }
}

.wallet-gate-status {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(57, 134, 174, .160);
  border-radius: 3px;
  background: rgba(214, 228, 235, .650);
  color: #354f5d;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Gift cards */
.gift-card-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 10px 0 14px;
  max-height: 190px;
  overflow-y: auto;
}

.gift-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(57, 134, 174, .150);
  border-radius: 3px;
  background: rgba(220, 232, 238, .650);
}

.gift-card-row > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gift-card-row strong {
  color: #91681b;
  font-family: var(--mono);
  font-size: 12px;
}

.gift-card-row small {
  overflow: hidden;
  color: #728690;
  font-family: var(--mono);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gift-card-row.redeemed {
  opacity: 0.55;
}

.gift-card-row .btn-small {
  height: 26px;
  padding: 0 8px;
  font-size: 9px;
  white-space: nowrap;
}

.gift-redeemed {
  color: #728690;
  font-size: 9px;
  white-space: nowrap;
}

.gift-empty {
  padding: 14px 10px;
  border: 1px dashed rgba(57, 134, 174, .150);
  border-radius: 3px;
  color: #7d8f98;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

/* Announcements */
.home-announcement {
  position: absolute;
  z-index: 8;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(78%, 300px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  overflow: hidden;
  border: 1px solid rgba(32, 121, 168, .280);
  border-radius: 3px;
  background: linear-gradient(120deg, rgba(212, 228, 237, .940), rgba(225, 236, 242, .940));
  box-shadow: 0 8px 28px rgba(16, 38, 54, .193);
  text-align: left;
}

.home-announcement-kicker,
.announcement-kicker {
  color: var(--green-bright);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.home-announcement strong {
  overflow: hidden;
  color: #19242b;
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-announcement-more {
  color: #798e98;
  font-size: 7.5px;
}

.announcement-card {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.announcement-card:hover,
.announcement-card:focus-visible {
  border-color: rgba(41, 131, 179, .280);
  background: linear-gradient(90deg, rgba(204, 220, 228, .700), rgba(223, 233, 238, .800));
  outline: none;
}

.announcement-card .announcement-kicker {
  display: block;
  margin-bottom: 6px;
  color: #6f99af;
}

.announcement-preview {
  margin: 0 0 10px;
  color: #4c5e67;
  font-size: 13px;
  line-height: 1.55;
}

.announcement-modal h2 {
  margin: 7px 0 6px;
}

.announcement-content {
  max-height: 50vh;
  overflow-y: auto;
  margin: 16px 0;
  padding: 13px 14px;
  border: 1px solid rgba(57, 134, 174, .120);
  border-radius: 3px;
  background: rgba(225, 236, 242, .550);
  color: #3a4449;
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
  white-space: normal;
}

/* Robot ERC20 activation */
.activation-summary {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 14px 0;
  padding: 10px;
  border: 1px solid rgba(57, 134, 174, .150);
  border-radius: 3px;
  background: rgba(224, 235, 241, .600);
  text-align: left;
}

.activation-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
}

.activation-summary span {
  color: #7d8f98;
}

.activation-summary strong {
  color: #354f5d;
  font-weight: 500;
}

.activation-summary code {
  overflow-wrap: anywhere;
  color: #4f6774;
  font-family: var(--mono);
  font-size: 8px;
  text-align: right;
}

.robot-activate-modal .modal-actions {
  flex-wrap: wrap;
}

.activation-note {
  padding: 8px 10px;
  border: 1px solid rgba(145, 104, 27, .200);
  border-radius: 3px;
  background: rgba(214, 201, 175, .180);
  color: #9b7939 !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
  text-align: left;
}

/* Invite code paste + mobile keyboard viewport */
html {
  --app-vvh: 100dvh;
}

@media (max-width: 520px) {
  .modal-layer {
    height: var(--app-vvh, 100dvh);
    max-height: var(--app-vvh, 100dvh);
    overflow: hidden;
  }

  .modal-card {
    max-height: calc(var(--app-vvh, 100dvh) - 30px);
    scroll-padding-bottom: 18px;
  }
}

.invite-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.invite-input-head label {
  margin-bottom: 0;
}

.invite-paste {
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(57, 134, 174, .200);
  border-radius: 2px;
  background: rgba(200, 218, 228, .650);
  color: #315d76;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.invite-paste:active {
  background: rgba(167, 196, 211, .800);
}

.invite-input-head + input {
  margin-top: 0;
}

/* ==========================================================================
   CRYO LIGHT THEME — surface, hero and contrast corrections
   ========================================================================== */

html,
body {
  background-color: #f2f8fc;
}

body {
  background:
    radial-gradient(1100px 720px at 50% -12%, rgba(126, 197, 240, 0.34), transparent 62%),
    radial-gradient(900px 620px at 50% 112%, rgba(150, 205, 240, 0.24), transparent 62%),
    linear-gradient(180deg, #fbfdff 0%, #eef7fd 52%, #e6f2fa 100%);
}

.device {
  background: #f4f9fd;
  box-shadow:
    0 0 0 1px rgba(24, 62, 92, 0.10),
    0 0 0 7px rgba(255, 255, 255, 0.92),
    0 0 0 8px rgba(120, 180, 220, 0.14),
    0 38px 90px rgba(24, 62, 92, 0.20),
    0 0 90px rgba(120, 190, 235, 0.28);
}

.app {
  background:
    radial-gradient(circle at 50% 16%, rgba(198, 228, 248, 0.55), transparent 46%),
    linear-gradient(180deg, #f7fbfe 0%, #eef7fd 100%);
}

.app-grid {
  opacity: 0.5;
}

.topbar,
.dock {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}

/* hero art was graded for a dark plate; lift it for the light plate */
.home-art--backdrop {
  filter: blur(30px) saturate(1.05) brightness(0.98);
  opacity: 0.30;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 42%, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  mask-image: radial-gradient(60% 55% at 50% 42%, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
}

.home-art--fg {
  filter: saturate(1.18) brightness(0.97) contrast(1.12);
}

.home-screen::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.06) 11%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.88) 88%, #f4f9fd 100%),
    radial-gradient(circle at 50% 35%, transparent 22%, rgba(238, 247, 253, 0.38) 78%);
}

.btn-primary {
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(10, 50, 80, 0.18);
}

.btn-primary:disabled {
  color: rgba(255, 255, 255, 0.85);
}

/* keep brand marks legible on a white plate */
.coin-logo.xrp {
  background: #e9f1f7;
  color: #1d2a36;
}

.home-art--fg {
  -webkit-mask-image: radial-gradient(56% 50% at 50% 43%, #000 0%, rgba(0, 0, 0, 0.94) 55%, transparent 100%);
  mask-image: radial-gradient(56% 50% at 50% 43%, #000 0%, rgba(0, 0, 0, 0.94) 55%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* state variants were graded for a dark plate — keep the cryo art bright */
.home-screen.is-working .home-art--fg,
.home-screen.is-paused .home-art--fg,
.home-screen.is-complete .home-art--fg {
  filter: saturate(1.15) brightness(1) contrast(1.08);
}

.home-screen.is-working .home-art--backdrop,
.home-screen.is-paused .home-art--backdrop {
  filter: blur(30px) saturate(1.05) brightness(1);
  opacity: 0.28;
}

/* the fade is baked into the PNG alpha, so drop the CSS mask entirely */
.home-art--fg {
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-composite: add;
  mask-composite: add;
}

/* crisp white cards on the cryo plate */
.menu-item,
.balance-block,
.storage-block,
.pending-block,
.robot-card,
.stat-cell,
.record-row {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(38, 92, 128, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 24px rgba(28, 70, 100, 0.06);
}

.menu-item:hover,
.robot-card:hover {
  background: #ffffff;
  border-color: rgba(38, 118, 168, 0.34);
}

.robot-card.is-active {
  background: linear-gradient(180deg, rgba(219, 240, 253, 0.95), rgba(255, 255, 255, 0.95));
  border-color: rgba(46, 148, 207, 0.55);
}

/* provided robot art: keep it at native framing instead of the 0.78 shrink */
.home-art--fg {
  transform: scale(1.04) translateY(-2%);
}
.home-screen.is-working .home-art--fg {
  transform: scale(1.05) translateY(-2%);
}

/* the supplied hero is full-bleed; drop the decorative frame so nothing sits over the robot */
.hud-corners {
  display: none;
}