/* Kalshi Fleet -- member dashboard.
   Design tokens lifted verbatim from the private research dashboard so the two
   read as one product. Shared LOOK, entirely separate DATA: nothing in this
   file has any connection to a private API, and nothing private is hidden here
   with CSS -- it is never sent. */
:root{
  --bg:#0a0d12;
  --bg-2:#10141c;
  --panel:#141922;
  --panel-2:#1a202b;
  --line:#232a37;
  --line-soft:#1c2230;
  --text:#e6ebf2;
  --text-dim:#8b97a8;
  --text-faint:#5d6879;
  --green:#16c784;
  --green-dim:#0f6b4a;
  --red:#f0616d;
  --red-dim:#7a2b33;
  --amber:#f0b429;
  --amber-dim:#6b5017;
  --blue:#4d9dff;
  --violet:#a78bfa;
  --radius:10px;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.hidden{display:none !important;}
.muted{color:var(--text-dim);font-weight:400;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;}

/* ---------------- top bar ---------------- */
.topbar{display:flex;align-items:center;gap:22px;height:58px;padding:0 18px;
  background:linear-gradient(180deg,#12171f,#0d1117);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.09em;font-size:13px;}
.brand .mark{width:12px;height:22px;border-radius:3px;
  background:linear-gradient(180deg,var(--green),var(--green-dim));}
.tag{font-size:9px;font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:4px;
  background:rgba(240,180,41,.14);color:var(--amber);}
.topbar .spacer{flex:1;}
.market-pill{display:flex;align-items:center;gap:9px;padding:5px 12px;border-radius:8px;
  background:var(--panel);border:1px solid var(--line);}
.market-pill .sym{font-weight:700;letter-spacing:.04em;}
.market-pill .px{font-family:var(--mono);font-size:15px;}
.conn{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;padding:5px 11px;border-radius:8px;border:1px solid var(--line);}
.conn .dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);}
.conn[data-status="LIVE"]{color:var(--green);border-color:rgba(22,199,132,.34);}
.conn[data-status="LIVE"] .dot{background:var(--green);box-shadow:0 0 8px rgba(22,199,132,.7);}
.conn[data-status="RECONNECTING"]{color:var(--amber);border-color:var(--amber-dim);}
.conn[data-status="RECONNECTING"] .dot{background:var(--amber);}
.conn[data-status="OFFLINE"]{color:var(--red);border-color:var(--red-dim);}
.conn[data-status="OFFLINE"] .dot{background:var(--red);}
.who{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-dim);}
.who img{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);}
.who a{color:var(--text-faint);text-decoration:none;font-size:10.5px;}
.who a:hover{color:var(--text-dim);}

/* ---------------- stale banner ---------------- */
.banner{margin:12px 18px 0;padding:11px 14px;border-radius:var(--radius);
  border:1px solid var(--amber-dim);background:rgba(240,180,41,.09);color:#ffdf9e;font-size:12px;}

/* ---------------- layout ---------------- */
.wrap{padding:14px 18px 30px;}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start;}
.grid > *{min-width:0;}

/* ---------------- panels ---------------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;}
.panel-title{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--text-dim);
  text-transform:uppercase;margin-bottom:11px;}
.chart-panel{padding:12px 12px 8px;}
#chart{height:430px;width:100%;}
.chart-head{display:flex;align-items:baseline;gap:12px;margin:0 4px 8px;}
.chart-head .sym{font-size:15px;font-weight:700;}
.chart-head .meta{font-size:10.5px;color:var(--text-faint);}

/* ---------------- confidence ---------------- */
.conf-value{font-family:var(--mono);font-size:34px;font-weight:600;line-height:1.1;}
.conf-value.pos{color:var(--green);} .conf-value.neg{color:var(--red);}
.conf-value.none{color:var(--text-faint);font-size:26px;}
.conf-label{font-size:10.5px;letter-spacing:.1em;font-weight:800;text-transform:uppercase;
  color:var(--text-faint);margin-top:4px;}
.conf-note{font-size:10.8px;color:var(--text-dim);margin-top:10px;line-height:1.55;
  border-top:1px solid var(--line-soft);padding-top:9px;}

