/* MM Flow Intelligence page. Data is rendered by js/pages/mm-flow.js from one
   prepared snapshot. The layout is intentionally capture-ready at 16:9 and 9:16. */

.hub-shell:has(.mmf) { max-width: 1420px; padding: 22px 24px 48px; }
.hub-shell:has(.mmf) + .app-footer { margin-top: 0; }
.mmf { --mmf-purple:#9b72ff; --mmf-blue:#4da8ff; --mmf-cyan:#27d7c4; display:grid; gap:18px; }
.mmf a { color:inherit; }

.mmf-hero { position:relative; min-height:250px; display:flex; align-items:center; justify-content:space-between; gap:32px; overflow:hidden; padding:34px 38px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:24px; background:
  radial-gradient(520px 260px at 100% 0,color-mix(in srgb,var(--mmf-purple) 24%,transparent),transparent 72%),
  radial-gradient(380px 240px at 4% 100%,color-mix(in srgb,var(--mmf-cyan) 12%,transparent),transparent 72%),
  linear-gradient(135deg,color-mix(in srgb,var(--bg-card) 96%,#11152a),var(--bg-card2)); box-shadow:inset 0 1px 0 var(--hairline),0 28px 80px -55px color-mix(in srgb,var(--mmf-purple) 70%,#000); }
.mmf-hero::before { content:""; position:absolute; inset:0; opacity:.15; pointer-events:none; background-image:linear-gradient(color-mix(in srgb,var(--border2) 42%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border2) 42%,transparent) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,#000,transparent 78%); }
.mmf-hero-copy { position:relative; z-index:1; max-width:790px; }
.mmf-kicker { display:flex; align-items:center; gap:8px; color:var(--mmf-cyan); font:700 10px var(--mono); letter-spacing:1.4px; }
.mmf-kicker > span:last-child { margin-left:8px; color:var(--text-lo); letter-spacing:.2px; font-weight:500; }
.mmf-live-dot { width:7px; height:7px; border-radius:50%; background:var(--mmf-cyan); box-shadow:0 0 0 5px color-mix(in srgb,var(--mmf-cyan) 14%,transparent); animation:mmf-live 2.2s ease-in-out infinite; }
.mmf-hero h1 { max-width:780px; margin:14px 0 12px; font-size:clamp(32px,4vw,58px); line-height:1.02; letter-spacing:-.045em; }
.mmf-hero p { max-width:720px; margin:0; color:var(--text-md); font-size:15px; line-height:1.65; }
.mmf-hero-orbit { position:relative; flex:0 0 210px; width:210px; height:210px; display:grid; place-items:center; }
.mmf-hero-orbit::before,.mmf-hero-orbit::after { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--mmf-purple) 45%,transparent); border-radius:50%; }
.mmf-hero-orbit::before { inset:12px; }
.mmf-hero-orbit::after { inset:44px; border-color:color-mix(in srgb,var(--mmf-cyan) 45%,transparent); }
.mmf-hero-orbit b { position:relative; z-index:2; display:grid; place-items:center; width:80px; height:80px; border-radius:24px; background:linear-gradient(145deg,var(--mmf-purple),#6040c8); color:#fff; font:800 22px var(--mono); box-shadow:0 18px 55px color-mix(in srgb,var(--mmf-purple) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.28); }
.mmf-hero-orbit i { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--mmf-cyan); box-shadow:0 0 18px var(--mmf-cyan); animation:mmf-orbit 8s linear infinite; }
.mmf-hero-orbit i:nth-child(2) { background:var(--mmf-purple); box-shadow:0 0 18px var(--mmf-purple); animation-duration:11s; animation-direction:reverse; }
.mmf-hero-orbit i:nth-child(3) { width:8px; height:8px; background:var(--mmf-blue); animation-duration:6s; animation-delay:-3s; }
@keyframes mmf-orbit { from { transform:rotate(0deg) translateX(92px) rotate(0deg); } to { transform:rotate(360deg) translateX(92px) rotate(-360deg); } }
@keyframes mmf-live { 50% { box-shadow:0 0 0 9px transparent; } }

.mmf-ssr-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(260px,1.4fr); gap:10px; }
.mmf-ssr-summary > div,.mmf-ssr-summary > ul { min-width:0; margin:0; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:var(--bg-card); }
.mmf-ssr-summary span { display:block; color:var(--text-lo); font-size:10px; text-transform:uppercase; letter-spacing:.65px; }
.mmf-ssr-summary strong { display:block; margin-top:5px; font:750 18px var(--mono); overflow:hidden; text-overflow:ellipsis; }
.mmf-ssr-summary ul { display:flex; flex-direction:column; gap:5px; list-style:none; }
.mmf-ssr-summary li { display:flex; justify-content:space-between; gap:12px; font:650 11px var(--mono); }
.mmf-ssr-summary li a { color:var(--accent-2); text-decoration:none; }
.mmf-ssr-empty { padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--bg-card); color:var(--text-md); }
.mmf-ready .mmf-ssr-summary,.mmf-ready .mmf-ssr-empty { display:none; }

.mmf-filterbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); }
.mmf-filterbar .ark-seg { margin:0; }
.mmf-updated { margin-left:auto; color:var(--text-lo); font:500 10px var(--mono); }
.mmf-film { width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid var(--border); border-radius:8px; background:var(--bg-card2); color:var(--text-md); cursor:pointer; }
.mmf-film svg { width:17px; height:17px; fill:currentColor; }
.mmf-film:hover,.mmf-film.active { color:#fff; border-color:var(--mmf-purple); background:var(--mmf-purple); }
.mmf-status { min-height:0; padding:0; color:var(--text-md); font-size:12px; }
.mmf-status:not(:empty) { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; border:1px solid color-mix(in srgb,var(--orange) 38%,var(--border)); border-radius:10px; background:color-mix(in srgb,var(--orange) 7%,var(--bg-card)); }
.mmf-status button { border:0; border-radius:7px; padding:7px 11px; color:#fff; background:var(--accent); cursor:pointer; font:700 10px var(--mono); }

.mmf-pulse { display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:12px; }
.mmf-pulse-card { position:relative; min-height:126px; overflow:hidden; padding:18px; border:1px solid var(--border); border-radius:17px; background:linear-gradient(145deg,var(--bg-card),color-mix(in srgb,var(--bg-card2) 92%,#11182d)); box-shadow:inset 0 1px 0 var(--hairline); }
.mmf-pulse-card.primary { border-color:color-mix(in srgb,var(--mmf-purple) 35%,var(--border)); background:radial-gradient(260px 150px at 0 100%,color-mix(in srgb,var(--mmf-purple) 18%,transparent),transparent 70%),var(--bg-card); }
.mmf-pulse-card .label { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text-lo); font:700 9.5px var(--mono); letter-spacing:.8px; text-transform:uppercase; }
.mmf-pulse-card .value { display:block; margin-top:13px; font:800 clamp(22px,3vw,34px) var(--mono); letter-spacing:-1.1px; }
.mmf-pulse-card .value.off { color:var(--flow-out); }
.mmf-pulse-card .value.onto { color:var(--flow-in); }
.mmf-pulse-card p { margin:8px 0 0; color:var(--text-md); font-size:11.5px; line-height:1.45; }
.mmf-pulse-card .mini { display:flex; gap:4px; height:6px; margin-top:14px; overflow:hidden; border-radius:99px; background:var(--bg-input); }
.mmf-pulse-card .mini i { height:100%; }
.mmf-pulse-card .mini .off { background:var(--flow-out); }
.mmf-pulse-card .mini .onto { background:var(--flow-in); }

.mmf-section { min-width:0; padding:20px; border:1px solid var(--border); border-radius:18px; background:var(--bg-card); background-image:var(--grad-card); box-shadow:inset 0 1px 0 var(--hairline); }
.mmf-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:15px; }
.mmf-section-head span { display:block; margin-bottom:4px; color:var(--mmf-purple); font:700 9px var(--mono); letter-spacing:1px; }
.mmf-section-head h2 { margin:0; font-size:18px; letter-spacing:-.02em; }
.mmf-section-head p { max-width:360px; margin:0; color:var(--text-lo); font-size:11px; text-align:right; }

.mmf-assets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mmf-asset { position:relative; display:grid; gap:12px; min-width:0; padding:15px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb,var(--bg-card2) 72%,transparent); cursor:pointer; text-align:left; color:inherit; }
.mmf-asset:hover,.mmf-asset.active { border-color:color-mix(in srgb,var(--mmf-purple) 60%,var(--border)); transform:translateY(-1px); }
.mmf-asset.active { background:color-mix(in srgb,var(--mmf-purple) 8%,var(--bg-card2)); }
.mmf-asset-top { display:flex; align-items:center; gap:10px; min-width:0; }
.mmf-asset-icon { width:34px; height:34px; flex:none; }
.mmf-asset-name { min-width:0; }
.mmf-asset-name strong { display:block; font:750 14px var(--mono); }
.mmf-asset-name span { display:block; margin-top:2px; color:var(--text-lo); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mmf-asset-volume { margin-left:auto; text-align:right; }
.mmf-asset-volume b { display:block; font:800 16px var(--mono); }
.mmf-asset-volume small { color:var(--text-lo); font-size:9px; }
.mmf-flowbar { display:flex; width:100%; height:7px; overflow:hidden; border-radius:99px; background:var(--bg-input); }
.mmf-flowbar i { height:100%; }
.mmf-flowbar .off { background:var(--flow-out); }
.mmf-flowbar .onto { background:var(--flow-in); }
.mmf-asset-meta { display:flex; gap:6px; overflow:auto; scrollbar-width:none; }
.mmf-asset-meta::-webkit-scrollbar { display:none; }
.mmf-chip { flex:none; display:inline-flex; align-items:center; min-height:22px; padding:0 7px; border:1px solid var(--border); border-radius:99px; color:var(--text-md); background:var(--bg-card); font:650 9px var(--mono); white-space:nowrap; }
.mmf-chip.hot { color:var(--orange); border-color:color-mix(in srgb,var(--orange) 42%,var(--border)); }
.mmf-chip.off { color:var(--flow-out); }
.mmf-chip.onto { color:var(--flow-in); }

.mmf-asset-picker { max-width:min(100%,620px); margin:0; }
.mmf-impact-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr); gap:12px; }
.mmf-impact-card { min-width:0; padding:16px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb,var(--bg-card2) 72%,transparent); }
.mmf-impact-card.wide { grid-row:span 2; }
.mmf-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.mmf-card-head h3 { margin:0; font-size:14px; }
.mmf-card-head p { margin:4px 0 0; color:var(--text-lo); font-size:10px; line-height:1.4; }
.mmf-card-head .metric { text-align:right; font:800 22px var(--mono); color:var(--mmf-cyan); }
.mmf-card-head .metric small { display:block; margin-top:3px; color:var(--text-lo); font-size:8px; letter-spacing:.6px; }
.mmf-reaction-svg,.mmf-scatter-svg { display:block; width:100%; height:auto; overflow:visible; }
.mmf-chart-grid { stroke:var(--border); stroke-width:1; }
.mmf-chart-zero { stroke:var(--text-lo); stroke-width:1; stroke-dasharray:4 4; }
.mmf-chart-band.off { fill:color-mix(in srgb,var(--flow-out) 12%,transparent); }
.mmf-chart-band.onto { fill:color-mix(in srgb,var(--flow-in) 12%,transparent); }
.mmf-chart-line.off { fill:none; stroke:var(--flow-out); stroke-width:2.5; }
.mmf-chart-line.onto { fill:none; stroke:var(--flow-in); stroke-width:2.5; }
.mmf-chart-label { fill:var(--text-lo); font:9px var(--mono); }
.mmf-scatter-dot.off { fill:var(--flow-out); }
.mmf-scatter-dot.onto { fill:var(--flow-in); }
.mmf-impact-legend { display:flex; gap:14px; margin-top:10px; color:var(--text-md); font-size:9.5px; }
.mmf-impact-legend span { display:flex; align-items:center; gap:5px; }
.mmf-impact-legend i { width:8px; height:8px; border-radius:50%; }
.mmf-reaction-table { display:grid; grid-template-columns:74px repeat(3,1fr); margin-top:12px; border-top:1px solid var(--border); }
.mmf-reaction-table > span,.mmf-reaction-table > b { padding:8px 5px; border-bottom:1px solid var(--border); font:600 9.5px var(--mono); text-align:right; }
.mmf-reaction-table > span { color:var(--text-lo); text-align:left; }
.mmf-reaction-table .pos { color:var(--flow-out); }
.mmf-reaction-table .neg { color:var(--flow-in); }
.mmf-consensus-stat { display:grid; grid-template-columns:1fr auto; align-items:end; gap:8px; margin-top:10px; }
.mmf-consensus-stat span { color:var(--text-lo); font-size:10px; }
.mmf-consensus-stat b { font:800 20px var(--mono); }
.mmf-consensus-stat small { grid-column:1/-1; color:var(--text-md); font-size:10px; line-height:1.4; }
.mmf-current-path { display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:11px; }
.mmf-current-path .asset { font:800 18px var(--mono); }
.mmf-current-path .move { margin-left:auto; font:800 18px var(--mono); }
.mmf-current-path .move small { display:block; margin-top:3px; color:var(--text-lo); font:500 8px var(--mono); text-align:right; }

