/* ============================================================
   FlashDex — Live Trading Terminal
   ------------------------------------------------------------
   Layered on top of flashdex.css. That sheet owns the design
   tokens, the app bar, the buttons and the footer, so the
   terminal is guaranteed to match the landing page exactly.
   This file only adds what a dashboard needs.

   Colour semantics, used consistently:
     gold      (--secondary)  live / in-flight / pending
     emerald   (--primary)    brand, links, interactive
     green     (--tertiary)   realised positive value
     red       (--error)      negative
   ============================================================ */

/* ------------------------------------------------------------
   Page frame
   ------------------------------------------------------------ */
.term{padding-block:var(--s6) var(--s8);}
.term .wrap{max-width:1320px;}

.term-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s3) var(--s5);margin-bottom:var(--s5);
}
.term-head h1{margin:var(--s2) 0 10px;}
.term-head .sub{max-width:62ch;}

.term-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none;}
.clock{
  font-family:var(--mono);font-size:15px;color:var(--on-surface);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.srcnote{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-surface-variant);border:1px solid var(--outline-variant);
  border-radius:var(--shape-full);padding:5px 11px;white-space:nowrap;
}
.srcnote.ok{color:var(--tertiary);border-color:rgba(74,222,128,.34);}
.srcnote.bad{color:var(--error);border-color:rgba(255,110,110,.4);background:var(--error-container);}

/* Live badge — gold, because it means "something is happening now" */
.live-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);
}
.live-badge .lv{
  width:8px;height:8px;border-radius:50%;background:var(--secondary);
  box-shadow:0 0 0 0 rgba(245,183,76,.7);animation:lvPulse 1.7s ease-out infinite;
}
@keyframes lvPulse{
  70%{box-shadow:0 0 0 10px rgba(245,183,76,0);}
  100%{box-shadow:0 0 0 0 rgba(245,183,76,0);}
}

/* ------------------------------------------------------------
   Panels
   ------------------------------------------------------------ */
.panel{
  background:var(--surface-container-low);
  border:1px solid var(--outline-variant);
  border-radius:var(--shape-m);
  padding:var(--s3);
  min-width:0;
}
.panel.mt{margin-top:var(--s3);}
.panel-h{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap;
}
.panel-h h2{font-size:clamp(16px,1.4vw,20px);font-weight:500;letter-spacing:-.01em;}
.tag{
  font-family:var(--mono);font-size:11px;color:var(--on-surface-variant);
  white-space:nowrap;
}

/* ------------------------------------------------------------
   KPI tiles
   ------------------------------------------------------------ */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);}
.kpi{
  background:var(--surface-container-low);
  border:1px solid var(--outline-variant);
  border-radius:var(--shape-m);padding:var(--s3);min-width:0;overflow:hidden;
}
.kl{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-surface-variant);
}
.kv{
  margin-top:10px;color:var(--on-surface);
  font-size:clamp(20px,2.2vw,30px);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kv.sm{font-size:clamp(15px,1.3vw,18px);font-weight:500;letter-spacing:0;}
.kv a{color:var(--primary);}
.kv a:hover{text-decoration:underline;text-underline-offset:3px;}
.kd{margin-top:8px;color:var(--outline);font-family:var(--mono);font-size:11px;}

/* Tighter tiles inside the flash-loan panel */
.fl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:var(--s3);}
.fl-kpi{
  background:rgba(255,255,255,.025);border:1px solid var(--outline-variant);
  border-radius:var(--shape-s);padding:12px 13px;min-width:0;overflow:hidden;
}
.fl-kpi .kv{margin-top:5px;font-size:19px;}
.fl-kpi .kv.sm{font-size:14px;}
.fl-kpi .kd{margin-top:5px;}

/* ------------------------------------------------------------
   Chain switch
   ------------------------------------------------------------ */
.chain-switch{
  display:inline-flex;gap:3px;padding:3px;flex:none;
  border:1px solid var(--outline-variant);border-radius:var(--shape-full);
  background:rgba(255,255,255,.03);
}
.chain-btn{
  border:0;border-radius:var(--shape-full);padding:6px 12px;background:transparent;
  color:var(--on-surface-variant);font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;transition:.16s var(--ease);
}
.chain-btn:hover{color:var(--on-surface);}
.chain-btn.on{background:var(--primary);color:var(--on-primary);}
.chain-btn.on:hover{color:var(--on-primary);}

