:root {
  --white: #fff;
  --muted: rgba(255, 238, 241, .65);
  --line: rgba(255, 255, 255, .16);
  --red: #f00032;
  --fire: #ff263e;
  --deep: #690014;
  --glass: rgba(111, 0, 25, .30);
  --shadow: 0 22px 48px rgba(57, 0, 14, .23);
  --modal-ink: color-mix(in srgb, var(--deep) 82%, #000);
  --modal-ink-soft: color-mix(in srgb, var(--deep) 70%, transparent);
  --modal-shadow: color-mix(in srgb, var(--deep) 58%, transparent);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  color: #fff;
  background:
    radial-gradient(1000px 720px at -8% 12%, rgba(255, 0, 145, .95), transparent 66%),
    radial-gradient(850px 620px at 77% 18%, rgba(255, 19, 35, .76), transparent 70%),
    radial-gradient(720px 520px at 55% 100%, rgba(255, 0, 72, .38), transparent 72%),
    linear-gradient(128deg, #e90051 0%, #c70024 48%, #68000f 100%);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body::before { content:none; }
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    linear-gradient(16deg, transparent 0 20%, rgba(255,255,255,.035) 20.3%, transparent 20.7% 24%, rgba(255,0,119,.16) 24.2%, transparent 25%),
    radial-gradient(520px 350px at 16% 25%, rgba(255,255,255,.12), transparent 72%),
    radial-gradient(620px 390px at 76% 70%, rgba(255,28,79,.22), transparent 74%);
}
button, input { font: inherit; }
button { cursor: pointer; }
label {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.app {
  position:fixed;
  z-index: 1;
  inset:0;
  width:100%;
  height:100vh;
  height:100svh;
  padding:12px;
  display: flex;
  gap: 14px;
}
.card,
.performance-hero,
.chart-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(200, 7, 51, .34), rgba(66, 0, 20, .36)),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--shadow);
  backdrop-filter: blur(25px) saturate(125%);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.card:hover,
.performance-hero:hover,
.chart-card:hover {
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 26px 58px rgba(48,0,14,.27);
}

/* Rail */
.rail {
  width: 96px;
  flex: none;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(155deg, rgba(255,59,106,.20), rgba(55,0,17,.33));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), var(--shadow);
}
.rail-logo { width: 51px; height: 51px; margin: 1px 0 20px; filter: drop-shadow(0 9px 16px rgba(52,0,15,.25)); }
.rail-logo img { width:100%; height:100%; display:block; object-fit:contain; animation:logo-breathe 4.5s ease-in-out infinite; }
.rail nav { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.nav-btn {
  width: 100%;
  padding: 13px 3px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: rgba(255,255,255,.60);
  background: transparent;
  transition: color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}
.nav-btn svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-btn span { font-size: 8px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.nav-btn:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateY(-1px); }
.nav-btn.active {
  color: #fff;
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 9px 18px rgba(59,0,16,.18);
}
.live-badge { margin-top: auto; display: flex; gap: 6px; align-items: center; color: rgba(255,255,255,.68); font-size: 8px; font-weight: 700; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.10), 0 0 12px #fff; }

/* Top bar */
.workspace {
  position:relative;
  isolation:isolate;
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.topbar {
  z-index:100;
  min-height: 104px;
  margin-bottom: 14px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;
  background:
    linear-gradient(105deg,rgba(143,0,39,.20),rgba(61,0,19,.24)),
    rgba(99,0,27,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 38px rgba(53,0,15,.12);
  backdrop-filter:blur(20px) saturate(115%);
  position: relative;
}
.topbar::after { content:none; }
.brand { display:flex; align-items:center; gap:12px; min-width:445px; }
.brand-mark {
  position:relative;
  width:80px;
  height:80px;
  flex:0 0 80px;
  display:grid;
  place-items:center;
}
.brand-mark::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:16% 8% 6% 9%;
  border-radius:45%;
  background:radial-gradient(circle at 54% 48%,rgba(255,61,137,.46),rgba(255,0,55,.17) 48%,transparent 72%);
  filter:blur(13px);
  opacity:.72;
}
.brand-mark picture {
  width:100%;
  height:100%;
  display:block;
}
.brand img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  filter:
    drop-shadow(0 9px 9px rgba(50,0,13,.20))
    drop-shadow(0 0 9px rgba(255,42,105,.17));
}
.brand h1 {
  display:flex;
  align-items:baseline;
  color:#fff;
  font-family:Sora,Manrope,sans-serif;
  font-size:28px;
  font-weight:650;
  letter-spacing:-.048em;
  line-height:1;
  white-space:nowrap;
  text-rendering:geometricPrecision;
  text-shadow:0 8px 22px rgba(67,0,18,.12);
}
.brand h1 > span:first-child { font-weight:700; }
.brand h1 .brand-domain {
  margin-left:.10em;
  color:rgba(255,255,255,.72);
  font-size:.72em;
  font-weight:600;
  letter-spacing:-.025em;
}
.brand p {
  margin-top:10px;
  color:rgba(255,255,255,.58);
  font-size:7px;
  font-weight:700;
  letter-spacing:.38em;
}
.asset-switch {
  flex:none;
  display:flex;
  gap:3px;
  margin-left:14px;
  padding:4px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(53,0,15,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.asset-switch button {
  min-width:58px;
  height:31px;
  padding:0 12px;
  border:0;
  border-radius:999px;
  color:rgba(255,255,255,.56);
  background:transparent;
  font-family:Sora,Manrope,sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.asset-switch button:hover { color:#fff; }
.asset-switch button.active {
  color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(52,0,14,.18);
}
.asset-switch button:active { transform:scale(.97); }
.mobile-asset-picker {display:none;}
.top-metrics { margin-left: auto; display: flex; align-items: stretch; }
.top-metrics > div { min-width: 0; padding: 4px 16px 4px 19px; display: flex; flex-direction: column; justify-content: center; }
.top-metrics > div.updated { min-width: 190px; }
.top-metrics > i { width: 1px; background: rgba(255,255,255,.14); }
.topbar-divider { width: 1px; height: 34px; margin: 0 14px; align-self: center; background: rgba(255,255,255,.22); }
.top-metrics strong { margin-top: 6px; font-size: 19px; font-weight: 600; white-space: nowrap; }
.price-market { position:relative; z-index:200; }
.price-market::after {
  content:"";
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:20px;
}
.price-market-trigger {
  display:flex;
  min-height:100%;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:inherit;
  text-decoration:none;
}
.price-market-trigger label { white-space:nowrap; transition:color .2s ease; }
.price-market-trigger label span {
  display:inline-block;
  margin-left:4px;
  color:rgba(255,255,255,.52);
  font-size:9px;
  transition:transform .2s ease,color .2s ease;
}
.price-market:hover .price-market-trigger label span,
.price-market:focus-within .price-market-trigger label span {
  color:#fff;
}
.price-market:hover .price-market-trigger label,
.price-market:focus-within .price-market-trigger label {
  color:#fff;
}
.price-market:hover .price-market-trigger label span:last-child,
.price-market:focus-within .price-market-trigger label span:last-child {
  transform:translate(1px,-1px);
}
.price-market-preview {
  position:absolute;
  z-index:300;
  top:calc(100% + 17px);
  left:50%;
  width:min(430px,calc(100vw - 32px));
  padding:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.20);
  border-radius:14px;
  color:#fff;
  background:
    radial-gradient(280px 140px at 18% 0%,rgba(242,0,55,.23),transparent 72%),
    rgba(5,5,7,.97);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 26px 60px rgba(35,0,8,.44),
    0 0 0 1px rgba(255,0,55,.08);
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-7px) scale(.985);
  transform-origin:top center;
  transition:opacity .18s ease,visibility .18s ease,transform .24s cubic-bezier(.2,.8,.2,1);
}
.price-market:hover .price-market-preview,
.price-market:focus-within .price-market-preview {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
}
.dex-preview-head,
.dex-preview-foot {
  display:flex;
  align-items:center;
}
.dex-preview-head {
  justify-content:space-between;
  padding:3px 4px 10px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}
.dex-preview-head > span { display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.72); }
.dex-preview-head i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#21e56c;
  box-shadow:0 0 0 4px rgba(33,229,108,.10),0 0 12px rgba(33,229,108,.65);
}
.dex-preview-head b { color:#fff;font-size:8px;letter-spacing:.11em; }
.dex-preview-stage {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:linear-gradient(145deg,#131319,#070709);
}
.dex-preview-loading {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.40);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dex-preview-stage iframe {
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#08080b;
  pointer-events:none;
}
.dex-preview-foot {
  justify-content:center;
  padding:9px 4px 1px;
  color:rgba(255,255,255,.54);
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.share-x-btn {
  min-height: 42px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px;
  color: #fff;
  background: #050505;
  box-shadow: 0 11px 24px rgba(41,0,12,.25);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.share-x-btn b { font-size: 16px; }
.share-x-btn:hover { transform: translateY(-1px); box-shadow: 0 15px 29px rgba(41,0,12,.31); }

/* Shared views */
.view { flex: 1; min-height: 0; }
.chart-view { display: flex; flex-direction: column; gap: 12px; }
/* One continuous banner: current performance flows into the 10,000x journey */
.performance-hero {
  z-index:1;
  min-height:188px;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(520px 250px at 16% 22%,rgba(255,0,139,.56),transparent 72%),
    radial-gradient(620px 240px at 96% 78%,rgba(122,0,32,.42),transparent 76%),
    linear-gradient(112deg,rgba(238,0,66,.70) 0%,rgba(168,0,42,.58) 58%,rgba(102,0,23,.48) 100%);
}
.performance-hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(15deg,transparent 0 28%,rgba(255,255,255,.05) 28.2%,transparent 28.7%),
    radial-gradient(340px 170px at 22% 84%,rgba(255,255,255,.10),transparent 72%);
}
.performance-copy {
  position:relative;
  z-index:2;
  flex:none;
  padding:24px 34px 24px 30px;
  display:flex;
  align-items:center;
  gap:34px;
}
.performance-primary {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.performance-copy label {
  color:#fff;
  font-family:Sora,Manrope,sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
}
.performance-primary > strong {
  margin-top:2px;
  color:#fff;
  font-family:Sora,Manrope,sans-serif;
  font-size:clamp(58px,5.2vw,84px);
  font-weight:800;
  letter-spacing:-.07em;
  line-height:.98;
  text-shadow:0 0 18px rgba(255,255,255,.26),0 12px 38px rgba(62,0,15,.24);
}
.performance-primary > span {
  margin-top:12px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  color:rgba(255,255,255,.82);
  background:rgba(91,0,22,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.performance-multiple {
  min-width:150px;
  padding:11px 0 11px 30px;
  border-left:1px solid rgba(255,255,255,.24);
}
.performance-multiple label {
  color:rgba(255,255,255,.68);
  font-size:9px;
  letter-spacing:.17em;
}
.performance-multiple strong {
  display:block;
  margin-top:8px;
  color:#fff;
  font-family:Sora,Manrope,sans-serif;
  font-size:42px;
  font-weight:700;
  letter-spacing:-.055em;
  line-height:1;
  text-shadow:0 0 16px rgba(255,255,255,.18);
}
.performance-multiple small {
  display:block;
  margin-top:8px;
  color:rgba(255,255,255,.56);
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}
/* The right side turns HEX's current bottom multiple into a clear,
   logarithmic journey toward the historic 10,000x benchmark. */
.cycle-progress {
  position:relative;
  z-index:2;
  flex:1;
  min-width:220px;
  align-self:stretch;
  padding:17px 30px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.cycle-progress::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(360px 120px at 40% 62%,rgba(255,0,111,.14),transparent 72%),
    linear-gradient(115deg,transparent,rgba(255,255,255,.025));
}
.cycle-progress-head,
.cycle-progress-foot {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.cycle-progress-head label {
  color:rgba(255,255,255,.62);
  font-size:7px;
  font-weight:800;
  letter-spacing:.19em;
}
.cycle-progress-head > div:first-child > strong {
  display:block;
  margin-top:5px;
  color:#fff;
  font-family:Sora,Manrope,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.035em;
}
.cycle-progress-readout {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:right;
}
.cycle-progress-readout strong {
  color:#fff;
  font-family:Sora,Manrope,sans-serif;
  font-size:25px;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1;
  text-shadow:0 0 18px rgba(255,255,255,.24);
}
.cycle-progress-readout span {
  margin-top:4px;
  color:rgba(255,255,255,.52);
  font-size:6px;
  font-weight:800;
  letter-spacing:.16em;
}
.cycle-progress-meter {
  --progress:0%;
  position:relative;
  z-index:2;
  margin-top:27px;
}
.cycle-progress-track {
  position:relative;
  height:14px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:
    linear-gradient(90deg,
      transparent 24.75%,rgba(255,255,255,.15) 25%,transparent 25.25%,
      transparent 49.75%,rgba(255,255,255,.15) 50%,transparent 50.25%,
      transparent 74.75%,rgba(255,255,255,.15) 75%,transparent 75.25%),
    rgba(45,0,14,.42);
  box-shadow:inset 0 2px 5px rgba(30,0,10,.38),0 1px 0 rgba(255,255,255,.05);
}
.cycle-progress-fill {
  position:absolute;
  inset:-1px auto -1px -1px;
  width:var(--progress);
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.48);
  border-radius:999px;
  background:linear-gradient(90deg,#ff006e 0%,#ff2448 58%,#ff9a19 100%);
  box-shadow:0 0 12px rgba(255,0,88,.62),0 0 28px rgba(255,56,62,.25),inset 0 1px 0 rgba(255,255,255,.52);
}
.cycle-progress-fill i {
  position:absolute;
  top:-4px;
  bottom:-4px;
  width:42px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.70),transparent);
  filter:blur(3px);
  animation:cycle-shine 1.8s ease-out 1 both;
}
.cycle-progress-marker {
  position:absolute;
  z-index:3;
  top:50%;
  left:clamp(7px,var(--progress),calc(100% - 7px));
  width:1px;
  height:1px;
}
.cycle-progress-marker > i {
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border:3px solid #fff;
  border-radius:50%;
  background:#ef0038;
  box-shadow:0 0 0 5px rgba(255,255,255,.10),0 0 18px #fff,0 0 30px rgba(255,0,80,.75);
  transform:translate(-50%,-50%);
}
.cycle-progress-marker span {
  position:absolute;
  left:50%;
  bottom:15px;
  min-width:50px;
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:7px;
  color:#fff;
  background:rgba(49,0,14,.82);
  box-shadow:0 7px 18px rgba(32,0,9,.24);
  text-align:center;
  white-space:nowrap;
  transform:translateX(-50%);
}
.cycle-progress-marker small {
  display:none;
  color:rgba(255,255,255,.54);
  font-size:5px;
  font-weight:800;
  letter-spacing:.14em;
}
.cycle-progress-marker b {
  display:block;
  margin-top:0;
  font-family:Sora,Manrope,sans-serif;
  font-size:9px;
  letter-spacing:-.02em;
}
.cycle-progress-axis {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:8px;
}
.cycle-progress-axis span { text-align:center; }
.cycle-progress-axis span:first-child { text-align:left; }
.cycle-progress-axis span:last-child { text-align:right; }
.cycle-progress-axis b {
  color:rgba(255,255,255,.72);
  font-size:7px;
  font-weight:800;
}
.cycle-progress-axis small {
  margin-left:4px;
  color:rgba(255,255,255,.34);
  font-size:5px;
  font-weight:800;
  letter-spacing:.10em;
}
.cycle-progress-foot {
  margin-top:9px;
  color:rgba(255,255,255,.42);
  font-size:6px;
  font-weight:700;
  letter-spacing:.10em;
}
.cycle-progress-foot strong {
  color:rgba(255,255,255,.70);
  font-size:6px;
  letter-spacing:.15em;
}
.hero-period-up { color: #fff !important; }

/* Main chart */
.chart-card {
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(720px 340px at 18% 10%,rgba(255,0,120,.24),transparent 72%),
    radial-gradient(520px 300px at 88% 68%,rgba(255,36,47,.18),transparent 72%),
    linear-gradient(135deg,rgba(104,0,26,.58),rgba(39,0,13,.72));
}
.chart-head {
  min-height: 71px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.11);
  position:relative;
  z-index:5;
  background:linear-gradient(90deg,rgba(255,0,87,.08),rgba(44,0,13,.16));
}
.live-kicker { display:flex; align-items:center; gap:8px; }
.live-kicker i {
  position:relative;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 5px rgba(255,255,255,.75);
}
.live-kicker i::before {
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.48),rgba(255,255,255,.10) 38%,transparent 72%);
  animation:live-glow 1.8s ease-out 2;
}
.chart-head h2 { margin-top: 5px; font-size: 17px; font-weight: 600; }
.chart-legend { margin-left: auto; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.56); font-size: 9px; font-weight: 600; }
.chart-legend i { width: 23px; height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.5); }
.periods { margin-left: auto; padding: 3px; display: flex; gap: 2px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(52,0,15,.12); }
.periods button {
  min-width: 46px; height: 30px; border: 0; border-radius: 5px;
  color: rgba(255,255,255,.52); background: transparent; font-size: 9px; font-weight: 800;
}
.periods button:hover { color: #fff; }
.periods button.active { color:#fff; background:rgba(255,255,255,.15); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.periods button[data-period="BOTTOM"] { min-width:64px; color:rgba(255,255,255,.76); }
.periods button[data-period="BOTTOM"].active {
  color:#8d001f;
  background:#fff;
  box-shadow:0 0 22px rgba(255,255,255,.20);
}
.focus-btn {
  min-width:76px;
  height:38px;
  margin-left:9px;
  padding:0 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  color:rgba(255,255,255,.65);
  background:rgba(44,0,13,.12);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:.2s ease;
}
.focus-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.focus-btn:hover, .focus-btn.active { color:#fff; border-color:rgba(255,255,255,.30); background:rgba(255,255,255,.11); }
.chart-stage {
  position:relative;
  flex:1;
  min-height:0;
  padding:7px 12px 0;
  overflow:hidden;
  background:
    linear-gradient(14deg,transparent 0 18%,rgba(255,0,105,.05) 18.2%,transparent 18.6%),
    radial-gradient(600px 260px at 72% 90%,rgba(255,0,55,.10),transparent 72%);
}
#hex-chart { position:absolute; z-index:2; inset:0; display:block; width:100%; height:100%; }
.chart-watermark {
  position:absolute;
  z-index:0;
  left:51%;
  top:52%;
  width:330px;
  height:330px;
  opacity:.025;
  transform:translate(-50%,-50%) rotate(12deg);
  filter:grayscale(1);
  pointer-events:none;
}
.market-pulse {
  margin-left:18px;
  min-width:125px;
  padding:7px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:8px;
  background:rgba(65,0,18,.48);
  box-shadow:0 12px 30px rgba(40,0,11,.18),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  pointer-events:none;
}
.market-pulse > i { width:7px; height:7px; flex:none; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; }
.market-pulse label { font-size:7px; }
.market-pulse strong { display:block; margin-top:3px; font-size:12px; }
.market-pulse strong.down { opacity:.70; }
.endpoint-ping {
  stroke-width:2.5;
  transform-box:fill-box;
  transform-origin:center;
}
.endpoint-glow-layer {
  opacity:.82;
}
.endpoint-wait .endpoint-ping {
  animation:endpoint-ping 1s 3.35s cubic-bezier(.2,.55,.4,1) 2;
}
.endpoint-wait .endpoint-glow-layer {
  animation:endpoint-glow 1s 3.35s ease-in-out 2 alternate;
}
@keyframes endpoint-ping {
  0% { transform:scale(1); opacity:.85; }
  100% { transform:scale(4); opacity:0; }
}
@keyframes endpoint-glow { from { opacity:.66; } to { opacity:1; } }
.chart-dates {
  position:absolute;
  z-index:4;
  left:6.15%;
  right:2.15%;
  bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:rgba(255,255,255,.48);
  font-size:9px;
  font-weight:500;
  pointer-events:none;
}
.bottom-chart-label {
  position:absolute;
  z-index:5;
  padding:0;
  color:#fff;
  font-family:Sora,Manrope,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 2px 8px rgba(47,0,13,.55);
  transform:translate(15px,-28px);
  pointer-events:none;
}
.chart-dates span { width:1px; display:flex; justify-content:center; white-space:nowrap; }
.chart-line.tension-draw {
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:tension-draw 3s cubic-bezier(.62,.03,.86,.4) forwards;
}
.area-tension { opacity:0; animation:area-tension 3.1s ease-in forwards; }
.explosive-tail {
  transform-box:fill-box;
  transform-origin:center;
  animation:tail-heat .42s ease-in-out infinite alternate;
}
.explosive-tail.ignite {
  opacity:0;
  animation:ignite-tail .7s 1.55s cubic-bezier(.16,.8,.28,1) forwards,tail-heat .42s 2.25s ease-in-out infinite alternate;
}
.endpoint-reveal { opacity:0; animation:endpoint-arrive .4s 3.35s cubic-bezier(.2,1.4,.4,1) forwards; }
.endpoint-wait {
  visibility:hidden;
  animation:endpoint-show 0s 3.35s forwards;
}
.clean-endpoint { pointer-events:none; }
.endpoint-sparks { opacity:.72; }
.fire-crawl {
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.fire-flame-band {
  opacity:.72;
  transform-box:fill-box;
  transform-origin:center;
  animation:fire-breathe .34s ease-in-out infinite alternate;
}
.fire-crawl-hot {
  stroke-dasharray:.026 .017;
  stroke-dashoffset:1;
  opacity:.96;
  animation:fire-run .86s linear infinite,fire-flash .29s ease-in-out infinite alternate;
}
.fire-crawl-sparks {
  stroke-dasharray:.004 .019;
  stroke-dashoffset:.65;
  opacity:.92;
  animation:fire-sparks .42s linear infinite;
}
.fire-crawl-plasma {
  stroke-dasharray:.012 .031;
  stroke-dashoffset:.35;
  opacity:.82;
  animation:fire-plasma .63s linear infinite reverse;
}
.fire-ember {
  pointer-events:none;
  filter:url(#ember-glow);
}
.blast-rays {
  transform-box:fill-box;
  transform-origin:center;
  animation:blast-spin 2.6s linear infinite;
}
.blast-core {
  transform-box:fill-box;
  transform-origin:center;
  animation:blast-core .28s ease-in-out infinite alternate;
}
.live-endpoint > circle:first-child {
  transform-box:fill-box;
  transform-origin:center;
  animation:endpoint-ring 2s ease-out infinite;
}
.chart-tooltip {
  position: absolute; z-index: 4; min-width: 145px; padding: 10px 13px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background:rgba(55,0,15,.90); box-shadow:0 13px 27px rgba(35,0,10,.27); backdrop-filter:blur(14px);
}
.chart-tooltip strong { display:block; margin-top:4px; font-size:14px; }
.chart-tooltip span { display:block; margin-top:3px; color:rgba(255,255,255,.63); font-size:9px; }
.chart-foot {
  min-height: 36px; padding: 0 20px; display:flex; align-items:center; justify-content:flex-end;
  border-top:1px solid rgba(255,255,255,.09); color:rgba(255,255,255,.50); font-size:9px;
}
.chart-foot b { color:#fff; }
.verified-source { display:flex; align-items:center; gap:7px; }
.verified-source i { width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.75); }

/* Focus mode turns the application into a purpose-built HEX terminal. */
.focus-mode .rail { display:none; }
.focus-mode .performance-hero { display:none; }
.focus-mode .topbar { min-height:84px; margin-bottom:10px; }
.focus-mode .chart-card {
  border-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 34px 80px rgba(35,0,10,.34),0 0 80px rgba(255,20,70,.10);
}
.focus-mode .chart-head { min-height:76px; }
.focus-mode .chart-watermark { width:470px; height:470px; }

/* Portfolio */
.portfolio-view, .share-view, .settings-view { display:flex; flex-direction:column; gap:13px; }
.portfolio-hero { min-height:130px; padding:20px 25px; display:grid; grid-template-columns:1.7fr repeat(3,.65fr); align-items:center; }
.portfolio-hero > * + * { min-height:75px; padding-left:24px; border-left:1px solid rgba(255,255,255,.13); }
.portfolio-hero h2, .share-intro h2, .settings-hero h2 { margin-top:6px; font-size:27px; font-weight:500; }
.portfolio-hero p, .share-intro p, .settings-hero p, .setting p { margin-top:6px; color:var(--muted); font-size:10px; line-height:1.55; }
.portfolio-stat { display:flex; flex-direction:column; justify-content:center; }
.portfolio-stat strong { margin-top:9px; font-size:24px; font-weight:500; }
.add-position { flex:none; }
.section-head { min-height:55px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.11); }
.section-head h2 { font-size:16px; }
.section-head span { color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.add-position form { padding:16px 20px 19px; display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:12px; align-items:end; }
.add-position label, .setting form > label { display:flex; flex-direction:column; gap:7px; }
input {
  width:100%; height:39px; padding:0 12px; outline:none;
  border:1px solid rgba(255,255,255,.17); border-radius:7px; color:#fff; background:rgba(54,0,16,.16);
  font-size:12px; font-weight:600;
}
input::placeholder { color:rgba(255,255,255,.34); }
input:focus { border-color:rgba(255,255,255,.45); box-shadow:0 0 0 3px rgba(255,255,255,.06); }
.white-btn, .outline-btn, .danger-btn {
  min-height:39px; padding:0 19px; border-radius:7px; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.white-btn { border:1px solid #fff; color:#bd002c; background:#fff; box-shadow:0 9px 20px rgba(50,0,14,.18); }
.outline-btn { border:1px solid rgba(255,255,255,.22); color:#fff; background:rgba(255,255,255,.06); }
.danger-btn { border:1px solid rgba(255,122,151,.26); color:#fff; background:rgba(68,0,19,.22); }
.white-btn:hover, .outline-btn:hover, .danger-btn:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.40); }
.positions-card { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.positions-table { flex:1; min-height:0; overflow:auto; }
.position-head, .position-row { display:grid; grid-template-columns:1.25fr 1.1fr 1fr 1fr 1fr 40px; gap:12px; align-items:center; padding:11px 20px; }
.position-head { position:sticky; top:0; z-index:2; background:rgba(90,0,24,.92); color:rgba(255,255,255,.54); font-size:8px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.position-row { min-height:62px; border-top:1px solid rgba(255,255,255,.10); }
.position-row b { font-size:12px; }
.position-row small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.position-row input { height:34px; border-color:transparent; background:rgba(55,0,16,.10); }
.delete-btn { width:31px; height:31px; border:1px solid rgba(255,255,255,.12); border-radius:7px; color:rgba(255,255,255,.65); background:rgba(55,0,16,.13); font-size:16px; }
.empty { min-height:180px; display:grid; place-items:center; color:var(--muted); font-size:11px; }

/* Share modal */
.share-modal {
  position:fixed;
  z-index:1000;
  inset:0;
  padding:24px;
  display:grid;
  place-items:center;
  animation:share-fade .22s ease-out both;
}
body.share-open { overflow:hidden; }
.share-modal-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(24,0,7,.72);
  backdrop-filter:blur(18px) saturate(120%);
}
.share-dialog {
  position:relative;
  z-index:1;
  width:min(880px,calc(100vw - 48px));
  max-height:calc(100svh - 48px);
  padding:16px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(111,0,28,.99),rgba(39,0,12,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 100px rgba(24,0,8,.60);
  overscroll-behavior:contain;
  animation:share-rise .3s cubic-bezier(.2,.75,.2,1) both;
}
.share-modal.is-closing { animation:share-fade-out .24s ease-in forwards; pointer-events:none; }
.share-modal.is-closing .share-dialog { animation:share-close .24s ease-in forwards; }
.share-dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.share-dialog-head h2 { margin-top:5px; font-size:21px; font-weight:600; letter-spacing:-.025em; }
.share-close {
  width:36px;
  height:36px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  color:rgba(255,255,255,.70);
  background:rgba(255,255,255,.06);
}
.share-close:hover { color:#fff; background:rgba(255,255,255,.12); }
.share-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.share-story-picker {
  margin:13px 0 11px;
  padding:4px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:rgba(42,0,12,.25);
}
.share-story-picker button {
  min-height:54px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:8px;
  color:rgba(255,255,255,.58);
  background:transparent;
  text-align:left;
  transition:.2s ease;
}
.share-story-picker button:hover { color:#fff; background:rgba(255,255,255,.06); }
.share-story-picker button[aria-pressed="true"] {
  color:var(--modal-ink);
  border-color:#fff;
  background:#fff;
  box-shadow:0 10px 26px var(--modal-shadow);
}
.share-story-picker span { display:block; font-size:11px; font-weight:800; }
.share-story-picker small { display:block; margin-top:4px; color:inherit; opacity:.68; font-size:8px; font-weight:600; }
.share-actions { display:flex; gap:9px; }
.share-x-btn.large { min-height:42px; }
.share-dialog .share-preview {
  min-height:0;
  padding:7px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(31,0,10,.30);
}
#share-canvas { display:block; width:min(100%,760px); height:auto; border:1px solid rgba(255,255,255,.17); border-radius:9px; box-shadow:0 18px 42px var(--modal-shadow); }
.share-dialog-foot { margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.share-dialog-foot > p { max-width:390px; color:rgba(255,255,255,.48); font-size:8px; line-height:1.55; }
.share-dialog-simple { flex-direction:column; align-items:stretch; gap:10px; }
.share-actions { display:flex; gap:10px; }
.share-actions > button { flex:1; width:auto; }
.share-intent-btn {
  min-height:52px;
  padding:8px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:10px;
  color:var(--modal-ink);
  background:#fff;
  box-shadow:0 14px 30px var(--modal-shadow),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.share-intent-btn:hover { transform:translateY(-1px); box-shadow:0 18px 38px var(--modal-shadow); }
.share-intent-btn:disabled { opacity:.6; cursor:wait; transform:none; }
.share-intent-btn span { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.share-intent-btn small { color:var(--modal-ink-soft); font-size:8px; font-weight:700; }
.caption-copy {
  flex:none;
  margin-left:auto;
  padding:7px 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:7px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .2s ease,border-color .2s ease;
}
.caption-copy:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.38); }
.caption-copy svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.copy-share-btn {
  width:min(100%,390px);
  min-height:52px;
  padding:8px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  color:#fff;
  background:#000;
  box-shadow:0 14px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease;
}
.copy-share-btn:hover {
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.34);
  background:#151515;
  box-shadow:0 18px 36px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10);
}
.copy-share-btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.copy-share-btn:disabled { opacity:.6; cursor:wait; transform:none; }
.copy-share-btn span { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.copy-share-btn small { color:rgba(255,255,255,.62); font-size:8px; font-weight:600; }
.share-link-btn {
  align-self:center;
  margin-top:2px;
  padding:6px 10px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.55);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.share-link-btn:hover { color:#fff; }
.share-caption {
  min-height:49px;
  margin-top:0;
  padding:9px 13px;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(57,0,17,.18);
}
.share-caption span { flex:none; color:rgba(255,255,255,.52); font-size:7px; font-weight:800; letter-spacing:.14em; }
.share-caption p { flex:1; color:rgba(255,255,255,.78); font-size:9px; line-height:1.45; white-space:pre-line; }

/* Settings */
.settings-hero { min-height:125px; padding:23px 25px; }
.settings-grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.setting { padding:25px; }
.setting h3 { margin-top:10px; font-size:18px; }
.switch { margin-top:28px; display:flex; align-items:center; gap:10px; color:#fff; font-size:10px; letter-spacing:0; text-transform:none; }
.switch input { display:none; }
.switch span { position:relative; width:39px; height:21px; border-radius:12px; background:rgba(48,0,14,.35); border:1px solid rgba(255,255,255,.17); }
.switch span::after { content:""; position:absolute; left:3px; top:3px; width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,.55); transition:left .2s,background .2s; }
.switch input:checked + span::after { left:21px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.40); }
.setting form { margin-top:20px; display:flex; flex-direction:column; gap:13px; }
.backup-actions { margin-top:24px; display:flex; gap:8px; flex-wrap:wrap; }
.file-btn { display:inline-flex; align-items:center; }
.file-btn input { display:none; }

.toast {
  position:fixed; z-index:2000; left:50%; bottom:34px; transform:translateX(-50%);
  max-width:min(460px, calc(100vw - 32px));
  padding:14px 22px; border:1.5px solid rgba(255,255,255,.42); border-radius:12px;
  color:#fff; background:#0b0207;
  box-shadow:0 20px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  font-size:13px; font-weight:700; letter-spacing:.01em; text-align:center;
  animation:toast-rise .22s ease both;
}
@keyframes toast-rise { from { opacity:0; transform:translate(-50%, 12px); } to { opacity:1; transform:translate(-50%, 0); } }
::selection { color:#c9002e; background:#fff; }

@keyframes logo-breathe {
  0%,100% { transform:translateY(0); filter:drop-shadow(0 8px 12px rgba(48,0,14,.18)); }
  50% { transform:translateY(-2px); filter:drop-shadow(0 13px 20px rgba(255,255,255,.12)); }
}
@keyframes live-glow {
  0% { opacity:.85; transform:scale(.55); }
  75%,100% { opacity:0; transform:scale(1.25); }
}
@keyframes tension-draw {
  0% { stroke-dashoffset:1; }
  58% { stroke-dashoffset:.78; }
  82% { stroke-dashoffset:.42; }
  100% { stroke-dashoffset:0; }
}
@keyframes area-tension { 0%,30% { opacity:0; } 100% { opacity:1; } }
@keyframes ignite-tail {
  from { opacity:0; stroke-dasharray:.04 .96; stroke-dashoffset:1; }
  to { opacity:1; stroke-dasharray:1 0; stroke-dashoffset:0; }
}
@keyframes tail-heat { from { opacity:.74; } to { opacity:1; } }
@keyframes endpoint-arrive { from { opacity:0; transform:scale(.35); transform-origin:center; } to { opacity:1; transform:scale(1); } }
@keyframes endpoint-show { to { visibility:visible; } }
@keyframes draw-chart { to { stroke-dashoffset:0; } }
@keyframes fire-run {
  to { stroke-dashoffset:0; }
}
@keyframes fire-sparks { to { stroke-dashoffset:0; } }
@keyframes fire-plasma { to { stroke-dashoffset:0; } }
@keyframes fire-breathe {
  from { opacity:.48; stroke-width:12px; }
  to { opacity:.88; stroke-width:18px; }
}
@keyframes fire-flash { from { opacity:.58; } to { opacity:1; } }
@keyframes blast-spin { to { transform:rotate(360deg); } }
@keyframes blast-core {
  from { transform:scale(.84); filter:brightness(1); }
  to { transform:scale(1.22); filter:brightness(1.45); }
}
@keyframes cycle-shine {
  0%,18% { left:-48px; opacity:0; }
  34% { opacity:.85; }
  72% { opacity:.55; }
  100% { left:calc(100% + 8px); opacity:0; }
}
@keyframes token-float {
  0%,100% { transform:translateY(-49%) rotate(1deg) scale(1); }
  50% { transform:translateY(-53%) rotate(-1deg) scale(1.025); }
}
@keyframes flame-flicker {
  from { transform:rotate(19deg) scale(.82,1.03); filter:blur(.1px); }
  to { transform:rotate(29deg) scale(1.03,.88); filter:blur(.35px); }
}
@keyframes endpoint-ring {
  0% { transform:scale(.65); opacity:.42; }
  75%,100% { transform:scale(1.65); opacity:0; }
}
@keyframes share-fade { from { opacity:0; } }
@keyframes share-rise { from { opacity:0; transform:translateY(16px) scale(.985); } }
@keyframes share-fade-out { to { opacity:0; } }
@keyframes share-close { to { opacity:0; transform:translateY(10px) scale(.985); } }

body.is-backgrounded *,
body.is-backgrounded *::before,
body.is-backgrounded *::after {
  animation-play-state:paused !important;
}

@media (min-width: 801px) and (max-width: 1180px) {
  .brand { min-width:330px; }
  .asset-switch { margin-left:8px; }
  .asset-switch button { min-width:49px; padding:0 8px; }
  .brand-mark { width:66px; height:66px; flex-basis:66px; }
  .brand h1 { font-size:23px; }
  .performance-copy { gap:22px; padding:20px 24px; }
  .performance-primary > strong { font-size:58px; }
  .performance-multiple { min-width:120px; padding-left:22px; }
  .performance-multiple strong { font-size:34px; }
  .cycle-progress { padding:15px 18px 14px 10px; }
  .cycle-progress-head > div:first-child > strong { font-size:11px; }
  .cycle-progress-readout strong { font-size:22px; }
  .top-metrics > div { min-width:125px; padding:4px 12px; }
  .chart-legend { display:none; }
}

@media (min-width: 801px) and (max-width: 1000px) {
  .top-metrics { display:none; }
  .brand { min-width:0; }
  .asset-switch { margin-left:6px; }
  .chart-heading h2 { font-size:14px; }
}

/* Responsive product mode — phones use native sizing instead of shrinking the
   1600px desktop artboard into an unreadable miniature. */
@media (max-width: 800px) {
  html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body {
    min-height: 100svh;
    background:
      radial-gradient(620px 520px at -25% 18%, rgba(255, 70, 119, .65), transparent 70%),
      linear-gradient(150deg, #f5003e 0%, #c3002c 48%, #6b0016 100%);
  }
  .app {
    position: relative;
    inset:auto;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 100svh;
    padding: 10px;
    display: block;
    transform: none !important;
  }
  .workspace { width: 100%; }
  .rail {
    position: fixed;
    z-index: 50;
    left: 9px;
    right: 9px;
    bottom: 8px;
    width: auto;
    height: 66px;
    padding: 5px;
    flex-direction: row;
    border-radius: 13px;
    background: rgba(91, 0, 25, .88);
    backdrop-filter: blur(24px) saturate(135%);
  }
  .rail-logo, .live-badge { display: none; }
  .rail nav {
    height: 100%;
    flex: 1;
    flex-direction: row;
    gap: 3px;
  }
  .nav-btn {
    width: auto;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 6px 2px 5px;
    gap: 4px;
    border-radius: 9px;
  }
  .nav-btn svg { width: 18px; height: 18px; }
  .nav-btn span { font-size: 7px; }
  .topbar {
    min-height: 78px;
    margin-bottom: 10px;
    padding: 8px 4px 12px;
  }
  .brand { min-width:0; gap:8px; }
  .brand-mark { width:52px; height:52px; flex-basis:52px; }
  .brand h1 { font-size:16px; letter-spacing:-.025em; }
  .brand p { margin-top: 7px; font-size: 6px; letter-spacing: .22em; }
  .asset-switch { margin-left:auto; padding:3px; }
  .asset-switch button { min-width:43px; height:28px; padding:0 7px; font-size:8px; }
  .top-metrics { margin-left: auto; }
  .top-metrics > div { min-width: 90px; padding: 2px 10px; }
  .top-metrics > div:nth-of-type(2),
  .top-metrics > div:nth-of-type(3),
  .top-metrics > div.updated,
  .top-metrics > i { display: none; }
  .top-metrics strong { margin-top: 4px; font-size: 14px; }
  .top-metrics label { font-size: 7px; }
  .price-market-preview { display:none; }
  .topbar > .share-x-btn { min-width: 42px; min-height: 42px; padding: 0 11px; }
  .topbar > .share-x-btn span { display: none; }
  .performance-hero {
    min-height:280px;
    flex-direction:column;
    align-items:stretch;
  }
  .performance-copy { gap:20px; padding:22px; }
  .performance-primary > label { font-size:12px; }
  .performance-primary > strong { font-size:57px; }
  .performance-primary > span { margin-top:9px; font-size:7px; }
  .performance-multiple { min-width:112px; padding-left:20px; }
  .performance-multiple strong { font-size:32px; }
  .performance-multiple label { font-size:7px; }
  .performance-multiple small { font-size:6px; }
  .cycle-progress { min-height:132px; padding:15px 18px 13px; }
  .cycle-progress,
  .cycle-progress-head,
  .cycle-progress-meter,
  .cycle-progress-track,
  .cycle-progress-axis,
  .cycle-progress-foot { width:100%; min-width:0; max-width:100%; }
  .cycle-progress-head > div:first-child > strong { font-size:11px; }
  .cycle-progress-readout strong { font-size:21px; }
  .cycle-progress-meter { margin-top:26px; }
  .metric-strip {
    min-height: 0;
    grid-template-columns: 1fr 1fr;
  }
  .metric {
    min-height: 105px;
    padding: 16px;
  }
  .metric:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.13); }
  .metric:nth-child(4) { border-top: 1px solid rgba(255,255,255,.13); }
  .metric strong { font-size: 22px; }
  .performance-metric strong { font-size: 27px; }
  .chart-view { gap: 10px; }
  .chart-card { height: 535px; min-height: 535px; }
  .chart-head {
    min-height: 112px;
    padding: 12px 14px;
    flex-wrap: wrap;
    align-content: center;
    gap: 9px;
  }
  .chart-head h2 { font-size: 14px; }
  .chart-legend { display: none; }
  .periods {
    width: 100%;
    margin-left: 0;
  }
  .focus-btn {
    position:absolute;
    right:14px;
    top:12px;
    min-width:68px;
    height:34px;
  }
  .periods button { flex: 1; min-width: 0; }
  .chart-stage { min-height: 370px; padding: 2px 4px 0; }
  .chart-foot { min-height: 42px; padding: 0 12px; }
  .chart-foot span:last-child { display: none; }
  .portfolio-view, .share-view, .settings-view { gap: 10px; }
  .portfolio-hero {
    min-height: 0;
    padding: 18px;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 0;
  }
  .portfolio-hero > div:first-child { grid-column: 1 / -1; }
  .portfolio-hero > * + * {
    min-height: 59px;
    padding-left: 12px;
  }
  .portfolio-hero > div:nth-child(2) { padding-left: 0; border-left: 0; }
  .portfolio-hero h2, .share-intro h2, .settings-hero h2 { font-size: 23px; }
  .portfolio-stat strong { font-size: 18px; }
  .add-position form { grid-template-columns: 1fr; padding: 15px; }
  .add-position form .white-btn { width: 100%; }
  .positions-card { min-height: 280px; }
  .positions-table { overflow-x: auto; }
  .position-head, .position-row {
    width: 760px;
    grid-template-columns: 1.25fr 1.1fr 1fr 1fr 1fr 40px;
  }
  .share-modal { padding:9px; place-items:end center; }
  .share-dialog {
    width:100%;
    max-height:calc(100svh - 18px);
    padding:15px;
    border-radius:16px;
  }
  .share-dialog-head h2 { font-size:20px; }
  .share-story-picker { margin-top:14px; }
  .share-story-picker button { min-height:58px; padding:9px 10px; }
  .share-story-picker span { font-size:10px; }
  .share-story-picker small { font-size:7px; }
  .share-dialog .share-preview { padding:5px; }
  #share-canvas { width:100%; height:auto; }
  .share-dialog-foot { align-items:stretch; flex-direction:column; gap:10px; }
  .share-actions { margin-top:0; }
  .share-actions > * { flex:1; padding-left:8px; padding-right:8px; }
  .share-link-btn {
  align-self:center;
  margin-top:2px;
  padding:6px 10px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.55);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease;
}

}

/* ═══ Official bridge flow ═══ */
.bridge-dialog {
  width: min(1040px, calc(100vw - 40px));
  max-height: min(92svh, 880px);
  overflow-y: auto;
  border-color: color-mix(in srgb, var(--acc1, #ff5ca8) 42%, rgba(255,255,255,.12));
  background:
    radial-gradient(70% 60% at 7% 0%, color-mix(in srgb, var(--acc1, #ff5ca8) 17%, transparent), transparent 68%),
    radial-gradient(55% 50% at 100% 100%, color-mix(in srgb, var(--acc2, #e90035) 13%, transparent), transparent 72%),
    linear-gradient(155deg, rgba(17,4,25,.985), rgba(8,2,15,.99));
  box-shadow:
    0 34px 100px rgba(0,0,0,.7),
    0 0 45px color-mix(in srgb, var(--acc1, #ff5ca8) 13%, transparent),
    inset 0 1px 0 rgba(255,255,255,.09);
}
.bridge-dialog-head label { color: var(--acc1, #ff5ca8); }
.bridge-dialog-head h2 {
  margin-top: 7px;
  font-size: clamp(25px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -.045em;
}
.bridge-dialog-head .share-dialog-sub { margin-top: 7px; font-size: 12px; }
.bridge-toolbar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bridge-periods {
  display: inline-flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
}
.bridge-periods button {
  min-width: 62px;
  padding: 8px 15px;
  border: 0;
  border-radius: 999px;
  color: rgba(255,255,255,.48);
  background: transparent;
  font: 800 9px/1 Sora, Manrope, sans-serif;
  letter-spacing: .1em;
  cursor: pointer;
  transition: .2s ease;
}
.bridge-periods button:hover { color: #fff; }
.bridge-periods button.on {
  color: var(--accText, #fff);
  background: linear-gradient(115deg, var(--acc1, #ff5ca8), var(--acc2, #e90035));
  box-shadow: 0 0 18px color-mix(in srgb, var(--acc1, #ff5ca8) 36%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.bridge-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.47);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}
.bridge-live i,
.bridge-coverage > i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #66f2b4;
  box-shadow: 0 0 10px #66f2b4;
}
.bridge-content { margin-top: 14px; }
.bridge-loading,
.bridge-error {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,.5);
}
.bridge-loading i {
  width: 36px;
  height: 36px;
  margin-bottom: 17px;
  border: 2px solid rgba(255,255,255,.12);
  border-top-color: var(--acc1, #ff5ca8);
  border-radius: 50%;
  box-shadow: 0 0 16px color-mix(in srgb, var(--acc1, #ff5ca8) 28%, transparent);
  animation: bridge-spin .8s linear infinite;
}
@keyframes bridge-spin { to { transform: rotate(360deg); } }
.bridge-loading strong,
.bridge-error strong { color: #fff; font-size: 17px; }
.bridge-loading span,
.bridge-error p { margin-top: 6px; font-size: 11px; }
.bridge-error > span { margin-bottom: 14px; color: var(--acc1, #ff5ca8); font-size: 42px; text-shadow: 0 0 22px var(--acc1, #ff5ca8); }
.bridge-error button {
  margin-top: 18px;
  padding: 10px 18px;
  border: 1px solid var(--acc1, #ff5ca8);
  border-radius: 10px;
  color: #fff;
  background: color-mix(in srgb, var(--acc1, #ff5ca8) 14%, transparent);
  font: 800 10px Sora, sans-serif;
  cursor: pointer;
}
.bridge-hero {
  position: relative;
  min-height: 150px;
  padding: 25px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 42%, rgba(255,255,255,.1));
  border-radius: 21px;
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--acc1, #ff5ca8) 20%, rgba(15,3,24,.7)), rgba(8,2,16,.52) 63%),
    rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.bridge-hero::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  right: -130px;
  top: -160px;
  border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 35%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 70px color-mix(in srgb, var(--acc1, #ff5ca8) 20%, transparent), inset 0 0 70px color-mix(in srgb, var(--acc2, #e90035) 12%, transparent);
}
.bridge-net-copy { position: relative; z-index: 1; display: flex; flex-direction: column; }
.bridge-net-copy label {
  color: var(--acc1, #ff5ca8);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
}
.bridge-net-copy strong {
  margin-top: 7px;
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -.055em;
  word-spacing: .08em;
  text-shadow: 0 0 24px color-mix(in srgb, var(--acc1, #ff5ca8) 32%, transparent);
}
.bridge-net-copy span { margin-top: 11px; color: rgba(255,255,255,.57); font-size: 11px; }
.bridge-signal { position: relative; z-index: 1; width: 132px; display: flex; align-items: center; gap: 8px; }
.bridge-signal i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--acc1, #ff5ca8);
  box-shadow: 0 0 16px var(--acc1, #ff5ca8);
  opacity: .3;
}
.bridge-signal i:nth-child(2) { opacity: .6; }
.bridge-signal i:nth-child(3) { opacity: 1; }
.bridge-signal b {
  margin-left: auto;
  color: rgba(255,255,255,.8);
  font-size: 11px;
  letter-spacing: .1em;
}
.bridge-out .bridge-net-copy label { color: #ff7892; }
.bridge-directions { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bridge-direction {
  min-height: 108px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 17px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 17px;
  background: rgba(255,255,255,.025);
}
.bridge-direction-icon {
  width: 45px;
  height: 45px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 14px;
  font-size: 21px;
}
.bridge-direction > div:last-child { display: flex; flex-direction: column; }
.bridge-direction label { font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.bridge-direction strong { margin-top: 4px; color: #fff; font-size: 24px; letter-spacing: -.035em; }
.bridge-direction span { margin-top: 3px; color: rgba(255,255,255,.42); font-size: 9px; }
.bridge-direction.bridge-in { color: #66f2b4; border-color: rgba(102,242,180,.25); background: linear-gradient(130deg, rgba(102,242,180,.07), rgba(255,255,255,.018)); }
.bridge-direction.bridge-out { color: #ff7892; border-color: rgba(255,120,146,.24); background: linear-gradient(130deg, rgba(255,120,146,.065), rgba(255,255,255,.018)); }
.bridge-balance {
  margin-top: 10px;
  padding: 12px 16px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(0,0,0,.2);
}
.bridge-balance-head { display: flex; justify-content: space-between; color: rgba(255,255,255,.48); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.bridge-balance-head span:first-child { color: #66f2b4; }
.bridge-balance-head span:last-child { color: #ff7892; }
.bridge-balance-track { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #ff7892; box-shadow: 0 0 10px rgba(255,120,146,.2); }
.bridge-balance-track i { display: block; height: 100%; border-radius: inherit; background: #66f2b4; box-shadow: 0 0 10px rgba(102,242,180,.65); }
.bridge-lower { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .8fr); gap: 10px; }
.bridge-chart-card,
.bridge-tokens-card {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 17px;
  background: rgba(0,0,0,.23);
}
.bridge-section-head { display: flex; justify-content: space-between; align-items: flex-end; }
.bridge-section-head > div { display: flex; flex-direction: column; }
.bridge-section-head label { color: var(--acc1, #ff5ca8); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.bridge-section-head strong { margin-top: 4px; color: #fff; font-size: 14px; }
.bridge-section-head > span { color: rgba(255,255,255,.35); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.bridge-section-head > span i { display: inline-block; width: 6px; height: 6px; margin: 0 6px 0 4px; border-radius: 50%; background: #66f2b4; }
.bridge-section-head > span i:last-child { background: #ff7892; }
.bridge-chart { height: 150px; margin-top: 15px; display: flex; align-items: stretch; gap: 3px; }
.bridge-day { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.bridge-day-bars { height: 126px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid rgba(255,255,255,.12); }
.bridge-day-bars i { width: min(7px, 38%); min-height: 1px; border-radius: 3px 3px 0 0; transition: height .4s ease; }
.bridge-day-bars .in { background: linear-gradient(#a5ffdb, #29c78c); box-shadow: 0 0 7px rgba(102,242,180,.32); }
.bridge-day-bars .out { background: linear-gradient(#ff9caf, #e63e62); box-shadow: 0 0 7px rgba(255,120,146,.3); }
.bridge-day > span { min-height: 12px; margin-top: 6px; overflow: hidden; color: rgba(255,255,255,.32); font-size: 7px; text-align: center; white-space: nowrap; }
.bridge-token-list { margin-top: 10px; }
.bridge-token-row { min-height: 42px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.07); }
.bridge-token-row:last-child { border-bottom: 0; }
.bridge-token-mark { width: 25px; height: 25px; flex: none; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 35%, transparent); border-radius: 8px; color: #fff; background: color-mix(in srgb, var(--acc1, #ff5ca8) 11%, transparent); font-size: 9px; font-weight: 800; }
.bridge-token-name { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.bridge-token-name b { overflow: hidden; color: #fff; font-size: 10px; text-overflow: ellipsis; }
.bridge-token-name small { margin-top: 2px; color: rgba(255,255,255,.34); font-size: 7.5px; }
.bridge-token-row > strong { font-size: 9px; white-space: nowrap; }
.bridge-token-row > strong.up { color: #66f2b4; }
.bridge-token-row > strong.down { color: #ff7892; }
.bridge-token-empty { padding: 32px 0; color: rgba(255,255,255,.4); font-size: 9px; text-align: center; }
.bridge-coverage { margin: 10px 2px 0; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.38); font-size: 8px; }
.bridge-coverage b { color: rgba(255,255,255,.62); }
.bridge-foot {
  margin-top: 14px;
  padding-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.34);
  font-size: 8px;
}
.bridge-foot > div { display: flex; gap: 14px; }
.bridge-foot a { color: rgba(255,255,255,.64); font-weight: 700; text-decoration: none; }
.bridge-foot a:last-child { color: var(--acc1, #ff5ca8); }
.bridge-foot a:hover { color: #fff; }

@media (max-width: 800px) {
  /* Keep one compact route to this site-wide feature on phones. */
  .topbar > .bridge-btn {
    display: flex !important;
    grid-row: 1;
    grid-column: 2;
    min-width: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0 10px;
    justify-self: end;
  }
  .topbar > .bridge-btn .wallet-btn-copy { display: none; }
  .top-metrics { grid-column: 3 !important; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
  .bridge-dialog { max-height: 92svh !important; }
  .bridge-dialog-head h2 { font-size: 21px; }
  .bridge-dialog-head .share-dialog-sub { max-width: 290px; font-size: 10px; line-height: 1.5; }
  .bridge-toolbar { margin-top: 10px; }
  .bridge-live { display: none; }
  .bridge-periods { width: 100%; }
  .bridge-periods button { flex: 1; }
  .bridge-content { margin-top: 9px; }
  .bridge-hero { min-height: 120px; padding: 20px; }
  .bridge-net-copy strong { font-size: 29px; }
  .bridge-signal { width: 85px; }
  .bridge-signal i { display: none; }
  .bridge-directions { grid-template-columns: 1fr 1fr; gap: 6px; }
  .bridge-direction { min-height: 88px; padding: 13px; gap: 10px; }
  .bridge-direction-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .bridge-direction strong { font-size: 17px; }
  .bridge-direction label { font-size: 6.5px; }
  .bridge-lower { grid-template-columns: 1fr; }
  .bridge-chart { height: 130px; }
  .bridge-day-bars { height: 106px; }
  .bridge-tokens-card { padding-bottom: 10px; }
  .bridge-foot { align-items: flex-start; flex-direction: column; }
  .bridge-foot > div { width: 100%; justify-content: space-between; }
}

@media (max-width: 430px) {
  .bridge-hero { min-height: 110px; padding: 17px 16px; }
  .bridge-net-copy strong { font-size: 25px; }
  .bridge-net-copy span { max-width: 220px; font-size: 9px; }
  .bridge-signal { width: auto; }
  .bridge-direction { padding: 11px; }
  .bridge-direction-icon { display: none; }
  .bridge-direction strong { font-size: 16px; }
  .bridge-coverage { align-items: flex-start; line-height: 1.4; }
}

@media (max-width: 800px) {
.share-link-btn:hover { color:#fff; }
.share-caption { align-items:flex-start; flex-direction:column; gap:5px; }
  .settings-hero { min-height: 0; padding: 20px; }
  .settings-grid { grid-template-columns: 1fr; }
  .setting { padding: 20px; }
  .toast {
    width: calc(100% - 34px);
    bottom: 18px;
    text-align: center;
  }
}

/* Live-looking chart placeholder while the first CDN history is warming. */
.chart-loading-trace { fill: none; stroke: color-mix(in srgb, var(--acc1, #ff5ca8) 68%, #fff); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .16 .84; filter: drop-shadow(0 0 11px color-mix(in srgb, var(--acc1, #ff5ca8) 55%, transparent)); animation: chart-loading-flow 2.4s linear infinite; }
.chart-loading-node { fill: #fff; stroke: var(--acc1, #ff5ca8); stroke-width: 5; filter: drop-shadow(0 0 13px var(--acc1, #ff5ca8)); animation: chart-loading-pulse 1.5s ease-in-out infinite; }
.chart-loading-copy { fill: rgba(255,255,255,.6); font: 700 15px Manrope, sans-serif; letter-spacing: .025em; }
@keyframes chart-loading-flow { to { stroke-dashoffset: -1; } }
@keyframes chart-loading-pulse { 50% { opacity: .45; transform: scale(.72); transform-origin: 855px 312px; } }
@media (prefers-reduced-motion: reduce) { .chart-loading-trace, .chart-loading-node { animation: none; } }

@media (max-width: 460px) {
  .topbar { min-height:84px; padding:9px 12px 11px; }
  .brand { align-self:flex-start; }
  .brand h1 { font-size:17px; }
  .brand-domain { display:none; }
  .brand p { display:none; }
  .asset-switch {
    position:absolute;
    left:63px;
    bottom:9px;
    margin:0;
    padding:2px;
  }
  .asset-switch button { min-width:38px; height:23px; padding:0 5px; font-size:7px; }
  .top-metrics { align-self:flex-start; }
  .top-metrics > div { min-width:76px; padding:3px 0 0 4px; }
  .performance-copy { gap:14px; padding:19px 16px; }
  .performance-primary > strong { font-size:48px; }
  .performance-multiple { min-width:92px; padding-left:14px; }
  .performance-multiple strong { font-size:27px; }
  .cycle-progress { min-height:128px; padding:14px 14px 12px; }
  .cycle-progress-head > div:first-child > strong { font-size:10px; }
  .cycle-progress-foot span { display:none; }
  .metric { padding: 14px 12px; }
  .metric strong { font-size: 20px; }
  .performance-metric strong { font-size: 24px; }
  .portfolio-hero p { max-width: 320px; }
  .chart-card { height: 500px; min-height: 500px; }
}

@media (max-width: 600px) {
  .top-metrics { display: none; }
  .topbar { justify-content: space-between; }
  .topbar > .share-x-btn { margin-left: 8px; }
}

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

.share-fab { display: none; } /* mobile-only, enabled in the media query below */

/* ═══ Mobile: one screen — the story, the climb, and the share button ═══ */
@media (max-width: 800px) {
  html, body { overflow-x: hidden; }
  .app { padding: 10px 10px 0; height: auto; min-height: 100svh; overflow-x: hidden; }
  /* nothing may exceed the viewport, whatever the content wants */
  .app, .workspace, .topbar, .view, .performance-hero, .cycle-progress,
  .performance-copy, .cycle-progress-head, .cycle-progress-meter {
    max-width: 100%;
    min-width: 0;
  }
  /* natural card heights, stack centred in the screen — no internal voids */
  .workspace { display: flex; flex-direction: column; min-height: calc(100svh - 20px); }
  .chart-card { display: none !important; }
  .view.chart-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    gap: 10px;
    padding-bottom: 76px;
  }
  .performance-hero { flex: none; }

  /* header: a deterministic 2-row grid — brand + portfolio, then asset + price */
  .topbar {
    min-height: 0;
    margin-bottom: 10px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 8px;
    align-items: center;
    overflow: hidden;
  }
  .brand { min-width: 0; grid-row: 1; grid-column: 1; overflow: visible; align-self: center; }
  .brand > div { min-width: 0; }
  .brand h1 { font-size: 14px; letter-spacing: -.02em; white-space: nowrap; }
  /* an earlier 460px block drops these — the domain IS the brand, keep it */
  .brand-domain { display: inline !important; }
  .brand p { display: block !important; margin-top: 4px; font-size: 6px; letter-spacing: .18em; white-space: nowrap; }
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .brand p { font-size: 6px; letter-spacing: .16em; }
  .topbar-divider { display: none; }
  .topbar > .share-x-btn { display: none !important; }

  .wallet-btn {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    min-height: 38px;
    padding: 0 12px;
    gap: 7px;
    justify-self: end;
  }
  .wallet-btn svg { width: 15px; height: 15px; }
  .wallet-btn-label { display: none; }
  .wallet-btn-balance { font-size: 12px; }

  /* return the switch to the grid (the 460px block absolutely positions it) */
  .asset-switch {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    grid-row: 2;
    grid-column: 1;
    flex: none;
    margin: 0;
    padding: 3px;
    justify-self: start;
  }
  .asset-switch button { min-width: 52px; height: 28px; font-size: 8px; }

  .top-metrics { grid-row: 2; grid-column: 2; display: flex !important; margin: 0; justify-self: end; align-self: center; }
  .top-metrics > div { min-width: 0; padding: 0; align-items: flex-end; }
  .top-metrics label { font-size: 6px; }
  .top-metrics strong { margin-top: 2px; font-size: 17px; }
  .price-market-preview { display: none !important; }

  /* hero: stacked, nothing clipped */
  .performance-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .performance-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 4px;
  }
  .performance-primary { width: 100%; }
  .performance-primary > label { font-size: 13px; }
  .performance-primary > strong {
    max-width: 100%;
    font-size: clamp(46px, 15vw, 74px);
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
  }
  .performance-primary > span { margin-top: 8px; font-size: 7px; }
  .performance-multiple {
    min-width: 0;
    width: 100%;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.22);
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    column-gap: 10px;
  }
  .performance-multiple label { grid-column: 1 / -1; margin: 0 0 4px; font-size: 8px; letter-spacing: .17em; }
  .performance-multiple strong { grid-column: 1; margin-top: 0; font-size: 34px; line-height: 1; }
  .performance-multiple small { grid-column: 2; margin-top: 0; font-size: 7px; }

  /* the heartbeat is desktop garnish — the hero carries mobile */
  .heartbeat-end { display: none; }

  /* the 10,000x climb, fitted */
  .cycle-progress { padding: 16px 18px 20px; }
  .cycle-progress-head { flex-wrap: wrap; gap: 10px; }
  .cycle-progress-head > div:first-child > strong { font-size: 14px; }
  .cycle-progress-readout { margin-left: auto; text-align: right; }
  .cycle-progress-readout strong { font-size: 26px; }
  .cycle-progress-readout span { font-size: 6px; }
  .cycle-progress-meter { margin-top: 30px; }
  .cycle-progress-marker span { padding: 4px 8px; min-width: 0; }
  .cycle-progress-marker small { display: none; }
  .cycle-progress-marker b { font-size: 11px; }
  /* at 0.03% the pill would hang off the left edge — pin it inside */
  .cycle-progress-marker { min-width: 46px; }
  .cycle-progress-marker span { left: 0; transform: none; }
  .cycle-progress-axis span { font-size: 6px; }
  .cycle-progress-foot { flex-wrap: wrap; gap: 6px; font-size: 7px; }

  /* the share action owns the bottom of the screen */
  .share-fab {
    display: flex !important;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 300;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 18px 44px rgba(20,0,6,.5), inset 0 1px 0 rgba(255,255,255,.14);
  }
  .share-fab span { display: inline !important; font-size: 14px; }
  .share-fab b { font-size: 19px; }

  /* modals: full-height sheets that never overflow */
  .share-dialog, .wallet-dialog { width: calc(100vw - 20px); max-height: 92svh; overflow-y: auto; }
  .wallet-summary { grid-template-columns: 1fr 1fr; padding: 16px 16px 14px; }
  .wallet-summary .wallet-total { font-size: 30px; }
  .wallet-summary strong { font-size: 19px; }
  .wallet-input-row { flex-wrap: wrap; }
  .wallet-input-row input { flex: 1 1 100%; }
  .wallet-input-row button { flex: 1; }
  .wallet-positions { max-height: 44svh; }
}

/* ═══ PulseChain wallet viewer ═══ */
.wallet-privacy {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 2px 0;
  color: rgba(255,255,255,.52);
  font-size: 10px;
  font-weight: 600;
}
.wallet-privacy svg { flex: none; width: 12px; height: 12px; opacity: .8; }
.wallet-btn {
  margin-right: 8px;
  min-height: 42px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 9px;
  color: rgba(255,255,255,.85);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.wallet-btn:hover { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.38); transform: translateY(-1px); }
.wallet-btn svg { width: 16px; height: 16px; opacity: .85; }
.wallet-btn-copy {
  display:flex;
  align-items:center;
  gap:11px;
  line-height:1;
}
.wallet-btn-balance {
  padding-left:11px;
  border-left:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  font-variant-numeric:tabular-nums;
}

.wallet-dialog { width: min(94vw, 780px); }
.wallet-input-row { display: flex; gap: 9px; margin-top: 4px; }
.wallet-input-row input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: rgba(35,0,10,.35);
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  outline: none;
  transition: border-color .2s ease;
}
.wallet-input-row input:focus { border-color: rgba(255,255,255,.55); }
.wallet-input-row button {
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(105deg, #ff2f7d, #e30028);
  box-shadow: 0 10px 22px rgba(200,0,50,.4), inset 0 1px 0 rgba(255,255,255,.3);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .2s ease, opacity .2s ease;
}
.wallet-input-row button:hover { transform: translateY(-1px); }
.wallet-input-row button:disabled { opacity: .55; cursor: wait; transform: none; }
.wallet-input-row #wallet-forget { background: transparent; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.66); }
.wallet-input-row #wallet-forget:hover { color: #fff; border-color: rgba(255,255,255,.4); }

.wallet-summary {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr .7fr .9fr 1fr;
  gap: 10px;
  margin-top: 12px;
  padding: 20px 22px 18px;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(340px 160px at 8% 0%, rgba(255,0,180,.5), transparent 70%),
    radial-gradient(300px 170px at 95% 110%, rgba(255,41,38,.45), transparent 70%),
    linear-gradient(105deg, #f40078 0%, #f30037 40%, #d00012 75%, #8a0014 100%);
  box-shadow: 0 16px 38px rgba(120,0,30,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.wallet-summary label { font-size: 8px; color: rgba(255,255,255,.8); }
.wallet-summary strong { display: block; margin-top: 6px; font-size: 24px; font-weight: 800; text-shadow: 0 1px 10px rgba(90,0,20,.35); }
.wallet-summary .wallet-total { font-size: 38px; letter-spacing: -.02em; text-shadow: 0 0 22px rgba(255,255,255,.35), 0 2px 14px rgba(90,0,20,.4); }
.wallet-dust-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.85);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  cursor: pointer;
  user-select: none;
}
.wallet-dust-toggle input { accent-color: #fff; width: 14px; height: 14px; cursor: pointer; }

.wallet-positions { margin-top: 12px; max-height: 46vh; overflow-y: auto; border-radius: 10px; }
.wallet-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr .9fr .8fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 13px;
  overflow: hidden;
}
/* each position carries a share-of-portfolio bar, caption-card hot pink */
.wallet-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--share, 0%);
  background: linear-gradient(90deg, rgba(255,0,120,.34), rgba(255,0,60,.12));
  border-right: 2px solid rgba(255,60,140,.55);
  pointer-events: none;
}
.wallet-row > * { position: relative; }
.wallet-row.dim::before { display: none; }
.wallet-head-row {
  position: sticky; top: 0;
  padding: 8px 14px;
  background: rgba(40,0,12,.92);
  color: rgba(255,255,255,.5);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  z-index: 2;
}
.wallet-token { display: flex; flex-direction: column; min-width: 0; }
.wallet-token b { font-size: 14px; font-weight: 800; }
.wallet-token small { color: rgba(255,255,255,.5); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-amount, .wallet-price { color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; }
.wallet-value { text-align: right; }
.wallet-value b { font-size: 14px; font-weight: 800; }
.wallet-value i { display: block; font-style: normal; color: rgba(255,255,255,.45); font-size: 10px; }
.wallet-row.dim { opacity: .45; }
.wallet-divider {
  padding: 10px 14px 6px;
  color: rgba(255,255,255,.42);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wallet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 7px 6px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.wallet-chip code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,.85); }
.wallet-chip button {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.wallet-chip button:hover { background: rgba(255,255,255,.28); color: #fff; }
.wallet-note { margin-top: 12px; color: rgba(255,255,255,.55); font-size: 11px; line-height: 1.5; }

@media (max-width: 800px) {
  .topbar > .wallet-btn { min-height: 40px; padding: 0 12px; }
  .topbar-divider { height: 30px; margin: 0 10px; }
  .topbar > .wallet-btn span { display: none; }
  .topbar > .wallet-btn .wallet-btn-copy { display:flex; }
  .topbar > .wallet-btn:not(.has-balance) .wallet-btn-copy { display:none; }
  .topbar > .wallet-btn .wallet-btn-balance { padding-left:0; border-left:0; font-size:10px; }
  .wallet-row { grid-template-columns: 1.3fr .9fr 1fr; }
  .wallet-row .wallet-price, .wallet-head-row div:nth-child(3) { display: none; }
  .wallet-summary { grid-template-columns: 1fr 1fr; }
  .wallet-chip code { max-width: 110px; overflow: hidden; }
}

.wallet-loading {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.wallet-loading span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .25;
  animation: wallet-dot 1.2s ease-in-out infinite;
}
.wallet-loading span:nth-child(2) { animation-delay: .18s; }
.wallet-loading span:nth-child(3) { animation-delay: .36s; }
@keyframes wallet-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-5px); }
}

@media (max-width: 460px) {
  .topbar { min-height:84px; padding:9px 12px 11px; }
  .brand { align-self:flex-start; }
  .brand h1 .brand-domain { display:none; }
  .asset-switch {
    position:absolute;
    left:63px;
    bottom:9px;
    margin:0;
    padding:2px;
  }
  .asset-switch button { min-width:38px; height:23px; padding:0 5px; font-size:7px; }
  .top-metrics { align-self:flex-start; }
  .top-metrics > div { min-width:76px; padding:3px 0 0 4px; }
}

/* ═══ pDAI mode: the full interface adopts the token's cyan/violet/magenta identity ═══ */
html[data-asset="pDAI"] {
  --muted:rgba(229,241,255,.68);
  --line:rgba(207,231,255,.18);
  --red:#755cff;
  --fire:#39ddff;
  --deep:#17105e;
  --glass:rgba(35,21,115,.34);
  --shadow:0 22px 48px rgba(16,7,76,.28);
}
html[data-asset="pDAI"] body {
  background:
    radial-gradient(980px 690px at -7% 9%,rgba(0,213,255,.88),transparent 65%),
    radial-gradient(880px 640px at 74% 14%,rgba(93,62,255,.82),transparent 69%),
    radial-gradient(760px 540px at 58% 105%,rgba(255,0,186,.50),transparent 72%),
    linear-gradient(128deg,#086dd1 0%,#4330af 48%,#820065 100%);
}
html[data-asset="pDAI"] body::after {
  background:
    linear-gradient(16deg,transparent 0 20%,rgba(255,255,255,.045) 20.3%,transparent 20.7% 24%,rgba(82,231,255,.18) 24.2%,transparent 25%),
    radial-gradient(560px 360px at 17% 24%,rgba(255,255,255,.15),transparent 72%),
    radial-gradient(640px 410px at 76% 70%,rgba(255,44,211,.22),transparent 74%);
}
html[data-asset="pDAI"] .card,
html[data-asset="pDAI"] .performance-hero,
html[data-asset="pDAI"] .chart-card {
  background:
    linear-gradient(135deg,rgba(52,64,194,.35),rgba(41,9,104,.42)),
    var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),var(--shadow);
}
html[data-asset="pDAI"] .topbar {
  background:
    radial-gradient(360px 120px at 4% 20%,rgba(43,226,255,.16),transparent 72%),
    linear-gradient(105deg,rgba(49,69,188,.34),rgba(65,12,122,.30)),
    rgba(28,17,100,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 16px 38px rgba(18,7,72,.18);
}
html[data-asset="pDAI"] .brand-mark::before {
  background:radial-gradient(circle at 54% 48%,rgba(56,224,255,.48),rgba(118,61,255,.22) 48%,transparent 72%);
}
html[data-asset="pDAI"] .asset-switch {
  background:rgba(22,13,83,.30);
  border-color:rgba(190,225,255,.22);
}
html[data-asset="pDAI"] .asset-switch button.active {
  background:linear-gradient(135deg,rgba(58,221,255,.34),rgba(201,74,255,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 18px rgba(18,9,83,.28);
}
html[data-asset="pDAI"] .performance-hero {
  background:
    radial-gradient(560px 280px at 12% 15%,rgba(41,224,255,.50),transparent 72%),
    radial-gradient(650px 260px at 96% 82%,rgba(255,0,191,.36),transparent 76%),
    linear-gradient(112deg,rgba(24,107,218,.78) 0%,rgba(74,45,181,.68) 55%,rgba(113,4,116,.62) 100%);
}
html[data-asset="pDAI"] .performance-hero::before {
  background:
    linear-gradient(15deg,transparent 0 28%,rgba(117,234,255,.10) 28.2%,transparent 28.7%),
    radial-gradient(380px 190px at 22% 84%,rgba(255,255,255,.13),transparent 72%);
}
html[data-asset="pDAI"] .performance-primary > span {
  background:rgba(29,20,111,.24);
}
html[data-asset="pDAI"] .performance-primary.is-mega > strong {
  font-size:clamp(48px,4vw,66px);
  letter-spacing:-.065em;
}
html[data-asset="pDAI"] .cycle-progress::before {
  background:
    radial-gradient(380px 130px at 40% 62%,rgba(54,225,255,.18),transparent 72%),
    linear-gradient(115deg,transparent,rgba(204,104,255,.06));
}
html[data-asset="pDAI"] .cycle-progress-track {
  background:
    linear-gradient(90deg,
      transparent 24.75%,rgba(139,220,255,.20) 25%,transparent 25.25%,
      transparent 49.75%,rgba(139,220,255,.20) 50%,transparent 50.25%,
      transparent 74.75%,rgba(139,220,255,.20) 75%,transparent 75.25%),
    rgba(17,10,73,.52);
  box-shadow:inset 0 2px 6px rgba(10,5,54,.48),0 1px 0 rgba(255,255,255,.08);
}
html[data-asset="pDAI"] .cycle-progress-fill {
  background:linear-gradient(90deg,#27ddff 0%,#695cff 55%,#f23bd4 100%);
  box-shadow:0 0 14px rgba(54,222,255,.68),0 0 30px rgba(121,73,255,.35),inset 0 1px 0 rgba(255,255,255,.58);
}
html[data-asset="pDAI"] .cycle-progress-marker > i {
  background:#6250ef;
  box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 18px #fff,0 0 32px rgba(56,224,255,.82);
}
html[data-asset="pDAI"] .cycle-progress-marker span {
  background:rgba(19,12,78,.90);
  box-shadow:0 7px 20px rgba(10,5,52,.34);
}
html[data-asset="pDAI"] .chart-card {
  background:
    radial-gradient(760px 360px at 17% 8%,rgba(34,193,255,.21),transparent 72%),
    radial-gradient(560px 330px at 88% 68%,rgba(219,37,255,.19),transparent 72%),
    linear-gradient(135deg,rgba(29,31,124,.72),rgba(28,7,75,.82));
}
html[data-asset="pDAI"] .chart-head {
  background:linear-gradient(90deg,rgba(44,214,255,.10),rgba(80,31,151,.20));
}
html[data-asset="pDAI"] .chart-stage {
  background:
    linear-gradient(14deg,transparent 0 18%,rgba(82,224,255,.07) 18.2%,transparent 18.6%),
    radial-gradient(650px 300px at 72% 90%,rgba(213,39,255,.13),transparent 72%);
}
html[data-asset="pDAI"] .chart-watermark {
  filter:saturate(.8) hue-rotate(-5deg);
  opacity:.045;
}
html[data-asset="pDAI"] .market-pulse,
html[data-asset="pDAI"] .chart-tooltip {
  background:rgba(20,13,83,.66);
  box-shadow:0 12px 30px rgba(9,5,48,.25),inset 0 1px 0 rgba(255,255,255,.09);
}
html[data-asset="pDAI"] .endpoint-ping,
html[data-asset="pDAI"] .endpoint-glow-layer {
  animation:none;
}
html[data-asset="pDAI"] .share-modal-backdrop {
  background:rgba(10,5,46,.76);
}
html[data-asset="pDAI"] .share-dialog {
  background:
    radial-gradient(520px 260px at 8% 0%,rgba(45,213,255,.14),transparent 70%),
    linear-gradient(145deg,rgba(42,30,139,.99),rgba(27,7,75,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 40px 100px rgba(8,4,42,.64);
}
html[data-asset="pDAI"] .share-story-picker,
html[data-asset="pDAI"] .share-dialog .share-preview {
  background:rgba(16,9,67,.34);
}
html[data-asset="pDAI"] .share-story-picker button[aria-pressed="true"] {
  color:var(--modal-ink);
}
html[data-asset="pDAI"] .wallet-input-row input {
  background:rgba(18,11,72,.42);
}
html[data-asset="pDAI"] .wallet-input-row button {
  background:linear-gradient(105deg,#27d9ff,#7556ef 58%,#dc36cd);
  box-shadow:0 10px 24px rgba(43,38,160,.42),inset 0 1px 0 rgba(255,255,255,.34);
}
html[data-asset="pDAI"] .wallet-summary {
  background:
    radial-gradient(360px 180px at 7% 0%,rgba(39,220,255,.52),transparent 70%),
    radial-gradient(320px 180px at 96% 110%,rgba(239,48,213,.45),transparent 70%),
    linear-gradient(105deg,#0a91d5 0%,#4550d5 42%,#7026ba 72%,#9b087f 100%);
  box-shadow:0 16px 38px rgba(23,15,112,.46),inset 0 1px 0 rgba(255,255,255,.27);
}
html[data-asset="pDAI"] .wallet-row::before {
  background:linear-gradient(90deg,rgba(48,218,255,.34),rgba(115,69,255,.16));
  border-right-color:rgba(98,227,255,.65);
}
html[data-asset="pDAI"] .wallet-head-row {
  background:rgba(17,10,69,.94);
}

@media (max-width:800px) {
  html[data-asset="pDAI"] body {
    background:
      radial-gradient(660px 540px at -25% 16%,rgba(52,220,255,.70),transparent 70%),
      linear-gradient(150deg,#087ac9 0%,#4c32b0 50%,#830066 100%);
  }
  html[data-asset="pDAI"] .performance-primary.is-mega > strong {
    font-size:clamp(37px,10.5vw,48px);
  }
}

/* ═══ Mobile modal sheets — must come after the base wallet/share CSS ═══ */
@media (max-width: 800px) {
  .share-dialog, .wallet-dialog {
    width: calc(100vw - 20px);
    max-width: none;
    max-height: 90svh;
    padding: 16px 16px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .share-dialog-head h2 { font-size: 19px; }

  /* address gets its own full-width row; actions share the next */
  .wallet-input-row { flex-wrap: wrap; gap: 8px; }
  .wallet-input-row input { flex: 1 1 100%; min-width: 0; font-size: 12px; padding: 12px 14px; }
  .wallet-input-row button { flex: 1 1 0; min-width: 0; padding: 12px 10px; }

  .wallet-privacy { margin-top: 8px; font-size: 9px; line-height: 1.45; }
  .wallet-summary { grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 16px 14px; }
  .wallet-summary .wallet-total { font-size: 28px; }
  .wallet-summary strong { font-size: 18px; }
  .wallet-dust-toggle { margin-top: 4px; padding-top: 10px; font-size: 8px; }
  .wallet-positions { max-height: 40svh; }
  .wallet-row { padding: 10px 12px; font-size: 12px; }
  .wallet-token b { font-size: 13px; }
  .wallet-token small { font-size: 9px; }
  .wallet-value b { font-size: 13px; }

  /* share sheet: the preview and the one button */
  #share-canvas { width: 100%; }
  .share-story-picker { grid-template-columns: 1fr; gap: 8px; }
  .share-intent-btn { min-height: 54px; }
}

/* ═══ Final mobile polish ═══
   The chart is intentionally absent on phones; the performance card becomes
   the full-screen visual instead of floating between two empty zones. */
@media (max-width: 800px) {
  .view.chart-view {
    justify-content: flex-start;
    padding-bottom: 76px;
  }
  .performance-hero {
    flex: 1 1 auto;
    width: 100%;
    min-height: 345px;
  }
  .performance-copy {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .cycle-progress {
    flex: 0 0 auto;
  }
  .asset-switch button {
    min-width: 54px;
    height: 32px;
    font-size: 9px;
  }
  .top-metrics label { font-size: 7px; }
  .cycle-progress-axis b { font-size: 7px; }
  .cycle-progress-axis small { font-size: 5px; }
  .share-close {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 800px) and (min-height: 561px) {
  .performance-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 42%;
    right: 1%;
    width: clamp(180px, 54vw, 230px);
    aspect-ratio: 1;
    background: url("/assets/hex-3d-token-v5.webp") center / contain no-repeat;
    opacity: .12;
    pointer-events: none;
  }
  html[data-asset="pDAI"] .performance-hero::after {
    background-image: url("/assets/pdai-3d-token-v1.webp");
    opacity: .14;
  }
}

/* Compact and short phones need the complete story above the fixed share
   action. This also protects the header when a large portfolio total exists. */
@media (max-width: 360px), (max-height: 560px) and (max-width: 800px) {
  .app { padding: 8px 8px 0; }
  .workspace { min-height: calc(100svh - 8px); }
  .topbar {
    margin-bottom: 8px;
    padding: 8px 10px;
    gap: 7px 6px;
  }
  .brand {
    gap: 6px;
  }
  .brand-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .brand h1 { font-size: 12px; }
  .brand-domain { display: none !important; }
  .brand p {
    margin-top: 3px;
    font-size: 5px;
    letter-spacing: .13em;
  }
  .wallet-btn {
    min-height: 36px;
    padding: 0 9px;
    gap: 6px;
  }
  .wallet-btn svg { width: 14px; height: 14px; }
  .topbar > .wallet-btn .wallet-btn-balance { font-size: 9px; }
  .asset-switch button {
    min-width: 47px;
    height: 28px;
    font-size: 8px;
  }
  .top-metrics strong { font-size: 16px; }
  .view.chart-view { gap: 8px; padding-bottom: 68px; }
  .performance-hero { min-height: 0; }
  .performance-copy {
    gap: 10px;
    padding: 14px 16px 3px;
    justify-content: center;
  }
  .performance-primary > label { font-size: 11px; }
  .performance-primary > strong {
    font-size: clamp(42px, 15vw, 52px);
  }
  html[data-asset="pDAI"] .performance-primary.is-mega > strong {
    font-size: clamp(34px, 11.5vw, 41px);
  }
  .performance-primary > span {
    margin-top: 6px;
    padding: 5px 9px;
    font-size: 6px;
  }
  .performance-multiple {
    padding-top: 8px;
  }
  .performance-multiple label { font-size: 7px; }
  .performance-multiple strong { font-size: 30px; }
  .performance-multiple small { font-size: 6px; }
  .cycle-progress {
    min-height: 0;
    padding: 11px 14px 13px;
  }
  .cycle-progress-head {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .cycle-progress-head > div:first-child { min-width: 0; }
  .cycle-progress-head > div:first-child > strong {
    font-size: 11px;
    letter-spacing: .015em;
    white-space: nowrap;
  }
  .cycle-progress-head label { font-size: 6px; }
  .cycle-progress-readout { flex: none; }
  .cycle-progress-readout strong { font-size: 22px; }
  .cycle-progress-meter { margin-top: 25px; }
  .cycle-progress-axis small { display: none; }
  .cycle-progress-foot { margin-top: 6px; }
  .share-fab {
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    min-height: 54px;
  }
}

/* Phone landscape: keep the same chart-free product, but use the width for a
   compact editorial split instead of squeezing a desktop chart into 48px. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  html, body {
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .app {
    position:relative;
    inset:auto;
    width: 100%;
    height:auto;
    min-height:100svh;
    padding: 8px;
    display: block;
    transform: none !important;
  }
  .workspace {
    width: 100%;
    height:auto;
    min-height:calc(100svh - 16px);
    display: flex;
  }
  .topbar {
    min-height: 72px;
    margin-bottom: 8px;
    padding: 6px 10px;
    display: flex;
    gap: 0;
    align-items: center;
    overflow: hidden;
  }
  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }
  .brand-mark {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
  .brand h1 { font-size: 18px; }
  .brand p {
    margin-top: 5px;
    font-size: 5px;
    letter-spacing: .22em;
  }
  .asset-switch {
    margin-left: 8px;
    padding: 3px;
  }
  .asset-switch button {
    min-width: 48px;
    height: 28px;
    padding: 0 7px;
    font-size: 8px;
  }
  .top-metrics {
    display: flex;
    margin-left: 8px;
  }
  .top-metrics > div {
    min-width: 84px;
    padding: 2px 8px;
  }
  .top-metrics label { font-size: 6px; }
  .top-metrics strong {
    margin-top: 3px;
    font-size: 16px;
  }
  .topbar-divider {
    display: block;
    height: 28px;
    margin: 0 8px;
  }
  .wallet-btn {
    margin-right: 6px;
    min-height: 38px;
    padding: 0 10px;
  }
  .topbar > .share-x-btn {
    display: inline-flex !important;
    min-width: 40px;
    min-height: 38px;
    padding: 0 12px;
  }
  .topbar > .share-x-btn span { display: none; }
  .view.chart-view {
    flex: 1;
    min-height: 0;
    padding: 0;
  }
  .chart-card { display: none !important; }
  .performance-hero {
    flex: 1;
    min-height: 0;
    flex-direction: row;
    align-items: stretch;
  }
  .performance-copy {
    flex: 0 0 56%;
    padding: 16px 20px;
    gap: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .performance-primary > label { font-size: 12px; }
  .performance-primary > strong { font-size: 45px; }
  html[data-asset="pDAI"] .performance-primary.is-mega > strong {
    font-size: clamp(36px, 5.2vw, 45px);
  }
  .performance-primary > span {
    margin-top: 9px;
    padding: 6px 10px;
    font-size: 6px;
  }
  .performance-multiple {
    min-width: 120px;
    padding-left: 20px;
    display: block;
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,.24);
  }
  .performance-multiple strong { font-size: 32px; }
  .cycle-progress {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 13px 18px;
    align-self: stretch;
  }
  .cycle-progress-head { gap: 8px; }
  .cycle-progress-head > div:first-child > strong { font-size: 10px; }
  .cycle-progress-readout strong { font-size: 21px; }
  .cycle-progress-meter { margin-top: 25px; }
  .cycle-progress-foot span { display: none; }
  .share-fab { display: none !important; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  .brand-mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .brand h1 { font-size: 14px; }
  .brand-domain, .brand p { display: none !important; }
  .top-metrics > div { min-width: 76px; padding-inline: 5px; }
  .topbar > .wallet-btn .wallet-btn-copy { display: none; }
  .performance-copy {
    flex-basis: 60%;
    padding-inline: 16px;
    gap: 14px;
  }
  .performance-primary > strong {
    font-size: 34px;
    white-space: nowrap;
  }
  html[data-asset="pDAI"] .performance-primary.is-mega > strong { font-size: 30px; }
  .performance-multiple {
    min-width: 102px;
    padding-left: 14px;
  }
  .performance-multiple strong { font-size: 27px; }
  .cycle-progress { padding-inline: 13px; }
  .cycle-progress-head > div:first-child > strong { font-size: 9px; }
  .cycle-progress-readout strong { font-size: 19px; }
}

/* ═══ Multi-asset switch concept ═══ */
.asset-switch {
  gap: 8px;
  padding: 4px 5px 4px 7px;
}
.asset-cluster {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.asset-cluster-meme {
  padding-left: 9px;
  border-left: 1px solid rgba(255,255,255,.15);
}
.asset-family {
  flex: none;
  margin-right: 2px;
  color: rgba(255,255,255,.38);
  font-family: Sora,Manrope,sans-serif;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .14em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.asset-switch .preview-tab {
  position: relative;
  color: rgba(255,255,255,.62);
}
.asset-switch .preview-tab::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 7px rgba(255,255,255,.32);
}
.asset-switch .preview-tab:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}

@media (max-width: 800px) {
  .topbar {
    grid-template-rows: auto auto auto;
  }
  .asset-switch {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    margin: 0;
    justify-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .asset-switch::-webkit-scrollbar { display: none; }
  .asset-switch button {
    min-width: 44px;
    height: 30px;
    padding: 0 6px;
    font-size: 8px;
  }
  .asset-family {
    font-size: 5px;
  }
  .top-metrics {
    grid-row: 3;
    grid-column: 2;
  }
}

@media (max-width: 360px) {
  .asset-switch {
    gap: 5px;
    padding-left: 5px;
  }
  .asset-switch button {
    min-width: 38px;
    height: 27px;
    padding: 0 4px;
    font-size: 7px;
  }
  .asset-cluster-meme { padding-left: 5px; }
  .asset-family { margin-right: 0; font-size: 4px; }
  .top-metrics { display: none !important; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .asset-switch {
    position: static;
    width: auto;
    max-width: none;
    flex: none;
    margin-left: 8px;
    overflow: visible;
  }
  .asset-switch button {
    min-width: 40px;
    height: 28px;
    padding: 0 5px;
    font-size: 7px;
  }
  .asset-cluster-meme { padding-left: 6px; }
  .asset-family { font-size: 4px; }
}

/* ═══ Multi-asset color systems ═══ */
html[data-asset="PLS"] {
  --muted:rgba(225,246,255,.70);--line:rgba(201,239,255,.20);
  --red:#3a68ff;--fire:#20e5ff;--deep:#25116f;--glass:rgba(31,45,139,.35);
  --shadow:0 22px 48px rgba(19,18,103,.30);
}
html[data-asset="PLSX"] {
  --muted:rgba(229,255,239,.72);--line:rgba(171,255,205,.22);
  --red:#00f078;--fire:#32ff99;--deep:#022519;--glass:rgba(2,42,28,.47);
  --shadow:0 22px 48px rgba(0,18,12,.40);
}
html[data-asset="INC"] {
  --muted:rgba(229,255,235,.76);--line:rgba(137,255,173,.26);
  --red:#00f56f;--fire:#72ff85;--deep:#002b18;--glass:rgba(0,55,27,.45);
  --shadow:0 22px 52px rgba(0,32,13,.44);
}
html[data-asset="pCOCK"] {
  --muted:rgba(226,243,255,.70);--line:rgba(188,226,255,.20);
  --red:#1677e8;--fire:#45c8ff;--deep:#062a66;--glass:rgba(7,45,103,.42);
  --shadow:0 22px 48px rgba(4,25,70,.38);
}

html[data-asset="PLS"] body {
  background:radial-gradient(950px 680px at -5% 8%,rgba(0,221,255,.88),transparent 66%),radial-gradient(820px 600px at 72% 14%,rgba(64,76,255,.78),transparent 69%),radial-gradient(760px 550px at 70% 105%,rgba(235,29,255,.52),transparent 72%),linear-gradient(128deg,#087fd8,#3937bb 49%,#790078);
}
html[data-asset="PLSX"] body {
  background:radial-gradient(950px 680px at -5% 8%,rgba(0,255,116,.82),transparent 65%),radial-gradient(880px 650px at 82% 10%,rgba(255,29,49,.72),transparent 68%),radial-gradient(700px 530px at 54% 110%,rgba(0,210,105,.38),transparent 72%),linear-gradient(128deg,#05663a,#062d20 45%,#5a0916);
}
html[data-asset="INC"] body {
  background:radial-gradient(980px 700px at -8% 8%,rgba(75,255,113,.96),transparent 64%),radial-gradient(860px 620px at 76% 12%,rgba(0,255,105,.66),transparent 68%),radial-gradient(760px 560px at 55% 106%,rgba(165,255,31,.32),transparent 70%),linear-gradient(128deg,#00a952,#006936 46%,#00170d);
}
html[data-asset="pCOCK"] body {
  background:radial-gradient(940px 680px at -6% 8%,rgba(31,180,255,.74),transparent 66%),radial-gradient(840px 620px at 76% 15%,rgba(21,92,225,.72),transparent 69%),radial-gradient(720px 540px at 60% 108%,rgba(26,177,100,.42),transparent 72%),linear-gradient(128deg,#075cab,#093a91 48%,#06372c);
}

html[data-asset="PLS"] body::after,
html[data-asset="PLSX"] body::after,
html[data-asset="INC"] body::after,
html[data-asset="pCOCK"] body::after {
  background:linear-gradient(16deg,transparent 0 20%,rgba(255,255,255,.045) 20.3%,transparent 20.7% 24%,rgba(255,255,255,.09) 24.2%,transparent 25%),radial-gradient(560px 360px at 17% 24%,rgba(255,255,255,.13),transparent 72%),radial-gradient(640px 410px at 76% 70%,color-mix(in srgb,var(--fire) 18%,transparent),transparent 74%);
}
html[data-asset="PLS"] .card,html[data-asset="PLS"] .performance-hero,html[data-asset="PLS"] .chart-card,
html[data-asset="PLSX"] .card,html[data-asset="PLSX"] .performance-hero,html[data-asset="PLSX"] .chart-card,
html[data-asset="INC"] .card,html[data-asset="INC"] .performance-hero,html[data-asset="INC"] .chart-card,
html[data-asset="pCOCK"] .card,html[data-asset="pCOCK"] .performance-hero,html[data-asset="pCOCK"] .chart-card {
  background:linear-gradient(135deg,color-mix(in srgb,var(--red) 25%,transparent),color-mix(in srgb,var(--deep) 70%,transparent)),var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),var(--shadow);
}
html[data-asset="PLS"] .topbar,html[data-asset="PLSX"] .topbar,html[data-asset="INC"] .topbar,html[data-asset="pCOCK"] .topbar {
  background:radial-gradient(360px 120px at 4% 20%,color-mix(in srgb,var(--fire) 15%,transparent),transparent 72%),linear-gradient(105deg,color-mix(in srgb,var(--red) 28%,transparent),color-mix(in srgb,var(--deep) 65%,transparent)),color-mix(in srgb,var(--glass) 60%,transparent);
}
html[data-asset="PLS"] .brand-mark::before,html[data-asset="PLSX"] .brand-mark::before,html[data-asset="INC"] .brand-mark::before,html[data-asset="pCOCK"] .brand-mark::before {
  background:radial-gradient(circle at 54% 48%,color-mix(in srgb,var(--fire) 48%,transparent),color-mix(in srgb,var(--red) 22%,transparent) 48%,transparent 72%);
}
html[data-asset="PLS"] .asset-switch,html[data-asset="PLSX"] .asset-switch,html[data-asset="INC"] .asset-switch,html[data-asset="pCOCK"] .asset-switch {
  background:color-mix(in srgb,var(--deep) 54%,transparent);border-color:var(--line);
}
html[data-asset="PLS"] .asset-switch button.active,html[data-asset="PLSX"] .asset-switch button.active,html[data-asset="INC"] .asset-switch button.active,html[data-asset="pCOCK"] .asset-switch button.active {
  background:linear-gradient(135deg,color-mix(in srgb,var(--fire) 34%,transparent),color-mix(in srgb,var(--red) 28%,transparent));
}

html[data-asset="PLS"] .performance-hero {background:radial-gradient(560px 280px at 12% 15%,rgba(42,229,255,.46),transparent 72%),radial-gradient(650px 260px at 96% 82%,rgba(230,31,255,.38),transparent 76%),linear-gradient(112deg,rgba(15,125,220,.82),rgba(61,54,196,.72) 55%,rgba(118,5,132,.68));}
html[data-asset="PLSX"] .performance-hero {background:radial-gradient(600px 300px at 10% 12%,rgba(22,255,132,.66),transparent 68%),radial-gradient(690px 290px at 97% 80%,rgba(255,32,48,.52),transparent 71%),linear-gradient(112deg,rgba(0,142,70,.92),rgba(2,60,40,.84) 52%,rgba(124,8,24,.82));}
html[data-asset="INC"] .performance-hero {background:radial-gradient(620px 300px at 9% 12%,rgba(143,255,96,.78),transparent 66%),radial-gradient(670px 280px at 97% 82%,rgba(0,255,101,.48),transparent 72%),linear-gradient(112deg,rgba(0,185,80,.94),rgba(0,93,47,.88) 54%,rgba(0,39,20,.84));box-shadow:inset 0 1px 0 rgba(212,255,220,.24),0 18px 50px rgba(0,255,88,.18);}
html[data-asset="pCOCK"] .performance-hero {background:radial-gradient(560px 280px at 10% 15%,rgba(57,197,255,.46),transparent 72%),radial-gradient(650px 260px at 96% 82%,rgba(29,188,102,.31),transparent 76%),linear-gradient(112deg,rgba(8,105,195,.86),rgba(9,68,157,.78) 56%,rgba(3,70,51,.74));}

html[data-asset="PLS"] .cycle-progress-fill {background:linear-gradient(90deg,#25e7ff,#6561ff 54%,#e635ff);}
html[data-asset="PLSX"] .cycle-progress-fill {background:linear-gradient(90deg,#4cffaa,#00f078 58%,#ff233d);box-shadow:0 0 15px rgba(0,255,119,.82),0 0 32px rgba(255,34,60,.30),inset 0 1px 0 rgba(255,255,255,.62);}
html[data-asset="INC"] .cycle-progress-fill {background:linear-gradient(90deg,#d7ff73,#43ff83 45%,#00f56f);box-shadow:0 0 18px rgba(80,255,111,.90),0 0 38px rgba(0,255,96,.42),inset 0 1px 0 rgba(255,255,255,.70);}
html[data-asset="pCOCK"] .cycle-progress-fill {background:linear-gradient(90deg,#35c8ff,#2478eb 52%,#f2c534 82%,#27be73);}
html[data-asset="PLS"] .cycle-progress-marker > i,html[data-asset="PLSX"] .cycle-progress-marker > i,html[data-asset="INC"] .cycle-progress-marker > i {background:var(--red);box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 18px #fff,0 0 32px color-mix(in srgb,var(--fire) 82%,transparent);}
html[data-asset="pCOCK"] .cycle-progress-marker > i {background:#efc337;box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 18px #fff,0 0 32px rgba(53,200,255,.82);}

html[data-asset="PLS"] .chart-card,html[data-asset="PLSX"] .chart-card,html[data-asset="INC"] .chart-card,html[data-asset="pCOCK"] .chart-card {
  background:radial-gradient(760px 360px at 17% 8%,color-mix(in srgb,var(--fire) 18%,transparent),transparent 72%),radial-gradient(560px 330px at 88% 68%,color-mix(in srgb,var(--red) 18%,transparent),transparent 72%),linear-gradient(135deg,color-mix(in srgb,var(--deep) 78%,#18324d),color-mix(in srgb,var(--deep) 90%,#000));
}
html[data-asset="PLSX"] .chart-card {background:radial-gradient(820px 390px at 12% 6%,rgba(0,255,117,.24),transparent 68%),radial-gradient(650px 360px at 92% 75%,rgba(255,31,50,.22),transparent 70%),linear-gradient(135deg,#073d2b,#041f18 56%,#350812);}
html[data-asset="INC"] .chart-card {background:radial-gradient(820px 390px at 12% 6%,rgba(117,255,91,.32),transparent 67%),radial-gradient(680px 380px at 88% 72%,rgba(0,255,98,.24),transparent 70%),linear-gradient(135deg,#006536,#00331d 52%,#00170e);}
html[data-asset="INC"] .chart-head {background:linear-gradient(90deg,rgba(109,255,99,.15),rgba(0,255,97,.04));}
html[data-asset="INC"] .chart-stage {background:radial-gradient(720px 380px at 52% 72%,rgba(0,255,96,.10),transparent 70%);}
html[data-asset="PLS"] .market-pulse,html[data-asset="PLS"] .chart-tooltip,
html[data-asset="PLSX"] .market-pulse,html[data-asset="PLSX"] .chart-tooltip,
html[data-asset="INC"] .market-pulse,html[data-asset="INC"] .chart-tooltip,
html[data-asset="pCOCK"] .market-pulse,html[data-asset="pCOCK"] .chart-tooltip {background:color-mix(in srgb,var(--deep) 76%,transparent);}
html[data-asset="PLS"] .share-modal-backdrop,html[data-asset="PLSX"] .share-modal-backdrop,
html[data-asset="INC"] .share-modal-backdrop,html[data-asset="pCOCK"] .share-modal-backdrop {
  background:color-mix(in srgb,var(--deep) 78%,transparent);
}
html[data-asset="PLS"] .share-dialog,html[data-asset="PLS"] .wallet-dialog,
html[data-asset="PLSX"] .share-dialog,html[data-asset="PLSX"] .wallet-dialog,
html[data-asset="INC"] .share-dialog,html[data-asset="INC"] .wallet-dialog,
html[data-asset="pCOCK"] .share-dialog,html[data-asset="pCOCK"] .wallet-dialog {
  background:radial-gradient(560px 280px at 7% 0%,color-mix(in srgb,var(--fire) 18%,transparent),transparent 70%),linear-gradient(145deg,color-mix(in srgb,var(--red) 38%,var(--deep)),color-mix(in srgb,var(--deep) 92%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 40px 100px color-mix(in srgb,var(--deep) 72%,transparent);
}
html[data-asset="PLS"] .share-story-picker,html[data-asset="PLS"] .share-dialog .share-preview,
html[data-asset="PLSX"] .share-story-picker,html[data-asset="PLSX"] .share-dialog .share-preview,
html[data-asset="INC"] .share-story-picker,html[data-asset="INC"] .share-dialog .share-preview,
html[data-asset="pCOCK"] .share-story-picker,html[data-asset="pCOCK"] .share-dialog .share-preview {
  background:color-mix(in srgb,var(--deep) 58%,transparent);
}
html[data-asset="PLS"] .share-story-picker button[aria-pressed="true"],
html[data-asset="PLSX"] .share-story-picker button[aria-pressed="true"],
html[data-asset="INC"] .share-story-picker button[aria-pressed="true"],
html[data-asset="pCOCK"] .share-story-picker button[aria-pressed="true"] {color:color-mix(in srgb,var(--deep) 84%,#000);}
html[data-asset="pCOCK"] .share-story-picker {grid-template-columns:1fr;}
html[data-asset="pCOCK"] .performance-copy.is-full-history {flex:1 1 100%;}
html[data-asset="pCOCK"] .performance-copy.is-full-history .performance-primary {min-width:58%;}
html[data-asset="pCOCK"] .performance-copy.is-full-history .performance-multiple {display:none;}

@media (min-width:801px) {
  html[data-asset="pCOCK"] .performance-copy.is-full-history {flex:0 0 auto;}
  html[data-asset="pCOCK"] .performance-copy.is-full-history .performance-primary {min-width:260px;}
}

html[data-asset="PLS"] .wallet-input-row button,html[data-asset="PLSX"] .wallet-input-row button,html[data-asset="INC"] .wallet-input-row button,html[data-asset="pCOCK"] .wallet-input-row button {background:linear-gradient(105deg,var(--fire),var(--red) 62%,var(--deep));}
html[data-asset="PLS"] .wallet-summary,html[data-asset="PLSX"] .wallet-summary,html[data-asset="INC"] .wallet-summary,html[data-asset="pCOCK"] .wallet-summary {background:radial-gradient(360px 180px at 7% 0%,color-mix(in srgb,var(--fire) 48%,transparent),transparent 70%),linear-gradient(105deg,var(--red),var(--deep));}

@media (max-width:800px) and (min-height:561px) {
  html[data-asset="PLS"] .performance-hero::after {background-image:url("/assets/pls-3d-token-v1.webp");opacity:.15;}
  html[data-asset="PLSX"] .performance-hero::after {background-image:url("/assets/plsx-3d-token-v1.webp");opacity:.15;}
  html[data-asset="INC"] .performance-hero::after {background-image:url("/assets/inc-3d-token-v1.webp");opacity:.15;}
  html[data-asset="pCOCK"] .performance-hero::after {background-image:url("/assets/pcock-3d-token-v2.webp");opacity:.14;}
}

@media (max-width:600px) {
  .workspace {
    flex:0 0 calc(100vw - 20px);
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
  }
  .topbar,.view.chart-view,.performance-hero {width:100%;max-width:100%;}
  .topbar {
    grid-template-columns:minmax(0,1fr) 38px;
    grid-template-rows:auto auto;
  }
  .brand h1 {font-size:13px;}
  .wallet-btn {
    display:flex !important;
    position:absolute;
    top:10px;
    right:10px;
    z-index:20;
    width:38px;
    min-width:38px;
    margin:0;
    padding:0;
    justify-content:center;
    background:rgba(0,0,0,.14);
  }
  .brand {padding-right:42px;}
  .asset-switch {
    grid-row:2;
    grid-column:1 / -1;
    width:100%;
  }
  .top-metrics {display:none !important;}
  .cycle-progress-head {display:block;padding-right:0;}
  .cycle-progress-readout {
    position:static;
    width:auto;
    margin:8px 0 0;
    flex-direction:row;
    align-items:baseline;
    justify-content:flex-start;
    gap:7px;
    text-align:left;
  }
  .cycle-progress-readout strong {font-size:18px;}
  .cycle-progress-readout span {max-width:none;line-height:1.3;}
  .cycle-progress-meter {margin-top:34px;}
  .cycle-progress-foot {
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .cycle-progress-foot strong {align-self:flex-start;}
}

/* Mobile token picker: one obvious, accessible control instead of a clipped
   horizontal tab rail. The desktop grouped tabs remain unchanged. */
@media (max-width:800px) {
  body:not(.share-open) {overflow-y:auto;}
  .asset-switch {display:none !important;}
  .topbar {
    grid-template-rows:auto auto;
    overflow:visible;
  }
  .mobile-asset-picker {
    position:relative;
    grid-row:2;
    grid-column:1 / -1;
    width:100%;
    min-height:44px;
    padding:0 36px 0 13px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:12px;
    color:#fff;
    background:
      linear-gradient(120deg,color-mix(in srgb,var(--fire) 18%,transparent),color-mix(in srgb,var(--deep) 50%,transparent)),
      rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  }
  .mobile-asset-picker::after {
    content:"";
    position:absolute;
    right:15px;
    top:50%;
    width:7px;
    height:7px;
    border-right:2px solid rgba(255,255,255,.76);
    border-bottom:2px solid rgba(255,255,255,.76);
    transform:translateY(-70%) rotate(45deg);
    pointer-events:none;
  }
  .mobile-asset-picker:focus-within {
    border-color:rgba(255,255,255,.46);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 0 3px color-mix(in srgb,var(--fire) 18%,transparent);
  }
  .mobile-asset-picker > span {
    flex:none;
    color:rgba(255,255,255,.50);
    font-size:6px;
    font-weight:800;
    letter-spacing:.18em;
  }
  .mobile-asset-picker select {
    min-width:0;
    flex:1;
    height:42px;
    border:0;
    outline:0;
    appearance:none;
    -webkit-appearance:none;
    color:#fff;
    background:transparent;
    font-family:Sora,Manrope,sans-serif;
    font-size:13px;
    font-weight:750;
    letter-spacing:.02em;
    cursor:pointer;
  }
  .mobile-asset-picker option,
  .mobile-asset-picker optgroup {
    color:#111;
    background:#fff;
  }
  .top-metrics {display:none !important;}
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE — FINAL LAYER (keep last in this file)
   Several earlier max-width:800px blocks accumulated and now fight each
   other. This block is the single source of truth for phone layout:
   one screen, live price visible, no forced voids, sheets that fit.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  /* ── header: brand + portfolio, then token picker + live price ── */
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 9px 8px;
    padding: 9px 11px;
    overflow: visible;
  }
  .mobile-asset-picker {
    grid-row: 2;
    grid-column: 1 !important;
    width: auto !important;
    min-height: 40px;
  }
  /* the live price is the point of the product — never hide it */
  .top-metrics {
    display: flex !important;
    grid-row: 2;
    grid-column: 2;
    margin: 0;
    align-self: center;
    justify-self: end;
  }
  .top-metrics > div { min-width: 0; padding: 0 2px 0 0; align-items: flex-end; }
  .top-metrics label { font-size: 6px; letter-spacing: .14em; white-space: nowrap; }
  .top-metrics strong { margin-top: 1px; font-size: 17px; line-height: 1; }
  .price-market-preview { display: none !important; }

  /* ── hero: content-driven height, no dead space ──
     an earlier block sets flex:1 on the hero AND the copy, which stretches
     both and opens a void between the multiple and the climb. Stop growing. */
  .performance-hero { flex: 0 0 auto !important; min-height: 0 !important; }
  .performance-copy {
    flex: 0 0 auto !important;
    gap: 12px !important;
    padding: 18px 18px 6px !important;
    justify-content: flex-start !important;
  }
  .view.chart-view { justify-content: center !important; }
  /* the token watermark decorates — it must not reserve vertical space */
  .performance-hero::after {
    top: auto !important;
    bottom: 4% !important;
    right: -6% !important;
    width: clamp(140px, 40vw, 180px) !important;
    opacity: .1 !important;
  }
  .cycle-progress { padding: 4px 18px 18px !important; }
  /* the head stacks on phones (title, then the percentage) — give it air
     and make sure the YOU-ARE-HERE pill clears the track above it */
  .cycle-progress-head > div:first-child > strong { font-size: 13px; }
  .cycle-progress-readout { margin-top: 6px; }
  .cycle-progress-readout strong { font-size: 24px; }
  .cycle-progress-meter { margin-top: 34px !important; }

  /* ── the sheet: a real bottom sheet that always fits ── */
  .share-modal { align-items: flex-end !important; padding: 0 !important; }
  .share-dialog, .wallet-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88svh !important;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom)) !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* a grab handle, so it reads as a sheet rather than a clipped dialog */
  .share-dialog::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 4px;
    background: rgba(255,255,255,.28);
  }
  .share-dialog-head { position: sticky; top: 0; z-index: 3; padding-bottom: 10px; }
  .share-dialog-head h2 { font-size: 18px; }
  .wallet-positions { max-height: 34svh; }
}

/* short phones: trim the extras so the story still fits one screen */
@media (max-width: 800px) and (max-height: 560px) {
  .brand p { display: none !important; }
  .performance-copy { padding: 14px 16px 4px !important; }
  .cycle-progress-foot { display: none !important; }
  .performance-hero::after { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   TABLET / SMALL LAPTOP — FINAL LAYER (keep last)
   Between phone and desktop the header runs out of horizontal room: the
   asset pills ride over the wordmark and the live price gets squeezed out.
   Give the header two rows here, exactly like the phone, but keep the full
   pill switcher and the chart.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 801px) and (max-width: 1180px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 12px;
    padding: 11px 14px;
    overflow: visible;
  }
  .brand { grid-row: 1; grid-column: 1; min-width: 0; margin: 0; }
  .brand h1 { font-size: 21px; }
  .brand-domain { display: inline !important; }
  .brand p { display: block !important; }

  /* pills get their own full-width row — no more overlapping the wordmark */
  .asset-switch {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0;
    justify-self: stretch;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .asset-switch::-webkit-scrollbar { display: none; }
  .asset-switch button { min-width: 52px; height: 30px; font-size: 9px; }
  .mobile-asset-picker { display: none !important; }

  /* the live price stays visible, next to the actions */
  .top-metrics { grid-row: 1; grid-column: 2; display: flex !important; margin: 0; }
  .top-metrics > div { min-width: 0; padding: 0 14px 0 0; }
  .top-metrics label { font-size: 7px; }
  .top-metrics strong { font-size: 19px; }
  .price-market-preview { display: none !important; }

  .topbar-divider { display: none; }
  .wallet-btn { grid-row: 1; grid-column: 3; margin: 0; justify-self: end; }
  .wallet-btn-label { display: none; }
  .topbar > .share-x-btn { grid-row: 2; grid-column: 3; justify-self: end; }

  /* the climb meter needs room for its YOU-ARE-HERE pill */
  .cycle-progress-meter { margin-top: 28px; }
  .cycle-progress-head > div:first-child > strong { font-size: 15px; }
}

/* the pill can sit at 0% and collide with the card edge — pin it inside */
@media (max-width: 1180px) {
  .cycle-progress-marker { min-width: 52px; }
  .cycle-progress-marker span { left: 0; transform: none; }
}

/* ── Donations: a quiet line, never a demand ── */
.tip-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 4px 2px;
}
.tip-label {
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
}
.tip-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.tip-copy:hover { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.tip-copy svg { width: 11px; height: 11px; opacity: .8; }
.tip-copy code { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .02em; }
.tip-copy b { font-size: 8px; font-weight: 800; letter-spacing: .14em; opacity: .62; }

@media (max-width: 800px) {
  .tip-bar { padding: 6px 4px 0; gap: 10px; }
  .tip-label { font-size: 9px; }
  .tip-copy { padding: 5px 10px; }
  .tip-copy code { font-size: 9px; }
}
@media (max-width: 800px) and (max-height: 560px) {
  .tip-label { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   SHEET CONTAINMENT — keep last
   .share-modal is a grid; a percentage width on the dialog resolves against
   an auto-sized track, which can exceed the viewport on iOS Safari. Anchor
   the sheet to viewport units inside a flex container instead.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  /* :not([hidden]) matters — an unscoped display:flex!important would beat
     [hidden]{display:none!important} and force every sheet open on load. */
  .share-modal:not([hidden]) {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .share-dialog, .wallet-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .share-dialog > *, .wallet-dialog > * { min-width: 0; max-width: 100%; }
  .wallet-input-row, .wallet-chips, .wallet-summary, .wallet-positions { max-width: 100%; }
  .wallet-input-row input { width: 100%; }

  /* the portfolio button must never squeeze the brand or overlap it */
  .wallet-btn { flex: none; max-width: 44vw; overflow: hidden; }
  .wallet-btn-balance {
    max-width: 26vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FLUID PHONE SCALING — keep last
   Type and spacing scale continuously with the viewport (clamp + vw/vh)
   instead of jumping at breakpoints, so every iPhone from a 320px SE to a
   430px Pro Max — and any Android — gets a proportional layout.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .app { padding: clamp(6px, 2.2vw, 12px) clamp(6px, 2.2vw, 12px) 0; }

  /* header scales with width */
  .topbar { padding: clamp(7px, 2.4vw, 12px) clamp(8px, 3vw, 14px); gap: clamp(6px, 2.4vw, 11px) 8px; }
  .brand { gap: clamp(7px, 2.4vw, 12px); }
  .brand-mark { width: clamp(32px, 10vw, 44px); height: clamp(32px, 10vw, 44px); flex-basis: clamp(32px, 10vw, 44px); }
  .brand h1 { font-size: clamp(12px, 4vw, 17px); }
  .brand p { font-size: clamp(5px, 1.6vw, 7px); }
  .top-metrics strong { font-size: clamp(13px, 4.4vw, 19px); }
  .wallet-btn { min-height: clamp(34px, 10vw, 42px); padding: 0 clamp(8px, 3vw, 14px); }

  /* the hero headline is the hero — scale it hard, but never overflow */
  .performance-copy { gap: clamp(8px, 2.6vw, 14px); padding: clamp(12px, 4.4vw, 20px) clamp(12px, 4.6vw, 20px) clamp(2px, 1.4vw, 7px); }
  .performance-primary > label { font-size: clamp(10px, 3.4vw, 15px); }
  .performance-primary > strong { font-size: clamp(34px, 13.5vw, 74px); }
  .performance-primary > span { font-size: clamp(6px, 1.9vw, 8px); padding: clamp(5px, 1.8vw, 8px) clamp(8px, 3vw, 13px); }
  .performance-multiple { padding-top: clamp(8px, 3vw, 14px); }
  .performance-multiple strong { font-size: clamp(24px, 9vw, 38px); }
  .performance-multiple label, .performance-multiple small { font-size: clamp(6px, 1.9vw, 8px); }

  /* the climb card scales too */
  .cycle-progress { padding: clamp(2px, 1.2vw, 6px) clamp(12px, 4.6vw, 20px) clamp(12px, 4.4vw, 20px) !important; }
  .cycle-progress-head > div:first-child > strong { font-size: clamp(11px, 3.7vw, 15px); }
  .cycle-progress-readout strong { font-size: clamp(18px, 6.6vw, 27px); }
  .cycle-progress-meter { margin-top: clamp(24px, 8vw, 36px) !important; }
  .cycle-progress-axis b { font-size: clamp(5px, 1.8vw, 8px); }

  /* the share action scales with the screen, always thumb-sized */
  .share-fab {
    left: clamp(8px, 3vw, 14px);
    right: clamp(8px, 3vw, 14px);
    bottom: calc(clamp(8px, 3vw, 14px) + env(safe-area-inset-bottom));
    min-height: clamp(46px, 13vw, 58px);
  }
  .share-fab span { font-size: clamp(11px, 3.6vw, 15px); }
  .view.chart-view { padding-bottom: clamp(62px, 18vw, 92px); }

  /* donation line */
  .tip-copy code { font-size: clamp(8px, 2.6vw, 10px); }
  .tip-label { font-size: clamp(8px, 2.6vw, 10px); }

  /* sheets scale their padding and type with the screen as well */
  .share-dialog, .wallet-dialog { padding: clamp(10px, 3.6vw, 16px) clamp(10px, 3.6vw, 16px) calc(clamp(12px, 4vw, 18px) + env(safe-area-inset-bottom)) !important; }
  .share-dialog-head h2 { font-size: clamp(15px, 5vw, 20px); }
  .wallet-input-row input { font-size: clamp(11px, 3.4vw, 13px); }
  .wallet-summary .wallet-total { font-size: clamp(22px, 8vw, 32px); }
  .wallet-summary strong { font-size: clamp(14px, 5vw, 20px); }
}

/* ══════════ the party when the donation address is copied ══════════ */
.tip-copy.is-thanked {
  color: #fff;
  border-color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.24);
  animation: tip-thanks .7s cubic-bezier(.2,1.6,.3,1);
}
@keyframes tip-thanks {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.18) rotate(-2.5deg); }
  55% { transform: scale(1.06) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* full-screen fireworks canvas */
.tip-fireworks {
  position: fixed;
  z-index: 3000;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* the big statement */
.tip-celebration {
  position: fixed;
  z-index: 3100;
  left: 50%;
  top: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  width: min(94vw, 760px);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: tip-pop .7s cubic-bezier(.16,1.5,.3,1) both;
}
.tip-celebration b {
  font-family: Sora, Manrope, sans-serif;
  text-wrap: balance;
  font-size: clamp(28px, 8.8vw, 74px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  background: linear-gradient(96deg, #fff 12%, #ffd9e4 38%, #fff 64%, #ffe9a8 88%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 26px rgba(255,60,120,.55));
  animation: tip-sheen 2.4s ease-in-out infinite;
}
.tip-celebration span {
  color: #fff;
  font-size: clamp(12px, 3.6vw, 19px);
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(60,0,20,.6);
}
.tip-celebration i {
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(20,0,8,.5);
  color: rgba(255,255,255,.8);
  font-family: ui-monospace, Menlo, monospace;
  font-size: clamp(9px, 2.6vw, 12px);
  font-style: normal;
}
.tip-celebration.is-out { animation: tip-out .7s ease-in forwards; }
@keyframes tip-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes tip-out {
  to { opacity: 0; transform: translate(-50%, -62%) scale(1.06); }
}
@keyframes tip-sheen { 0%,100% { background-position: 140% 0; } 50% { background-position: -40% 0; } }

/* the whole stage shakes */
.workspace.is-quaking { animation: tip-quake .85s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes tip-quake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  8%  { transform: translate(-9px, 4px) rotate(-.5deg); }
  18% { transform: translate(8px, -5px) rotate(.45deg); }
  28% { transform: translate(-7px, -3px) rotate(-.35deg); }
  38% { transform: translate(6px, 4px) rotate(.3deg); }
  50% { transform: translate(-5px, -2px) rotate(-.22deg); }
  62% { transform: translate(4px, 3px) rotate(.18deg); }
  74% { transform: translate(-3px, -2px) rotate(-.1deg); }
  86% { transform: translate(2px, 1px) rotate(.06deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tip-fireworks { display: none; }
  .workspace.is-quaking { animation: none; }
  .tip-copy.is-thanked { animation: none; }
  .tip-celebration { animation: none; }
  .tip-celebration b { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   FLUID PHONE SCALING — keep last
   Type and spacing scale continuously with the viewport (clamp + vw/vh)
   instead of jumping at breakpoints, so every iPhone from a 320px SE to a
   430px Pro Max — and any Android — gets a proportional layout.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .app { padding: clamp(6px, 2.2vw, 12px) clamp(6px, 2.2vw, 12px) 0; }

  /* header scales with width */
  .topbar { padding: clamp(7px, 2.4vw, 12px) clamp(8px, 3vw, 14px); gap: clamp(6px, 2.4vw, 11px) 8px; }
  .brand { gap: clamp(7px, 2.4vw, 12px); }
  .brand-mark { width: clamp(32px, 10vw, 44px); height: clamp(32px, 10vw, 44px); flex-basis: clamp(32px, 10vw, 44px); }
  .brand h1 { font-size: clamp(12px, 4vw, 17px); }
  .brand p { font-size: clamp(5px, 1.6vw, 7px); }
  .top-metrics strong { font-size: clamp(13px, 4.4vw, 19px); }
  .wallet-btn { min-height: clamp(34px, 10vw, 42px); padding: 0 clamp(8px, 3vw, 14px); }

  /* the hero headline is the hero — scale it hard, but never overflow */
  .performance-copy { gap: clamp(8px, 2.6vw, 14px); padding: clamp(12px, 4.4vw, 20px) clamp(12px, 4.6vw, 20px) clamp(2px, 1.4vw, 7px); }
  .performance-primary > label { font-size: clamp(10px, 3.4vw, 15px); }
  .performance-primary > strong { font-size: clamp(34px, 13.5vw, 74px); }
  .performance-primary > span { font-size: clamp(6px, 1.9vw, 8px); padding: clamp(5px, 1.8vw, 8px) clamp(8px, 3vw, 13px); }
  .performance-multiple { padding-top: clamp(8px, 3vw, 14px); }
  .performance-multiple strong { font-size: clamp(24px, 9vw, 38px); }
  .performance-multiple label, .performance-multiple small { font-size: clamp(6px, 1.9vw, 8px); }

  /* the climb card scales too */
  .cycle-progress { padding: clamp(2px, 1.2vw, 6px) clamp(12px, 4.6vw, 20px) clamp(12px, 4.4vw, 20px) !important; }
  .cycle-progress-head > div:first-child > strong { font-size: clamp(11px, 3.7vw, 15px); }
  .cycle-progress-readout strong { font-size: clamp(18px, 6.6vw, 27px); }
  .cycle-progress-meter { margin-top: clamp(24px, 8vw, 36px) !important; }
  .cycle-progress-axis b { font-size: clamp(5px, 1.8vw, 8px); }

  /* the share action scales with the screen, always thumb-sized */
  .share-fab {
    left: clamp(8px, 3vw, 14px);
    right: clamp(8px, 3vw, 14px);
    bottom: calc(clamp(8px, 3vw, 14px) + env(safe-area-inset-bottom));
    min-height: clamp(46px, 13vw, 58px);
  }
  .share-fab span { font-size: clamp(11px, 3.6vw, 15px); }
  .view.chart-view { padding-bottom: clamp(62px, 18vw, 92px); }

  /* donation line */
  .tip-copy code { font-size: clamp(8px, 2.6vw, 10px); }
  .tip-label { font-size: clamp(8px, 2.6vw, 10px); }

  /* sheets scale their padding and type with the screen as well */
  .share-dialog, .wallet-dialog { padding: clamp(10px, 3.6vw, 16px) clamp(10px, 3.6vw, 16px) calc(clamp(12px, 4vw, 18px) + env(safe-area-inset-bottom)) !important; }
  .share-dialog-head h2 { font-size: clamp(15px, 5vw, 20px); }
  .wallet-input-row input { font-size: clamp(11px, 3.4vw, 13px); }
  .wallet-summary .wallet-total { font-size: clamp(22px, 8vw, 32px); }
  .wallet-summary strong { font-size: clamp(14px, 5vw, 20px); }
}

/* ── the thank-you moment when the donation address is copied ── */
.tip-copy.is-thanked {
  color: #fff;
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.2);
  animation: tip-thanks .6s cubic-bezier(.22,1.4,.35,1);
}
@keyframes tip-thanks {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.tip-spark {
  position: fixed;
  z-index: 2000;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(255,255,255,.85);
  animation: tip-spark 1.15s ease-out var(--delay, 0ms) forwards;
}
@keyframes tip-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.7); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -46px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .tip-spark { display: none; }
  .tip-copy.is-thanked { animation: none; }
}

/* ── the celebration needs its own stage to read against ── */
.tip-scrim {
  position: fixed;
  z-index: 3050;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% 46%, rgba(24,0,10,.82), rgba(24,0,10,.55) 55%, rgba(24,0,10,0) 78%),
    rgba(18,0,8,.28);
  animation: tip-scrim-in .4s ease-out both;
}
.tip-scrim.is-out { animation: tip-scrim-out .7s ease-in forwards; }
@keyframes tip-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tip-scrim-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tip-scrim { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE: no portfolio viewer — keep last
   The wallet sheet earns its keep on desktop; on a phone it crowds the one
   thing people came for. Hidden entirely, and the header rebalances into
   brand + live price, with the token picker on its own full-width row.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .wallet-btn, #wallet-modal { display: none !important; }

  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .brand { grid-row: 1; grid-column: 1; }
  .top-metrics {
    grid-row: 1 !important;
    grid-column: 2 !important;
    align-self: center;
    justify-self: end;
  }
  .mobile-asset-picker { grid-row: 2; grid-column: 1 / -1 !important; width: 100% !important; }

  /* now that the header is lighter, let the story breathe */
  .view.chart-view { gap: clamp(8px, 3vw, 14px); }
  .performance-copy { padding: clamp(14px, 5vw, 22px) clamp(13px, 4.8vw, 20px) clamp(4px, 1.8vw, 8px); }
  .performance-primary > strong { font-size: clamp(36px, 14.5vw, 78px); }
  .cycle-progress { padding: clamp(4px, 1.6vw, 8px) clamp(13px, 4.8vw, 20px) clamp(14px, 5vw, 22px) !important; }
  .tip-bar { padding: clamp(6px, 2.4vw, 12px) 4px 0; }
}

/* the support line may wrap on very narrow phones — keep it tidy */
.tip-bar { flex-wrap: wrap; row-gap: 6px; }

/* the support line carries the mission — give it a little weight */
.tip-label { color: rgba(255,255,255,.62); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE COMPOSITION — keep last
   The card stack was centred in the leftover height, so on taller phones all
   the slack collected into one gap under the header. Instead the hero card
   grows to absorb it: the headline breathes in the middle, the climb meter
   stays anchored at the bottom, and the layout reads deliberate at any height.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .view.chart-view { justify-content: flex-start !important; }
  .performance-hero {
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
  }
  /* the headline centres in whatever space is going spare */
  .performance-copy {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
  .cycle-progress { flex: 0 0 auto; }

  /* "10,000X" appeared four times in one card — the foot line was pure echo */
  .cycle-progress-foot { display: none !important; }

  /* navigation shouldn't outweigh the content it navigates */
  .mobile-asset-picker { min-height: 38px !important; }
  .mobile-asset-picker select { height: 36px !important; }

  /* one hero number, not two: let the live price sit a step below it */
  .top-metrics strong { font-size: clamp(12px, 4vw, 17px) !important; }
}

/* markets */
.markets-dialog { width: min(880px, calc(100vw - 40px)); }
.markets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.pulse-empty {
  grid-column: 1 / -1;
  padding: 30px 18px;
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.market-card {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--m1) 30%, transparent);
  border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--m1) 9%, rgba(20, 2, 10, .5)), rgba(14, 1, 8, .38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.market-card {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: visible;
}
.market-art {
  width: 74px; height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px color-mix(in srgb, var(--m1) 35%, transparent));
  transition: transform .3s ease;
}
.market-card:hover .market-art { transform: translateY(-3px) scale(1.05); }
.market-body { min-width: 0; flex: 1; }
.market-head { display: flex; align-items: baseline; gap: 8px; }
.market-head b { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.market-chg { margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.market-chg.up { color: #27e8a7; }
.market-chg.down { color: #ff5470; }
.market-chg.is-atl { font-size: 14px; }
.market-price { margin: 7px 0 9px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.market-climb {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--m1) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--m1) 12%, transparent);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  white-space: nowrap;
}
.markets-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.markets-note { color: rgba(255,255,255,.45); font-size: 10px; }
#markets-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(105deg, #ff2f7d, #e30028);
  color: var(--accText, #fff);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(227, 0, 40, .35), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .2s ease;
}
#markets-copy:hover { transform: translateY(-1px); }
#markets-copy svg { width: 14px; height: 14px; }
@media (max-width: 800px) {
  .markets-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .market-card { padding: 11px 12px; }
  .market-price { font-size: 17px; }
  .markets-dialog { max-height: 100dvh; overflow-y: auto; }
  .markets-foot { flex-wrap: wrap; }
  #markets-copy { flex: 1 1 100%; justify-content: center; }
}

/* the markets dialog wears the page token's accents */
.markets-dialog .share-dialog-head label { color: var(--acc1, #ff2f7d); }
#markets-copy { background: linear-gradient(105deg, var(--acc1, #ff2f7d), var(--acc2, #e30028)); }

/* long prices stay inside their cards */
.market-price { overflow: hidden; white-space: nowrap; }
.market-price.is-long { font-size: 15.5px; }

/* Bridge modal wins the final theme/mobile cascade. */
.bridge-dialog {
  width: min(1040px, calc(100vw - 40px));
  border-color: color-mix(in srgb, var(--acc1, #ff5ca8) 42%, rgba(255,255,255,.12));
  background:
    radial-gradient(70% 60% at 7% 0%, color-mix(in srgb, var(--acc1, #ff5ca8) 17%, transparent), transparent 68%),
    radial-gradient(55% 50% at 100% 100%, color-mix(in srgb, var(--acc2, #e90035) 13%, transparent), transparent 72%),
    linear-gradient(155deg, rgba(17,4,25,.985), rgba(8,2,15,.99));
}
.bridge-dialog .share-dialog-head label { color: var(--acc1, #ff5ca8); }

@media (max-width: 800px) {
  .topbar > .bridge-btn {
    display: flex !important;
    grid-row: 1;
    grid-column: 2;
    min-width: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0 10px;
    justify-self: end;
  }
  .topbar > .bridge-btn .wallet-btn-copy { display: none; }
  .top-metrics { grid-column: 3 !important; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
}

/* Bridge flow, distilled: one animated in-versus-out moment. */
.bridge-dialog.bridge-compact {
  width: min(880px, calc(100vw - 40px));
  max-height: min(92svh, 610px);
  padding: 22px 24px 18px;
  overflow: hidden;
  background-size: 150% 150%;
  animation: bridge-aurora 9s ease-in-out infinite alternate;
}
@keyframes bridge-aurora {
  from { background-position: 0% 0%, 100% 100%, 50% 50%; }
  to { background-position: 14% 8%, 88% 86%, 50% 50%; }
}
.bridge-compact .bridge-dialog-head h2 {
  margin-top: 5px;
  font-size: 30px;
  line-height: 1;
}
.bridge-compact .bridge-dialog-head .share-dialog-sub { margin-top: 7px; font-size: 10px; }
.bridge-compact .bridge-toolbar { margin-top: 15px; }
.bridge-compact .bridge-content { margin-top: 13px; }
.bridge-compact .bridge-periods button { min-width: 58px; padding: 7px 13px; }
.bridge-showdown {
  position: relative;
  min-height: 268px;
  padding: 30px 28px 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 42%, rgba(255,255,255,.1));
  border-radius: 24px;
  background:
    linear-gradient(105deg, rgba(102,242,180,.055), transparent 38%, transparent 62%, rgba(255,120,146,.06)),
    rgba(0,0,0,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 45px rgba(0,0,0,.22);
}
.bridge-showdown::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--acc1, #ff5ca8) 7%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: bridge-sweep 4.8s ease-in-out infinite;
}
@keyframes bridge-sweep { 55%,100% { transform: translateX(100%); } }
.bridge-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 50%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .13;
  transform: translateY(-50%);
  animation: bridge-breathe 3.8s ease-in-out infinite alternate;
}
.bridge-glow-in { left: -100px; background: #66f2b4; }
.bridge-glow-out { right: -100px; background: #ff527c; animation-delay: -1.4s; }
@keyframes bridge-breathe { to { opacity: .25; transform: translateY(-50%) scale(1.15); } }
.bridge-money {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}
.bridge-money-out { flex-direction: row-reverse; text-align: right; }
.bridge-money > div { min-width: 0; display: flex; flex-direction: column; }
.bridge-money-icon {
  width: 43px;
  height: 43px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 14px;
  font-size: 19px;
  box-shadow: 0 0 20px currentColor;
  animation: bridge-icon-float 2.6s ease-in-out infinite alternate;
}
.bridge-money-in { color: #66f2b4; }
.bridge-money-out { color: #ff6f90; }
.bridge-money-out .bridge-money-icon { animation-delay: -1.3s; }
@keyframes bridge-icon-float { to { transform: translateY(-4px); } }
.bridge-money label { font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.bridge-money strong {
  margin-top: 6px;
  color: #fff;
  font-size: clamp(29px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -.055em;
  text-shadow: 0 0 22px currentColor;
  white-space: nowrap;
}
.bridge-money small { margin-top: 7px; color: rgba(255,255,255,.42); font-size: 8px; }
.bridge-motion {
  position: relative;
  z-index: 2;
  width: 170px;
  height: 112px;
  justify-self: center;
}
.bridge-motion-labels {
  position: absolute;
  inset: 0 2px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.36);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}
.bridge-motion-labels b {
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.3);
}
.bridge-lane {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 22%, currentColor 78%, transparent);
  opacity: .76;
}
.bridge-lane-in { top: 48px; color: #66f2b4; }
.bridge-lane-out { top: 82px; color: #ff6f90; }
.bridge-lane i {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.bridge-lane-in i { animation: bridge-dot-in 2.2s linear infinite; }
.bridge-lane-out i { animation: bridge-dot-out 2.45s linear infinite; }
.bridge-lane i:nth-child(2) { animation-delay: -.55s; }
.bridge-lane i:nth-child(3) { animation-delay: -1.1s; }
.bridge-lane i:nth-child(4) { animation-delay: -1.65s; }
@keyframes bridge-dot-in {
  from { opacity: 0; transform: translateX(-78px) scale(.45); }
  18%,82% { opacity: 1; }
  to { opacity: 0; transform: translateX(72px) scale(1.1); }
}
@keyframes bridge-dot-out {
  from { opacity: 0; transform: translateX(72px) scale(.45); }
  18%,82% { opacity: 1; }
  to { opacity: 0; transform: translateX(-78px) scale(1.1); }
}
.bridge-core {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 65px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  transform: translate(-50%, -50%);
}
.bridge-core i {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 70%, #fff);
  border-radius: 50%;
  box-shadow: 0 0 20px color-mix(in srgb, var(--acc1, #ff5ca8) 55%, transparent);
  animation: bridge-core-pulse 1.8s ease-out infinite;
}
.bridge-core b { position: relative; font-size: 13px; }
@keyframes bridge-core-pulse { to { opacity: 0; transform: scale(1.75); } }
.bridge-result {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 17px;
  min-width: 158px;
  padding: 8px 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 36%, rgba(255,255,255,.1));
  border-radius: 999px;
  color: var(--acc1, #ff5ca8);
  background: rgba(5,1,10,.72);
  box-shadow: 0 0 20px color-mix(in srgb, var(--acc1, #ff5ca8) 14%, transparent);
  transform: translateX(-50%);
}
.bridge-result span { font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.bridge-result strong { color: #fff; font-size: 12px; }
.bridge-compact-balance {
  margin-top: 9px;
  padding: 10px 14px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(0,0,0,.22);
}
.bridge-compact-balance > div { display: flex; justify-content: space-between; color: rgba(255,255,255,.35); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.bridge-compact-balance > div span:first-child { color: #66f2b4; }
.bridge-compact-balance > div span:last-child { color: #ff6f90; }
.bridge-compact-balance > i {
  position: relative;
  height: 5px;
  margin-top: 8px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: #ff6f90;
  box-shadow: 0 0 10px rgba(255,111,144,.2);
}
.bridge-compact-balance > i b {
  width: var(--in);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #66f2b4;
  box-shadow: 0 0 12px rgba(102,242,180,.6);
  animation: bridge-meter-in .75s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bridge-meter-in { from { width: 0; } }
.bridge-compact .bridge-foot { margin-top: 11px; padding-top: 10px; }
.bridge-share {
  margin-left: auto;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 65%, rgba(255,255,255,.2));
  border-radius: 9px;
  color: #fff;
  background: color-mix(in srgb, var(--acc1, #ff5ca8) 14%, rgba(0,0,0,.45));
  font: 800 8px/1 Sora, Manrope, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 0 16px color-mix(in srgb, var(--acc1, #ff5ca8) 18%, transparent);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.bridge-share b { font-size: 13px; }
.bridge-share:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--acc1, #ff5ca8) 24%, rgba(0,0,0,.4)); box-shadow: 0 0 22px color-mix(in srgb, var(--acc1, #ff5ca8) 28%, transparent); }
.bridge-share[disabled] { opacity: .5; cursor: wait; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bridge-dialog.bridge-compact,
  .bridge-showdown::before,
  .bridge-glow,
  .bridge-money-icon,
  .bridge-lane i,
  .bridge-core i,
  .bridge-compact-balance > i b { animation: none !important; }
}

@media (max-width: 800px) {
  .bridge-dialog.bridge-compact {
    max-height: 88svh !important;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
  }
  .bridge-compact .bridge-dialog-head { padding-bottom: 7px; }
  .bridge-compact .bridge-dialog-head h2 { font-size: 24px; }
  .bridge-compact .bridge-toolbar { margin-top: 7px; }
  .bridge-compact .bridge-content { margin-top: 9px; }
  .bridge-showdown {
    min-height: 278px;
    padding: 22px 16px 50px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 105px 86px;
    gap: 4px 10px;
  }
  .bridge-money { align-self: start; gap: 8px; }
  .bridge-money-out { grid-column: 2; }
  .bridge-money-icon { width: 31px; height: 31px; border-radius: 10px; font-size: 14px; }
  .bridge-money label { font-size: 6.5px; }
  .bridge-money strong { margin-top: 5px; font-size: clamp(22px, 7.5vw, 29px); }
  .bridge-money small { margin-top: 5px; font-size: 7px; }
  .bridge-motion { grid-column: 1 / -1; grid-row: 2; width: min(250px, 78vw); height: 86px; }
  .bridge-lane-in { top: 37px; }
  .bridge-lane-out { top: 67px; }
  .bridge-core { top: 52px; }
  .bridge-result { bottom: 13px; }
  .bridge-compact-balance { margin-top: 7px; }
  .bridge-compact .bridge-foot { align-items: center; margin-top: 8px; padding-top: 8px; flex-direction: row; }
  .bridge-compact .bridge-foot > span { display: none; }
  .bridge-compact .bridge-foot > div { width: auto; justify-content: flex-end; }
  .bridge-share { margin-left: 0; margin-right: auto; padding: 9px 13px; }
}

@media (max-width: 430px) {
  .bridge-money-icon { display: none; }
  .bridge-money strong { font-size: 25px; }
  .bridge-compact .bridge-foot a { font-size: 7.5px; }
}

/* The bridge itself: live green capital converges, red capital leaves. */
.bridge-flow-visual {
  position: absolute;
  z-index: 1;
  left: 190px;
  right: 190px;
  top: 52px;
  height: 152px;
  pointer-events: none;
}
.bridge-flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bridge-streams path {
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 7 12;
  opacity: .44;
  animation: bridge-stream-run 2.8s linear infinite;
}
.bridge-streams-in path { stroke: url(#bridge-stream-in); }
.bridge-streams-out path { stroke: url(#bridge-stream-out); animation-direction: reverse; }
.bridge-streams path:nth-child(2) { opacity: .62; animation-delay: -.4s; }
.bridge-streams path:nth-child(3) { opacity: .34; animation-delay: -.8s; }
.bridge-streams path:nth-child(4) { opacity: .8; stroke-width: 1.6; animation-delay: -1.2s; }
.bridge-streams path:nth-child(5) { opacity: .38; animation-delay: -1.6s; }
.bridge-streams path:nth-child(6) { opacity: .58; animation-delay: -2s; }
.bridge-streams path:nth-child(7) { opacity: .3; animation-delay: -2.4s; }
@keyframes bridge-stream-run { to { stroke-dashoffset: -76; } }
.bridge-flow-particles circle.in { fill: #8affce; filter: drop-shadow(0 0 5px #55ffac); }
.bridge-flow-particles circle.out { fill: #ff6f90; filter: drop-shadow(0 0 5px #ff365f); }
.bridge-flow-bars {
  position: absolute;
  z-index: 2;
  bottom: 15px;
  width: 64px;
  height: 112px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  opacity: .7;
  filter: drop-shadow(0 0 9px currentColor);
}
.bridge-flow-bars-in { left: -18px; color: #31ef8b; }
.bridge-flow-bars-out { right: -18px; color: #ff3f69; flex-direction: row-reverse; }
.bridge-flow-bars i {
  width: 6px;
  min-height: 8px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, transparent, currentColor);
  transform-origin: 50% 100%;
  animation: bridge-volume-dance 1.9s ease-in-out infinite alternate;
}
.bridge-flow-bars i:nth-child(1) { height: 17%; animation-delay: -.2s; }
.bridge-flow-bars i:nth-child(2) { height: 29%; animation-delay: -.65s; }
.bridge-flow-bars i:nth-child(3) { height: 44%; animation-delay: -1.1s; }
.bridge-flow-bars i:nth-child(4) { height: 63%; animation-delay: -.4s; }
.bridge-flow-bars i:nth-child(5) { height: 84%; animation-delay: -1.35s; }
.bridge-flow-bars i:nth-child(6) { height: 100%; animation-delay: -.85s; }
.bridge-flow-bars i:nth-child(7) { height: 72%; animation-delay: -1.6s; }
@keyframes bridge-volume-dance {
  from { opacity: .38; transform: scaleY(.62); }
  to { opacity: 1; transform: scaleY(1); }
}
.bridge-money { z-index: 4; }
.bridge-motion { z-index: 5; }
.bridge-core i::after {
  content: '';
  position: absolute;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 24%, transparent);
  border-radius: 50%;
  animation: bridge-core-pulse 2.2s .55s ease-out infinite;
}
.bridge-core {
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 64%, #fff);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc1, #ff5ca8) 18%, rgba(8,2,16,.94)), rgba(5,1,12,.96));
  box-shadow: 0 0 26px color-mix(in srgb, var(--acc1, #ff5ca8) 32%, transparent), inset 0 0 16px rgba(255,255,255,.04);
}
.bridge-core b { font-size: 18px; text-shadow: 0 0 12px #fff; }

@media (prefers-reduced-motion: reduce) {
  .bridge-streams path,
  .bridge-flow-bars i,
  .bridge-core i::after { animation: none !important; }
  .bridge-flow-particles { display: none; }
}

@media (max-width: 800px) {
  .bridge-flow-visual {
    left: 24px;
    right: 24px;
    top: 108px;
    height: 116px;
    opacity: .9;
  }
  .bridge-flow-bars { bottom: 5px; width: 48px; height: 72px; gap: 3px; opacity: .52; }
  .bridge-flow-bars i { width: 4px; }
  .bridge-flow-bars-in { left: -4px; }
  .bridge-flow-bars-out { right: -4px; }
  .bridge-streams path:nth-child(odd) { opacity: .25; }
  .bridge-streams path:nth-child(even) { opacity: .62; }
  .bridge-core { width: 44px; height: 44px; }
}

/* One PulseChain data destination with focused Markets and Bridge Flow pages. */
.share-dialog.pulse-data-dialog.bridge-compact {
  width: min(1080px, calc(100vw - 34px));
  max-height: 92svh;
  padding: 22px 24px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(65% 42% at 5% 0%, color-mix(in srgb, var(--acc1, #ff5ca8) 16%, transparent), transparent 72%),
    radial-gradient(50% 38% at 100% 100%, color-mix(in srgb, var(--acc2, #e90035) 12%, transparent), transparent 72%),
    linear-gradient(155deg, rgba(17,4,25,.99), rgba(7,2,14,.995));
}
.pulse-data-head { margin-bottom: 16px; }
.pulse-data-head h2 { margin-top: 5px; font-size: 29px; letter-spacing: -.045em; }
.pulse-data-head .share-dialog-sub { margin-top: 6px; font-size: 10px; }
.pulse-data-tabs {
  position: relative;
  margin: 0 0 14px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.pulse-data-tabs button {
  min-height: 53px;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255,255,255,.46);
  background: transparent;
  font-family: Sora, Manrope, sans-serif;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pulse-data-tabs button:hover { color: rgba(255,255,255,.82); }
.pulse-data-tabs button.on {
  border-color: color-mix(in srgb, var(--acc1, #ff5ca8) 48%, rgba(255,255,255,.14));
  color: #fff;
  background: linear-gradient(120deg, color-mix(in srgb, var(--acc1, #ff5ca8) 26%, rgba(0,0,0,.18)), color-mix(in srgb, var(--acc2, #e90035) 15%, rgba(0,0,0,.26)));
  box-shadow: 0 0 22px color-mix(in srgb, var(--acc1, #ff5ca8) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.1);
}
.pulse-data-tabs button:active { transform: scale(.992); }
.pulse-data-tabs span { font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.pulse-data-tabs small { color: rgba(255,255,255,.4); font-size: 8px; font-weight: 700; }
.pulse-data-tabs button.on small { color: rgba(255,255,255,.66); }
.pulse-data-page[hidden] { display: none !important; }
.pulse-data-page:not([hidden]) { animation: pulse-page-in .28s ease both; }
@keyframes pulse-page-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.pulse-data-section {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 19px;
  background: rgba(0,0,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pulse-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pulse-section-head > div:first-child { min-width: 0; }
.pulse-section-head label { color: var(--acc1, #ff5ca8); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.pulse-section-head h3 { margin-top: 4px; color: #fff; font-size: 17px; letter-spacing: -.025em; }
.pulse-markets-section .markets-grid { margin-top: 13px; }
.pulse-markets-section .markets-note { display: block; margin: 11px 2px 0; }
.pulse-data-divider {
  margin: 12px 5px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.28);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .14em;
}
.pulse-data-divider i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc1, #ff5ca8) 35%, transparent)); }
.pulse-data-divider i:last-child { background: linear-gradient(90deg, color-mix(in srgb, var(--acc2, #e90035) 35%, transparent), transparent); }
.pulse-section-actions { display: flex; align-items: center; gap: 9px; }
.markets-periods {
  min-width: 292px;
  padding: 3px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(0,0,0,.28);
}
.markets-periods button {
  min-width: 48px;
  min-height: 28px;
  padding: 0 10px;
  flex: 1;
  border: 0;
  border-radius: 7px;
  color: rgba(255,255,255,.46);
  background: transparent;
  font: 800 8px/1 Sora, Manrope, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.markets-periods button:hover { color: #fff; }
.markets-periods button.on {
  color: var(--accText, #fff);
  background: linear-gradient(110deg, var(--acc1, #ff5ca8), var(--acc2, #e90035));
  box-shadow: 0 0 15px color-mix(in srgb, var(--acc1, #ff5ca8) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
.markets-grid { transition: opacity .18s ease, filter .18s ease; }
.markets-grid.is-period-loading { opacity: .56; filter: saturate(.65); }
.market-chg.is-na { color: rgba(255,255,255,.44); }
.pulse-bridge-section .bridge-content { margin-top: 12px; }
.pulse-data-dialog .bridge-showdown { min-height: 252px; }
.pulse-data-dialog .bridge-foot { margin-top: 10px; }
.pulse-data-dialog #markets-copy,
.pulse-data-dialog .bridge-share {
  min-height: 34px;
  margin: 0;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 55%, rgba(255,255,255,.17));
  border-radius: 9px;
  color: #fff;
  background: color-mix(in srgb, var(--acc1, #ff5ca8) 12%, rgba(0,0,0,.44));
  font: 800 8px/1 Sora, Manrope, sans-serif;
  letter-spacing: .06em;
  text-transform: none;
  box-shadow: 0 0 15px color-mix(in srgb, var(--acc1, #ff5ca8) 14%, transparent);
}
.pulse-data-dialog #markets-copy b,
.pulse-data-dialog .bridge-share b { font-size: 13px; }
.pulse-data-dialog #markets-copy:hover,
.pulse-data-dialog .bridge-share:hover { background: color-mix(in srgb, var(--acc1, #ff5ca8) 22%, rgba(0,0,0,.4)); }

/* HEX uses the same hot red-magenta stage as the page, not the grape shell. */
html[data-asset="pHEX"] .share-dialog.pulse-data-dialog.bridge-compact {
  border-color: rgba(255,112,164,.62);
  background:
    radial-gradient(70% 65% at 3% 0%, rgba(255,49,139,.52), transparent 68%),
    radial-gradient(55% 60% at 100% 100%, rgba(226,0,42,.34), transparent 72%),
    linear-gradient(145deg, rgba(164,0,53,.99), rgba(104,0,31,.995) 52%, rgba(54,0,21,.998));
  box-shadow: 0 26px 100px rgba(32,0,13,.72), 0 0 38px rgba(255,38,119,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-asset="pHEX"] .pulse-data-section {
  border-color: rgba(255,164,197,.19);
  background: linear-gradient(145deg, rgba(67,0,24,.54), rgba(22,0,12,.62));
}
html[data-asset="pHEX"] .pulse-data-tabs {
  border-color: rgba(255,170,203,.2);
  background: rgba(61,0,23,.5);
}
html[data-asset="pHEX"] .pulse-data-tabs button.on {
  border-color: rgba(255,134,181,.68);
  background: linear-gradient(115deg, rgba(255,58,137,.42), rgba(208,0,43,.34));
  box-shadow: 0 0 25px rgba(255,43,126,.28), inset 0 1px 0 rgba(255,255,255,.13);
}

@media (max-width: 800px) {
  .topbar > .markets-btn {
    display: flex !important;
    grid-row: 1;
    grid-column: 2;
    min-width: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0 10px;
    justify-self: end;
  }
  .topbar > .markets-btn .wallet-btn-copy { display: none; }
  .share-dialog.pulse-data-dialog.bridge-compact {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92svh !important;
    padding: 14px 12px calc(15px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
  }
  .pulse-data-head { margin-bottom: 10px; }
  .pulse-data-head h2 { font-size: 23px; }
  .pulse-data-tabs { margin-bottom: 10px; }
  .pulse-data-tabs button { min-height: 47px; padding: 8px 10px; gap: 5px; flex-direction: column; }
  .pulse-data-tabs span { font-size: 8px; }
  .pulse-data-tabs small { font-size: 6.5px; }
  .pulse-data-section { padding: 10px; border-radius: 16px; }
  .pulse-section-head h3 { font-size: 14px; }
  .pulse-markets-section .markets-grid { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
  .pulse-markets-section .market-card { min-width: 0; padding: 8px; gap: 7px; border-radius: 12px; }
  .pulse-markets-section .market-art { width: 40px; height: 40px; }
  .pulse-markets-section .market-head b { font-size: 10px; }
  .pulse-markets-section .market-chg { font-size: 7.5px; }
  .pulse-markets-section .market-chg.is-atl { font-size: 8.5px; }
  .pulse-markets-section .market-price { margin: 3px 0 0; font-size: 12px; }
  .pulse-markets-section .market-climb { display: none; }
  .pulse-markets-section .markets-note { margin-top: 8px; font-size: 7px; }
  .pulse-data-divider { margin: 9px 2px; font-size: 6px; }
  .pulse-period-head,
  .pulse-bridge-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .pulse-period-head .pulse-section-actions,
  .pulse-section-actions { width: 100%; }
  .markets-periods { min-width: 0; flex: 1; }
  .markets-periods button { min-width: 0; padding: 0 5px; }
  .pulse-section-actions .bridge-periods { flex: 1; width: auto; }
  .pulse-section-actions .bridge-share { flex: none; }
  .pulse-data-dialog .bridge-showdown { min-height: 278px; }
  .pulse-data-dialog .bridge-foot { margin-top: 7px; }
}

@media (max-width: 430px) {
  .pulse-data-dialog #markets-copy span,
  .pulse-data-dialog .bridge-share span { display: none; }
  .pulse-data-dialog #markets-copy,
  .pulse-data-dialog .bridge-share { width: 34px; min-width: 34px; padding: 0; flex: none; }
}

/* ═══ Token-native modal stages ═══
   The page palette owns the whole environment. Inner data panels stay darker
   for contrast, but the surrounding sheet must unmistakably belong to the
   token that opened it. */
html[data-asset="pHEX"] {
  --acc1:#ff5ca8; --acc2:#e90035; --accText:#fff;
  --token-modal-a:#c40052; --token-modal-b:#85002f; --token-modal-c:#3d001b;
  --token-modal-glow-a:rgba(255,75,155,.58); --token-modal-glow-b:rgba(241,0,50,.38);
  --token-modal-line:rgba(255,133,180,.62); --token-modal-panel:rgba(52,0,23,.58);
}
html[data-asset="PLS"] {
  --acc1:#2eeaff; --acc2:#8952ff; --accText:#fff;
  --token-modal-a:#079ed4; --token-modal-b:#2f50d1; --token-modal-c:#521c91;
  --token-modal-glow-a:rgba(54,238,255,.66); --token-modal-glow-b:rgba(197,45,255,.42);
  --token-modal-line:rgba(103,233,255,.58); --token-modal-panel:rgba(10,29,104,.54);
}
html[data-asset="PLSX"] {
  --acc1:#1cff88; --acc2:#ff3446; --accText:#012516;
  --token-modal-a:#079b56; --token-modal-b:#07563b; --token-modal-c:#681326;
  --token-modal-glow-a:rgba(39,255,142,.6); --token-modal-glow-b:rgba(255,53,70,.42);
  --token-modal-line:rgba(75,255,162,.55); --token-modal-panel:rgba(2,45,31,.58);
}
html[data-asset="INC"] {
  --acc1:#9dff63; --acc2:#00ef6f; --accText:#012c15;
  --token-modal-a:#16a753; --token-modal-b:#08713e; --token-modal-c:#003d23;
  --token-modal-glow-a:rgba(164,255,105,.68); --token-modal-glow-b:rgba(0,244,111,.4);
  --token-modal-line:rgba(176,255,129,.56); --token-modal-panel:rgba(0,48,27,.58);
}
html[data-asset="pDAI"] {
  --acc1:#3be8ff; --acc2:#2460ed; --accText:#fff;
  --token-modal-a:#079fce; --token-modal-b:#3550cf; --token-modal-c:#65208d;
  --token-modal-glow-a:rgba(58,232,255,.65); --token-modal-glow-b:rgba(205,54,232,.4);
  --token-modal-line:rgba(108,227,255,.57); --token-modal-panel:rgba(19,25,104,.56);
}
html[data-asset="pCOCK"] {
  --acc1:#47c7ff; --acc2:#e7b928; --accText:#071c2a;
  --token-modal-a:#087ac7; --token-modal-b:#0c579c; --token-modal-c:#17624e;
  --token-modal-glow-a:rgba(65,199,255,.64); --token-modal-glow-b:rgba(235,191,45,.46);
  --token-modal-line:rgba(102,211,255,.56); --token-modal-panel:rgba(4,48,93,.58);
}

html[data-asset] :is(.share-dialog.pulse-data-dialog.bridge-compact, .wallet-dialog) {
  border-color: var(--token-modal-line);
  background:
    radial-gradient(72% 68% at 0% 0%, var(--token-modal-glow-a), transparent 68%),
    radial-gradient(60% 65% at 100% 100%, var(--token-modal-glow-b), transparent 72%),
    linear-gradient(145deg, var(--token-modal-a), var(--token-modal-b) 53%, var(--token-modal-c));
  box-shadow:
    0 30px 105px color-mix(in srgb, var(--token-modal-c) 70%, rgba(0,0,0,.62)),
    0 0 42px color-mix(in srgb, var(--acc1) 26%, transparent),
    inset 0 1px 0 rgba(255,255,255,.16);
}
html[data-asset] .pulse-data-section {
  border-color: color-mix(in srgb, var(--acc1) 27%, rgba(255,255,255,.12));
  background: linear-gradient(145deg, var(--token-modal-panel), rgba(3,1,12,.42));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
html[data-asset] :is(.pulse-data-tabs, .markets-periods, .bridge-periods) {
  border-color: color-mix(in srgb, var(--acc1) 28%, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--token-modal-panel) 78%, rgba(0,0,0,.28));
}
html[data-asset] .pulse-data-tabs button.on {
  border-color: color-mix(in srgb, var(--acc1) 72%, rgba(255,255,255,.34));
  background: linear-gradient(115deg, color-mix(in srgb, var(--acc1) 52%, transparent), color-mix(in srgb, var(--acc2) 46%, transparent));
  box-shadow: 0 0 28px color-mix(in srgb, var(--acc1) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.17);
}
html[data-asset] .wallet-input-row input {
  border-color: color-mix(in srgb, var(--acc1) 25%, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--token-modal-panel) 74%, rgba(0,0,0,.34));
}
html[data-asset] .bridge-showdown {
  border-color: color-mix(in srgb, var(--acc1) 38%, rgba(255,255,255,.13));
  background:
    linear-gradient(105deg, rgba(102,242,180,.055), transparent 38%, transparent 62%, rgba(255,120,146,.06)),
    color-mix(in srgb, var(--token-modal-panel) 62%, rgba(3,0,10,.62));
}
html[data-asset] .wallet-positions {
  border: 1px solid color-mix(in srgb, var(--acc1) 20%, rgba(255,255,255,.08));
  background: color-mix(in srgb, var(--token-modal-panel) 55%, rgba(0,0,0,.28));
}
html[data-asset] .wallet-input-row button { color: var(--accText, #fff); }

/* Keep each token's second identity visible rather than washing to one hue. */
html[data-asset="PLS"] :is(.pulse-data-dialog, .wallet-dialog) {
  background:
    radial-gradient(70% 72% at 0% 0%, rgba(42,234,255,.72), transparent 66%),
    radial-gradient(64% 72% at 100% 100%, rgba(214,46,255,.5), transparent 70%),
    linear-gradient(140deg, #078fcf, #354dcc 50%, #6f178f);
}
html[data-asset="PLSX"] :is(.pulse-data-dialog, .wallet-dialog) {
  background:
    radial-gradient(70% 70% at 0% 0%, rgba(36,255,139,.66), transparent 67%),
    radial-gradient(62% 70% at 100% 100%, rgba(255,48,66,.52), transparent 70%),
    linear-gradient(140deg, #078d50, #07513a 52%, #681224);
}
html[data-asset="INC"] :is(.pulse-data-dialog, .wallet-dialog) {
  background:
    radial-gradient(72% 72% at 0% 0%, rgba(174,255,102,.72), transparent 66%),
    radial-gradient(60% 70% at 100% 100%, rgba(0,246,111,.42), transparent 70%),
    linear-gradient(140deg, #149d4f, #076739 52%, #00371f);
}
html[data-asset="pDAI"] :is(.pulse-data-dialog, .wallet-dialog) {
  background:
    radial-gradient(72% 72% at 0% 0%, rgba(56,229,255,.7), transparent 66%),
    radial-gradient(62% 70% at 100% 100%, rgba(213,50,236,.48), transparent 70%),
    linear-gradient(140deg, #078fc7, #3c48c6 51%, #711c88);
}
html[data-asset="pCOCK"] :is(.pulse-data-dialog, .wallet-dialog) {
  background:
    radial-gradient(72% 72% at 0% 0%, rgba(61,198,255,.7), transparent 66%),
    radial-gradient(60% 70% at 100% 100%, rgba(237,191,39,.54), transparent 70%),
    linear-gradient(140deg, #0875c0, #0b5193 54%, #176048);
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE PRODUCT CONTRACT — keep last
   Phones are read-only: the chart plus one PulseChain Data destination.
   Markets and official bridge flow remain available; wallet-connected
   products stay out of the mobile experience entirely.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  #open-wallet,
  #wallet-modal { display: none !important; }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 7px !important;
  }
  .brand { grid-row: 1; grid-column: 1; min-width: 0; }
  .topbar > #open-markets {
    grid-row: 1;
    grid-column: 2;
    min-width: 58px;
    min-height: 38px;
    padding: 0 9px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .topbar > #open-markets svg { width: 14px; height: 14px; flex: none; }
  .topbar > #open-markets .wallet-btn-copy { display: flex !important; }
  .topbar > #open-markets .wallet-btn-label {
    font-size: 0;
    line-height: 1;
  }
  .topbar > #open-markets .wallet-btn-label::after {
    content: 'DATA';
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
  }
  .top-metrics {
    grid-row: 1 !important;
    grid-column: 3 !important;
    min-width: 0;
  }
  .top-metrics > div { min-width: 66px; padding-inline: 5px; }
  .mobile-asset-picker { grid-row: 2; grid-column: 1 / -1 !important; }

  #markets-modal {
    padding: 6px !important;
    place-items: center !important;
  }
  #markets-modal .pulse-data-dialog {
    width: 100% !important;
    height: calc(100svh - 12px);
    max-height: calc(100svh - 12px) !important;
    padding: 13px 11px calc(13px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px;
    overscroll-behavior: contain;
  }
  #markets-modal .pulse-data-head {
    min-height: 50px;
    margin-bottom: 8px;
    padding-right: 45px;
  }
  #markets-modal .pulse-data-head h2 { font-size: 21px; line-height: 1.08; }
  #markets-modal .pulse-data-head .share-dialog-sub { margin-top: 4px; font-size: 8px; }
  #markets-modal .share-close { top: 12px; right: 11px; width: 38px; height: 38px; }
  #markets-modal .pulse-data-tabs { position: sticky; z-index: 8; top: -13px; margin-bottom: 8px; backdrop-filter: blur(16px); }
  #markets-modal .pulse-data-tabs button { min-height: 43px; }
  #markets-modal .pulse-data-section { padding: 9px; }

  #markets-modal .pulse-markets-section .markets-grid { grid-template-columns: 1fr 1fr; }
  #markets-modal .pulse-markets-section .market-card { min-height: 60px; }
  #markets-modal .pulse-markets-section .market-art { width: 36px; height: 36px; }

  #markets-modal .pulse-data-dialog .bridge-showdown {
    min-height: 260px;
    padding: 19px 13px 47px;
  }
  #markets-modal .bridge-flow-visual { left: 16px; right: 16px; }
  #markets-modal .bridge-money strong { font-size: clamp(20px, 6.8vw, 27px); }
  #markets-modal .bridge-compact-balance { padding: 9px 11px 11px; }
}

@media (max-width: 350px) {
  .topbar > #open-markets { min-width: 38px; padding: 0 9px; }
  .topbar > #open-markets .wallet-btn-copy { display: none !important; }
  #markets-modal .pulse-markets-section .markets-grid { grid-template-columns: 1fr; }
}

/* The browser can reveal backdrop-filter as a hard moving compositor tile.
   Darken the page in one uniform fade; reserve movement for the card itself. */
#markets-modal { animation: none; }
#markets-modal .share-modal-backdrop {
  background: rgba(3, 1, 10, .88) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: pulse-data-dim-in .24s ease-out both;
}
#markets-modal .pulse-data-dialog {
  transform-origin: 50% 65%;
  animation: pulse-data-card-in .3s cubic-bezier(.2,.78,.2,1) both;
}
#markets-modal.is-closing .share-modal-backdrop { animation: pulse-data-dim-out .2s ease-in both; }
#markets-modal.is-closing .pulse-data-dialog { animation: share-close .22s ease-in both; }
@keyframes pulse-data-dim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-data-dim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pulse-data-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #markets-modal .share-modal-backdrop,
  #markets-modal .pulse-data-dialog { animation: none !important; }
}

/* FINAL BACKDROP COMPOSITING FIX
   Safari/Chromium can paint backdrop-filter in visible GPU tiles while a
   sheet opens. One opaque full-viewport tint has no tile boundary. */
.share-modal .share-modal-backdrop {
  background: rgba(2, 1, 8, .91) !important;
  background-image: none !important;
  background-position: 0 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* Bridge verdict is semantic across every token theme. */
.bridge-showdown.is-in .bridge-result {
  color: #66f2b4;
  border-color: rgba(102,242,180,.48);
  box-shadow: 0 0 22px rgba(102,242,180,.15);
}
.bridge-showdown.is-in .bridge-result strong { color: #66f2b4; }
.bridge-showdown.is-out .bridge-result {
  color: #ff6f90;
  border-color: rgba(255,111,144,.48);
  box-shadow: 0 0 22px rgba(255,111,144,.15);
}
.bridge-showdown.is-out .bridge-result strong { color: #ff6f90; }

/* ═══ eHEX page: the share-card violet, so nobody mistakes it for HEX on PLS ═══ */
html[data-asset="eHEX"] {
  --muted:rgba(233,229,255,.74);--line:rgba(203,193,255,.22);
  --red:#6a4cff;--fire:#8f7bff;--deep:#251573;--glass:rgba(43,29,128,.40);
  --shadow:0 22px 48px rgba(24,14,92,.36);
}
html[data-asset="PRVX"] {
  --muted:rgba(250,236,255,.76);--line:rgba(240,196,255,.22);
  --red:#a316e8;--fire:#ff9d3c;--deep:#28083f;--glass:rgba(66,16,104,.42);
  --shadow:0 22px 48px rgba(38,7,62,.42);
}
html[data-asset="eHEX"] body {
  background:radial-gradient(950px 680px at -5% 8%,rgba(122,102,255,.9),transparent 66%),radial-gradient(840px 620px at 74% 12%,rgba(84,58,235,.8),transparent 68%),radial-gradient(740px 550px at 62% 106%,rgba(60,32,190,.55),transparent 72%),linear-gradient(128deg,#6a5cff,#4a35d8 48%,#2a1490);
}
html[data-asset="PRVX"] body {
  background:radial-gradient(950px 680px at -5% 8%,rgba(255,150,60,.82),transparent 64%),radial-gradient(860px 630px at 74% 12%,rgba(224,64,154,.72),transparent 68%),radial-gradient(760px 560px at 60% 106%,rgba(139,45,240,.55),transparent 72%),linear-gradient(128deg,#d43cae,#7b1fd0 48%,#28083f);
}
html[data-asset="eHEX"] body::after,
html[data-asset="PRVX"] body::after {
  background:linear-gradient(16deg,transparent 0 20%,rgba(255,255,255,.045) 20.3%,transparent 20.7% 24%,rgba(255,255,255,.09) 24.2%,transparent 25%),radial-gradient(560px 360px at 17% 24%,rgba(255,255,255,.13),transparent 72%),radial-gradient(640px 410px at 76% 70%,color-mix(in srgb,var(--fire) 18%,transparent),transparent 74%);
}
html[data-asset="eHEX"] .card,html[data-asset="eHEX"] .performance-hero,html[data-asset="eHEX"] .chart-card,
html[data-asset="PRVX"] .card,html[data-asset="PRVX"] .performance-hero,html[data-asset="PRVX"] .chart-card {
  background:linear-gradient(135deg,color-mix(in srgb,var(--red) 25%,transparent),color-mix(in srgb,var(--deep) 70%,transparent)),var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),var(--shadow);
}
html[data-asset="eHEX"] .topbar,html[data-asset="PRVX"] .topbar {
  background:radial-gradient(360px 120px at 4% 20%,color-mix(in srgb,var(--fire) 15%,transparent),transparent 72%),linear-gradient(105deg,color-mix(in srgb,var(--red) 28%,transparent),color-mix(in srgb,var(--deep) 65%,transparent)),color-mix(in srgb,var(--glass) 60%,transparent);
}
html[data-asset="eHEX"] .brand-mark::before,html[data-asset="PRVX"] .brand-mark::before {
  background:radial-gradient(circle at 54% 48%,color-mix(in srgb,var(--fire) 48%,transparent),color-mix(in srgb,var(--red) 22%,transparent) 48%,transparent 72%);
}
html[data-asset="eHEX"] .asset-switch,html[data-asset="PRVX"] .asset-switch {
  background:color-mix(in srgb,var(--deep) 54%,transparent);border-color:var(--line);
}
html[data-asset="eHEX"] .asset-switch button.active,html[data-asset="PRVX"] .asset-switch button.active {
  background:linear-gradient(135deg,color-mix(in srgb,var(--fire) 34%,transparent),color-mix(in srgb,var(--red) 28%,transparent));
}

/* Final phone containment. Keep the read-only PulseChain data entry point visible
   beside the brand at every supported mobile width, with no horizontal clipping. */
@media (max-width: 800px) {
  .topbar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 54px 64px !important;
    column-gap: 6px !important;
    overflow: hidden;
  }
  .brand,
  .brand > div,
  .top-metrics,
  .mobile-asset-picker,
  .mobile-asset-picker select { min-width: 0 !important; max-width: 100%; }
  .brand { gap: 7px; padding-right: 0; overflow: hidden; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .brand h1 { font-size: clamp(11px, 3.45vw, 14px); }
  .brand p { overflow: hidden; text-overflow: ellipsis; }
  .topbar > #open-markets {
    position: static !important;
    inset: auto !important;
    justify-self: stretch;
    width: 54px;
    min-width: 54px;
    padding-inline: 6px;
  }
  .top-metrics > div {
    width: 64px;
    min-width: 64px;
    padding-inline: 2px;
  }
  .top-metrics strong { font-size: clamp(11px, 3.35vw, 14px) !important; }
  .tip-bar,
  .tip-label,
  .tip-copy { min-width: 0; max-width: 100%; }
  .tip-copy { flex: 0 1 auto; }
}

@media (max-width: 350px) {
  .topbar { grid-template-columns: minmax(0, 1fr) 40px 58px !important; }
  .topbar > #open-markets { width: 40px; min-width: 40px; padding: 0; }
  .topbar > #open-markets .wallet-btn-copy { display: none !important; }
  .top-metrics > div { width: 58px; min-width: 58px; }
  .brand p { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIXED MOBILE APP SHELL
   Home, Markets and Portfolio each own one viewport. Bridge Flow retains
   its existing visual treatment.
   ═══════════════════════════════════════════════════════════════════════ */
.mobile-menu-button,
.mobile-menu { display: none; }
.wallet-mobile-toolbar { display: contents; }
.wallet-add-cancel,
.wallet-add-toggle,
.wallet-positions-heading { display: none; }
.standalone-portfolio-summary { display: none; }
.standalone-holdings-preview { display: none; }
.standalone-refresh-button,
.standalone-portfolio-refresh { display: none; }

@media (max-width: 800px) {
  html, body { width: 100%; height: 100%; overflow: hidden !important; overscroll-behavior: none; }
  body { min-height: 100dvh; }
  .app { height: 100dvh; min-height: 0; overflow: hidden; }
  .workspace { height: 100%; min-height: 0; }

  .topbar {
    grid-template-columns: minmax(0, 1fr) 64px 42px !important;
    column-gap: 10px !important;
    overflow: hidden !important;
  }
  .topbar > #open-markets,
  .topbar > #open-wallet,
  .topbar > #quick-share { display: none !important; }
  .mobile-menu-button {
    display: inline-flex;
    grid-row: 1;
    grid-column: 3;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(48,0,15,.16);
  }
  .top-metrics { grid-row: 1 !important; grid-column: 2 !important; justify-self: end; }
  .mobile-menu-button span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .mobile-menu-button span:first-child,
  .mobile-menu-button span:last-child { width: 19px; }
  .mobile-menu-button span:nth-child(2) { width: 13px; }
  .mobile-asset-picker { grid-column: 1 / -1 !important; }

  .share-fab {
    display: flex !important;
    left: 10px;
    right: 10px;
    bottom: calc(9px + env(safe-area-inset-bottom));
    min-height: 54px;
  }
  .view.chart-view { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

  .mobile-menu:not([hidden]) { position: fixed; z-index: 1800; inset: 0; display: block; }
  .mobile-menu-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8,0,5,.66);
    backdrop-filter: blur(10px) saturate(110%);
    animation: fixed-menu-fade .2s ease both;
  }
  .mobile-menu-sheet {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 8px 12px 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    color: #fff;
    background: radial-gradient(105% 115% at 100% 0%, color-mix(in srgb, var(--fire) 28%, transparent), transparent 64%), linear-gradient(155deg, color-mix(in srgb, var(--deep) 82%, #16030d), #0b0308);
    box-shadow: 0 24px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.11);
    animation: fixed-menu-up .28s cubic-bezier(.2,.8,.2,1) both;
  }
  .mobile-menu-handle { display: block; width: 38px; height: 4px; margin: 1px auto 10px; border-radius: 4px; background: rgba(255,255,255,.28); }
  .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 3px 12px; }
  .mobile-menu-head > img { width: 44px; height: 44px; flex: none; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; object-fit: cover; box-shadow: 0 8px 22px rgba(0,0,0,.32), 0 0 18px color-mix(in srgb, var(--fire) 24%, transparent); }
  .mobile-menu-head > div { flex: 1; min-width: 0; }
  .mobile-menu-head small { display: block; color: rgba(255,255,255,.46); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
  .mobile-menu-head strong { display: block; margin-top: 4px; font-family: Sora, sans-serif; font-size: 17px; letter-spacing: -.025em; }
  .mobile-menu-head > button { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: #fff; background: rgba(255,255,255,.06); }
  .mobile-menu-head svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .mobile-menu-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .mobile-menu-options > button {
    min-width: 0;
    min-height: 112px;
    padding: 13px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 17px;
    color: #fff;
    background: rgba(255,255,255,.055);
    text-align: left;
    transition: transform .16s ease, background .16s ease;
  }
  .mobile-menu-options > button:active { transform: scale(.98); background: rgba(255,255,255,.1); }
  .mobile-menu-options > button > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055)); }
  .mobile-menu-options svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-menu-options circle { fill: currentColor; stroke: none; }
  .mobile-menu-options b { grid-column: 1 / -1; align-self: end; font-size: 13px; }
  .mobile-menu-options b small { display: block; margin-top: 3px; color: rgba(255,255,255,.47); font-size: 9.5px; font-weight: 600; line-height: 1.3; }
  .mobile-menu-options em { color: rgba(255,255,255,.42); font-size: 17px; font-style: normal; }
  @keyframes fixed-menu-fade { from { opacity: 0; } }
  @keyframes fixed-menu-up { from { opacity: .5; transform: translateY(28px) scale(.985); } }

  #markets-modal:not([hidden]),
  #wallet-modal:not([hidden]) {
    position: fixed;
    z-index: 1700;
    inset: 0;
    width: 100%;
    height: 100dvh;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: color-mix(in srgb, var(--deep) 88%, #090207);
  }
  #markets-modal .share-modal-backdrop,
  #wallet-modal .share-modal-backdrop { display: none; }
  #markets-modal > .share-dialog,
  #wallet-modal > .share-dialog {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: max(8px, env(safe-area-inset-top)) 10px calc(9px + env(safe-area-inset-bottom)) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #markets-modal > .share-dialog::before,
  #wallet-modal > .share-dialog::before { display: none !important; }
  #markets-modal .share-dialog-head,
  #wallet-modal .share-dialog-head { position: relative; flex: 0 0 54px; min-height: 54px; margin: 0 0 7px; padding: 5px 44px 6px 47px; display: flex; align-items: center; }
  #markets-modal .share-dialog-head label,
  #wallet-modal .share-dialog-head label { font-size: 6.5px; }
  #markets-modal .share-dialog-head h2,
  #wallet-modal .share-dialog-head h2 { margin-top: 2px; font-size: 17px; }
  #markets-modal .share-dialog-sub { display: none; }
  #markets-modal .share-close,
  #wallet-modal .share-close { position: absolute; left: 0; top: 7px; width: 38px; height: 38px; }
  #markets-modal .share-close svg,
  #wallet-modal .share-close svg { display: none; }
  #markets-modal .share-close::before,
  #wallet-modal .share-close::before { content: "\2190"; color: #fff; font-size: 21px; }

  #markets-modal .pulse-data-tabs { position: static; flex: 0 0 40px; min-height: 40px; margin: 0 0 7px; padding: 3px; }
  #markets-modal .pulse-data-tabs button { min-height: 32px; padding: 4px 8px; flex-direction: row; gap: 6px; }
  #markets-modal .pulse-data-tabs span { font-size: 7.5px; }
  #markets-modal .pulse-data-tabs small { font-size: 6px; }
  #markets-modal .pulse-data-page:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  #markets-modal .pulse-markets-section { padding: 7px; display: flex; flex-direction: column; border-radius: 13px; }
  #markets-modal .pulse-period-head { flex: 0 0 auto; gap: 5px; }
  #markets-modal .pulse-period-head > div:first-child label { display: none; }
  #markets-modal .pulse-period-head h3 { margin: 0; font-size: 12px; }
  #markets-modal .pulse-section-actions { gap: 5px; }
  #markets-modal .markets-periods { height: 29px; padding: 2px; }
  #markets-modal .markets-periods button { min-height: 25px; padding: 0 2px; font-size: 6.5px; }
  #markets-modal .pulse-data-dialog #markets-copy { width: 40px; min-width: 40px; min-height: 38px; padding: 0; touch-action: manipulation; }
  #markets-modal .pulse-data-dialog #markets-copy b { font-size: 16px; }
  #markets-modal .pulse-data-dialog #markets-copy span { display: none; }
  #markets-modal .pulse-markets-section .markets-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  #markets-modal .market-card { min-width: 0; min-height: 0; padding: 5px 7px; gap: 6px; overflow: hidden; border-radius: 10px; }
  #markets-modal .market-art { width: clamp(27px, 8vw, 35px); height: clamp(27px, 8vw, 35px); flex: none; }
  #markets-modal .market-head { gap: 3px; }
  #markets-modal .market-head b { font-size: clamp(9px, 2.5vw, 10px); }
  #markets-modal .market-chg {
    padding: 3px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: clamp(9.5px, 2.85vw, 11px);
    line-height: 1;
  }
  #markets-modal .market-chg.is-atl { font-size: clamp(10px, 3vw, 11.5px); }
  #markets-modal .market-price { margin: 3px 0 0; font-size: clamp(10.5px, 3.1vw, 13px); line-height: 1; }
  #markets-modal .market-climb {
    max-width: 100%;
    margin-top: 5px;
    padding: 2px 5px;
    display: inline-block;
    overflow: hidden;
    border-radius: 999px;
    font-size: clamp(6px, 1.75vw, 7px);
    line-height: 1.25;
    letter-spacing: .035em;
    text-overflow: ellipsis;
    vertical-align: top;
  }
  #markets-modal .markets-note { display: none; }

  #wallet-modal .wallet-input-row { flex: 0 0 42px; min-height: 42px; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 6px; }
  #wallet-modal.is-adding-wallet .wallet-input-row { grid-template-columns: minmax(0, 1fr) 58px 38px; }
  #wallet-modal.has-wallets:not(.is-adding-wallet) .wallet-input-row { display: none; }
  #wallet-modal .wallet-input-row input {
    width: 114.286%;
    height: 114.286%;
    min-width: 0;
    padding: 0 12px;
    align-self: center;
    justify-self: start;
    transform: scale(.875);
    transform-origin: left center;
    font-size: 16px !important;
    letter-spacing: -.055em;
    touch-action: manipulation;
  }
  #wallet-modal .wallet-input-row input::placeholder { font-size: 13px; letter-spacing: 0; opacity: .58; }
  #wallet-modal .wallet-input-row button { min-width: 0; padding: 0 8px; font-size: 8px; }
  #wallet-modal .wallet-input-row .wallet-add-cancel {
    width: 38px;
    min-width: 38px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
  }
  #wallet-modal.is-adding-wallet .wallet-input-row .wallet-add-cancel { display: inline-flex; }
  #wallet-modal #wallet-forget { display: none !important; }
  #wallet-modal .wallet-mobile-toolbar { flex: 0 0 38px; min-height: 38px; margin: 0 0 5px; display: flex; align-items: center; gap: 7px; }
  #wallet-modal:not(.has-wallets) .wallet-mobile-toolbar { display: none; }
  #wallet-modal.is-adding-wallet .wallet-mobile-toolbar { display: none; }
  #wallet-modal .wallet-chips { flex: 1 1 auto; min-width: 0; max-height: 38px; margin: 0; flex-wrap: nowrap; overflow: hidden; }
  #wallet-modal .wallet-chip { min-height: 34px; padding: 5px 8px; border-radius: 10px; }
  #wallet-modal .wallet-chip code { font-size: 10px; }
  #wallet-modal .wallet-add-toggle {
    min-width: 92px;
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.07);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .03em;
  }
  #wallet-modal .wallet-privacy { flex: 0 0 auto; min-width: 0; margin-top: 5px; overflow: hidden; font-size: 7px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  #wallet-modal .wallet-summary { flex: 0 0 auto; grid-template-columns: 1.5fr .65fr .65fr 1fr; gap: 5px; margin-top: 6px; padding: 9px 10px 7px; border-radius: 11px; }
  #wallet-modal .wallet-summary label { font-size: 5.5px; letter-spacing: .08em; }
  #wallet-modal .wallet-summary strong,
  #wallet-modal .wallet-summary .wallet-total { margin-top: 3px; font-size: clamp(11px, 3.5vw, 16px); }
  #wallet-modal .wallet-summary > div:first-child {
    min-width: 0;
    padding-right: 8px;
    border-right: 1px solid rgba(255,255,255,.16);
  }
  #wallet-modal .wallet-summary .wallet-total {
    font-size: clamp(17px, 5.2vw, 21px) !important;
    line-height: 1;
    letter-spacing: -.045em;
    text-shadow: 0 4px 18px rgba(94,0,34,.24);
    white-space: nowrap;
  }
  #wallet-modal .wallet-dust-toggle { margin-top: 4px; padding-top: 5px; gap: 5px; font-size: 6px; letter-spacing: .08em; }
  #wallet-modal .wallet-dust-toggle input { width: 11px; height: 11px; }
  #wallet-modal .wallet-positions-heading {
    flex: 0 0 auto;
    margin: 8px 2px 5px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  #wallet-modal .wallet-summary[hidden] + .wallet-positions-heading { display: none; }
  #wallet-modal .wallet-positions-heading strong { color: #fff; font-size: 11px; font-weight: 800; }
  #wallet-modal .wallet-positions-heading small { color: rgba(255,255,255,.42); font-size: 6.5px; font-weight: 700; }
  #wallet-modal .wallet-positions {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(var(--mobile-position-rows, 1), var(--mobile-position-height, 56px));
    align-content: start;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    border-radius: 9px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #wallet-modal .wallet-positions::-webkit-scrollbar { display: none; }
  #wallet-modal .wallet-head-row { display: none; }
  #wallet-modal .wallet-row {
    min-width: 0;
    min-height: 0;
    max-height: none;
    padding: 10px 12px 13px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: linear-gradient(115deg, rgba(255,255,255,.055), rgba(25,0,13,.18));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    font-size: 8px;
  }
  #wallet-modal .wallet-row::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 4px;
    border: 0;
    background: rgba(255,255,255,.07);
  }
  #wallet-modal .wallet-row::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: var(--share, 0%);
    height: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(90deg, var(--acc1, #ff5ca8), var(--acc2, #e90035));
    box-shadow: 0 0 12px color-mix(in srgb, var(--acc1, #ff5ca8) 35%, transparent);
  }
  #wallet-modal .wallet-token b { font-size: 13px; }
  #wallet-modal .wallet-value b { font-size: 13px; }
  #wallet-modal .wallet-token small { margin-top: 2px; font-size: 8px; }
  #wallet-modal .wallet-value { display: flex; align-items: flex-end; justify-content: center; flex-direction: column; }
  #wallet-modal .wallet-value::before { content: "POSITION VALUE"; margin-bottom: 3px; color: rgba(255,255,255,.36); font-size: 5.5px; font-weight: 800; letter-spacing: .09em; }
  #wallet-modal .wallet-value i { margin-top: 3px; padding: 2px 5px; border-radius: 999px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); font-size: 7px; font-weight: 800; }
  #wallet-modal .wallet-value i::after { content: " ALLOCATION"; font-size: 5px; opacity: .62; }
  #wallet-modal .wallet-amount,
  #wallet-modal .wallet-price { display: none; }
  #wallet-modal .wallet-divider { grid-column: 1 / -1; min-height: 22px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(0,0,0,.12); font-size: 6px; }
  #wallet-modal .wallet-note { flex: 0 0 auto; margin-top: 4px; font-size: 7px; }
}

@media (max-width: 350px) {
  .topbar { grid-template-columns: minmax(0, 1fr) 58px 40px !important; }
  .mobile-menu-button { width: 40px; height: 40px; }
  #markets-modal .pulse-data-tabs small { display: none; }
  #wallet-modal .wallet-summary { grid-template-columns: 1.4fr .6fr .6fr; }
  #wallet-modal .wallet-summary > div:nth-child(4) { display: none; }
}

@media (max-width: 800px) and (max-height: 620px) {
  #markets-modal .share-dialog-head,
  #wallet-modal .share-dialog-head { flex-basis: 46px; min-height: 46px; margin-bottom: 4px; }
  #markets-modal .share-close,
  #wallet-modal .share-close { top: 3px; }
  #markets-modal .pulse-data-tabs { flex-basis: 34px; min-height: 34px; margin-bottom: 4px; }
  #markets-modal .pulse-data-tabs button { min-height: 26px; }
  #markets-modal .market-art { width: 25px; height: 25px; }
  #wallet-modal .wallet-privacy { display: none; }
  #wallet-modal .wallet-summary { padding-block: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-scrim,
  .mobile-menu-sheet { animation: none !important; }
}

@media (max-width: 800px) {
  html.standalone-app { background: var(--deep, #690014); }
  html.standalone-app body { min-height: 100dvh; background-color: var(--deep, #690014); }
  html.standalone-app .app {
    height: 100dvh;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  html.standalone-app .standalone-portfolio-summary:not([hidden]) {
    flex: 0 0 108px;
    min-height: 108px;
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 17px;
    color: #fff;
    background:
      radial-gradient(85% 170% at 0% 0%, color-mix(in srgb, var(--fire) 25%, transparent), transparent 70%),
      linear-gradient(105deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 14px 34px color-mix(in srgb, var(--deep) 30%, transparent);
    text-align: left;
  }
  html.standalone-app .standalone-portfolio-open {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 13px 54px 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
  }
  html.standalone-app .standalone-portfolio-copy { min-width: 0; display: flex; align-items: center; gap: 12px; }
  html.standalone-app .standalone-portfolio-icon {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.88);
  }
  html.standalone-app .standalone-portfolio-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html.standalone-app .standalone-portfolio-icon circle { fill: currentColor; stroke: none; }
  html.standalone-app .standalone-portfolio-copy small { display: block; color: rgba(255,255,255,.52); font-size: 6px; font-weight: 800; letter-spacing: .14em; }
  html.standalone-app .standalone-portfolio-copy strong { max-width: 53vw; margin-top: 4px; display: block; overflow: hidden; font-size: clamp(30px, 9vw, 37px); line-height: .98; letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }
  html.standalone-app .standalone-portfolio-meta { margin-top: 5px; display: block; color: rgba(255,255,255,.52); font-size: 7px; font-weight: 700; }
  html.standalone-app .standalone-portfolio-summary em { flex: none; align-self: flex-end; margin-bottom: 4px; color: rgba(255,255,255,.68); font-size: 7.5px; font-style: normal; font-weight: 800; }
  html.standalone-app .standalone-portfolio-summary em b { margin-left: 5px; color: var(--acc1, #ff5ca8); font-size: 13px; }
  html.standalone-app .standalone-portfolio-refresh,
  html.standalone-app .standalone-refresh-button:not([hidden]) {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    color: rgba(255,255,255,.88);
    background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    touch-action: manipulation;
  }
  html.standalone-app .standalone-portfolio-refresh {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
  }
  html.standalone-app :is(.standalone-portfolio-refresh, .standalone-refresh-button) svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: center;
  }
  html.standalone-app :is(.standalone-portfolio-refresh, .standalone-refresh-button):active { background: rgba(255,255,255,.16); transform: scale(.96); }
  html.standalone-app :is(.standalone-portfolio-refresh, .standalone-refresh-button):disabled { opacity: .62; }
  html.standalone-app :is(.standalone-portfolio-refresh, .standalone-refresh-button).is-refreshing svg { animation: standalone-refresh-spin .8s linear infinite; }
  @keyframes standalone-refresh-spin { to { transform: rotate(360deg); } }

  html.standalone-app .standalone-holdings-preview:not([hidden]) {
    flex: 0 0 96px;
    min-height: 96px;
    padding: 11px 13px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    color: #fff;
    background: rgba(65,0,27,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.065);
    text-align: left;
  }
  html.standalone-app .standalone-holdings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  html.standalone-app .standalone-holdings-head small { color: rgba(255,255,255,.68); font-size: 6px; font-weight: 800; letter-spacing: .13em; }
  html.standalone-app .standalone-holdings-head em { color: rgba(255,255,255,.4); font-size: 6px; font-style: normal; font-weight: 700; }
  html.standalone-app .standalone-holdings-list { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.standalone-app .standalone-holding { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
  html.standalone-app .standalone-holding + .standalone-holding { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.1); }
  html.standalone-app .standalone-holding > span { min-width: 0; display: flex; align-items: baseline; gap: 5px; }
  html.standalone-app .standalone-holding > span b { font-size: 10px; }
  html.standalone-app .standalone-holding > span small { color: rgba(255,255,255,.46); font-size: 6px; }
  html.standalone-app .standalone-holding > strong { min-width: 0; overflow: hidden; font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  html.standalone-app .standalone-holding > i { height: 3px; display: block; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
  html.standalone-app .standalone-holding > i b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--acc1, #ff5ca8), var(--acc2, #e90035)); }

  html.standalone-app .view.chart-view { gap: 12px; }
  html.standalone-app .performance-hero {
    flex: 0 0 355px;
    height: 355px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html.standalone-app .performance-hero::before,
  html.standalone-app .performance-hero::after { display: none; }
  html.standalone-app .performance-copy {
    flex: 0 0 205px;
    height: 205px;
    min-height: 0;
    padding: 22px 22px 17px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: stretch;
    gap: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 17px;
    background:
      radial-gradient(110% 140% at 0% 0%, color-mix(in srgb, var(--fire) 34%, transparent), transparent 66%),
      radial-gradient(75% 120% at 100% 100%, color-mix(in srgb, var(--red) 28%, transparent), transparent 70%),
      linear-gradient(135deg, color-mix(in srgb, var(--deep) 58%, rgba(255,255,255,.08)), color-mix(in srgb, var(--deep) 82%, #160008));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 14px 34px color-mix(in srgb, var(--deep) 25%, transparent);
  }
  html.standalone-app .performance-primary { align-self: center; }
  html.standalone-app .performance-primary > label { font-size: 10px; letter-spacing: .04em; }
  html.standalone-app .performance-primary > strong { margin-top: 5px; font-size: clamp(38px, 11vw, 46px); letter-spacing: -.06em; white-space: nowrap; }
  html.standalone-app .performance-primary > span {
    margin-top: 9px;
    padding: 0;
    border: 0;
    color: rgba(255,255,255,.58);
    background: transparent;
    box-shadow: none;
    font-size: 6.5px;
    letter-spacing: .12em;
  }
  html.standalone-app .performance-multiple {
    min-width: 0;
    padding: 13px 0 1px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,.14);
    border-left: 0;
  }
  html.standalone-app .performance-multiple label { font-size: 6px; }
  html.standalone-app .performance-multiple strong { margin-top: 0; font-size: 24px; }
  html.standalone-app .performance-multiple small { margin-top: 0; font-size: 5.5px; }
  html.standalone-app .cycle-progress {
    flex: 0 0 140px;
    min-height: 140px;
    padding: 15px 19px 13px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 17px;
    background:
      radial-gradient(90% 160% at 100% 100%, color-mix(in srgb, var(--fire) 18%, transparent), transparent 70%),
      rgba(35,0,16,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.065);
  }
  html.standalone-app .cycle-progress-head > div:first-child > strong { font-size: 11px; letter-spacing: .02em; }
  html.standalone-app .cycle-progress-head label { font-size: 5.5px; }
  html.standalone-app .cycle-progress-readout strong { font-size: 21px; }
  html.standalone-app .cycle-progress-readout span { font-size: 5px; }
  html.standalone-app .cycle-progress-meter { margin-top: 20px; }
  html.standalone-app .cycle-progress-track { height: 11px; }
  html.standalone-app .cycle-progress-axis b { font-size: 6px; }
  html.standalone-app .cycle-progress-axis small { display: none; }
  html.standalone-app .cycle-progress-foot { display: none; }
  html.standalone-app .tip-bar { display: none; }

  html.standalone-app #wallet-modal .wallet-dialog > .share-dialog-head { order: 1; }
  html.standalone-app #wallet-modal .share-dialog-head { padding-right: 47px; }
  html.standalone-app #wallet-modal .standalone-refresh-button {
    position: absolute;
    z-index: 2;
    top: 7px;
    right: 0;
  }
  html.standalone-app #wallet-modal .wallet-summary {
    order: 2;
    flex: 0 0 118px;
    min-height: 118px;
    margin: 0 0 8px;
    padding: 14px 14px 12px;
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: 9px 12px;
    border-radius: 17px;
    background:
      radial-gradient(90% 150% at 0% 0%, color-mix(in srgb, var(--fire) 35%, transparent), transparent 68%),
      linear-gradient(115deg, color-mix(in srgb, var(--red) 72%, #66001e), color-mix(in srgb, var(--deep) 88%, #14000a));
  }
  html.standalone-app #wallet-modal .wallet-summary > div:first-child {
    grid-column: 1 / -1;
    padding: 0 108px 9px 0;
    border: 0;
  }
  html.standalone-app #wallet-modal .wallet-summary > div:nth-child(n+2) {
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  html.standalone-app #wallet-modal .wallet-summary label { font-size: 5.5px; }
  html.standalone-app #wallet-modal .wallet-summary .wallet-total { margin-top: 5px; font-size: clamp(29px, 8.8vw, 36px) !important; }
  html.standalone-app #wallet-modal .wallet-summary strong { font-size: clamp(13px, 4vw, 17px); }
  html.standalone-app #wallet-modal .wallet-dust-toggle {
    position: absolute;
    top: 15px;
    right: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 5.5px;
  }
  html.standalone-app #wallet-modal .wallet-input-row,
  html.standalone-app #wallet-modal .wallet-mobile-toolbar { order: 3; }
  html.standalone-app #wallet-modal .wallet-privacy { order: 4; margin: 0 0 5px; }
  html.standalone-app #wallet-modal .wallet-positions-heading { order: 5; margin-top: 5px; }
  html.standalone-app #wallet-modal .wallet-positions { order: 6; }
  html.standalone-app #wallet-modal .wallet-note { order: 7; }
}

@media (max-width: 800px) and (min-height: 700px) {
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="1"],
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="2"] { gap: 9px; }
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="1"] .wallet-row,
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="2"] .wallet-row {
    padding: 14px 15px 16px;
    border-radius: 14px;
  }
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="1"] .wallet-token b,
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="2"] .wallet-token b,
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="1"] .wallet-value b,
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="2"] .wallet-value b { font-size: 15px; }
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="1"] .wallet-token small,
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="2"] .wallet-token small { font-size: 9px; }
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="1"] .wallet-row::before,
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="1"] .wallet-row::after,
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="2"] .wallet-row::before,
  html.standalone-app #wallet-modal .wallet-positions[data-position-count="2"] .wallet-row::after { height: 5px; }

  html.standalone-app #markets-modal .share-dialog-head { flex-basis: 60px; min-height: 60px; }
  html.standalone-app #markets-modal .pulse-data-tabs { flex-basis: 44px; min-height: 44px; }
  html.standalone-app #markets-modal .pulse-data-tabs button { min-height: 36px; }
  html.standalone-app #markets-modal .pulse-data-section { padding: 9px; }
  html.standalone-app #markets-modal .pulse-markets-section .markets-grid { gap: 7px; margin-top: 8px; }
  html.standalone-app #markets-modal .market-card { padding: 7px 9px; gap: 8px; border-radius: 12px; }
  html.standalone-app #markets-modal .market-art { width: 40px; height: 40px; }
  html.standalone-app #markets-modal .market-head b { font-size: 11px; }
  html.standalone-app #markets-modal .market-chg { font-size: clamp(10.5px, 3vw, 11.5px); }
  html.standalone-app #markets-modal .market-chg.is-atl { font-size: clamp(11px, 3.15vw, 12px); }
  html.standalone-app #markets-modal .market-price { margin-top: 5px; font-size: clamp(12px, 3.5vw, 14px); }
  html.standalone-app #markets-modal .market-climb { margin-top: 6px; padding: 3px 6px; font-size: clamp(6.5px, 1.9vw, 7.5px); }

  html.standalone-app #markets-modal .pulse-data-dialog .bridge-showdown { border-radius: 22px; }
  html.standalone-app #markets-modal .bridge-money strong { font-size: clamp(27px, 8vw, 33px); }
  html.standalone-app #markets-modal .bridge-money small { font-size: 8px; }
  html.standalone-app #markets-modal .bridge-core { width: 52px; height: 52px; }
  html.standalone-app #markets-modal .bridge-result { min-width: 222px; padding: 11px 19px; }
  html.standalone-app #markets-modal .bridge-result strong { font-size: 18px; }
  html.standalone-app #markets-modal .bridge-compact-balance { padding: 11px 13px 12px; }
  html.standalone-app #markets-modal .bridge-official-link { min-height: 42px; font-size: 9px; }
}

@media (max-width: 800px) and (max-height: 699px) {
  html.standalone-app .standalone-portfolio-summary:not([hidden]) {
    flex-basis: 76px;
    min-height: 76px;
  }
  html.standalone-app .standalone-portfolio-open { padding: 9px 50px 9px 12px; }
  html.standalone-app .standalone-portfolio-refresh { top: 9px; right: 9px; width: 34px; height: 34px; }
  html.standalone-app .standalone-portfolio-icon { width: 34px; height: 34px; }
  html.standalone-app .standalone-portfolio-copy strong { font-size: clamp(23px, 7vw, 28px); }
  html.standalone-app .standalone-portfolio-meta { display: none; }
  html.standalone-app .standalone-holdings-preview { display: none !important; }
  html.standalone-app .performance-hero { flex: 1 1 auto; width: 100%; height: auto; }
  html.standalone-app .performance-copy { flex: 1 1 auto; height: auto; padding-block: 15px 12px; }
  html.standalone-app .performance-primary > strong { font-size: clamp(34px, 10vw, 41px); }
  html.standalone-app .cycle-progress { flex-basis: 112px; min-height: 112px; padding-block: 11px 10px; }
  html.standalone-app .cycle-progress-meter { margin-top: 15px; }

  html.standalone-app #wallet-modal .wallet-summary {
    flex-basis: 112px;
    min-height: 112px;
    padding-block: 10px 9px;
  }
  html.standalone-app #wallet-modal .wallet-summary .wallet-total { font-size: clamp(24px, 7.8vw, 30px) !important; }
}

/* Mobile Bridge Flow: one fixed-screen story with a clear verdict. */
@media (max-width: 800px) {
  #markets-modal .pulse-data-tabs {
    border-color: rgba(255,255,255,.11);
    background: rgba(8,1,16,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }
  #markets-modal .pulse-data-tabs button.on {
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.085);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc1, #ff5ca8) 30%, transparent);
  }
  #markets-modal .pulse-data-tabs button:not(.on) { color: rgba(255,255,255,.48); }

  #markets-modal .pulse-bridge-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #markets-modal .pulse-bridge-section .pulse-bridge-head { flex: 0 0 auto; }
  #markets-modal .pulse-bridge-section .bridge-content {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 7px;
    display: flex;
    flex-direction: column;
  }
  #markets-modal .pulse-data-dialog .bridge-showdown {
    flex: 1 1 auto;
    min-height: 238px;
    padding: 19px 13px 56px;
    grid-template-rows: 92px minmax(104px, 1fr);
    border-radius: 19px;
  }
  #markets-modal .bridge-money label { font-size: 7px; }
  #markets-modal .bridge-money strong { font-size: clamp(23px, 7.4vw, 30px); }
  #markets-modal .bridge-money small {
    margin-top: 6px;
    color: rgba(255,255,255,.62);
    font-size: 7.5px;
  }
  #markets-modal .bridge-motion {
    width: min(280px, 82vw);
    height: 100%;
  }
  #markets-modal .bridge-motion-labels { color: rgba(255,255,255,.56); font-size: 7.5px; }
  #markets-modal .bridge-motion-labels b { color: rgba(255,255,255,.82); }
  #markets-modal .bridge-core { top: 55%; }
  #markets-modal .bridge-flow-visual {
    left: 13px;
    right: 13px;
    top: 31%;
    height: 48%;
  }
  #markets-modal .bridge-flow-bars { width: 54px; height: clamp(76px, 15svh, 106px); opacity: .62; }
  #markets-modal .bridge-result {
    bottom: 14px;
    min-width: 205px;
    padding: 10px 17px;
    gap: 8px;
  }
  #markets-modal .bridge-result span { font-size: 8px; letter-spacing: .13em; }
  #markets-modal .bridge-result strong { font-size: 16px; letter-spacing: -.025em; }
  #markets-modal .bridge-compact-balance {
    flex: 0 0 auto;
    margin-top: 7px;
    padding: 9px 11px 10px;
  }
  #markets-modal .bridge-compact-balance > div { color: rgba(255,255,255,.54); font-size: 7.5px; }

  #markets-modal .pulse-data-dialog .bridge-foot {
    flex: 0 0 40px;
    margin-top: 7px;
    padding: 0;
    border: 0;
  }
  #markets-modal .bridge-foot > div { width: 100%; }
  #markets-modal .bridge-official-link {
    width: 100%;
    min-height: 38px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid color-mix(in srgb, var(--acc1, #ff5ca8) 34%, rgba(255,255,255,.13));
    border-radius: 10px;
    color: rgba(255,255,255,.86);
    background: linear-gradient(105deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    font-size: 8.5px;
    letter-spacing: .015em;
  }
  #markets-modal .bridge-official-link b {
    color: var(--acc1, #ff5ca8);
    font-size: 14px;
  }
}

@media (max-width: 800px) and (max-height: 620px) {
  #markets-modal .pulse-data-dialog .bridge-showdown {
    min-height: 218px;
    padding-top: 14px;
    grid-template-rows: 78px minmax(88px, 1fr);
  }
  #markets-modal .bridge-money strong { font-size: clamp(20px, 6.7vw, 26px); }
  #markets-modal .bridge-result { min-width: 190px; padding-block: 8px; }
  #markets-modal .bridge-compact-balance { padding-block: 7px 8px; }
  #markets-modal .pulse-data-dialog .bridge-foot { flex-basis: 36px; }
  #markets-modal .bridge-official-link { min-height: 34px; }
}

/* iOS Safari zooms the viewport when a focused control is below 16px. */
@media (max-width: 800px) {
  html { -webkit-text-size-adjust: 100%; }
  .mobile-asset-picker select,
  #wallet-modal .wallet-input-row input { font-size: 16px !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   HOME-SCREEN APP REPAIR — keep last
   Fixes the four things the phone showed: clipped hero text, the cramped
   cycle target, the clipped portfolio summary with washed-out rows, and
   sheet tabs whose sublabel sat beside the label instead of under it.
   The cure for the clipping is one principle: cards size to their content
   (min-height, never a hard height with overflow:hidden on text).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  /* ---- 1 · the hero sizes to its words, shares leftover space evenly ---- */
  html.standalone-app .performance-hero {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  html.standalone-app .performance-copy {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 16px 20px 15px;
    gap: 12px;
    align-content: center;
    overflow: visible;
  }
  /* type steps down just enough that the block always fits its card */
  html.standalone-app .performance-primary > strong { font-size: clamp(34px, 11vw, 58px); line-height: 1.04; }
  html.standalone-app .performance-primary label { font-size: clamp(11px, 3vw, 13px); }
  html.standalone-app #performance-context { font-size: clamp(8.5px, 2.3vw, 10px); }
  html.standalone-app .performance-multiple strong { font-size: clamp(24px, 7.5vw, 34px); }

  /* ---- 2 · the cycle target reads on one calm line ---- */
  html.standalone-app #cycle-target-copy {
    font-size: 8.5px;
    letter-spacing: .07em;
    white-space: nowrap;
    max-width: none;
  }

  /* ---- 3 · portfolio: cards grow with content, rows carry contrast ---- */
  html.standalone-app .standalone-portfolio-summary:not([hidden]) {
    flex: 0 0 auto;
    height: auto;
    min-height: 108px;
    overflow: visible;
  }
  #wallet-modal .wallet-summary,
  #wallet-modal .wallet-hero,
  #wallet-modal .wallet-total-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 14px !important;
  }
  /* the rows stop being ghosts: dark ground, full-strength figures */
  #wallet-modal .wallet-row {
    background: linear-gradient(160deg, rgba(24, 1, 10, .52), rgba(14, 0, 6, .38)) !important;
    border: 1px solid rgba(255, 255, 255, .17) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  #wallet-modal .wallet-row strong,
  #wallet-modal .wallet-row b { color: #fff !important; }
  #wallet-modal .wallet-row small,
  #wallet-modal .wallet-row span { color: rgba(255, 255, 255, .78) !important; }
  #wallet-modal .wallet-row .wallet-alloc,
  #wallet-modal .wallet-row em { color: rgba(255, 255, 255, .85) !important; }

  /* ---- 4 · sheet tabs: the sublabel lives under its label, inside the pill ---- */
  .pulse-data-tabs button {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 8px 12px !important;
    min-height: 47px;
    text-align: center;
  }
  .pulse-data-tabs button small { display: block; line-height: 1.15; }
  @media (max-width: 430px) {
    .pulse-data-tabs button small { display: none; }   /* labels alone read cleaner on a phone */
    .pulse-data-tabs button { min-height: 44px; }
  }
}

/* the sheet tabs reach a proper tap height past the sheet's own ID-scoped cap */
@media (max-width: 800px) {
  #markets-modal .pulse-data-tabs { flex-basis: auto !important; min-height: 48px !important; }
  #markets-modal .pulse-data-tabs button { min-height: 44px !important; }
}


/* ── portfolio polish from the on-device check ── */
@media (max-width: 800px) {
  /* the total card breathes below its metrics row — no figure on the edge */
  #wallet-modal .wallet-summary {
    padding-bottom: clamp(16px, 4.4vw, 22px) !important;
    row-gap: clamp(10px, 3vw, 16px);
  }
  #wallet-modal .wallet-summary > div:last-child,
  #wallet-modal .wallet-metrics { padding-bottom: 2px; }
  /* the dust toggle tucks in line with the card's title, not adrift */
  #wallet-modal .wallet-summary .wallet-dust-toggle { align-self: start; margin-top: 2px; }
  /* the hidden-dust note stays quiet but readable */
  #wallet-modal .wallet-dust-note { color: rgba(255,255,255,.55); }
}


/* ── no wallet yet: the spare height sells the feature instead of gaping ── */
.portfolio-invite { display: none; }
@media (max-width: 800px) {
  .portfolio-invite:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 0 0 auto;
    padding: clamp(13px, 4vw, 17px) clamp(14px, 4.4vw, 19px);
    border: 1.5px dashed rgba(255, 255, 255, .34);
    border-radius: 17px;
    background: rgba(255, 255, 255, .05);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }
  .portfolio-invite:active { background: rgba(255, 255, 255, .1); }
  .portfolio-invite-icon { flex: none; display: inline-flex; }
  .portfolio-invite-icon svg { width: clamp(20px, 5.6vw, 24px); height: clamp(20px, 5.6vw, 24px); opacity: .9; }
  .portfolio-invite-copy { flex: 1; min-width: 0; display: block; }
  .portfolio-invite-copy b { display: block; font-size: clamp(13px, 3.8vw, 15px); font-weight: 800; }
  .portfolio-invite-copy small { display: block; margin-top: 2px; color: rgba(255,255,255,.62); font-size: clamp(10px, 2.9vw, 11.5px); line-height: 1.35; }
  .portfolio-invite > em { flex: none; font-style: normal; font-size: clamp(10.5px, 3vw, 12px); font-weight: 800; white-space: nowrap; }

  /* whatever else is on screen, the hero copy card has a ceiling — spare
     height beyond it goes to the page rhythm, not into an empty slab */
  .performance-copy { max-height: 440px; }
  html.standalone-app .performance-copy { max-height: 460px; }
}