.mmf-two { display:grid; grid-template-columns:1fr 1fr; gap:18px; min-width:0; }
.mmf-desk-list,.mmf-route-list { display:grid; gap:8px; }
.mmf-desk,.mmf-route { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--bg-card2) 70%,transparent); }
.mmf-desk-main,.mmf-route-main { min-width:0; display:flex; align-items:center; gap:10px; }
.mmf-desk-logo { width:34px; height:34px; display:grid; place-items:center; flex:none; overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--bg-card); font:800 12px var(--mono); }
.mmf-desk-logo img { width:100%; height:100%; object-fit:contain; }
.mmf-desk-copy,.mmf-route-copy { min-width:0; }
.mmf-desk-copy strong,.mmf-route-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.mmf-desk-copy span,.mmf-route-copy span { display:block; margin-top:3px; color:var(--text-lo); font-size:9.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mmf-desk-value,.mmf-route-value { text-align:right; }
.mmf-desk-value b,.mmf-route-value b { display:block; font:750 13px var(--mono); }
.mmf-desk-value small,.mmf-route-value small { color:var(--text-lo); font-size:9px; }
.mmf-route-arrow { color:var(--mmf-purple); font:800 16px var(--mono); }

.mmf-dry { background:radial-gradient(450px 180px at 0 50%,color-mix(in srgb,var(--green) 10%,transparent),transparent 72%),var(--bg-card); }
.mmf-dry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mmf-dry-stat { padding:14px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--bg-card2) 72%,transparent); }
.mmf-dry-stat span { display:block; color:var(--text-lo); font-size:9px; text-transform:uppercase; letter-spacing:.6px; }
.mmf-dry-stat b { display:block; margin-top:6px; font:800 18px var(--mono); }

