:root {
  color-scheme: dark;
  --bg: #07090d;
  --panel: #101319;
  --panel-2: #151922;
  --line: rgba(255,255,255,.075);
  --text: #f6f7f9;
  --muted: #858b96;
  --muted-2: #5c626c;
  --up: #ff5e62;
  --up-soft: rgba(255,94,98,.14);
  --down: #24cd86;
  --down-soft: rgba(36,205,134,.13);
  --gold: #f2b84b;
  --orange: #ff8a34;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --top-stack-offset: calc(66px + env(safe-area-inset-top, 0px));
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% -12%, rgba(66,74,94,.23), transparent 33rem),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(.98); }
.hidden { display: none !important; }
.up { color: var(--up) !important; }
.down { color: var(--down) !important; }

.app-shell {
  width: min(100%, 440px);
  min-height: 100vh;
  margin: 0 auto;
  border-left: 1px solid rgba(255,255,255,.03);
  border-right: 1px solid rgba(255,255,255,.03);
  background: rgba(7,9,13,.7);
}

.topbar {
  min-height: var(--top-stack-offset);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(7,9,13,.86);
  backdrop-filter: blur(22px);
}
.icon-button {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #c6cad1;
  font-size: 43px;
  line-height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.topbar-spacer { width: 40px; height: 40px; }
.topbar-title { text-align: center; }
.title-line { font-size: 17px; font-weight: 680; letter-spacing: .01em; }
.code-line { color: var(--muted); font-size: 11px; margin-top: 3px; letter-spacing: .08em; }
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 4px rgba(255,94,98,.1);
  vertical-align: 2px;
}

.follow-banner {
  margin: 10px 12px 0;
  padding: 12px 13px;
  border: 1px solid rgba(242,184,75,.24);
  background: linear-gradient(125deg, rgba(242,184,75,.13), rgba(255,94,98,.07));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
}
.follow-banner strong { display: block; font-size: 13px; margin-top: 3px; }
.mini-cta {
  flex: none;
  border: 0;
  border-radius: 8px;
  background: var(--up);
  color: white;
  font-weight: 700;
  padding: 9px 12px;
}

