/* PONCLAW - console */
.console{padding:22px 0 40px;position:relative;z-index:1}

/* --------------------------------------------------------------- topstrip */
.strip{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-radius:var(--r);border:1px solid var(--glass-line);
  background:var(--glass-bg);box-shadow:var(--glass-hi);margin-bottom:16px;
}
.agent-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:200px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:13px;font-weight:600;
  transition:border-color .15s ease,background .15s ease;
}
.chip:hover{border-color:var(--line)}
.chip.on{border-color:var(--line-hot);background:rgba(212,252,80,.14);color:var(--acc)}
.chip .eq{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-3)}
.chip.on .eq{color:rgba(212,252,80,.8)}

/* ------------------------------------------------------------------- tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-soft);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease;
}
.tab:hover{color:var(--ink-2)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.tab .n{
  display:inline-block;margin-left:7px;padding:1px 6px;border-radius:999px;
  background:rgba(255,199,90,.16);color:var(--warn);font-family:var(--mono);font-size:10px;
}
.panel[hidden]{display:none}

/* ------------------------------------------------------------------ grids */
.g2{display:grid;grid-template-columns:1.35fr .85fr;gap:16px;align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.g2,.g3{grid-template-columns:1fr}}

.box{
  padding:20px;border-radius:var(--r);border:1px solid var(--glass-line);
  background:var(--glass-bg);box-shadow:var(--glass-hi);position:relative;
}
/* wireframe corner ticks, same recipe as the landing panels */
.box::before,.box::after{
  content:"";position:absolute;width:11px;height:11px;pointer-events:none;
  border:1px solid var(--line-hot);opacity:.22;
}
.box::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:var(--r)}
.box::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:var(--r)}
.box-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.box-head h3{margin:0;font-size:15px;letter-spacing:-.01em}
.box-head .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kpi{
  padding:15px;border-radius:13px;border:1px solid var(--glass-line);background:var(--glass-bg);
  box-shadow:var(--glass-hi);
}
.kpi .v{font-size:20px;font-weight:800;letter-spacing:-.03em}
.kpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}
@media(max-width:700px){.kpis{grid-template-columns:1fr 1fr}}

/* ----------------------------------------------------------------- tables */
/* ⚠ body has overflow-x:hidden, so a table that is too wide is CLIPPED, not
   scrolled, and no page level overflow check can see it. Every table lives in
   its own scroller instead. */
