/* RMSP LIVE MARKETS FABRIC R1
   Bespoke compact Dashboard/Options-grade page for #markets.
   Presentation only; existing market/feed/microstructure truth remains unchanged.
*/
.mkx-page{
  --mkx-a:var(--purple2,#704aff);
  --mkx-b:var(--cyan,#29f5ff);
  --mkx-a-soft:color-mix(in srgb,var(--mkx-a) 17%,transparent);
  --mkx-b-soft:color-mix(in srgb,var(--mkx-b) 12%,transparent);
  --mkx-edge:color-mix(in srgb,var(--mkx-b) 17%,var(--line));
  --mkx-panel:color-mix(in srgb,var(--surface) 96%,transparent);
  --mkx-panel2:color-mix(in srgb,var(--surface2) 97%,transparent);
  position:relative;min-height:100%;padding:6px 6px 24px;overflow:hidden
}
.mkx-page::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-2;
  background:
    radial-gradient(circle at 12% 4%,var(--mkx-a-soft),transparent 25%),
    radial-gradient(circle at 86% 3%,var(--mkx-b-soft),transparent 28%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 78%,transparent),transparent 68%)
}
.mkx-page::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.18;
  background-image:
    linear-gradient(color-mix(in srgb,var(--mkx-b) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--mkx-b) 6%,transparent) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 82%)
}

/* compact module bar */
.mkx-topbar{
  min-height:58px;display:grid;grid-template-columns:minmax(270px,auto) 1fr auto;align-items:center;gap:12px;
  padding:7px 10px;border:1px solid var(--mkx-edge);border-radius:16px;
  background:linear-gradient(180deg,var(--mkx-panel),var(--mkx-panel2));box-shadow:0 14px 42px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.025);
  overflow:hidden;position:relative;margin-bottom:8px
}
.mkx-topbar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--mkx-b-soft),var(--mkx-a-soft),transparent);
  transform:translateX(-100%);animation:mkxSweep 8s ease-in-out infinite
}
.mkx-brand{display:flex;align-items:center;gap:10px;position:relative;z-index:2;min-width:0}
.mkx-brandmark{
  width:40px;height:40px;border-radius:12px;position:relative;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--mkx-b) 30%,transparent);
  background:radial-gradient(circle at 50% 38%,var(--mkx-b-soft),var(--mkx-a-soft) 64%,transparent 65%);
  box-shadow:inset 0 0 16px var(--mkx-b-soft),0 0 24px var(--mkx-a-soft)
}
.mkx-brandmark::before,.mkx-brandmark::after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--mkx-b) 45%,transparent);transform:rotate(45deg)}
.mkx-brandmark::before{width:19px;height:19px}.mkx-brandmark::after{width:11px;height:11px;border-color:color-mix(in srgb,var(--mkx-a) 52%,transparent);animation:mkxSpin 10s linear infinite}
.mkx-brandmark i{width:5px;height:5px;border-radius:50%;background:var(--mkx-b);box-shadow:0 0 12px var(--mkx-b);z-index:2}
.mkx-brand h2{margin:0;font-size:13px;letter-spacing:.13em;font-weight:800}
.mkx-brand p{margin:2px 0 0;color:var(--muted);font-size:6px;letter-spacing:.13em}
.mkx-topchips{display:flex;justify-content:center;gap:6px;position:relative;z-index:2}
.mkx-topchips span,.mkx-status{
  padding:6px 8px;border:1px solid color-mix(in srgb,var(--mkx-b) 9%,var(--line));border-radius:9px;
  background:color-mix(in srgb,var(--mkx-a) 2.5%,var(--surface2));font-size:6px;font-weight:800;letter-spacing:.05em;white-space:nowrap
}
.mkx-status{position:relative;z-index:2;color:var(--soft);max-width:190px;overflow:hidden;text-overflow:ellipsis}

/* hero */
.mkx-hero{
  min-height:112px;display:grid;grid-template-columns:minmax(0,1fr) 200px;align-items:center;gap:14px;
  padding:14px 16px 13px;border:1px solid var(--mkx-edge);border-radius:17px;
  background:
    radial-gradient(circle at 84% 48%,var(--mkx-b-soft),transparent 22%),
    linear-gradient(180deg,var(--mkx-panel),var(--mkx-panel2));
  box-shadow:0 15px 42px rgba(0,0,0,.18);margin-bottom:8px;position:relative;overflow:hidden
}
.mkx-hero-copy{position:relative;z-index:2}
.mkx-hero-copy small{font-size:6px;color:var(--mkx-b);font-weight:850;letter-spacing:.17em}
.mkx-hero-copy h1{margin:6px 0 4px;font-size:23px;line-height:1.08;letter-spacing:-.035em;font-weight:900}
.mkx-hero-copy h1 em{font-style:normal;color:var(--mkx-b);text-shadow:0 0 16px var(--mkx-b-soft)}
.mkx-hero-copy p{margin:0;max-width:940px;color:var(--soft);font-size:8px;line-height:1.5}
.mkx-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.mkx-tags span{padding:4px 7px;border:1px solid color-mix(in srgb,var(--mkx-b) 14%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--mkx-a) 3%,var(--surface2));font-size:5px;font-weight:800;color:var(--soft)}
.mkx-orbit{position:relative;height:92px;display:grid;place-items:center}
.mkx-ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--mkx-b) 24%,transparent)}
.mkx-ring.r1{width:88px;height:88px;border-style:dashed;animation:mkxSpin 18s linear infinite}
.mkx-ring.r2{width:58px;height:58px;border-color:color-mix(in srgb,var(--mkx-a) 28%,transparent);animation:mkxSpinBack 12s linear infinite}
.mkx-core{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--mkx-b) 8%,var(--surface2));border:1px solid color-mix(in srgb,var(--mkx-b) 35%,transparent);color:var(--mkx-b);box-shadow:0 0 22px var(--mkx-b-soft);z-index:2}
.mkx-orbit span{position:absolute;font-size:5px;color:var(--muted);letter-spacing:.08em}.mkx-orbit .n1{top:4px}.mkx-orbit .n2{left:18px;bottom:11px}.mkx-orbit .n3{right:18px;bottom:11px}