.mmf-receipts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.mmf-receipt { display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-left:3px solid var(--flow-out); border-radius:13px; background:color-mix(in srgb,var(--bg-card2) 72%,transparent); }
.mmf-receipt.onto { border-left-color:var(--flow-in); }
.mmf-receipt-top { display:flex; align-items:center; gap:9px; min-width:0; }
.mmf-receipt-top .coin { width:30px; height:30px; flex:none; }
.mmf-receipt-top strong { font:800 14px var(--mono); }
.mmf-receipt-top time { margin-left:auto; color:var(--text-lo); font:500 9px var(--mono); }
.mmf-receipt-value { display:flex; align-items:baseline; gap:8px; }
.mmf-receipt-value b { font:800 19px var(--mono); }
.mmf-receipt-value span { color:var(--text-md); font-size:10px; }
.mmf-receipt-meta { display:flex; gap:6px; overflow:auto; scrollbar-width:none; }
.mmf-receipt-links { display:flex; flex-wrap:wrap; gap:6px; padding-top:8px; border-top:1px solid var(--border); }
.mmf-receipt-links a { display:inline-flex; align-items:center; min-height:28px; padding:0 8px; border:1px solid var(--border); border-radius:7px; color:var(--accent-2); text-decoration:none; font:650 9px var(--mono); }
.mmf-receipt-links a:hover { border-color:var(--accent); }
.mmf-method { padding:18px 20px; border:1px dashed color-mix(in srgb,var(--mmf-purple) 45%,var(--border)); border-radius:15px; background:color-mix(in srgb,var(--mmf-purple) 5%,var(--bg-card)); }
.mmf-method strong { font-size:12px; }
.mmf-method p { margin:6px 0 10px; color:var(--text-md); font-size:11px; line-height:1.6; }
.mmf-method a { color:var(--accent-2); font-size:11px; font-weight:700; text-decoration:none; }