.quote-panel {
  padding: 21px 18px 17px;
  display: grid;
  grid-template-columns: 1fr 1.48fr;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.quote-main { align-self: center; }
.price-row { display: flex; align-items: center; gap: 8px; }
.price { font-size: clamp(42px, 12vw, 54px); font-weight: 510; line-height: .96; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.badge { color: var(--gold); background: rgba(242,184,75,.12); padding: 2px 4px; border-radius: 3px; font-size: 11px; }
.quote-change { display: flex; gap: 9px; font-size: 15px; margin-top: 9px; font-variant-numeric: tabular-nums; }
.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 9px;
  align-content: center;
}
.quote-grid div { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.quote-grid span { color: var(--muted); white-space: nowrap; }
.quote-grid strong { font-weight: 560; font-variant-numeric: tabular-nums; }

.market-contrast {
  margin: 12px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 1fr auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(36,205,134,.06), rgba(255,255,255,.015) 48%, rgba(255,94,98,.07));
}
.contrast-label span { color: var(--muted); display: block; font-size: 10px; }
.contrast-label strong { display: block; margin-top: 2px; font-size: 12px; }
.align-right { text-align: right; }
.contrast-number { font-size: 14px; font-weight: 720; font-variant-numeric: tabular-nums; }
.contrast-arrow { color: var(--muted-2); font-size: 15px; }

.ticker-strip {
  margin: 0 12px 12px;
  min-height: 38px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  border-left: 2px solid var(--up);
  background: rgba(255,255,255,.035);
  overflow: hidden;
}
.ticker-tag { color: var(--up); font-size: 11px; font-weight: 750; }
.ticker-copy { color: #c4c8ce; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-pulse { width: 6px; height: 6px; background: var(--up); border-radius: 50%; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.72); } }

.chart-card, .position-card, .pulse-card, .delivery-card, .disclaimer {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(14,17,23,.72);
}
.chart-card { padding: 0 12px 14px; }
.tab-row { display: flex; align-items: center; min-height: 49px; gap: 16px; border-bottom: 1px solid var(--line); }
.chart-tab {
  padding: 15px 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  position: relative;
  cursor: pointer;
}
.chart-tab.active { color: white; font-weight: 700; }
.chart-tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--up); }
.legend { margin-left: auto; display: flex; gap: 8px; color: var(--muted); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 4px; }
.legend i { width: 9px; height: 2px; display: inline-block; }
.legend-house { background: #f5f6f8; }
.legend-market { background: #d8993c; }
.chart-summary { display: flex; gap: 14px; color: var(--muted); font-size: 11px; padding: 10px 2px 4px; }
.chart-summary strong { color: #c7cbd0; font-weight: 600; }
.chart-summary span:last-child { margin-left: auto; font-weight: 700; }
.chart-wrap { position: relative; height: 246px; }
.chart-empty { position:absolute; inset:0; display:grid; place-items:center; padding:24px; color:var(--muted); font-size:12px; text-align:center; }
.chart-empty::before { content:""; position:absolute; width:56px; height:1px; margin-top:-30px; background:linear-gradient(90deg, transparent, #525965, transparent); }
#marketChart { width: 100%; height: 100%; display: block; }
.chart-tooltip { position: absolute; pointer-events: none; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(7,9,13,.94); color: white; font-size: 10px; }
.chart-time { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 9px; padding: 4px 2px 0; }
.heat-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; color: var(--muted); font-size: 10px; padding-top: 14px; }
.heat-bar > div { height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--down) 0 1.7%, var(--up) 1.7%); overflow: hidden; }

.position-card { margin-top: 10px; padding: 18px 14px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-heading.compact { align-items: center; }
.eyebrow { display: block; color: var(--muted); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.section-heading h2, .delivery-card h2 { margin: 4px 0 0; font-size: 18px; line-height: 1.2; }
.ghost-button { border: 1px solid rgba(255,94,98,.3); background: var(--up-soft); color: var(--up); border-radius: 8px; padding: 8px 11px; font-size: 12px; font-weight: 700; }
.empty-position { margin-top: 17px; padding: 16px; display: flex; align-items: center; gap: 13px; background: var(--panel-2); border-radius: 12px; border: 1px solid var(--line); }
.empty-icon { flex: none; width: 46px; height: 46px; display:grid; place-items:center; border-radius: 12px; background: var(--up-soft); color: var(--up); font-size: 19px; font-weight: 800; }
.empty-position strong { font-size: 14px; }
.empty-position p { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 5px 0 0; }
#holdingView { margin-top: 17px; }
.pnl-block { padding: 17px; border-radius: 12px; background: radial-gradient(circle at 85% 15%, rgba(255,94,98,.18), transparent 12rem), var(--panel-2); border: 1px solid var(--line); }
.pnl-block span { color: var(--muted); font-size: 11px; }
.pnl-block strong { display: block; color: var(--up); font-size: 35px; margin-top: 5px; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.pnl-block small { color: var(--up); font-size: 12px; }
.position-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 1px; background: var(--line); }
.position-details div { background: var(--panel); padding: 12px 8px; display: flex; justify-content: space-between; font-size: 11px; }
.position-details span { color: var(--muted); }
.position-details strong { font-variant-numeric: tabular-nums; }
.thesis-line { margin-top: 12px; padding: 12px; display: flex; flex-direction: column; gap: 5px; border-left: 2px solid var(--gold); background: rgba(242,184,75,.055); }
.thesis-line span { color: var(--muted); font-size: 10px; }
.thesis-line strong { font-size: 12px; font-weight: 600; }
.position-actions, .share-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; margin-top: 13px; }
.primary-action, .secondary-action, .delivery-button {
  min-height: 43px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}
.primary-action { border: 0; background: var(--up); color: white; }
.secondary-action { border: 1px solid var(--line); background: #1b2029; color: #d9dce1; }

.pulse-card { margin-top: 10px; padding: 18px 14px 14px; }
.online { color: var(--muted); font-size: 10px; display:flex; align-items:center; gap:5px; }
.online i { width:6px; height:6px; background:var(--down); border-radius:50%; box-shadow:0 0 0 4px rgba(36,205,134,.09); }
.cost-distribution { margin-top: 17px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: end; }
.cost-copy span { color: var(--muted); display:block; font-size: 10px; }
.cost-copy strong { display:block; margin-top:4px; font-size:22px; font-variant-numeric:tabular-nums; }
.cost-bars { height: 44px; display:flex; align-items:end; gap:3px; }
.cost-bars i { flex:1; min-height:3px; background:#4e5665; border-radius:2px 2px 0 0; }
.cost-bars i.active { background:var(--up); }
.trade-feed { margin-top: 12px; }
.trade-item { display:grid; grid-template-columns: 44px 1fr auto; gap:8px; align-items:center; min-height:39px; border-top:1px solid var(--line); font-size:11px; }
.trade-item time { color:var(--muted-2); font-variant-numeric:tabular-nums; }
.trade-item span { color:#c6cad1; }
.trade-item strong { color:var(--up); font-weight:650; }

.delivery-card { margin-top:10px; padding:17px 14px; display:flex; align-items:center; justify-content:space-between; gap:18px; background:linear-gradient(120deg, rgba(242,184,75,.08), rgba(14,17,23,.75)); }
.delivery-card p { color:var(--muted); margin:7px 0 0; font-size:11px; line-height:1.55; max-width:260px; }
.delivery-button { flex:none; padding:0 15px; border:1px solid rgba(242,184,75,.28); background:rgba(242,184,75,.1); color:var(--gold); }
.disclaimer { margin-top:10px; padding:16px 14px; color:var(--muted-2); }
.disclaimer strong { font-size:11px; color:#727985; }
.disclaimer p { margin:5px 0 0; font-size:10px; line-height:1.6; }
.bottom-spacer { height: calc(88px + var(--safe-bottom)); }

.sticky-trade {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 0;
  width: min(100%, 440px);
  transform: translateX(-50%);
  padding: 10px 12px calc(10px + var(--safe-bottom));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: rgba(9,11,15,.9);
  backdrop-filter: blur(20px);
}
.sticky-copy { min-width: 64px; }
.sticky-copy span { display:block; color:var(--muted); font-size:9px; }
.sticky-copy strong { display:block; color:var(--up); font-size:18px; margin-top:2px; font-variant-numeric:tabular-nums; }
.trade-button { min-height: 48px; border:0; border-radius:10px; background:linear-gradient(105deg, #e7444c, var(--up)); color:white; font-size:15px; font-weight:760; box-shadow:0 8px 28px rgba(255,94,98,.2); cursor:pointer; }

.modal-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  padding-top: env(safe-area-inset-top, 0px);
}
.bottom-sheet {
  width: min(100%, 440px);
  max-height: 94vh;
  overflow-y: auto;
  padding: 8px 16px calc(18px + var(--safe-bottom));
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: #11151c;
  animation: sheetIn .24s ease-out;
}
@keyframes sheetIn { from { transform: translateY(24px); opacity:0; } }
.sheet-handle { width:38px; height:4px; margin:0 auto 13px; border-radius:99px; background:#3a404b; }
.sheet-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sheet-header h2 { margin:4px 0 0; font-size:20px; }
.sheet-close { width:34px; height:34px; border:0; border-radius:50%; background:#202630; color:#aeb3bc; font-size:22px; line-height:1; cursor:pointer; }
.sheet-close.floating { position:absolute; right:14px; top:14px; }
.order-quote { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.order-quote div { padding:13px; background:#171c24; }
.order-quote span { display:block; color:var(--muted); font-size:10px; }
.order-quote strong { display:block; margin-top:4px; font-size:20px; font-variant-numeric:tabular-nums; }
.form-block { margin-top:19px; }
.form-block > label { display:block; margin-bottom:9px; color:#c6cad0; font-size:12px; font-weight:650; }
.form-label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.form-label-row label { color:#c6cad0; font-size:12px; font-weight:650; }
.reroll-button { border:0; background:transparent; color:var(--gold); padding:4px 0; font-size:10px; cursor:pointer; }
.option-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.option-grid button { min-height:57px; border:1px solid var(--line); border-radius:9px; background:#171c24; color:#d9dce1; text-align:left; padding:10px 11px; cursor:pointer; }
.option-grid button strong { display:block; font-size:14px; }
.option-grid button span { display:block; color:var(--muted); margin-top:3px; font-size:10px; }
.option-grid button.selected, .thesis-options button.selected { border-color:rgba(255,94,98,.48); background:var(--up-soft); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,94,98,.08); }
.option-grid button.selected span { color:#ffb1b3; }
.thesis-options { display:flex; flex-wrap:wrap; gap:7px; }
.thesis-options button { border:1px solid var(--line); border-radius:99px; background:#171c24; color:#b9bec6; padding:8px 10px; font-size:10px; cursor:pointer; }
.order-preview { margin-top:18px; padding:12px; display:flex; justify-content:space-between; border-top:1px dashed rgba(255,255,255,.11); border-bottom:1px dashed rgba(255,255,255,.11); font-size:12px; }
.order-preview span { color:var(--muted); }
.order-preview b { font-weight:700; }
.confirm-order { width:100%; min-height:48px; margin-top:17px; border:0; border-radius:10px; background:var(--up); color:white; font-weight:760; cursor:pointer; }
.sheet-note { margin:9px 0 0; color:var(--muted-2); font-size:9px; text-align:center; line-height:1.5; }

.center-modal {
  width: min(calc(100% - 28px), 408px);
  max-height: 90vh;
  overflow-y: auto;
  margin: auto;
  position: relative;
  padding: 30px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #12161d;
  text-align: center;
  animation: modalIn .22s ease-out;
}
@keyframes modalIn { from { transform:scale(.95); opacity:0; } }
.success-mark { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 15px; border-radius:50%; background:var(--up-soft); color:var(--up); font-size:29px; font-weight:800; box-shadow:0 0 0 8px rgba(255,94,98,.04); }
.success-modal h2 { margin:5px 0 0; font-size:23px; }
.success-name { margin:7px 0 0; color:#e4e6e9; font-size:13px; }
.success-name span { color:var(--muted); margin-left:5px; }
.receipt { margin-top:18px; padding:7px 14px; border:1px solid var(--line); border-radius:12px; background:#181d25; text-align:left; }
.receipt > div { min-height:39px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); font-size:11px; }
.receipt > div:last-child { border:0; }
.receipt span { color:var(--muted); }
.receipt strong { font-weight:630; text-align:right; }
.receipt-thesis { flex-direction:column; align-items:flex-start !important; gap:5px !important; padding:9px 0; }
.receipt-thesis strong { color:var(--gold); text-align:left; }
.text-button { margin-top:12px; border:0; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; }

.share-sheet { max-height: 96vh; }
.poster-style-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:17px auto 0; padding:4px; border:1px solid var(--line); border-radius:10px; background:#0e1218; }
.poster-style-switch button { min-height:34px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:11px; font-weight:680; cursor:pointer; }
.poster-style-switch button.selected { background:#252b35; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.22); }

.poster-preview {
  aspect-ratio: 3 / 4;
  margin: 17px auto 0;
  padding: 20px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:
    radial-gradient(circle at 85% 10%, rgba(255,94,98,.32), transparent 45%),
    radial-gradient(circle at 0% 95%, rgba(242,184,75,.13), transparent 42%),
    #090c11;
}
.poster-preview::after { content:"3X"; position:absolute; right:-17px; bottom:-45px; color:rgba(255,255,255,.025); font-size:150px; font-weight:900; letter-spacing:-.12em; }
.poster-brand { display:flex; justify-content:space-between; align-items:center; color:#fff; font-weight:760; font-size:13px; }
.poster-brand small { color:#9fa5af; font-size:9px; letter-spacing:.15em; }
.poster-owner { margin:20px 0 0; color:#f4d7a3; font-size:10px; font-weight:650; overflow-wrap:anywhere; }
.poster-kicker { margin:5px 0 5px; color:#ffb1b3; font-size:12px; }
.poster-preview h3 { margin:0; font-size:28px; line-height:1.1; letter-spacing:-.04em; }
.poster-return { margin-top:11px; color:var(--up); font-size:43px; font-weight:720; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.poster-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:13px; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); padding:10px 0; }
.poster-stats div { min-width:0; padding:0 8px; text-align:left; border-right:1px solid rgba(255,255,255,.08); }
.poster-stats div:last-child { border:0; }
.poster-stats span { display:block; color:#727985; font-size:8px; }
.poster-stats strong { display:block; margin-top:4px; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.poster-preview blockquote { margin:15px 0 0; padding:0; color:#f1d9aa; font-family:"Songti SC", STSong, serif; font-size:13px; line-height:1.45; }
.poster-join { margin-top:auto; min-height:76px; padding:9px 9px 9px 12px; position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.045); }
.poster-join-copy { min-width:0; display:flex; flex-direction:column; gap:5px; }
.poster-join-copy strong { color:#fff; font-size:10px; line-height:1.35; }
.poster-join-copy span { color:#8f96a1; font-size:8px; line-height:1.4; overflow-wrap:anywhere; }
.poster-qr-shell { flex:none; width:62px; height:62px; padding:4px; border-radius:8px; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.16); }
.poster-qr-shell img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.poster-footer { margin-top:9px; position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.poster-footer span { color:#656c78; font-size:8px; }
.poster-footer strong { font-size:9px; color:#d6d9df; }

.poster-preview.meme-poster {
  background:
    radial-gradient(circle at 82% 12%, rgba(255,94,98,.38), transparent 43%),
    radial-gradient(circle at 0% 100%, rgba(242,184,75,.17), transparent 46%),
    #090c11;
}
.poster-preview.meme-poster::before { content:"事到如今"; position:absolute; left:17px; bottom:76px; color:rgba(255,255,255,.022); font-size:54px; font-weight:900; letter-spacing:-.08em; transform:rotate(-8deg); }
.meme-poster .poster-owner { margin-top:27px; color:#9da4ae; }
.meme-poster .poster-kicker { margin:34px 0 7px; color:#f2d7a4; font-size:20px; font-weight:760; letter-spacing:.02em; }
.meme-poster h3 { max-width:92%; font-size:35px; line-height:1.08; }
.meme-poster .poster-return { margin-top:18px; display:inline-flex; align-self:flex-start; padding:6px 9px; border:1px solid rgba(255,255,255,.09); border-radius:6px; background:rgba(255,255,255,.04); font-size:14px; font-weight:650; letter-spacing:0; }
.meme-poster .poster-reference, .meme-poster .poster-stats, .meme-poster .poster-delivery { display:none; }
.meme-poster blockquote { margin-top:28px; max-width:90%; font-size:15px; line-height:1.55; }
.meme-poster .poster-join { min-height:82px; background:rgba(255,255,255,.055); }
.meme-poster .poster-footer strong { color:#f2d7a4; }

.share-identity { margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:11px; background:#171c24; }
.share-identity > label { display:flex; justify-content:space-between; gap:10px; color:#e5e7eb; font-size:11px; font-weight:650; }
.share-identity > label span { color:var(--muted); font-size:9px; font-weight:400; }
.share-name-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:9px; }
.share-name-row input { min-width:0; height:38px; border:1px solid var(--line); border-radius:8px; outline:0; background:#0e1218; color:#fff; padding:0 11px; font-size:12px; }
.share-name-row input:focus { border-color:rgba(255,94,98,.55); box-shadow:0 0 0 2px rgba(255,94,98,.08); }
.share-name-row button { height:38px; border:1px solid rgba(242,184,75,.28); border-radius:8px; background:rgba(242,184,75,.08); color:var(--gold); padding:0 11px; font-size:10px; cursor:pointer; white-space:nowrap; }
.share-identity > p { margin:7px 0 0; color:var(--muted-2); font-size:8px; line-height:1.5; }

.delivery-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
.delivery-options button { min-height:52px; border:1px solid var(--line); border-radius:9px; background:#171c24; color:#e1e3e7; text-align:left; padding:10px 12px; }
.delivery-options span { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.toast { position:fixed; z-index:120; left:50%; bottom:calc(90px + var(--safe-bottom)); transform:translate(-50%, 16px); max-width:calc(100% - 40px); padding:10px 14px; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(35,40,49,.96); color:white; font-size:12px; opacity:0; pointer-events:none; transition:.2s ease; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
body.modal-open { overflow:hidden; }

@media (min-width: 700px) {
  body { padding: 24px 0 80px; }
  .app-shell { min-height: calc(100vh - 48px); border-radius: 20px 20px 0 0; box-shadow:0 30px 100px rgba(0,0,0,.45); }
  .topbar { border-radius:20px 20px 0 0; }
  .sticky-trade { bottom: 20px; border:1px solid var(--line); border-radius:14px; width:416px; padding-bottom:10px; box-shadow:0 20px 60px rgba(0,0,0,.46); }
  .modal-backdrop { align-items:center; }
  .bottom-sheet { border-radius:20px; border-bottom:1px solid var(--line); padding-bottom:18px; max-height:90vh; }
}

@media (max-width: 360px) {
  .quote-panel { grid-template-columns:1fr; }
  .quote-grid { grid-template-columns:repeat(2,1fr); }
  .quote-grid div { flex-direction:column; }
  .market-contrast { grid-template-columns:1fr auto 1fr; }
  .market-contrast .contrast-number { display:none; }
  .legend { display:none; }
}

/* Prevent long social copy from widening the mobile viewport without creating a sticky-breaking scroll container. */
.follow-banner > div { min-width: 0; flex: 1; }
.follow-banner strong { overflow-wrap: anywhere; }
.quote-grid strong { white-space: nowrap; }

/* Real market connection and completed secondary views */
.contrast-label small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.data-status {
  margin: -3px 12px 12px;
  padding: 0 2px;
  min-height: 22px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 9px;
}
.data-status > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.data-status strong { color: #aeb4bd; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-status > span { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.data-status button { border: 0; background: transparent; color: #aeb4bd; padding: 3px 0 3px 7px; font-size: 9px; }
.status-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--muted); }
.status-dot.loading { background: var(--gold); animation: pulse 1.2s infinite; }
.status-dot.connected { background: var(--down); box-shadow: 0 0 0 4px rgba(36,205,134,.08); }
.status-dot.stale { background: var(--gold); }
.status-dot.offline { background: var(--up); }
.chart-summary i { color: inherit; font-style: normal; }

.history-card {
  margin-top: 10px;
  padding: 18px 14px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(14,17,23,.72);
}
.history-preview { margin-top: 12px; }
.history-row {
  min-height: 47px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
}
.history-row:first-child { border-top: 0; }
.history-row > div { min-width: 0; }
.history-row strong { display: block; font-size: 12px; }
.history-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-row > span { color: var(--up); font-size: 11px; font-weight: 680; font-variant-numeric: tabular-nums; }
.history-row > span.sell { color: var(--down); }

.poster-reference {
  align-self: flex-start;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  color: #9da4ae;
  font-size: 8px;
}
.more-sheet { max-height: 94vh; }
.more-section { margin-top: 20px; }
.more-section > label, .more-section-title label { color: #cbd0d7; font-size: 12px; font-weight: 680; }
.more-section-title { display: flex; align-items: center; justify-content: space-between; }
.more-section-title button { border: 0; background: transparent; color: var(--muted); font-size: 10px; }
.reference-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.reference-options button {
  min-width: 0;
  padding: 11px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #171c24;
  color: #d9dce1;
  text-align: left;
}
.reference-options button.selected { border-color: rgba(255,94,98,.45); background: var(--up-soft); }
.reference-options strong { display: block; font-size: 11px; white-space: nowrap; }
.reference-options span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.formula-card {
  padding: 13px;
  border: 1px solid rgba(242,184,75,.18);
  border-radius: 11px;
  background: rgba(242,184,75,.055);
}
.formula-line { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.formula-line span { color: var(--muted); font-size: 9px; }
.formula-line strong { color: var(--gold); font-size: 12px; line-height: 1.55; }
.formula-card p { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.full-history { margin-top: 8px; max-height: 245px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.empty-history { padding: 24px 8px; color: var(--muted); font-size: 11px; text-align: center; }
.source-card { margin-top: 18px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 10px; background: #171c24; }
.source-card div { min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); font-size: 10px; }
.source-card div:last-child { border: 0; }
.source-card span { color: var(--muted); }
.source-card strong { max-width: 68%; font-weight: 580; text-align: right; }

@media (max-width: 360px) {
  .reference-options { grid-template-columns: 1fr; }
  .reference-options button { display: flex; align-items: center; justify-content: space-between; }
  .reference-options span { margin: 0; }
}
.legend-up { background: var(--up); }
.legend-down { background: var(--down); }
.legend-ma { background: var(--gold); }
.delivery-stamp {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(36,205,134,.22);
  border-radius: 8px;
  background: var(--down-soft);
  color: #80e8b8;
  font-size: 10px;
  font-weight: 680;
}
.poster-delivery {
  align-self: flex-start;
  margin-top: 14px;
  padding: 6px 9px;
  border: 1px solid rgba(36,205,134,.22);
  border-radius: 5px;
  background: rgba(36,205,134,.08);
  color: #84e9bb;
  font-size: 8px;
  position: relative;
  z-index: 1;
}

/* Unified success + poster sheet; keep the entertainment app dark. */
.trade-success-summary {
  margin: 2px 0 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 11px 12px;
  align-items: center;
  border: 1px solid rgba(255,94,98,.18);
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(255,94,98,.08),rgba(255,255,255,.025));
}
.success-mark.compact {
  width: 42px;
  height: 42px;
  margin: 0;
  font-size: 21px;
  box-shadow: none;
}
.success-copy { min-width: 0; }
.success-copy .eyebrow { font-size: 9px; }
.success-copy h3 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 18px;
}
.success-copy .success-name {
  margin-top: 4px;
  text-align: left;
}
.compact-receipt {
  grid-column: 1 / -1;
  margin: 1px 0 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 14px;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}
.compact-receipt > div { min-height: 35px; }
.compact-receipt .receipt-thesis { grid-column: 1 / -1; }

/* The QR image is already readable; do not add another visual frame around it. */
.poster-qr-shell {
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}