/* dense summary strip */
.mkx-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:8px}
.mkx-summary-card{
  min-height:68px;padding:8px 10px;position:relative;overflow:hidden;border:1px solid var(--mkx-edge);border-radius:12px;
  background:linear-gradient(180deg,var(--mkx-panel),var(--mkx-panel2));box-shadow:0 10px 28px rgba(0,0,0,.12)
}
.mkx-summary-card span{display:block;color:var(--muted);font-size:5px;letter-spacing:.11em}.mkx-summary-card b{display:block;margin-top:5px;font-size:14px}.mkx-summary-card small{display:block;margin-top:3px;color:var(--muted);font-size:5px;max-width:82%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkx-summary-card i{position:absolute;right:9px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--mkx-b);box-shadow:0 0 12px var(--mkx-b);animation:mkxPulse 2s ease-in-out infinite}
.mkx-summary-card::after{content:"";position:absolute;right:9px;bottom:9px;width:50px;height:13px;border-bottom:1px solid color-mix(in srgb,var(--mkx-b) 35%,transparent);border-right:1px solid color-mix(in srgb,var(--mkx-b) 22%,transparent);transform:skewX(-28deg);opacity:.7}

/* main dashboard-like grid */
.mkx-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:7px;align-items:stretch}
.mkx-panel{
  border:1px solid var(--mkx-edge);border-radius:14px;overflow:hidden;min-width:0;
  background:linear-gradient(180deg,var(--mkx-panel),var(--mkx-panel2));box-shadow:0 12px 34px rgba(0,0,0,.14)
}
.mkx-panel.activation{grid-column:span 5}.mkx-panel.sources{grid-column:span 4}.mkx-panel.transport{grid-column:span 3}
.mkx-panel.micro{grid-column:span 8}.mkx-panel.latency{grid-column:span 4}
.mkx-head{
  height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px 0 12px;
  border-bottom:1px solid color-mix(in srgb,var(--mkx-b) 7%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--mkx-a) 4%,transparent),transparent)
}
.mkx-head small{display:block;color:var(--mkx-b);font-size:5px;letter-spacing:.12em}.mkx-head h3{margin:2px 0 0;font-size:9px;letter-spacing:.03em}.mkx-head>span{font-size:6px;color:var(--muted);white-space:nowrap}
.mkx-lines{display:grid;gap:4px;padding:7px}
.mkx-line{min-height:28px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 7px;border:1px solid color-mix(in srgb,var(--mkx-b) 7%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--mkx-a) 1.7%,var(--surface2));font-size:6px}
.mkx-line span{color:var(--soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkx-line b{font-size:6px;white-space:nowrap}

/* exchange cards fill space with information, not whitespace */
.mkx-exchanges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:7px}
.mkx-exchange{
  min-height:105px;padding:9px;border:1px solid color-mix(in srgb,var(--mkx-b) 10%,var(--line));border-radius:10px;
  background:color-mix(in srgb,var(--mkx-a) 2%,var(--surface2));position:relative;overflow:hidden
}
.mkx-exchange::after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;right:-24px;bottom:-30px;border:1px solid color-mix(in srgb,var(--mkx-b) 10%,transparent)}
.mkx-ex-top{display:flex;align-items:center;gap:7px}.mkx-ex-top>i{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 11px var(--gold)}
.mkx-exchange.ok .mkx-ex-top>i{background:var(--green);box-shadow:0 0 11px var(--green)}.mkx-exchange.lock .mkx-ex-top>i{background:var(--red);box-shadow:0 0 11px var(--red)}
.mkx-ex-logo{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--mkx-b) 16%,var(--line));background:var(--surface3);color:var(--mkx-b);font-size:7px;font-weight:900}
.mkx-ex-top b{display:block;font-size:9px}.mkx-ex-top small{display:block;max-width:98px;margin-top:2px;color:var(--muted);font-size:4.5px;line-height:1.35}
.mkx-ex-state{display:inline-flex;margin-top:12px;padding:4px 6px;border-radius:7px;border:1px solid color-mix(in srgb,var(--gold) 25%,var(--line));color:var(--gold);font-size:5px;font-weight:800}.mkx-exchange.ok .mkx-ex-state{color:var(--green);border-color:color-mix(in srgb,var(--green) 28%,var(--line))}.mkx-exchange.lock .mkx-ex-state{color:var(--red);border-color:color-mix(in srgb,var(--red) 28%,var(--line))}

