/* ============================================================
   LenderIQ Broker visuals — shared tokens & components
   ============================================================ */
:root{
  --bg-0:#07090C; --bg-1:#0B0E13; --bg-2:#11151C; --bg-3:#161B24; --bg-4:#1B2230;
  --b1:#1E2531; --b2:#232A38; --b3:#2D3645;
  --t1:#ECEFF4; --t2:#B5BCC9; --t3:#7C8595; --t4:#545C6B;
  --gold:#E0B449; --gold-4:#C99A30; --gold-glow:rgba(224,180,73,0.18);
  --blue:#4C8DFF; --green:#2DBE75; --amber:#D69A31; --red:#D85050;
  --ease:cubic-bezier(0.2,0,0,1);
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

html,body{
  margin:0;padding:0;
  background:var(--bg-0);color:var(--t2);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.stage{
  width:100%;display:flex;flex-direction:column;align-items:center;
  padding:8px 0 12px;
}

.hd{display:none;}

.mlabel{
  font-family:var(--mono);font-size:8px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--t4);
}
.mval{
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--t1);
  font-variant-numeric:tabular-nums;
}

.lrow{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:6px;
  border:1px solid var(--b1);background:var(--bg-1);
  opacity:0;transition:opacity 0.45s var(--ease),transform 0.45s var(--ease);
}
.lrow.in{opacity:1;}
.ldot{width:5px;height:5px;border-radius:50%;background:var(--b3);flex-shrink:0;}
.lname{font-size:11.5px;color:var(--t2);flex:1;}
.lrow.warn .ldot{background:var(--amber);}
.lrow.risk .ldot{background:var(--red);}
.lrow.ok .ldot{background:var(--green);}
.lrow.compute .ldot{background:var(--blue);}

.tg{
  font-family:var(--mono);font-size:8px;letter-spacing:0.08em;text-transform:uppercase;
  padding:3px 7px;border-radius:4px;border:1px solid var(--b2);color:var(--t4);flex-shrink:0;
}
.tg.amber{color:var(--amber);border-color:rgba(214,154,49,0.35);}
.tg.red{color:var(--red);border-color:rgba(216,80,80,0.35);}
.tg.green{color:var(--green);border-color:rgba(45,190,117,0.35);}
.tg.gold{color:var(--gold);border-color:rgba(224,180,73,0.35);}
.tg.blue{color:var(--blue);border-color:rgba(76,141,255,0.35);}

.outcome{
  border-radius:8px;padding:14px 16px;border:1px solid var(--b1);background:var(--bg-1);
  opacity:0;transition:opacity 0.5s ease;
}
.outcome.in{opacity:1;}
.outcome.bad{border-left:3px solid var(--red);}
.outcome.good{border-left:3px solid var(--green);}
.outcome.goldtop{border-top:2px solid var(--gold);background:rgba(224,180,73,0.04);}
.oc-title{font-size:13px;font-weight:600;color:var(--t1);}
.oc-sub{font-size:11px;color:var(--t3);margin-top:4px;}

.kbar{height:4px;border-radius:2px;background:var(--b2);overflow:hidden;}
.kbar-fill{height:100%;width:0;transition:width 0.8s var(--ease);}

@keyframes liq-glowpulse{
  0%,100%{box-shadow:0 0 0 rgba(224,180,73,0);}
  50%{box-shadow:0 0 18px rgba(224,180,73,0.12);}
}

.replay,.badge{display:none;}