@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

:root {
  --bg: #050505;
  --panel: #090909;
  --panel-hi: #0d0d0d;
  --white: #f0f0ed;
  --text: #c6c6c2;
  --muted: #7b7b78;
  --line: #3d3d3b;
  --line-soft: #242422;
  --shadow: rgba(0, 0, 0, .68);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 42%, #131313 0, #080808 42%, #030303 78%),
    #030303;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .035em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  z-index: 20;
}

.ambient {
  position: fixed;
  width: 900px;
  height: 600px;
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  filter: blur(90px);
  animation: breathe 7s ease-in-out infinite alternate;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }

.browser-shell {
  width: min(1320px, calc(100vw - 80px));
  height: min(800px, calc(100vh - 40px));
  min-height: 620px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: rgba(6,6,6,.96);
  border: 1px solid #454543;
  border-radius: 13px;
  box-shadow: 0 40px 100px #000, inset 0 1px 0 rgba(255,255,255,.035);
  animation: shell-in .8s cubic-bezier(.2,.75,.15,1) both;
}

.browser-bar {
  height: 50px;
  display: grid;
  grid-template-columns: 104px 1fr 104px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(#0f0f0f, #090909);
}

.window-controls { display: flex; gap: 9px; padding-left: 17px; }
.window-controls i { width: 12px; height: 12px; border-radius: 50%; background: #9b9b99; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 1px 4px #000; }
.address-bar {
  height: 31px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  max-width: 1000px;
  color: #c7c7c4;
  border: 1px solid #3b3b39;
  border-radius: 10px;
  background: #101010;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.address-bar:hover, .address-bar:focus-visible { border-color: #686865; background: #141414; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); outline: 0; }
.address-icon, .copy-icon { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #92928f; }
.address-domain { color: #d2d2ce; }
.address-separator { color: #565653; }
.coming-soon { min-width: 0; overflow: hidden; color: #92928e; font-size: 9px; letter-spacing: .08em; white-space: nowrap; text-overflow: ellipsis; }
.copy-icon { margin-left: auto; opacity: .55; transition: opacity .2s ease, transform .2s ease; }
.address-bar:hover .copy-icon { opacity: 1; transform: translateY(-1px); }
.minimize { justify-self: end; padding-right: 18px; color: #9c9c99; }

.app-grid { height: calc(100% - 50px); display: grid; grid-template-columns: 228px 1fr; }
.sidebar {
  height: 100%;
  padding: 29px 16px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.brand { display: inline-block; margin-left: 9px; color: var(--white); font-size: 20px; letter-spacing: .09em; }
.brand-copy { margin: 10px 9px 0; color: #a3a3a0; font-size: 11px; line-height: 1.55; letter-spacing: .12em; }
.dash { width: 31px; height: 1px; margin: 24px 9px; background: #a4a4a1; }
.dash.short { margin-top: 20px; margin-bottom: 25px; width: 22px; }
.nav { display: grid; gap: 3px; }
.nav-item {
  min-height: 44px;
  padding: 0 13px;
  display: flex;
  gap: 14px;
  align-items: center;
  color: #bababa;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: .2s ease;
}
.nav-item:hover { color: white; transform: translateX(3px); background: #111; }
.nav-item.active { color: white; border-color: #272727; background: linear-gradient(90deg, #232323, #151515); }
.nav-icon { width: 18px; height: 18px; flex: 0 0 auto; color: #ededeb; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.nav-item:hover .nav-icon { transform: scale(1.08); }
.sidebar-foot { margin-top: auto; padding-left: 9px; }
.sidebar-foot .dash { margin-left: 0; }
.sidebar-foot p { color: #a6a6a3; font-size: 11px; line-height: 1.55; letter-spacing: .1em; }
.social-link { width: calc(100% - 8px); min-height: 34px; margin: 0 0 14px; padding: 0 9px; display: flex; align-items: center; gap: 9px; color: #a5a5a1; border: 1px solid #30302e; font-size: 8px; letter-spacing: .1em; transition: .2s ease; }
.social-link:hover { color: #080808; border-color: #e0e0dc; background: #e0e0dc; transform: translateX(2px); }
.social-link svg { width: 13px; height: 13px; fill: currentColor; }
.social-link i { margin-left: auto; font-style: normal; }
.version { color: #71716e; font-size: 9px; letter-spacing: .1em; }

.workspace { min-width: 0; padding: 0 18px 20px 16px; overflow: hidden; }
.topline {
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: #aaa9a6;
  font-size: 9px;
  letter-spacing: .14em;
}
.statusline { display: flex; align-items: center; gap: 14px; }
.statusline strong { color: inherit; font-weight: 400; }
.statusline b { width: 4px; height: 4px; border-radius: 50%; background: white; box-shadow: 0 0 8px rgba(255,255,255,.8); }
.statusline b.offline { background: #555; box-shadow: none; }
.content-grid { height: calc(100% - 64px); display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 14px; padding-top: 17px; }
.main-column { min-width: 0; display: grid; grid-template-rows: minmax(202px, 232px) 88px minmax(195px, 1fr); gap: 13px; padding-right: 0; }

.hero { display: grid; grid-template-columns: 1fr; align-items: center; min-width: 0; padding: 7px 14px 0; }
.eyebrow { color: #888885; font-size: 9px; letter-spacing: .13em; margin-bottom: 14px; }
.live-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: white; box-shadow: 0 0 8px white; animation: pulse 1.5s infinite; }
.idle-dot { display: inline-block; width: 6px; height: 6px; border: 1px solid #777; border-radius: 50%; vertical-align: 1px; }
h1 { margin: 0; color: #eee; font-size: clamp(36px, 3.3vw, 49px); font-weight: 300; line-height: 1.04; letter-spacing: .03em; text-shadow: 0 0 17px rgba(255,255,255,.08); }
.cursor { display: inline-block; width: .45em; height: .82em; margin-left: .2em; background: #eee; vertical-align: -.02em; box-shadow: 0 0 12px rgba(255,255,255,.3); animation: blink 1s steps(1) infinite; }
.hero-copy > p { margin: 14px 0 19px; color: #999995; font-size: 9px; letter-spacing: .06em; }
.hero-actions { display: flex; gap: 14px; }
.button {
  height: 40px;
  min-width: 155px;
  padding: 0 17px;
  border: 1px solid #6a6a67;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  letter-spacing: .04em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,255,255,.08); }
.button.primary { color: #080808; background: #ededeb; border-color: white; }
.button.primary:hover { background: white; box-shadow: 0 8px 32px rgba(255,255,255,.16); }
.button span { float: right; margin-left: 18px; }
.button.ghost { color: #d0d0cd; }


.steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.steps article { padding: 4px 14px; border-right: 1px solid var(--line); }
.steps article:last-child { border-right: 0; }
.step-line { display: block; width: 23px; height: 1px; margin-bottom: 13px; background: #b4b4b0; }
.steps h3 { margin: 0 0 8px; color: #d8d8d5; font-size: 13px; font-weight: 400; letter-spacing: .08em; }
.steps p { margin: 0; color: #aaa9a6; font-size: 11px; line-height: 1.55; }

.panel, .terminal { border: 1px solid #555552; background: rgba(8,8,8,.56); }
.panel-head {
  min-height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  color: #d1d1ce;
  font-size: 10px;
  letter-spacing: .08em;
}
.panel-head i, .terminal-head i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #ededeb; box-shadow: 0 0 8px rgba(255,255,255,.25); }
.terminal { min-height: 0; overflow: hidden; }
.terminal-head { min-height: 34px; }
.terminal-body { height: calc(100% - 75px); padding: 10px 14px 4px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.terminal-body > div { display: grid; grid-template-columns: 82px 88px 1fr; align-items: baseline; line-height: 1.28; animation: line-in .35s ease both; }
.terminal-body time { color: #90908d; }
.terminal-body b { color: #cacac7; font-weight: 500; }
.terminal-body span { min-width: 0; color: #a8a8a4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terminal-body em { color: #e6e6e2; font-style: normal; }
.terminal-prompt { height: 36px; margin: 0 12px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); color: #dfdfdc; }
.terminal-prompt i { display: inline-block; width: 7px; height: 15px; background: #ecece8; animation: blink 1s steps(1) infinite; }

.right-rail { min-width: 0; padding-left: 13px; border-left: 1px solid var(--line); display: grid; grid-template-rows: minmax(245px, .47fr) minmax(155px, .31fr) minmax(82px, .22fr); gap: 14px; }
.stat { min-height: 53px; position: relative; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.stat:last-child { border-bottom: 0; }
.stat > span { display: block; color: #8f8f8c; font-size: 9px; letter-spacing: .08em; }
.stat strong { display: block; margin-top: 5px; color: #dededb; font-size: 18px; font-weight: 400; letter-spacing: .03em; }
.stat small { position: absolute; right: 12px; bottom: 13px; color: #adadaa; font-size: 10px; }
.stat.featured { min-height: 54px; }
.stat.featured strong { font-size: 20px; }
.tiny-chart { position: absolute; right: 12px; bottom: 15px; height: 29px; display: flex; gap: 5px; align-items: end; }
.tiny-chart i { display: block; width: 6px; height: 30%; background: #999996; animation: bars 2.7s ease-in-out infinite alternate; }
.tiny-chart i:nth-child(2) { height: 42%; animation-delay: -.4s; }.tiny-chart i:nth-child(3) { height: 55%; animation-delay: -.8s;}.tiny-chart i:nth-child(4) { height: 68%; animation-delay: -1.2s;}.tiny-chart i:nth-child(5) { height: 60%; animation-delay: -1.6s;}.tiny-chart i:nth-child(6) { height: 81%; animation-delay: -2s;}.tiny-chart i:nth-child(7) { height: 100%; animation-delay: -2.4s;}
.leaderboard ol { list-style: none; margin: 0; padding: 0; }
.leaderboard li { height: 24px; display: grid; grid-template-columns: 22px 53px 1fr 34px; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line-soft); font-size: 10px; }
.leaderboard li:last-child { border: 0; }
.leaderboard li > span { color: #9b9b98; }
.leaderboard b { color: #c9c9c6; font-weight: 400; }
.leaderboard em { color: #bcbcb8; text-align: right; font-style: normal; }
.bar { height: 3px; background: #222; overflow: hidden; }
.bar i { display: block; width: var(--p); height: 100%; background: #cfcfcc; box-shadow: 0 0 6px rgba(255,255,255,.4); transition: width .7s ease; }
.protocol-card { padding: 13px 16px; }
.protocol-card p { margin: 0 0 10px; color: #a1a19d; font-size: 9px; letter-spacing: .08em; }
.split { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 6px; }
.split b { color: #e4e4e0; font-size: 17px; font-weight: 400; }
.split span { color: #7f7f7c; font-size: 8px; }
.mini-rule { width: 20px; height: 1px; margin: 12px 0 9px; background: #9a9a97; }
.protocol-card a { color: #d1d1ce; font-size: 10px; }
.system-row { min-height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid var(--line-soft); font-size: 8px; }
.system-row:last-child { border-bottom: 0; }.system-row span { color: #999995; }.system-row b { color: #666663; font-weight: 400; }
.agent-api-label { color: #dededb; font-size: 15px; letter-spacing: .08em; }
.featured-agent { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-bottom: 1px solid var(--line-soft); }
.featured-agent > div:last-child { display: grid; gap: 4px; }.featured-agent b { color: #ddd; font-size: 12px; font-weight: 400; }.featured-agent span { color: #777; font-size: 8px; }
.token-orb { width: 38px; height: 38px; display: grid; place-items: center; color: #080808; background: #dededb; border-radius: 50%; font-weight: 600; }
.rail-action { width: 100%; height: 31px; color: #cfcfcc; border: 0; border-top: 1px solid var(--line-soft); background: #0a0a0a; cursor: pointer; font-size: 8px; letter-spacing: .08em; }.rail-action:hover { color: #050505; background: #ddd; }

/* Routed application pages */
.content-grid.page-mode { grid-template-columns: 1fr; }
.content-grid.page-mode > .main-column,
.content-grid.page-mode > .right-rail { display: none; }
.app-page { grid-column: 1 / -1; min-width: 0; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #555 #111; animation: page-in .32s ease both; }
.app-page[hidden] { display: none; }
.page-wrap { min-height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.page-titlebar { min-height: 74px; display: flex; align-items: end; justify-content: space-between; padding: 4px 4px 15px; border-bottom: 1px solid var(--line); }
.page-kicker { margin-bottom: 8px; color: #777774; font-size: 9px; letter-spacing: .14em; }
.page-titlebar h2 { margin: 0; color: #e7e7e4; font-size: 30px; font-weight: 300; letter-spacing: .04em; }
.page-meta { color: #858582; font-size: 9px; text-align: right; line-height: 1.65; letter-spacing: .1em; }
.page-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(245px, .55fr); gap: 14px; }
.page-stack { min-height: 0; display: grid; gap: 14px; align-content: start; }
.page-panel { border: 1px solid #4b4b48; background: rgba(8,8,8,.7); }
.page-panel-body { padding: 16px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #4b4b48; }
.metric-box { min-height: 83px; padding: 13px; border-right: 1px solid var(--line); }
.metric-box:last-child { border-right: 0; }
.metric-box span { color: #777774; font-size: 8px; letter-spacing: .11em; }
.metric-box strong { display: block; margin-top: 10px; color: #e0e0dc; font-size: 19px; font-weight: 400; }
.metric-box small { display: block; margin-top: 5px; color: #777774; font-size: 8px; }
.puzzle-box { padding: 18px; }
.puzzle-box h3 { margin: 0 0 10px; color: #dededb; font-size: 16px; font-weight: 400; }
.puzzle-box p { margin: 0; color: #92928e; font-size: 11px; line-height: 1.75; }
.puzzle-sequence { margin-top: 17px; padding: 15px; color: #ddd; border: 1px dashed #555; font-size: 17px; letter-spacing: .16em; text-align: center; background: #050505; }
.race-table, .data-table { width: 100%; border-collapse: collapse; }
.race-table th, .data-table th { height: 35px; padding: 0 12px; color: #777; font-size: 8px; font-weight: 400; letter-spacing: .1em; text-align: left; border-bottom: 1px solid var(--line); }
.race-table td, .data-table td { height: 42px; padding: 0 12px; color: #b8b8b4; border-bottom: 1px solid var(--line-soft); }
.race-table tr:last-child td, .data-table tr:last-child td { border-bottom: 0; }
.race-table .rank { color: #777; width: 42px; }.race-table .token { color: #e2e2df; }
.race-table .progress-cell { width: 35%; }.race-table .bar { width: 100%; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; color: #bebeba; border: 1px solid #444; font-size: 8px; }
.status-pill::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #ddd; box-shadow: 0 0 6px white; }
.mini-terminal { min-height: 192px; padding: 13px; color: #969692; font-size: 10px; line-height: 1.75; }
.mini-terminal div { display: grid; grid-template-columns: 74px 58px 1fr; }.mini-terminal b { color: #c7c7c3; font-weight: 400; }

.launch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.launch-form { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.launch-form label { display: grid; gap: 8px; color: #888884; font-size: 8px; letter-spacing: .12em; }
.field-status { margin-top: -3px; display: flex; align-items: center; justify-content: space-between; color: #666663; font-size: 7px; letter-spacing: .1em; }
.field-status button { padding: 0; color: #999; border: 0; background: transparent; cursor: pointer; font-size: 7px; letter-spacing: .1em; }.field-status button:hover { color: #eee; }
.launch-form label.full, .launch-form .full { grid-column: 1 / -1; }
.launch-form input, .launch-form select, .launch-form textarea { width: 100%; min-height: 42px; padding: 11px 12px; resize: vertical; color: #dededb; border: 1px solid #41413f; outline: none; background: #090909; }
.launch-form textarea { min-height: 78px; line-height: 1.5; }
.launch-form input:focus, .launch-form select:focus, .launch-form textarea:focus { border-color: #aaa; }
.launch-form .button { grid-column: 1 / -1; width: 100%; }
.draft-state { min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: 1px solid #333; color: #6f6f6c; font-size: 8px; }.draft-state b { color: #aaa; font-weight: 400; }
.route-preview { padding: 15px; border: 1px solid #363634; color: #8a8a86; font-size: 9px; line-height: 1.7; }
.route-preview strong { color: #ddd; font-weight: 400; }
.launch-summary { padding: 17px; }
.summary-row { min-height: 49px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.summary-row span { color: #777; font-size: 9px; }.summary-row b { color: #d1d1cd; font-weight: 400; }
.allocation { margin-top: 17px; }
.allocation-bar { height: 8px; display: flex; background: #222; }
.allocation-bar i:nth-child(1) { width: 70%; background: #ddd; }.allocation-bar i:nth-child(2) { width: 15%; background: #888; }.allocation-bar i:nth-child(3) { width: 10%; background: #555; }.allocation-bar i:nth-child(4) { width: 5%; background: #333; }
.allocation-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; color: #868682; font-size: 8px; }
.allocation-legend b { display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: #bbb; }

.agent-controls { display: flex; gap: 10px; }
.compact-input { height: 36px; min-width: 210px; padding: 0 11px; color: #ddd; border: 1px solid #444; outline: 0; background: #090909; }
.filter-button { height: 36px; padding: 0 12px; border: 1px solid #444; background: #0a0a0a; cursor: pointer; }
.filter-button.active { color: #050505; background: #ddd; }
.agent-name { display: flex; align-items: center; gap: 10px; color: #dededa; }
.agent-avatar { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #555; font-size: 9px; }
.table-action { padding: 5px 9px; color: #ccc; border: 1px solid #444; background: transparent; cursor: pointer; font-size: 8px; }
.table-action:hover { color: #050505; background: #ddd; }

.pool-total { min-height: 166px; padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.pool-total span { color: #777; font-size: 9px; letter-spacing: .13em; }.pool-total strong { margin-top: 9px; color: #e4e4e0; font-size: 42px; font-weight: 300; }.pool-total small { margin-top: 8px; color: #888; }
.pool-chart { height: 130px; padding: 14px; display: flex; align-items: end; gap: 9px; border-top: 1px solid var(--line); }
.pool-chart i { flex: 1; min-height: 12%; background: linear-gradient(to top, #444, #bbb); transform-origin: bottom; animation: chart-in .7s ease both; }
.pool-chart i:nth-child(2n) { opacity: .7; }.pool-chart i:nth-child(3n) { opacity: .45; }
.wallet-line { word-break: break-all; color: #bbb; font-size: 10px; line-height: 1.65; }

.podium { min-height: 182px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; padding: 18px 28px 0; gap: 8px; }
.podium-item { display: grid; place-items: center; padding: 14px 8px; border: 1px solid #3e3e3c; border-bottom: 0; background: #0b0b0b; }
.podium-item:nth-child(2) { min-height: 148px; order: 1; }.podium-item:nth-child(1) { min-height: 112px; order: 0; }.podium-item:nth-child(3) { min-height: 92px; order: 2; }
.podium-item b { color: #e0e0dc; font-size: 15px; font-weight: 400; }.podium-item span { margin-top: 8px; color: #777; font-size: 9px; }

.protocol-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.flow-step { min-height: 122px; position: relative; padding: 16px 12px; border: 1px solid #444; }
.flow-step:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; z-index: 2; width: 18px; text-align: center; color: #aaa; background: #080808; }
.flow-step span { color: #6f6f6c; font-size: 9px; }.flow-step h3 { margin: 18px 0 8px; color: #d8d8d4; font-size: 12px; font-weight: 400; }.flow-step p { margin: 0; color: #888884; font-size: 9px; line-height: 1.55; }
.faq-row { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }.faq-row:last-child { border: 0; }.faq-row b { color: #cfcfcb; font-weight: 400; }.faq-row p { margin: 8px 0 0; color: #858581; font-size: 10px; line-height: 1.6; }
.empty-search { padding: 40px; color: #777; text-align: center; }
.integration-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.integration-row:last-child { border-bottom: 0; }
.integration-row div { display: grid; gap: 5px; }.integration-row b { color: #c9c9c5; font-size: 10px; font-weight: 400; }.integration-row span { color: #737370; font-size: 8px; }
.integration-row em { flex: 0 0 auto; color: #666663; font-size: 8px; font-style: normal; letter-spacing: .08em; }
.empty-state-large { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px; text-align: center; }
.empty-state-large h3 { margin: 9px 0 11px; color: #dededb; font-size: 19px; font-weight: 300; }.empty-state-large p { max-width: 560px; margin: 0; color: #858581; line-height: 1.7; }
.idle-ring { width: 42px; height: 42px; margin-bottom: 20px; border: 1px solid #474745; border-radius: 50%; box-shadow: inset 0 0 0 8px #0c0c0c; }
.manifest-grid { display: grid; grid-template-columns: 130px 1fr 130px 1fr; }
.manifest-grid span, .manifest-grid b { min-height: 42px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--line-soft); }
.manifest-grid span { color: #71716e; font-size: 8px; }.manifest-grid b { color: #bdbdb9; font-size: 10px; font-weight: 400; }
.note-panel { padding: 17px; }.note-panel p { margin: 0; color: #8b8b87; font-size: 10px; line-height: 1.7; }
.pool-empty { min-height: 185px; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.pool-empty > span { color: #777773; font-size: 9px; letter-spacing: .13em; }.pool-empty strong { margin: 9px 0; color: #dededb; font-size: 42px; font-weight: 300; }.pool-empty small { color: #777773; }
.empty-table { min-height: 132px; display: grid; place-items: center; color: #646461; font-size: 9px; letter-spacing: .11em; }
.online-text { color: #e6e6e2 !important; }
.live-epoch-panel { overflow: hidden; }
.run-epoch-button { width: 100%; min-width: 0; }
.run-epoch-button:disabled { cursor: wait; opacity: .72; transform: none; }
.button-spinner { width: 11px; height: 11px; float: right; border: 1px solid #111; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.epoch-runner { min-height: 49px; padding: 12px 18px; display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--line); background: #070707; }
.epoch-runner > span { flex: 0 0 110px; color: #d0d0cc; font-size: 8px; letter-spacing: .12em; }
.epoch-runner > p { margin: 0; color: #767672; font-size: 9px; }
.epoch-results-head { min-height: 28px; display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; color: #747470; font-size: 8px; letter-spacing: .1em; }
.epoch-results-head b { color: #dededa; font-weight: 400; }
.epoch-runner:has(.epoch-result) { display: grid; gap: 0; padding-block: 7px; }
.epoch-result { min-height: 34px; display: grid; grid-template-columns: 170px minmax(0, 1fr) 74px 75px; gap: 10px; align-items: center; border-top: 1px solid #20201e; color: #747470; font-size: 8px; }
.epoch-result > span { color: #b5b5b1; }.epoch-result code { min-width: 0; overflow: hidden; color: #81817d; font-family: inherit; white-space: nowrap; text-overflow: ellipsis; }
.epoch-result b { font-weight: 400; }.epoch-result.verified b { color: #ededE9; }.epoch-result time { text-align: right; }
.reward-receipt { border-top: 1px solid #4d4d49; background: linear-gradient(90deg, #121212, #090909); animation: page-in .35s ease both; }
.receipt-head { display: grid; grid-template-columns: 1fr 1fr 1.4fr; }
.receipt-head > div { min-height: 58px; padding: 12px 16px; display: grid; gap: 7px; border-right: 1px solid var(--line); }.receipt-head > div:last-child { border-right: 0; }
.receipt-head span { color: #6d6d69; font-size: 7px; letter-spacing: .12em; }.receipt-head strong { color: #e2e2de; font-size: 11px; font-weight: 400; }.receipt-head code { color: #aaa9a5; font-family: inherit; font-size: 9px; }
.receipt-holders { border-top: 1px solid var(--line-soft); }
.receipt-holders > div { min-height: 32px; display: grid; grid-template-columns: 1fr 70px 130px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line-soft); font-size: 8px; }.receipt-holders > div:last-child { border-bottom: 0; }
.receipt-holders span { color: #858581; }.receipt-holders b { color: #aaa; font-weight: 400; }.receipt-holders strong { color: #dededa; font-weight: 400; text-align: right; }
.race-command { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 10px 13px; border: 1px solid #444; background: rgba(8,8,8,.68); }
.race-command > div { display: flex; align-items: center; gap: 8px; }
.race-command b { color: #d9d9d5; font-weight: 400; font-size: 10px; }
.race-command small { margin-left: 10px; color: #777773; font-size: 8px; }
.race-command .compact-input { width: min(330px, 42%); }
.race-catalog-panel { min-height: 330px; }
.race-catalog { display: grid; }
.catalog-loading { min-height: 265px; display: grid; place-items: center; color: #6f6f6b; font-size: 9px; letter-spacing: .12em; }
.race-token-card { min-height: 92px; display: grid; grid-template-columns: 36px 54px minmax(170px, 1fr) minmax(125px, .55fr) minmax(125px, .55fr) 88px; gap: 12px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--line-soft); outline: 0; cursor: pointer; transition: .2s ease; }
.race-token-card:last-child { border-bottom: 0; }
.race-token-card:hover, .race-token-card:focus-visible { background: #121212; box-shadow: inset 2px 0 #ddd; }
.race-position { color: #666662; font-size: 9px; }
.race-token-icon { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; color: #080808; border-radius: 50%; background: #dededb; font-weight: 600; }
.race-token-icon img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); }
.race-token-name { min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.race-token-name strong { color: #ededE9; font-size: 15px; font-weight: 400; }
.race-token-name span { min-width: 0; color: #8d8d89; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-token-name small { grid-column: 1 / -1; margin-top: 8px; color: #686864; font-size: 8px; letter-spacing: .08em; }
.race-market { display: grid; gap: 5px; }
.race-market span { color: #666662; font-size: 7px; letter-spacing: .12em; }
.race-market b { color: #d0d0cc; font-size: 12px; font-weight: 400; }
.race-market small { color: #777773; font-size: 8px; }
.race-market small.positive { color: #c8c8c4; }.race-market small.negative { color: #8a8a86; }
.back-link { margin: 0 0 8px; padding: 0; color: #83837f; border: 0; background: transparent; cursor: pointer; font-size: 8px; letter-spacing: .1em; }
.back-link:hover { color: #eee; }
.race-live-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .45fr); gap: 14px; }
.market-chart-panel { min-height: 350px; }
.market-chart-panel .panel-head a { color: #888; font-size: 8px; }
.chart-frame { height: 315px; position: relative; overflow: hidden; background: #050505; }
.chart-frame iframe { width: 100%; height: 100%; position: relative; z-index: 2; border: 0; filter: grayscale(1) contrast(1.15); }
.chart-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #666; font-size: 9px; letter-spacing: .1em; }
.agent-card { min-height: 350px; }
.agent-identity { min-height: 108px; display: flex; align-items: center; gap: 14px; padding: 15px; border-bottom: 1px solid var(--line); }
.agent-identity h3 { margin: 0 0 6px; color: #e1e1dd; font-size: 22px; font-weight: 300; }.agent-identity p { margin: 0; color: #777; font-size: 8px; word-break: break-all; }
.token-image-wrap { width: 62px; height: 62px; position: relative; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #555; border-radius: 50%; color: #080808; background: #ddd; }
.token-image-wrap img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: grayscale(1) contrast(1.1); }.token-image-wrap img:not([src]) { display: none; }
.trace-panel { min-height: 220px; }
.watch-console { height: 157px; padding: 11px 14px; overflow: hidden; }
.watch-console > div { display: grid; grid-template-columns: 86px 68px 1fr; min-height: 20px; align-items: center; animation: line-in .3s ease both; font-size: 10px; }
.watch-console time { color: #6f6f6c; }.watch-console b { color: #c8c8c4; font-weight: 400; }.watch-console span { color: #92928e; }
.trace-foot { min-height: 30px; display: flex; justify-content: space-between; align-items: center; padding: 0 13px; border-top: 1px solid var(--line); color: #696966; font-size: 8px; }.trace-foot b { color: #bbb; font-weight: 400; }
.payout-flow { display: grid; grid-template-columns: repeat(3, 1fr); }
.payout-flow > div { min-height: 150px; padding: 20px; border-right: 1px solid var(--line); }.payout-flow > div:last-child { border-right: 0; }
.payout-flow span { color: #666; }.payout-flow b { display: block; margin: 24px 0 10px; color: #d5d5d1; font-weight: 400; }.payout-flow p { margin: 0; color: #81817d; font-size: 9px; line-height: 1.6; }
.agent-access-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; align-content: start; }
.skill-card { min-height: 330px; }.skill-intro { display: flex; gap: 18px; align-items: center; padding: 22px; }.skill-intro h3 { margin: 0 0 9px; color: #dfdfdb; font-size: 18px; font-weight: 300; }.skill-intro p { margin: 0; color: #858581; font-size: 10px; line-height: 1.7; }
.skill-file-icon { width: 62px; height: 76px; flex: 0 0 auto; display: grid; place-items: center; color: #050505; background: #ddd; font-size: 16px; clip-path: polygon(0 0, 73% 0, 100% 22%, 100% 100%, 0 100%); }
.skill-command { margin: 0 22px; min-height: 48px; display: flex; align-items: center; gap: 11px; padding: 0 14px; color: #aaa; border: 1px solid #41413f; background: #050505; }.skill-command span { color: #666; }.skill-command code { color: #cfcfcb; font-family: inherit; font-size: 10px; }
.skill-actions { display: flex; gap: 12px; padding: 18px 22px 22px; }.skill-actions .button { flex: 1; display: flex; align-items: center; justify-content: center; }
.api-flow ol { margin: 0; padding: 0; list-style: none; }.api-flow li { min-height: 58px; display: grid; grid-template-columns: 44px 1fr; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line-soft); }.api-flow li:last-child { border-bottom: 0; }
.api-flow li > span { color: #646461; }.api-flow li div { display: grid; gap: 5px; }.api-flow b { color: #c7c7c3; font-size: 9px; font-weight: 400; }.api-flow code { color: #71716e; font-family: inherit; font-size: 8px; }
.machine-note { min-height: 145px; padding: 20px; }.machine-note > span { color: #666; font-size: 8px; }.machine-note h3 { margin: 16px 0 9px; color: #d3d3cf; font-size: 15px; font-weight: 300; }.machine-note p { margin: 0; color: #858581; font-size: 9px; line-height: 1.65; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 14px; }
.admin-login { max-width: 620px; margin: 34px auto 0; }
.admin-login form { padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: end; }
.admin-login form > div { grid-row: span 2; }
.admin-login h3 { margin: 8px 0; color: #e2e2de; font-size: 23px; font-weight: 300; }
.admin-login p { max-width: 350px; margin: 0; color: #888884; font-size: 9px; line-height: 1.7; }
.admin-login label { display: grid; gap: 7px; color: #747470; font-size: 8px; letter-spacing: .1em; }
.admin-login input { width: 100%; min-height: 40px; padding: 9px 11px; color: #dededa; border: 1px solid #3e3e3b; outline: 0; background: #080808; }
.admin-login input:focus { border-color: #aaa; }
.admin-login small { min-height: 12px; grid-column: 2; color: #d07d7d; font-size: 8px; letter-spacing: .08em; }
[hidden] { display: none !important; }
.admin-form-body { padding: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-form-body label, .reward-control label { display: grid; gap: 7px; color: #747470; font-size: 8px; letter-spacing: .1em; }
.admin-form-body label.full, .admin-form-body .full { grid-column: 1 / -1; }
.admin-form-body input, .admin-form-body textarea, .reward-control input { width: 100%; min-height: 38px; padding: 9px 10px; color: #dededa; border: 1px solid #3e3e3b; outline: 0; background: #080808; }
.admin-form-body textarea { min-height: 72px; resize: vertical; font: inherit; }
.admin-form-body input:focus, .admin-form-body textarea:focus, .reward-control input:focus { border-color: #999; }
.admin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); }
.admin-kpis > div { min-height: 92px; padding: 15px 12px; display: grid; align-content: center; gap: 10px; border-right: 1px solid var(--line); }.admin-kpis > div:last-child { border-right: 0; }
.admin-kpis span { color: #6d6d69; font-size: 7px; letter-spacing: .1em; }.admin-kpis strong { color: #dededa; font-size: 24px; font-weight: 300; }
.admin-note { padding: 16px; color: #858581; border-top: 1px solid var(--line); font-size: 9px; line-height: 1.65; }
.admin-reward-card { border-bottom: 1px solid #50504c; }.admin-reward-card:last-child { border-bottom: 0; }
.reward-overview { display: grid; grid-template-columns: 1fr 1fr .55fr .55fr; }
.reward-overview > div { min-height: 58px; padding: 11px 13px; display: grid; gap: 7px; border-right: 1px solid var(--line-soft); }.reward-overview > div:last-child { border-right: 0; }
.reward-overview span { color: #656561; font-size: 7px; letter-spacing: .11em; }.reward-overview b { min-width: 0; overflow: hidden; color: #c5c5c1; font-size: 9px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.reward-status { color: #bcbcb8 !important; }.reward-status.paid { color: #ededE9 !important; }
.admin-holder-list { border-top: 1px solid var(--line-soft); }
.admin-holder-list > div { min-height: 34px; display: grid; grid-template-columns: minmax(0,1fr) 55px 100px 48px 42px; gap: 10px; align-items: center; padding: 0 13px; border-bottom: 1px solid #1c1c1a; font-size: 8px; }
.admin-holder-list code { overflow: hidden; color: #868682; font-family: inherit; white-space: nowrap; text-overflow: ellipsis; }.admin-holder-list span { color: #777; }.admin-holder-list b { color: #bbb; font-weight: 400; text-align: right; }
.admin-holder-list button { color: #888; border: 0; background: transparent; cursor: pointer; font-size: 7px; }.admin-holder-list button:hover { color: #eee; }
.admin-holder-list > .holder-overflow { display: flex; justify-content: center; color: #777; letter-spacing: .08em; }
.admin-pay-button { padding: 5px 6px; color: #080808; background: #dededa; text-align: center; font-size: 7px; }.admin-pay-button.disabled { color: #555; pointer-events: none; background: #1d1d1b; }
.reward-control { padding: 12px 13px; display: grid; grid-template-columns: 120px repeat(4, minmax(76px, 1fr)); gap: 9px; align-items: end; background: #070707; }
.reward-control .signature-field { grid-column: 1 / -2; }
.reward-control .table-action { min-height: 38px; }.paid-action { color: #050505; background: #ddd; }
.table-action:disabled { cursor: not-allowed; opacity: .35; }

@keyframes page-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes chart-in { from { transform: scaleY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

.launch-modal { width: min(490px, calc(100vw - 40px)); padding: 0; color: var(--text); border: 1px solid #6a6a67; border-radius: 2px; background: #080808; box-shadow: 0 30px 90px #000; }
.launch-modal::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(5px); }
.launch-modal header { height: 45px; padding-left: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: #ddd; }
.launch-modal header button { width: 44px; height: 44px; color: #aaa; border: 0; border-left: 1px solid var(--line); background: transparent; cursor: pointer; }
.modal-body { display: grid; gap: 18px; padding: 22px; }
.modal-body label { display: grid; gap: 8px; color: #8e8e8b; font-size: 9px; letter-spacing: .12em; }
.modal-body input, .modal-body select { width: 100%; height: 42px; padding: 0 12px; color: #e0e0dd; border: 1px solid #4b4b48; outline: none; background: #0c0c0c; }
.modal-body input:focus, .modal-body select:focus { border-color: #aaa; box-shadow: 0 0 0 1px #aaa; }
.routing { padding: 13px; border: 1px solid #333; display: flex; justify-content: space-between; gap: 12px; font-size: 9px; }
.routing span { color: #777; }.routing b { color: #d4d4d0; font-weight: 400; }
.modal-submit { width: 100%; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 30; padding: 11px 16px; color: #050505; background: #ededeb; transform: translate(-50%, 80px); opacity: 0; transition: .3s ease; box-shadow: 0 10px 35px #000; font-size: 10px; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@keyframes shell-in { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes breathe { to { transform: scale(1.12); opacity: .65; } }
@keyframes blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; box-shadow: 0 0 2px white; } }
@keyframes line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes bars { to { transform: scaleY(.56); opacity: .55; } }

@media (max-width: 1050px) {
  .browser-shell { width: calc(100vw - 32px); height: calc(100vh - 32px); min-height: 620px; }
  .app-grid { grid-template-columns: 190px 1fr; }
  .content-grid { grid-template-columns: minmax(0,1fr) 230px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy > p { max-width: 470px; }
}

@media (max-width: 820px) {
  body { display: block; }
  .browser-shell { width: 100%; height: auto; min-height: 100vh; border: 0; border-radius: 0; overflow: visible; }
  .browser-bar { position: sticky; top: 0; z-index: 10; grid-template-columns: 80px 1fr 35px; }
  .app-grid { display: block; }
  .sidebar { height: auto; padding: 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-copy, .sidebar > .dash, .sidebar-foot { display: none; }
  .nav { margin-top: 18px; display: flex; overflow-x: auto; }
  .nav-item { flex: 0 0 auto; min-height: 38px; }
  .workspace { overflow: visible; padding: 0 14px 30px; }
  .content-grid { height: auto; display: block; }
  .main-column { display: block; }
  .hero { min-height: 330px; grid-template-columns: 1fr; }
  .steps { margin: 10px 0 20px; }
  .terminal { height: 310px; }
  .right-rail { margin-top: 16px; padding-left: 0; border-left: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .protocol-card { grid-column: span 2; }
  .page-grid, .launch-layout, .admin-grid { grid-template-columns: 1fr; }
  .race-live-grid, .agent-access-grid { grid-template-columns: 1fr; }
  .race-token-card { grid-template-columns: 30px 48px minmax(145px, 1fr) minmax(110px, .5fr) 82px; }
  .race-token-card .race-market:nth-of-type(5) { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-box:nth-child(2) { border-right: 0; }.metric-box:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .protocol-flow { grid-template-columns: 1fr; }.flow-step:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -14px; }
}

@media (max-width: 600px) {
  .window-controls { gap: 6px; padding-left: 10px; }.window-controls i { width: 9px; height: 9px; }
  .address-bar { font-size: 9px; }
  .topline { height: 50px; }.topline > div:first-child { display: none; }
  .statusline { width: 100%; justify-content: center; font-size: 8px; }
  .hero { min-height: 390px; display: block; padding-top: 40px; }
  h1 { font-size: 38px; position: relative; z-index: 1; }
  .hero-actions { position: relative; z-index: 1; flex-direction: column; align-items: stretch; max-width: 260px; }
  .steps { grid-template-columns: 1fr; }
  .steps article { padding: 16px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .terminal-body > div { grid-template-columns: 74px 64px 1fr; font-size: 9px; }
  .right-rail { grid-template-columns: 1fr; }.protocol-card { grid-column: auto; }
  .page-titlebar { align-items: start; flex-direction: column; }.page-meta { text-align: left; }
  .launch-form { grid-template-columns: 1fr; }.launch-form label.full, .launch-form .full, .launch-form .button { grid-column: auto; }
  .agent-controls { width: 100%; flex-wrap: wrap; }.compact-input { width: 100%; }
  .race-command { align-items: stretch; flex-direction: column; }.race-command > div { flex-wrap: wrap; }.race-command small { width: 100%; margin-left: 14px; }.race-command .compact-input { width: 100%; }
  .epoch-result { grid-template-columns: 1fr 68px 65px; }.epoch-result code { grid-column: 1 / -1; grid-row: 2; }.receipt-head { grid-template-columns: 1fr; }.receipt-head > div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .race-token-card { grid-template-columns: 26px 43px minmax(120px, 1fr) 76px; gap: 8px; padding-inline: 9px; }
  .race-token-card .race-market { display: none; }
  .payout-flow { grid-template-columns: 1fr; }.payout-flow > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .skill-actions { flex-direction: column; }.skill-command { overflow-x: auto; }
  .admin-form-body { grid-template-columns: 1fr; }.admin-form-body label.full, .admin-form-body .full { grid-column: auto; }
  .admin-login form { grid-template-columns: 1fr; }.admin-login form > div { grid-row: auto; }.admin-login small { grid-column: auto; }
  .reward-overview { grid-template-columns: 1fr 1fr; }.reward-overview > div:nth-child(2) { border-right: 0; }
  .reward-control { grid-template-columns: 1fr 1fr; }.reward-control .signature-field { grid-column: 1 / -1; }
  .data-table { min-width: 680px; }
  .page-panel.table-scroll { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}