/*
 * CloneSyncer skin: one dark glass language over a photographed backdrop
 * (the engageOS material). Loaded after styles.css and overrides it.
 * Cards: dark frosted surface, gradient hairline, big radius, soft drop.
 * Type: Geist, light big numbers, sentence-case labels, no tracking.
 */
:root,
:root[data-theme] {
  --bg-img: url('assets/bg-desk.webp');
  --bg: #0a0b0a;
  --bg-2: #0d0e0d;
  --panel: #161716;
  --panel-2: #1f201f;
  --well: #ffffff0a;
  --t1: #f1f3f1;
  --t2: #a8aea9;
  --t3: #6d746f;
  --line: #ffffff14;
  --line-2: #ffffff0b;
  --up: #8fd19e;
  --down: #ef7d72;
  --warn: #e6b76c;
  --accent: #f1f3f1;
  --accent-ink: #0b0c0b;
  --serif: 'Geist', system-ui, sans-serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --r: 10px;
  --r-lg: 22px;
  --side: 236px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --glass:
    linear-gradient(180deg, #1c1d1cf5, #131413f7) padding-box,
    linear-gradient(180deg, #ffffff33 0%, #ffffff10 22%, #ffffff07 60%, #ffffff12 100%) border-box;
  --drop: 0 1px 0 #00000066, 0 24px 48px -26px #000000d9;
  color-scheme: dark;
}

body { background: var(--bg); font: 400 13.5px/1.45 var(--sans); letter-spacing: -0.005em; }
h1, h2, h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.025em; }
.serif { font-family: var(--sans) !important; letter-spacing: -0.03em; }
.eyebrow { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--t2); font-weight: 500; }
.sc { font-variant: normal; letter-spacing: 0; }
::selection { background: #8fd19e40; }

/* ---------------------------------------------------------------- shell */
.side { background: transparent; border-right: 0; padding: 22px 12px 14px; }
.brand { padding: 4px 10px 26px; gap: 10px; }
.brand svg { width: 26px; height: 26px; }
.brand-word { font-family: var(--sans); font-variant: normal; font-size: 18px; font-weight: 500; letter-spacing: -0.035em; }
.brand-word small { display: none; }
.nav-label { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--t3); padding: 18px 12px 6px; font-weight: 400; }
.nav a { height: 34px; border-radius: 10px; color: #c9cec9; font-weight: 450; gap: 10px; }
.nav a svg { width: 15px; height: 15px; opacity: 0.8; }
.nav a.on { color: #fff; }
.nav a.on svg { opacity: 1; }
.nav a .n { color: var(--t3); }
.nav a .pip { width: 6px; height: 6px; box-shadow: 0 0 0 3px #ef7d7226; }
.nav-ind { height: 34px; border-radius: 10px; background: #ffffff0e; box-shadow: inset 0 1px 0 #ffffff0d; }
.nav-ind::before { display: none; }

.copier-pill {
  border: 1px solid transparent; border-radius: 18px; padding: 14px 14px 13px; background: var(--glass); box-shadow: var(--drop);
}
.copier-pill b { font-weight: 500; font-size: 13px; }
.copier-pill .meta { color: var(--t3); font-size: 11.5px; }
.side-mini { display: block; margin-top: 10px; }
.sync-bar { gap: 3px; margin-top: 11px; }
.sync-bar i { height: 14px; border-radius: 3px; background: var(--up); opacity: 0.75; }
.sync-bar i.bad { background: var(--warn); opacity: 1; }
.sync-bar i.off { background: #ffffff14; }
.me { padding: 8px 6px 2px; }
.avatar { width: 30px; height: 30px; background: #e9ece9; color: #0b0c0b; font: 600 10.5px var(--sans); }
.me .who { font-weight: 500; }
.me .who span { color: var(--t3); }

/* The floating canvas with the photograph behind everything. */
.main {
  position: relative; isolation: isolate; margin: 12px 12px 12px 0; height: calc(100vh - 24px);
  border-radius: 26px; overflow: hidden; background: #0d0f0d;
  box-shadow: 0 0 0 1px #ffffff10, 0 30px 80px -30px #000;
}
.main::before {
  content: ''; position: absolute; inset: -2%; z-index: -3;
  background: var(--bg-img) center 40% / cover no-repeat;
  transform: scale(1.04); transition: opacity 0.6s ease;
  animation: bgIn 2.2s var(--ease) both;
}
.main.swap::before { opacity: 0; }
.main.live::before { opacity: 0; }
.main::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, #05070659 0%, transparent 22%, transparent 60%, #050706b3 100%),
    radial-gradient(130% 90% at 50% 10%, transparent 45%, #0507068c 100%);
}
.bd { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; animation: bgIn 1.8s var(--ease) both; transition: opacity 0.38s ease; }
.bd.swap { opacity: 0; }
@keyframes bgIn { from { opacity: 0; transform: scale(1.04); filter: blur(8px); } }
.main.swap::before { opacity: 0; }

.top { height: 66px; padding: 0 26px; border-bottom: 0; gap: 10px; position: relative; z-index: 3; }
.crumb { color: #e9ede9b3; font-size: 12px; letter-spacing: 0; }
.search {
  width: 300px; height: 36px; border-radius: 999px; border: 0; padding: 0 8px 0 14px;
  background: #0b0c0b8c; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px #ffffff14; color: #c3c8c4;
}
.kbd { border: 0; background: #ffffff12; border-radius: 6px; padding: 2px 6px; color: var(--t2); font-family: var(--sans); }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: #0b0c0b8c; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px #ffffff14;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.icon-btn:hover { background: #1b1d1bcc; }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { stroke: #dfe3df; }
.icon-btn .badge { top: -2px; right: -2px; background: var(--down); color: #1a0d0b; box-shadow: 0 0 0 2px #0d0f0d; }

.view { scrollbar-color: #ffffff22 transparent; }
.page { padding: 18px 26px 90px; max-width: 1480px; }
.page.out { transform: translateY(-4px) scale(0.995); filter: blur(4px); }
.page-head { margin-bottom: 22px; align-items: flex-end; }
.page-head h1 { font-size: 38px; font-weight: 400; letter-spacing: -0.045em; line-height: 1.02; color: #fff; text-shadow: 0 2px 30px #0006; }
.page-head p { color: #e8ece9d9; font-size: 14px; margin-top: 10px; text-shadow: 0 1px 14px #0008; }

.in-wait { transform: translateY(18px) scale(0.985); filter: blur(8px); }
.in-wait.in-go { opacity: 1; transform: none; filter: none; transition: opacity 0.8s var(--ease) var(--d), transform 1s var(--ease) var(--d), filter 0.8s ease var(--d); }

/* ---------------------------------------------------------------- cards */
.grid { gap: 14px; }
.panel {
  border: 1px solid transparent; border-radius: var(--r-lg); padding: 20px 22px;
  background: var(--glass); box-shadow: var(--drop);
  transition: box-shadow 0.35s ease, transform 0.5s var(--ease);
}
.panel:hover { box-shadow: 0 1px 0 #00000066, 0 30px 60px -28px #000000f0; }
.panel-h { margin-bottom: 16px; align-items: center; }
.panel-h > div:first-child { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.panel-h h3 { font-size: 15px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.panel-h .sub { font-size: 12.5px; color: var(--t3); }
.panel-h .sub::before { content: '· '; }
.hr { background: #ffffff0d; margin: 16px 0; }

.kpi { gap: 4px; }
.kpi .v { font-size: 36px; font-weight: 400; letter-spacing: -0.05em; line-height: 1.12; }
.kpi .v.xl { font-size: 54px; letter-spacing: -0.055em; font-weight: 300; }
.kpi .d { font-size: 12.5px; color: var(--t3); }
.delta { border-radius: 999px; padding: 2px 8px 2px 7px; font-size: 11.5px; font-weight: 550; }
.delta.up { background: #8fd19e1f; color: #a6dcb1; }
.delta.down { background: #ef7d721f; color: #f39a90; }

/* ---------------------------------------------------------------- controls */
.btn {
  height: 34px; padding: 0 15px; border-radius: 999px; border: 0; background: #ffffff10; color: var(--t1);
  font-weight: 500; font-size: 12.5px; box-shadow: inset 0 0 0 1px #ffffff0f;
  transition: background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.btn:hover { background: #ffffff1a; }
.btn:active { transform: scale(0.96); }
.btn.primary { background: #eef1ee; color: #0b0c0b; box-shadow: 0 1px 0 #ffffff40 inset, 0 6px 16px -8px #000; }
.btn.primary:hover { background: #fff; filter: none; }
.btn.danger { color: #f6a197; background: #ef7d7214; box-shadow: inset 0 0 0 1px #ef7d7238; }
.btn.danger:hover { background: #ef7d7226; }
.btn.sm { height: 28px; padding: 0 12px; font-size: 12px; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--t2); }
.btn.ghost:hover { background: #ffffff0d; color: var(--t1); }
.top .btn { height: 36px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.top .btn.danger { background: #2a1513a6; }

.seg { padding: 3px; border-radius: 999px; border: 0; background: #0000004d; box-shadow: inset 0 1px 3px #00000080, 0 1px 0 #ffffff0d; }
.seg button { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--t3); }
.seg button.on { color: var(--t1); }
.seg .seg-ind { border-radius: 999px; background: #ffffff17; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0006; }

.chip { height: 28px; padding: 0 12px; border-radius: 999px; border: 0; background: #ffffff0b; color: var(--t2); font-size: 12px; font-weight: 500; transition: background 0.2s, color 0.2s; }
.chip:hover { background: #ffffff14; color: var(--t1); }
.chip.on { background: #ffffff21; color: #fff; box-shadow: inset 0 0 0 1px #ffffff26; }
.tag { height: 21px; padding: 0 8px; border-radius: 999px; border: 0; font-size: 11px; font-weight: 550; letter-spacing: 0; background: #ffffff0f; color: var(--t2); }
.tag.funded { background: #8fd19e1c; color: #a6dcb1; }
.tag.eval { background: #e6b76c1c; color: #edc78a; }
.tag.lv { background: #ffffff14; color: var(--t1); }
.tag.bad { background: #ef7d721f; color: #f39a90; }
.tag.new, :root[data-theme='midnight'] .tag.new { background: #ffffff14; color: var(--t1); }
.nfa { color: var(--t3); font-size: 11px; letter-spacing: 0; }

.sw { width: 34px; height: 20px; border-radius: 999px; background: #ffffff17; box-shadow: inset 0 1px 2px #0007; }
.sw::after { left: 3px; top: 3px; width: 14px; height: 14px; background: #9aa09b; box-shadow: 0 1px 3px #0008; }
.sw.on { background: #6fbf84; }
.sw.on::after { background: #fff; }

.input {
  height: 36px; border-radius: 10px; border: 0; background: #0000004d; color: var(--t1);
  box-shadow: inset 0 1px 3px #00000099, 0 1px 0 #ffffff0d; transition: box-shadow 0.2s;
}
.input:focus { box-shadow: inset 0 1px 3px #00000099, 0 0 0 1px #ffffff3d; }
.input.sm { height: 28px; border-radius: 8px; }
.field label { color: var(--t3); font-size: 12px; letter-spacing: 0; }
.slider { height: 4px; background: #ffffff17; border-radius: 999px; }
.slider::-webkit-slider-thumb { width: 18px; height: 18px; background: #fff; border: 0; box-shadow: 0 2px 8px #000a, 0 0 0 5px #ffffff14; }

/* ---------------------------------------------------------------- data */
.tbl { font-size: 13px; }
.tbl th { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--t3); border-bottom: 1px solid #ffffff0d; padding: 0 12px 12px; }
.tbl td { padding: 13px 12px; border-bottom: 1px solid #ffffff08; }
.tbl tbody tr:hover { background: #ffffff06; }
.tbl td:first-child, .tbl th:first-child { padding-left: 4px; }

.meter { height: 5px; border-radius: 999px; background: #ffffff0d; box-shadow: none; }
.meter i { border-radius: 999px; background: linear-gradient(90deg, #6fbf8499, var(--up)); }
.meter.hot i { background: linear-gradient(90deg, #e6b76c88, var(--warn)); }
.meter.max i { background: linear-gradient(90deg, #ef7d7288, var(--down)); }
.meter .tick { background: #ffffff40; top: 0; bottom: 0; }

.ax { font: 11px var(--sans); fill: #ffffff5c; letter-spacing: 0; }
.grid-l { stroke: #ffffff0b; }
.tip {
  padding: 8px 12px; border-radius: 12px; border: 0; background: #101110e6;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px #ffffff17, 0 12px 30px -10px #000; transform: translate(-50%, calc(-100% - 6px));
}
.tip b { font-weight: 450; letter-spacing: -0.02em; }
.legend { color: var(--t3); font-size: 12px; }
.legend i { border-radius: 50%; width: 7px; height: 7px; }

.li { border-bottom: 1px solid #ffffff0a; padding: 12px 0; }
.news-i .t { font-weight: 450; }
.news-i .m { color: var(--t3); }
.hit { border-radius: 999px; padding: 2px 9px; background: #ffffff0d; color: var(--t2); }
.hit::before { background: var(--warn); }

.banner {
  border: 1px solid transparent; border-radius: 18px; padding: 14px 16px 14px 18px; margin-bottom: 14px;
  background:
    linear-gradient(90deg, #e6b76c14, transparent 45%) padding-box,
    linear-gradient(180deg, #1c1d1cf0, #131413f2) padding-box,
    linear-gradient(180deg, #e6b76c55, #ffffff0a 60%) border-box;
  box-shadow: var(--drop);
}
.banner.bad {
  background:
    linear-gradient(90deg, #ef7d721a, transparent 45%) padding-box,
    linear-gradient(180deg, #1c1d1cf0, #131413f2) padding-box,
    linear-gradient(180deg, #ef7d7266, #ffffff0a 60%) border-box;
}
.banner.calm { background: var(--glass); }
.banner .bt { font-weight: 500; }
.banner .bs { color: var(--t3); font-size: 12.5px; }

.toast {
  border: 1px solid transparent; border-radius: 18px; background: var(--glass);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 50px -20px #000;
}
.toast .ts { color: var(--t3); }
.scrim { background: #050605a6; backdrop-filter: blur(10px) saturate(0.8); }
.modal {
  border: 1px solid transparent; border-radius: 26px; background: var(--glass); padding: 28px;
  box-shadow: 0 40px 100px -30px #000;
}
.modal h2 { font-size: 28px; font-weight: 400; letter-spacing: -0.04em; }
.steps i { background: #ffffff12; height: 3px; border-radius: 999px; }
.broker { border: 0; border-radius: 16px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0d; }
.broker:hover { background: #ffffff10; box-shadow: inset 0 0 0 1px #ffffff26; }
.broker b { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.drawer { border-left: 0; background: var(--glass); box-shadow: -30px 0 80px -20px #000; border-radius: 26px 0 0 26px; }

/* copy map */
.fan .wire { stroke: #ffffff17; stroke-width: 1.2; }
.fan .wire.on { stroke: #8fd19e66; }
.fan .pulse { fill: #c8f0d0; filter: drop-shadow(0 0 4px #8fd19e); }
.node { border: 0; border-radius: 16px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0f; padding: 12px 14px; }
.node.leader { background: linear-gradient(180deg, #ffffff12, #ffffff06); box-shadow: inset 0 0 0 1px #ffffff1f, 0 20px 40px -20px #000; }
.fol { height: 32px; border: 0; border-radius: 10px; background: #ffffff07; box-shadow: inset 0 0 0 1px #ffffff0b; font-size: 12px; }
.fol.desync { box-shadow: inset 0 0 0 1px #e6b76c80; background: #e6b76c10; }
@keyframes nodeping { 30% { box-shadow: inset 0 0 0 1px #8fd19e, 0 0 0 4px #8fd19e22; } }

.cal { gap: 5px; }
.cal .dow { letter-spacing: 0; text-transform: none; font-size: 11px; }
.cal .day { border: 0; border-radius: 10px; background: #ffffff06; }
.cal .day:hover { box-shadow: inset 0 0 0 1px #ffffff26; }

.insight { border: 0; border-radius: 18px; background: #ffffff07; box-shadow: inset 0 0 0 1px #ffffff0b; }
.insight .kind { letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--t3); }
.insight h4 { font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.big { font-weight: 400; letter-spacing: -0.03em; }
.soon h3 { font-weight: 400; letter-spacing: -0.03em; }

/* login */
.login { background: #0a0b0a; }
.login::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--bg-img) center / cover; opacity: 0.7; animation: bgIn 2.4s var(--ease) both; }
.login::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 50%, #0a0b0a33, #0a0b0acc); }
.login { isolation: isolate; }
.login-card { position: relative; z-index: 1; padding: 40px 36px 30px; border-radius: 30px; border: 1px solid transparent; background: var(--glass); box-shadow: 0 40px 100px -30px #000; }
.login-card h1 { font-variant: normal; font-size: 34px; font-weight: 400; letter-spacing: -0.045em; }
.login-card .btn { height: 44px; }

/* ---------------------------------------------------------------- new components */
/* Desk: P&L | copy stream | next event. One card, three zones split by hairlines. */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 0.8fr); padding: 0; overflow: hidden; }
.desk-z { position: relative; padding: 24px 26px 22px; min-width: 0; display: flex; flex-direction: column; }
.desk-z + .desk-z { border-left: 1px solid #ffffff0b; }
.desk-z .kpi .v.xl { font-size: 52px; }
.desk-stats { display: flex; gap: 22px; margin-top: 18px; font-size: 12px; }
.desk-stats span { display: block; color: var(--t3); }
.desk-stats b { font-weight: 450; font-size: 13.5px; }
.desk-spark { margin-top: auto; padding-top: 16px; }
.cs-order { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 15px; min-height: 22px; animation: fade 0.4s ease; }
.cs-order b { font-weight: 500; }
.cs-order .side { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 6px; background: #8fd19e1f; }
.cs-order .side.down { background: #ef7d721f; }
.cs-order .t { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.cs-track { height: 2px; margin: 12px 0 12px; background: #ffffff0a; border-radius: 2px; overflow: hidden; }
.cs-sweep { display: block; height: 100%; background: linear-gradient(90deg, #8fd19e00, #8fd19e); transform-origin: 0 50%; transform: scaleX(0); }
.cs-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cs-t {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 12px; background: #ffffff05;
  box-shadow: inset 0 0 0 1px #ffffff0b; transition: background 0.5s ease, box-shadow 0.5s ease;
}
.cs-t .id { font-size: 11px; color: var(--t3); white-space: nowrap; }
.cs-t .ms { font-size: 14px; color: var(--t3); letter-spacing: -0.02em; }
.cs-t.done { background: #8fd19e12; box-shadow: inset 0 0 0 1px #8fd19e40; animation: tilepop 0.5s var(--ease); }
.cs-t.done .ms { color: var(--t1); }
.cs-t.miss { background: #e6b76c12; box-shadow: inset 0 0 0 1px #e6b76c66; }
.cs-t.miss .ms { color: var(--warn); }
.cs-t.off { opacity: 0.4; }
@keyframes tilepop { 40% { transform: translateY(-2px); } }
.cs-foot { margin-top: 12px; font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
.desk-z.cpi { align-items: stretch; }
.cpi-ring { position: relative; width: 132px; height: 132px; margin: 10px auto 10px; }
.cpi-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cpi-t { font-size: 26px; font-weight: 400; letter-spacing: -0.04em; }
.cpi-c span { font-size: 11px; color: var(--t3); }

/* Metric tile: number with the chart beside it. */
.metric { padding: 16px 18px 15px; display: flex; flex-direction: column; gap: 6px; }
.metric.link { cursor: pointer; }
.m-h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--t3); }
.m-go svg { width: 13px; height: 13px; stroke: var(--t3); fill: none; stroke-width: 1.7; transition: transform 0.35s var(--ease), stroke 0.2s; }
.metric.link:hover .m-go svg { transform: translateX(3px); stroke: var(--t1); }
.m-row { display: flex; align-items: flex-end; gap: 14px; }
.mv { font-size: 30px; font-weight: 400; letter-spacing: -0.05em; line-height: 1.1; font-variant-numeric: tabular-nums; flex: none; }
.m-chart { flex: 1; min-width: 0; padding-bottom: 4px; }
.m-body { margin-top: 2px; }
.m-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t3); margin-top: 2px; }
.pchip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 550; background: #ffffff0f; color: var(--t2); font-variant-numeric: tabular-nums; }
.pchip.up { background: #8fd19e1f; color: #a6dcb1; }
.pchip.down { background: #ef7d721f; color: #f39a90; }
.pchip.warn { background: #e6b76c1f; color: #edc78a; }

/* Terminal readout above the P&L curve. */
.readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 12px; background: #0000002e; box-shadow: inset 0 1px 2px #0006, 0 1px 0 #ffffff08; }
.readout > div { padding: 10px 14px; }
.readout > div + div { border-left: 1px solid #ffffff08; }
.readout span { display: block; font-size: 11px; color: var(--t3); }
.readout b { font-size: 17px; font-weight: 400; letter-spacing: -0.03em; }

/* Chart head pulse: composited, not SMIL. */
.c-pulse { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--c, var(--up)); opacity: 0; pointer-events: none; }
.c-pulse.on.vis { animation: cpulse 2.4s ease-out infinite; }
@keyframes cpulse { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(3.4); opacity: 0; } }

/* Market rows inside cards */
.mkt-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid #ffffff0a; }
.mkt-row:last-child { border-bottom: 0; }

@media (max-width: 1200px) {
  .desk { grid-template-columns: 1fr; }
  .desk-z + .desk-z { border-left: 0; border-top: 1px solid #ffffff0b; }
  .cs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .main { margin: 0; border-radius: 0; height: 100vh; }
}
.tc-stage .tc { font-family: var(--sans); }
@keyframes grow { from { transform: scaleY(0); opacity: 0; } }

.fol { white-space: nowrap; overflow: hidden; }
.fol .id { flex: none; }

/* perf: isolate the animated market cards and promote their moving parts */
.tc-stage { contain: layout style; }
.tc { will-change: transform; }
.main::before { will-change: auto; }