/* microstructure horizontal intelligence strip */
.mkx-micro-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:7px 7px 5px}
.mkx-micro-kpi{min-height:69px;position:relative;padding:8px;border:1px solid color-mix(in srgb,var(--mkx-b) 8%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--mkx-a) 1.8%,var(--surface2));overflow:hidden}
.mkx-micro-kpi span{display:block;color:var(--muted);font-size:5px;letter-spacing:.08em}.mkx-micro-kpi b{display:block;margin-top:5px;font-size:13px;max-width:70%;overflow:hidden;text-overflow:ellipsis}.mkx-micro-kpi small{display:block;margin-top:3px;color:var(--muted);font-size:4.5px}.mkx-micro-kpi svg{position:absolute;right:7px;bottom:8px;width:54px;height:18px}.mkx-micro-kpi polyline{fill:none;stroke:var(--mkx-b);stroke-width:1.5;filter:drop-shadow(0 0 3px var(--mkx-b-soft))}
.mkx-micro-foot{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.35fr;gap:4px;padding:0 7px 7px}.mkx-micro-foot span{min-height:29px;padding:5px 7px;border:1px solid color-mix(in srgb,var(--mkx-b) 6%,var(--line));border-radius:7px;background:color-mix(in srgb,var(--mkx-a) 1.4%,var(--surface2));font-size:5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.mkx-micro-foot b{display:block;margin-top:2px;font-size:5.5px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Dummy Money uses identical composition in red. */
html[data-money-mode="dummy"] .mkx-page{--mkx-a:#c91645;--mkx-b:#ff4d73;--mkx-a-soft:rgba(201,22,69,.17);--mkx-b-soft:rgba(255,77,115,.12);--mkx-edge:rgba(255,78,112,.18)}
html[data-money-mode="dummy"] .mkx-topbar,
html[data-money-mode="dummy"] .mkx-hero,
html[data-money-mode="dummy"] .mkx-summary-card,
html[data-money-mode="dummy"] .mkx-panel{background:linear-gradient(180deg,rgba(31,6,12,.96),rgba(15,2,6,.96))}
html[data-theme="light"] .mkx-topbar,
html[data-theme="light"] .mkx-hero,
html[data-theme="light"] .mkx-summary-card,
html[data-theme="light"] .mkx-panel{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,249,255,.96));box-shadow:0 12px 32px rgba(31,39,82,.08)}
html[data-theme="light"][data-money-mode="dummy"] .mkx-topbar,
html[data-theme="light"][data-money-mode="dummy"] .mkx-hero,
html[data-theme="light"][data-money-mode="dummy"] .mkx-summary-card,
html[data-theme="light"][data-money-mode="dummy"] .mkx-panel{background:linear-gradient(180deg,#fffafb,#fff1f4)}

/* Responsive */
@media(max-width:1280px){
  .mkx-panel.activation{grid-column:span 6}.mkx-panel.sources{grid-column:span 6}.mkx-panel.transport{grid-column:span 12}
  .mkx-panel.micro,.mkx-panel.latency{grid-column:span 12}
}
@media(max-width:980px){
  .mkx-topbar{grid-template-columns:1fr auto}.mkx-topchips{display:none}
  .mkx-hero{grid-template-columns:1fr}.mkx-orbit{display:none}
  .mkx-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkx-summary-card:last-child{grid-column:1/-1}
  .mkx-exchanges{grid-template-columns:1fr}
}
@media(max-width:620px){
  .mkx-page{padding:4px 2px 18px}.mkx-topbar{border-radius:12px}.mkx-status{display:none}
  .mkx-hero{padding:13px;border-radius:13px}.mkx-hero-copy h1{font-size:20px}
  .mkx-summary{gap:5px}.mkx-summary-card{min-height:62px}
  .mkx-panel.activation,.mkx-panel.sources,.mkx-panel.transport,.mkx-panel.micro,.mkx-panel.latency{grid-column:1/-1}
  .mkx-micro-grid{grid-template-columns:repeat(2,1fr)}.mkx-micro-foot{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.mkx-topbar::before,.mkx-brandmark::after,.mkx-ring,.mkx-summary-card i{animation:none!important}}

@keyframes mkxSweep{0%,72%{transform:translateX(-100%)}88%,100%{transform:translateX(100%)}}
@keyframes mkxSpin{to{transform:rotate(405deg)}}@keyframes mkxSpinBack{to{transform:rotate(-360deg)}}@keyframes mkxPulse{50%{transform:scale(1.5);opacity:.5}}