/* ------------------------------------------------------------
   Feeds
   ------------------------------------------------------------ */
.feed{display:flex;flex-direction:column;}
.feed-head,.feed-row{
  display:grid;grid-template-columns:.7fr 1.65fr 1.05fr .9fr 1fr;
  gap:12px;align-items:center;padding:11px 6px;
  font-family:var(--mono);font-size:12px;min-width:0;
}
.feed-head{border-bottom:1px solid rgba(245,183,76,.3);}
.feed-head span{
  color:var(--secondary);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}
.feed-row{border-bottom:1px solid rgba(40,37,66,.8);min-height:44px;}
.feed-row:last-child{border-bottom:0;}
.feed-row > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.feed-row.enter{animation:feedIn .42s var(--ease);}
@keyframes feedIn{
  from{opacity:0;transform:translateY(-8px);background:rgba(245,183,76,.09);}
  to{opacity:1;transform:none;background:transparent;}
}
.feed-row .tm{color:var(--outline);}
.feed-row .tok{color:var(--on-surface-variant);}
.feed-row .prof{text-align:right;font-variant-numeric:tabular-nums;color:var(--on-surface);}
.feed-row .prof.pos{color:var(--tertiary);}
.feed-row .prof.neg{color:var(--error);}
.feed-row a,.kv a,.tx{color:var(--primary);transition:color .15s;}
.feed-row a:hover,.tx:hover{color:var(--secondary);}
.feed-empty{
  padding:26px 6px;text-align:center;color:var(--outline);
  font-family:var(--mono);font-size:12px;
}

.status{
  justify-self:start;white-space:nowrap;padding:4px 9px;border-radius:var(--shape-full);
  border:1px solid var(--outline-variant);color:var(--on-surface-variant);
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;
}
.status.exec{color:var(--tertiary);border-color:rgba(74,222,128,.36);background:rgba(74,222,128,.09);}
.status.pend{color:var(--secondary);border-color:rgba(245,183,76,.38);background:rgba(245,183,76,.09);}

/* Flash-loan rows carry a borrower column, so they get their own ratios */
.fl-head,.fl-row{grid-template-columns:.65fr 1.55fr 1.25fr .95fr .6fr;}
.fl-amt{text-align:right;font-variant-numeric:tabular-nums;color:var(--on-surface);}
.fl-sym{
  display:inline-block;padding:3px 9px;border-radius:var(--shape-full);
  border:1px solid var(--outline-variant);background:rgba(255,255,255,.03);
  font-size:10px;letter-spacing:.06em;color:var(--on-surface-variant);
}
.fl-note{
  margin-top:var(--s2);color:var(--outline);
  font-family:var(--mono);font-size:11px;line-height:1.6;
}
.fl-note code{
  font-family:var(--mono);color:var(--primary);
  background:var(--primary-container);padding:1px 5px;border-radius:var(--shape-xs);
}
.fl-note a{color:var(--primary);}

/* ------------------------------------------------------------
   Layout rows
   ------------------------------------------------------------ */
.term-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s3);margin-top:var(--s3);}
.term-grid.row2{grid-template-columns:1.35fr 1fr;}

/* ------------------------------------------------------------
   Price panel
   ------------------------------------------------------------ */