/* ---------------- bot cards ---------------- */
.cards{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.bot-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;position:relative;overflow:hidden;
  transition:border-color .5s ease,box-shadow .5s ease;}
.bot-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--line);}
.bot-card[data-state="ACTIVE"]::before{background:var(--green);}
.bot-card[data-state="EXPIRED"]::before{background:var(--amber);}
.bot-card[data-state="COMPLETED"]::before{background:var(--blue);}
.bot-card.fresh{border-color:rgba(22,199,132,.55);box-shadow:0 0 0 1px rgba(22,199,132,.25),0 0 22px rgba(22,199,132,.12);}
.bot-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.bot-name{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.state-pill{font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:4px;
  background:rgba(139,151,168,.14);color:var(--text-dim);white-space:nowrap;}
.state-pill[data-state="ACTIVE"]{background:rgba(22,199,132,.16);color:var(--green);}
.state-pill[data-state="EXPIRED"]{background:rgba(240,180,41,.16);color:var(--amber);}
.state-pill[data-state="COMPLETED"]{background:rgba(77,157,255,.16);color:var(--blue);}
.bot-asset{font-size:11px;color:var(--text-dim);margin-top:9px;letter-spacing:.06em;font-weight:700;}
.bot-tell{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1.1;margin-top:1px;}
.bot-tell.up{color:var(--green);} .bot-tell.down{color:var(--red);}
.bot-tell.none{color:var(--text-faint);font-size:15px;font-weight:600;letter-spacing:.04em;}
.bot-entry{font-family:var(--mono);font-size:18px;margin-top:8px;}
.bot-entry .lbl{font-family:var(--sans);font-size:10px;letter-spacing:.1em;font-weight:800;
  color:var(--text-faint);text-transform:uppercase;display:block;}
.bot-rows{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin-top:11px;font-size:11.5px;}
.bot-rows .k{color:var(--text-dim);}
.bot-rows .v{font-family:var(--mono);text-align:right;}
.bot-rows .v.pos{color:var(--green);} .bot-rows .v.neg{color:var(--red);}
.bot-age{font-size:10.5px;color:var(--text-faint);margin-top:11px;
  border-top:1px solid var(--line-soft);padding-top:8px;font-family:var(--mono);}
.new-flag{font-size:8.5px;font-weight:800;letter-spacing:.1em;padding:1px 5px;border-radius:3px;
  background:var(--green);color:#04120c;margin-left:6px;}

/* ---------------- history ---------------- */
.hist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;}
.filters{display:flex;gap:6px;}
.filters button{background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);
  font-size:10px;font-weight:800;letter-spacing:.09em;padding:5px 11px;border-radius:6px;
  transition:all .15s ease;}
.filters button:hover{color:var(--text);border-color:var(--text-faint);}
.filters button.active{background:rgba(22,199,132,.14);color:var(--green);border-color:rgba(22,199,132,.34);}
.table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--line-soft);max-height:330px;overflow-y:auto;}
table.data{width:100%;border-collapse:collapse;font-size:11.5px;font-family:var(--mono);}
table.data th{position:sticky;top:0;background:var(--panel-2);color:var(--text-dim);
  font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);}
table.data td{padding:7px 10px;border-bottom:1px solid var(--line-soft);color:var(--text-dim);white-space:nowrap;}
table.data tr:hover td{background:rgba(255,255,255,.022);}
table.data td.up{color:var(--green);} table.data td.down{color:var(--red);}
table.data td.strong{color:var(--text);}
.empty{font-size:12px;color:var(--text-dim);padding:18px 4px;}

