body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
.tab-link.active { background: #1e293b; color: #f1f5f9; border-color: #334155; }
.market-toggle.active-market { background: #1e293b; color: #fbbf24; border-color: #fbbf24; }
table { border-collapse: collapse; }
@keyframes livepulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
.live-dot { animation: livepulse 1.4s ease-in-out infinite; }
.lane-card { cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.lane-card:hover { border-color: #475569; background: rgba(30,41,59,.45); }
.lane-card:active { transform: scale(.995); }

/* status pills */
.pill { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; border-radius: .375rem; border-width: 1px; font-size: .75rem; line-height: 1.5; }
.pill-ok    { background: rgba(16,185,129,.1); color: #6ee7b7; border-color: rgba(16,185,129,.4); }
.pill-warn  { background: rgba(245,158,11,.1); color: #fcd34d; border-color: rgba(245,158,11,.4); }
.pill-err   { background: rgba(244,63,94,.1); color: #fda4af; border-color: rgba(244,63,94,.4); }
.pill-info  { background: rgba(56,189,248,.1); color: #7dd3fc; border-color: rgba(56,189,248,.4); }
.pill-muted { background: rgba(100,116,139,.1); color: #94a3b8; border-color: rgba(100,116,139,.4); }

/* mode badges — clear distinct colors */
.mode-live      { background: rgba(244,63,94,.15); color: #fda4af; border: 1px solid rgba(244,63,94,.5); padding: 0 .5rem; border-radius: .375rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; }
.mode-shadow    { background: rgba(56,189,248,.15); color: #7dd3fc; border: 1px solid rgba(56,189,248,.5); padding: 0 .5rem; border-radius: .375rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; }
.mode-offline   { background: rgba(100,116,139,.15); color: #94a3b8; border: 1px solid rgba(100,116,139,.5); padding: 0 .5rem; border-radius: .375rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; }
.mode-validating { background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.5); padding: 0 .5rem; border-radius: .375rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; }

/* activity dots */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: .35rem; }
.dot-active { background: #34d399; box-shadow: 0 0 4px #34d399; animation: pulse 1.5s ease-in-out infinite; }
.dot-stale  { background: #fbbf24; }
.dot-dead   { background: #f87171; }
.dot-idle   { background: #64748b; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* page header with explanation */
.page-explain { background: rgba(56,189,248,.05); border-left: 3px solid #38bdf8; padding: .75rem 1rem; border-radius: .375rem; color: #cbd5e1; font-size: .8rem; line-height: 1.5; }
.page-explain b { color: #e2e8f0; }
.page-explain code { background: rgba(15,23,42,.6); padding: 0 .25rem; border-radius: .25rem; color: #fcd34d; }

/* freshness stamp */
.fresh-stamp { font-size: .7rem; color: #64748b; }
.fresh-ok    { color: #6ee7b7; }
.fresh-stale { color: #fbbf24; }
.fresh-dead  { color: #f87171; }

/* tooltip on pills */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; padding: .4rem .6rem; background: #0f172a; color: #cbd5e1; font-size: .7rem; border: 1px solid #334155; border-radius: .375rem; white-space: nowrap; z-index: 50; }