/* The stock card (shared_assets/stock_card, 2026-10-16). Prefix sc-. Desktop: a drawer from the right over the app
   (above the idea-app overlay 9999 and its toolbar 10001, below the dropdown menus 10050). Phone (.sc-phone, inside
   #mb_root): a full-screen sheet sliding up. Tokens: panel rgba(0,0,0,.6), chip rgba(255,255,255,.06), text #e8e8e8,
   muted #9fb3c8, headings #cfefff, accent #f0a030, good #5fbf6a, bad #e66767. */

.sc-wrap { position: fixed; inset: 0; z-index: 10045; pointer-events: none; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sc-wrap *, .sc-wrap *::before, .sc-wrap *::after { box-sizing: border-box; }
.sc-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity .2s; }
.sc-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(660px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(170deg, #0e161e, #05090d); border-left: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.55); transform: translateX(104%); transition: transform .26s ease; padding: 16px 18px 28px;
  color: #e8e8e8; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.sc-wrap.open { pointer-events: auto; }
.sc-wrap.open .sc-back { opacity: 1; }
.sc-wrap.open .sc-panel { transform: none; }
.sc-bridge { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* the skeleton while the card is drawn */
.sc-skel { display: none; }
.sc-wrap.loading .sc-skel { display: block; }
.sc-wrap.loading .sc-holder { display: none; }
.sc-skel > div, .sc-sk-t { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  background-size: 200% 100%; animation: sc-shine 1.2s linear infinite; border-radius: 10px; }
.sc-sk-h { height: 64px; margin-bottom: 14px; }
.sc-sk-l { height: 16px; margin-bottom: 10px; width: 70%; } .sc-sk-l.s { width: 45%; }
.sc-skel .sc-sk-ts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; background: none; animation: none; }
.sc-sk-t { height: 64px; }
@keyframes sc-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* the open button that apps place next to a ticker */
.sc-open { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(240, 160, 48, 0.55); background: rgba(240, 160, 48, 0.10); color: #f5d6a3; font-size: .78rem; white-space: nowrap; }
.sc-open:hover { background: rgba(240, 160, 48, 0.22); color: #fff; }
.sc-open i { color: #f0a030; }
[data-sc-open] { cursor: pointer; }

/* ---- the card */
.sc-card { display: flex; flex-direction: column; gap: 12px; }
.sc-head { display: flex; gap: 14px; align-items: flex-start; }
.sc-logo { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px; object-fit: contain; background: #fff; padding: 6px; }
.sc-logo.ini { display: flex; align-items: center; justify-content: center; padding: 0; font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  color: #06121a; background: radial-gradient(circle at 32% 28%, #ffffff 0%, #4be9fa 85%); box-shadow: 0 0 18px -4px #4be9fa; }
.sc-logo.ini.etf { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f0a030 85%); box-shadow: 0 0 18px -4px #f0a030; }
.sc-hid { flex: 1; min-width: 0; }
.sc-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sc-tk { color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: .01em; }
.sc-nm { color: #cfefff; font-size: 1rem; font-weight: 600; }
.sc-meta { color: #9fb3c8; font-size: .76rem; margin-top: 2px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.sc-chip { font-size: .66rem; line-height: 1.75; padding: 0 8px; border-radius: 8px; white-space: nowrap; color: #cfdcea;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); }
.sc-chip.kind { color: #4be9fa; border-color: rgba(75, 233, 250, 0.45); }
.sc-chip.soft { color: #9fb3c8; }
.sc-chip.acc { color: #f5d6a3; border-color: rgba(240, 160, 48, 0.55); background: rgba(240, 160, 48, 0.08); }
.sc-x { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer;
  background: rgba(255, 255, 255, 0.05); color: #cfdcea; }
.sc-x:hover { border-color: #f0a030; color: #f5d6a3; }

.sc-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.sc-pxl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sc-px { font-size: 1.5rem; font-weight: 750; color: #fff; font-variant-numeric: tabular-nums; }
.sc-chg { font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-chg.up, .sc-tv.up { color: #5fbf6a; }
.sc-chg.down, .sc-tv.down { color: #e66767; }
.sc-asof { color: #7f93a8; font-size: .72rem; }
.sc-spark { width: 170px; height: 42px; flex: 0 0 auto; }

.sc-links { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: .76rem; text-decoration: none;
  color: #e8e8e8; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); }
.sc-link:hover { border-color: #f0a030; color: #fff; }
.sc-link i { color: #9fd8e6; } .sc-link .sc-ext { color: #7f93a8; font-size: .62rem; }
.sc-link.off { color: #7f93a8; cursor: default; border-style: dashed; }
.sc-link.off:hover { border-color: rgba(255, 255, 255, 0.14); color: #7f93a8; }

.sc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-tiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sc-tile { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.sc-tile.wide { grid-column: span 1; }
.sc-tile.soon { border-style: dashed; }
.sc-tl { color: #9fb3c8; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-tv { color: #e8e8e8; font-size: 1.05rem; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ts { color: #7f93a8; font-size: .66rem; margin-top: 2px; }
.sc-soon { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 600; color: #f5d6a3; white-space: nowrap;
  padding: 0 7px; border-radius: 8px; background: rgba(240, 160, 48, 0.10); border: 1px dashed rgba(240, 160, 48, 0.5); line-height: 1.7; }
.sc-tv .sc-soon { font-size: .7rem; }
.sc-rng { margin-top: 8px; }
.sc-rng-track { position: relative; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgba(230,103,103,.55), rgba(240,160,48,.55), rgba(95,191,106,.55)); }
.sc-rng-dot { position: absolute; top: -4px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.6); }
.sc-rng-lab { display: flex; justify-content: space-between; color: #9fb3c8; font-size: .64rem; margin-top: 4px; font-variant-numeric: tabular-nums; }

.sc-box { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 11px 13px; }
.sc-box + .sc-box { margin-top: 10px; }
.sc-box.why { border-color: rgba(240, 160, 48, 0.35); background: rgba(240, 160, 48, 0.05); }
.sc-h { color: #cfefff; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.sc-h i { color: #f0a030; }
.sc-h.split { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-muted { color: #7f93a8; font-size: .76rem; line-height: 1.45; }
.sc-desc { margin: 0; color: #e8e8e8; font-size: .86rem; line-height: 1.6; }
.sc-why { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 12px; }
.sc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.sc-fact { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 3px 0; font-size: .8rem; }
.sc-fk { color: #9fb3c8; font-size: .72rem; }
.sc-fv { color: #e8e8e8; text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-why-i .sc-fv { text-align: left; font-weight: 700; color: #f5d6a3; }

.sc-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow-x: auto; scrollbar-width: none; }
.sc-tab { flex: 0 0 auto; border: 0; background: none; color: #9fb3c8; font-size: .8rem; font-weight: 600; padding: 7px 11px 8px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sc-tab:hover { color: #cfefff; }
.sc-tab.on { color: #cfefff; border-bottom-color: #f0a030; }
.sc-pane { display: none; }
.sc-card[data-tab="overview"] .sc-pane[data-pane="overview"], .sc-card[data-tab="fin"] .sc-pane[data-pane="fin"],
.sc-card[data-tab="val"] .sc-pane[data-pane="val"], .sc-card[data-tab="stats"] .sc-pane[data-pane="stats"],
.sc-card[data-tab="peers"] .sc-pane[data-pane="peers"] { display: block; }

.sc-tbl { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .78rem; font-variant-numeric: tabular-nums; }
.sc-tbl th { color: #9fb3c8; font-weight: 600; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; text-align: right; padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.sc-tbl td { padding: 5px 6px; text-align: right; color: #cfdcea; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.sc-tbl th:first-child, .sc-tbl td:first-child { text-align: left; color: #e8e8e8; }
.sc-tbl tbody tr:hover td { background: rgba(240, 160, 48, 0.06); }
.sc-vbar { position: relative; height: 5px; min-width: 70px; border-radius: 3px; background: linear-gradient(90deg, rgba(95,191,106,.35), rgba(240,160,48,.35), rgba(230,103,103,.35)); }
.sc-vdot { position: absolute; left: 50%; top: -3px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.45); }

.sc-holds { display: flex; flex-direction: column; gap: 3px; }
.sc-hrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 62px; align-items: center; gap: 4px 10px; font-size: .78rem; padding: 2px 0; }
.sc-hk { color: #cfefff; font-weight: 700; }
.sc-hk:hover { color: #f5d6a3; text-decoration: underline; }
.sc-hn { color: #cfdcea; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-hw { text-align: right; color: #e8e8e8; font-variant-numeric: tabular-nums; }
.sc-hb { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.05); }
.sc-hb > div { height: 100%; border-radius: 2px; background: #f0a030; opacity: .7; }

.sc-peers { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-peer { display: inline-flex; gap: 6px; align-items: baseline; max-width: 100%; padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: .76rem;
  color: #cfdcea; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); }
.sc-peer b { color: #cfefff; }
.sc-peer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.sc-peer:hover { border-color: #f0a030; }
.sc-ph { margin-top: 10px; height: 120px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, 0.14); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; color: #7f93a8; font-size: .8rem; text-align: center; padding: 10px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 10px, transparent 10px 20px); }
.sc-ph-t i { color: #9fd8e6; }
.sc-foot { color: #5f7286; font-size: .66rem; line-height: 1.45; margin-top: 4px; }

/* ---- the phone: a full-screen sheet inside the phone shell */
.sc-wrap.sc-phone { z-index: 40; }
.sc-wrap.sc-phone .sc-panel { left: 0; width: 100%; top: 0; border-left: 0; transform: translateY(104%); padding: 14px 14px calc(26px + env(safe-area-inset-bottom)); }
.sc-wrap.sc-phone.open .sc-panel { transform: none; }
.sc-card.phone .sc-tiles, .sc-card.phone .sc-tiles.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-card.phone .sc-facts { grid-template-columns: 1fr; }
.sc-card.phone .sc-price { flex-wrap: wrap; }
.sc-card.phone .sc-spark { width: 100%; height: 46px; }
.sc-card.phone .sc-tk { font-size: 1.2rem; }
.sc-card.phone .sc-tbl { font-size: .72rem; }
.sc-card.phone .sc-tbl th:nth-child(n+5), .sc-card.phone .sc-tbl td:nth-child(n+5) { display: none; }
@media (max-width: 760px) {
  .sc-tiles, .sc-tiles.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-facts { grid-template-columns: 1fr; }
}
.sc-why-i .sc-fk::first-letter { text-transform: uppercase; }