.scrollx{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.scrollx::-webkit-scrollbar{height:6px}
.scrollx::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
/* ⚠ `width:100%` together with `min-width:max-content` is a cyclic sizing
   dependency: the max-content pass runs with the percentage still in play and
   comes back inflated, which stretched every console table to roughly 2.4x
   the width its content needed. The correct idiom is the inverse pair. */
.tbl{width:max-content;min-width:100%;border-collapse:collapse;font-size:13px}
.tbl td,.tbl th{white-space:nowrap}
.tbl td:not(.num):not(.sym){white-space:normal}
.tbl th{
  text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:0 10px 10px;
}
.tbl td{padding:10px;border-top:1px solid var(--line-soft);color:var(--ink-2)}
.tbl td.sym{font-family:var(--mono);color:var(--ink);font-weight:600}
.tbl td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.tbl th.num{text-align:right}
.tbl tr:hover td{background:rgba(255,255,255,.015)}
.empty{padding:26px 10px;text-align:center;color:var(--ink-3);font-size:13px}

/* ----------------------------------------------------------------- market */
.mkt{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.mkt{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mkt{grid-template-columns:1fr}}
.mkt-card{
  padding:16px;border-radius:14px;border:1px solid var(--glass-line);background:var(--glass-bg);
  cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.mkt-card:hover{border-color:var(--line-hot)}
.mkt-card.on{border-color:var(--acc);background:rgba(212,252,80,.07)}
.mkt-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mkt-card .s{font-family:var(--mono);font-weight:700;letter-spacing:.05em}
.mkt-card .p{font-size:19px;font-weight:800;letter-spacing:-.025em;margin-top:9px}
.mkt-card .spark{margin-top:10px;height:34px;width:100%;display:block}

/* ------------------------------------------------------------------ forms */
.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line-soft);
  background:rgba(0,0,0,.35);color:var(--ink);font-size:13.5px;outline:none;
  transition:border-color .15s ease;
}
.field textarea{font-family:var(--mono);font-size:12.5px;line-height:1.7;resize:vertical;min-height:150px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--acc)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:inline-flex;border:1px solid var(--line-soft);border-radius:999px;overflow:hidden}
.seg button{padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.seg button.on{background:var(--acc);color:#101208}

/* -------------------------------------------------------------- approvals */
.approve-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 16px;margin-bottom:16px;
  border-radius:var(--r);border:1px solid rgba(245,196,81,.4);background:rgba(245,196,81,.09);
}
.approve-bar .t{font-size:13.5px;color:var(--warn);flex:1;min-width:180px}

/* -------------------------------------------------------------------- log */
.log{max-height:430px;overflow:auto;font-family:var(--mono);font-size:11.8px;line-height:1.65}
.log-row{display:flex;gap:9px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.log-row .ts{color:var(--ink-3);flex:none}
.log-row .who{color:var(--ink-3);flex:none;width:74px;overflow:hidden;text-overflow:ellipsis}
.log-row .msg{color:var(--ink-2);word-break:break-word}
.lv-buy .msg,.lv-ok .msg,.lv-rule .msg,.lv-deploy .msg,.lv-fill .msg{color:var(--acc)}
.lv-sell .msg{color:#8ab4f8}
.lv-warn .msg,.lv-hold .msg,.lv-loss .msg{color:var(--warn)}
.lv-block .msg{color:var(--bad)}

/* --------------------------------------------------------------- terminal */
.shell{
  border-radius:var(--r);border:1px solid var(--glass-line);overflow:hidden;
  background:var(--glass-bg);box-shadow:var(--glass-hi);
}
.shell-body{
  padding:18px;font-family:var(--mono);font-size:12.4px;line-height:1.7;
  height:min(58vh,520px);overflow:auto;white-space:pre-wrap;word-break:break-word;color:var(--ink-2);
  background:rgba(0,0,0,.28);
}
.shell-body .g{color:var(--acc)}
.shell-body .c{color:var(--ink-3)}
.shell-body .w{color:var(--ink)}
.shell-body .bad{color:var(--bad)}
.shell-body .warn{color:var(--warn)}
.shell-body .good{color:var(--acc)}
.shell-in{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line-soft);background:rgba(255,255,255,.04)}
.shell-in span{font-family:var(--mono);font-size:12.4px;color:var(--acc);flex:none}
.shell-in input{flex:1;background:none;border:0;outline:none;font-family:var(--mono);font-size:12.4px;color:var(--ink)}

/* ------------------------------------------------------------------- mcp */
.tool-card{
  padding:14px 16px;border-radius:13px;border:1px solid var(--glass-line);background:var(--glass-bg);
  margin-bottom:9px;
}
.tool-card .n{font-family:var(--mono);font-size:12.5px;color:var(--acc)}
.tool-card .d{font-size:12.5px;color:var(--ink-2);margin-top:5px}
.tool-card .s{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:7px;word-break:break-word}
.out{
  font-family:var(--mono);font-size:11.8px;line-height:1.65;white-space:pre-wrap;word-break:break-word;
  background:rgba(0,0,0,.4);border:1px solid var(--line-soft);border-radius:10px;padding:14px;
  max-height:330px;overflow:auto;color:var(--ink-2);
}

/* ------------------------------------------------------------------ toast */
.toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:grid;gap:9px;max-width:min(360px,86vw)}
.toast{
  padding:12px 15px;border-radius:13px;border:1px solid var(--line);background:rgba(20,20,20,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:13px;color:var(--ink);box-shadow:0 18px 44px -22px #000;animation:tin .22s ease;
}
.toast.bad{border-color:rgba(255,122,122,.5)}
.toast.warn{border-color:rgba(245,196,81,.5)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:rgba(6,6,6,.72);backdrop-filter:blur(8px)}
.modal[hidden]{display:none}
.modal .card{width:min(520px,100%);padding:26px;max-height:88vh;overflow:auto}
.modal h3{margin:0 0 4px;font-size:19px;letter-spacing:-.025em}

/* wallet rows in the sign in sheet */
.wal-btn{
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:left;
  transition:border-color .15s ease,background .15s ease;
}
.wal-btn:hover{border-color:var(--line-hot);background:rgba(212,252,80,.07)}
.wal-btn .t{flex:1}
.wal-btn .t b{display:block;font-size:14px;font-weight:600}
.wal-btn .t span{font-size:12px;color:var(--ink-2)}
.wal-btn .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-hot);color:var(--acc);background:rgba(212,252,80,.1)}
.wal-btn .ic svg{width:17px;height:17px}
.wal-btn > svg{width:15px;height:15px;color:var(--ink-3)}

/* ----------------------------------------------------------- first run */
.firstrun{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-bottom:16px;border-color:var(--line-hot);
  background:linear-gradient(180deg,rgba(212,252,80,.08),rgba(255,255,255,.025));
}
.firstrun .fr-go{display:flex;gap:9px;flex-wrap:wrap}
.firstrun .h3{letter-spacing:-.025em}

/* --------------------------------------------------------- leaderboard */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:18px}
.podium:empty{display:none}
@media(max-width:760px){.podium{grid-template-columns:1fr}}
.pod{
  position:relative;padding:16px;border-radius:14px;overflow:hidden;
  border:1px solid var(--glass-line);background:var(--glass-bg);
}
.pod.p1{border-color:var(--line-hot);background:linear-gradient(180deg,rgba(212,252,80,.10),rgba(25,25,25,.8))}
.pod-rank{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.pod.p1 .pod-rank{color:var(--acc)}
.pod-name{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-top:8px}
.pod-model{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px}
.pod-ret{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-top:11px}
.pod-sub{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:5px}
.pod-spark{margin-top:10px;height:30px;width:100%;display:block}

.lb-name{display:flex;align-items:center;gap:8px}
.lb-name b{font-weight:600}
.lb-you{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 6px;border-radius:99px;border:1px solid var(--line-hot);color:var(--acc);
}
.lb-spark{width:78px;height:22px;display:block}
.lb-rank{font-family:var(--mono);color:var(--ink-3);width:1%}
.lb-rank.top{color:var(--acc)}
.lb-sub{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:2px}
.lb-th2{font-size:9px;letter-spacing:.12em;color:var(--ink-3);opacity:.7;text-transform:none}

/* what a fill will actually cost, before committing to it */
.qt-est{
  display:grid;gap:5px;padding:12px 14px;border-radius:11px;
  border:1px dashed var(--line);background:rgba(255,255,255,.02);
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
}
.qt-est div{display:flex;justify-content:space-between;gap:12px}
.qt-est b{color:var(--ink);font-weight:400}
.qt-est .warn-row b{color:var(--warn)}