.mmf-empty { padding:20px; border:1px dashed var(--border); border-radius:12px; color:var(--text-lo); text-align:center; font-size:11px; }
.mmf-lock { margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--mmf-purple) 40%,var(--border)); border-radius:11px; background:color-mix(in srgb,var(--mmf-purple) 7%,var(--bg-card)); }
.mmf-lock span { color:var(--text-md); font-size:10.5px; }
.mmf-lock a { flex:none; padding:8px 11px; border-radius:8px; background:var(--mmf-purple); color:#fff; text-decoration:none; font:700 9.5px var(--mono); }

.mmf-skeleton-grid:empty,.mmf-skeleton-list:empty { min-height:120px; border-radius:14px; background:linear-gradient(90deg,var(--bg-card) 20%,var(--bg-card2) 42%,var(--bg-card) 64%); background-size:280% 100%; animation:mmf-shimmer 1.4s linear infinite; }
@keyframes mmf-shimmer { to { background-position:-180% 0; } }

html.mmf-video .ark-nav,html.mmf-video .app-footer,html.mmf-video .mmf-method { display:none; }
html.mmf-video .hub-shell:has(.mmf) { max-width:1240px; padding-top:18px; }
html.mmf-video .mmf-hero { min-height:210px; }
html.mmf-video .mmf-film { background:var(--mmf-purple); color:#fff; }

@media (max-width:1000px) {
  .mmf-assets { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mmf-pulse { grid-template-columns:repeat(2,1fr); }
  .mmf-impact-grid { grid-template-columns:1fr; }
  .mmf-impact-card.wide { grid-row:auto; }
  .mmf-ssr-summary { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px) {
  .hub-shell:has(.mmf) { padding:12px 10px 32px; }
  .mmf { gap:12px; }
  .mmf-hero { min-height:auto; padding:22px 18px; border-radius:18px; }
  .mmf-hero h1 { font-size:32px; }
  .mmf-hero p { font-size:13px; }
  .mmf-hero-orbit { display:none; }
  .mmf-ssr-summary { grid-template-columns:1fr 1fr; }
  .mmf-ssr-summary > ul { grid-column:1/-1; }
  .mmf-filterbar { position:sticky; top:52px; z-index:20; flex-wrap:nowrap; }
  .mmf-filterbar .ark-seg { min-width:0; overflow:auto; }
  .mmf-updated { display:none; }
  .mmf-pulse { grid-template-columns:1fr 1fr; gap:8px; }
  .mmf-pulse-card { min-height:112px; padding:14px; }
  .mmf-pulse-card.primary { grid-column:1/-1; }
  .mmf-section { padding:15px 12px; border-radius:15px; }
  .mmf-section-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .mmf-section-head p { text-align:left; }
  .mmf-assets { grid-template-columns:1fr; }
  .mmf-asset { padding:13px; }
  .mmf-asset-volume b { font-size:18px; }
  .mmf-asset-meta { position:relative; padding-right:20px; }
  .mmf-impact-grid,.mmf-two { grid-template-columns:1fr; }
  .mmf-dry-grid { grid-template-columns:1fr 1fr; }
  .mmf-dry-stat:first-child { grid-column:1/-1; }
  .mmf-receipts { grid-template-columns:1fr; }
  .mmf-receipt { padding:13px 12px; }
  .mmf-receipt-value b { font-size:20px; }
  .mmf-receipt-meta { white-space:nowrap; }
  .mmf-lock { align-items:flex-start; flex-direction:column; }
  .mmf-lock a { width:100%; box-sizing:border-box; text-align:center; }
}

@media (max-width:520px) {
  .mmf-kicker > span:last-child { display:none; }
  .mmf-hero h1 { font-size:28px; }
  .mmf-ssr-summary { grid-template-columns:1fr; }
  .mmf-ssr-summary > ul { grid-column:auto; }
  .mmf-pulse { grid-template-columns:1fr; }
  .mmf-pulse-card.primary { grid-column:auto; }
  .mmf-reaction-table { grid-template-columns:68px repeat(3,1fr); }
}

@media (prefers-reduced-motion:reduce) {
  .mmf-live-dot,.mmf-hero-orbit i,.mmf-skeleton-grid:empty,.mmf-skeleton-list:empty { animation:none; }
  .mmf-asset:hover { transform:none; }
}