/* ---------------- login / denied ---------------- */
.centre{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.card-centre{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:34px 32px;max-width:430px;width:100%;text-align:center;}
.card-centre h1{font-size:17px;letter-spacing:.06em;margin-bottom:8px;}
.card-centre p{color:var(--text-dim);font-size:12.5px;line-height:1.65;margin:0 0 20px;}
.btn-discord{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:#5865F2;color:#fff;border:none;border-radius:9px;padding:12px 18px;
  font-size:13px;font-weight:700;letter-spacing:.02em;text-decoration:none;transition:filter .15s ease;}
.btn-discord:hover{filter:brightness(1.1);}
.fineprint{font-size:10.5px;color:var(--text-faint);margin-top:18px;line-height:1.6;}

/* Three areas rather than two columns, so that on a narrow screen the live
   signals sit directly under the chart instead of below the history table. */
/* max-content on the first row keeps the chart the height it wants; the
   side column is taller than chart+history, and without this the surplus
   is split between both rows and opens a gap under the chart. */
.grid{grid-template-areas:"chart side" "hist side";grid-template-rows:max-content 1fr;}
.chart-panel{grid-area:chart;}
.hist-panel{grid-area:hist;margin-top:16px;}
.side{grid-area:side;}

@media (max-width:1080px){
  .grid{grid-template-columns:1fr;grid-template-areas:"chart" "side" "hist";}
  #chart{height:330px;}
  .cards{flex-direction:row;flex-wrap:wrap;}
  .bot-card{flex:1 1 260px;}
  .hist-panel{margin-top:0;}
}
@media (max-width:620px){
  .topbar{gap:10px;padding:8px 12px;height:auto;flex-wrap:wrap;}
  .brand{font-size:11px;}
  .brand span.label{display:none;}    /* the mark alone, so nothing wraps */
  .tag{display:none;}
  .who span{display:none;}
  .market-pill{padding:4px 9px;}
  .wrap{padding:12px;}
  .cards{flex-direction:column;}
  .chart-head{flex-wrap:wrap;row-gap:6px;}
  .chart-head .meta{flex-basis:100%;order:3;}
  .hist-head{flex-wrap:wrap;row-gap:8px;}
}

/* ---------------- banner tones + small additions ---------------- */
.banner[data-tone="error"]{border-color:var(--red-dim);background:rgba(240,97,109,.09);color:#ffc8cd;}
.chart-head .spacer{flex:1;}
.bot-rows .k{font-family:var(--sans);}
.fineprint{font-size:10.5px;color:var(--text-faint);line-height:1.6;}


/* ---------------- live window + bot heartbeat ---------------- */
#chart{position:relative;}
.win-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 4px 8px;
  font-size:11px;color:var(--text-dim);}
.win-bar[hidden]{display:none;}
.win-tag{font-size:9px;font-weight:800;letter-spacing:.09em;color:var(--blue);
  background:rgba(77,157,255,.14);padding:2px 7px;border-radius:4px;}
.win-range{font-family:var(--mono);color:var(--text);}
.win-beat b,.win-left b{font-family:var(--mono);color:var(--text);font-weight:600;}
.win-prog{flex:1 1 120px;min-width:90px;height:4px;border-radius:2px;background:var(--line);overflow:hidden;}
.win-prog i{display:block;height:100%;width:0;background:var(--blue);transition:width .9s linear;}
.win-band{position:absolute;top:0;display:none;pointer-events:none;z-index:3;
  background:rgba(77,157,255,.07);border-left:1px dashed rgba(77,157,255,.7);}
.win-band span{position:absolute;top:4px;left:5px;font-size:9px;font-weight:700;letter-spacing:.06em;
  color:var(--blue);white-space:nowrap;}
.bot-live{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:10.5px;color:var(--text-dim);}
.bot-live b{color:var(--text);font-weight:600;font-family:var(--mono);}
.bot-live .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--text-faint);}
.bot-live.on .dot{background:var(--green);box-shadow:0 0 0 0 rgba(22,199,132,.6);animation:kf-pulse 1.6s infinite;}
.bot-live.on .st{color:var(--green);font-weight:800;letter-spacing:.06em;font-size:9.5px;}
.bot-live.off .dot{background:var(--red);}
.bot-live.off .st{color:var(--red);font-weight:800;letter-spacing:.06em;font-size:9.5px;}
.bot-prog{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:6px;}
.bot-prog i{display:block;height:100%;width:0;background:var(--green);opacity:.7;transition:width .9s linear;}
@keyframes kf-pulse{0%{box-shadow:0 0 0 0 rgba(22,199,132,.55);}70%{box-shadow:0 0 0 7px rgba(22,199,132,0);}100%{box-shadow:0 0 0 0 rgba(22,199,132,0);}}
@media (prefers-reduced-motion:reduce){.bot-live.on .dot{animation:none;}.win-prog i,.bot-prog i{transition:none;}}