.price-top{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-bottom:12px;}
.price-now{
  font-size:clamp(28px,3.2vw,42px);font-weight:700;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.price-chg{
  padding:5px 10px;border-radius:var(--shape-xs);
  font-family:var(--mono);font-size:13px;
}
.price-chg.up{color:var(--tertiary);background:rgba(74,222,128,.1);}
.price-chg.down{color:var(--error);background:var(--error-container);}
.chart-wrap{height:224px;}
.chart-wrap canvas{display:block;width:100%;height:100%;}

/* ------------------------------------------------------------
   DEX volume list
   ------------------------------------------------------------ */
.spread-list{display:flex;flex-direction:column;}
.spread-row{
  display:grid;grid-template-columns:1.4fr 1fr .75fr;gap:10px;align-items:center;
  padding:12px 6px;border-bottom:1px solid rgba(40,37,66,.8);
  font-family:var(--mono);font-size:12px;min-width:0;
}
.spread-row:last-child{border-bottom:0;}
.spread-row > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spread-row .pair{font-family:var(--font);font-size:14px;font-weight:500;color:var(--on-surface);}
.spread-row .dex{font-size:10px;color:var(--outline);margin-top:2px;}
.spread-row .px{text-align:right;color:var(--on-surface-variant);font-variant-numeric:tabular-nums;}
.spread-row .sp{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.spread-row .sp.hot{color:var(--tertiary);}
.spread-row .sp.mid{color:var(--secondary);}
.spread-row .sp.low{color:var(--on-surface-variant);}

/* ------------------------------------------------------------
   Gas competition
   ------------------------------------------------------------ */
.gas-live{display:flex;flex-direction:column;gap:9px;font-family:var(--mono);font-size:12px;}
.gas-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 13px;border:1px solid var(--outline-variant);
  border-radius:var(--shape-s);color:var(--on-surface-variant);min-width:0;
}
.gas-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gas-row .bid{color:var(--on-surface);font-variant-numeric:tabular-nums;flex:none;}
.gas-row.win{
  border-color:rgba(245,183,76,.45);background:rgba(245,183,76,.08);color:var(--secondary);
}
.gas-row.win .bid{color:var(--secondary);}
.gas-note{margin-top:12px;color:var(--secondary);font-family:var(--mono);font-size:11px;}

/* ------------------------------------------------------------
   Tape
   ------------------------------------------------------------ */
.tape{
  margin-top:var(--s3);padding:14px 0;overflow:hidden;
  border-block:1px solid var(--outline-variant);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.tape-track{display:flex;gap:38px;width:max-content;animation:tapeRun 40s linear infinite;}
.tape-item{
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  color:var(--on-surface-variant);font-family:var(--mono);font-size:12px;
}
.tape-item b{color:var(--on-surface);font-weight:500;}
.tape-item .g{color:var(--tertiary);}
.tape-item a{color:var(--primary);}
.pip{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--secondary);box-shadow:0 0 8px var(--secondary);
}
@keyframes tapeRun{to{transform:translateX(-50%);}}

/* ------------------------------------------------------------
   Disclosure
   ------------------------------------------------------------ */
.term-disc{
  margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--outline-variant);
  color:var(--outline);font-family:var(--mono);font-size:11px;line-height:1.75;
  max-width:120ch;
}
.term-disc a{color:var(--primary);}
.term-disc code{color:var(--on-surface-variant);}

/* ------------------------------------------------------------
   Responsive — 4 to 2 to 1
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .term-grid,.term-grid.row2{grid-template-columns:1fr;}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .term{padding-block:var(--s4) var(--s6);}
  .term-head{align-items:flex-start;}
  .term-meta{align-items:flex-start;}
  .fl-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .panel{padding:var(--s2) 14px;}
  .chart-wrap{height:186px;}

  /* Drop the block and borrower columns; hash, amount and state carry the row. */
  .feed-head,.feed-row,.fl-head,.fl-row{grid-template-columns:1.45fr .8fr 1.05fr;gap:8px;font-size:11px;}
  .status{padding:4px 7px;font-size:9.5px;letter-spacing:.03em;}
  .feed-head span{font-size:9.5px;letter-spacing:.06em;}
  .feed-head span:nth-child(1),.feed-row > *:nth-child(1),
  .feed-head span:nth-child(3),.feed-row > *:nth-child(3){display:none;}
  .spread-row{grid-template-columns:1.2fr .8fr;}
  .spread-row .px{display:none;}
}
@media (max-width:420px){
  .kpis{grid-template-columns:1fr;}
  .term-head h1{font-size:31px;}
  .chain-switch{padding:2px;}
  .chain-btn{padding:6px 9px;font-size:10px;letter-spacing:.04em;}
}
@media (prefers-reduced-motion:reduce){
  .live-badge .lv,.tape-track,.feed-row.enter{animation:none;}
}