/* Grok Bot · black iOS look. No neon, glow, double borders, all-caps eyebrows, or card gradients. */
:root{
  --bg:#000;--text:#fff;--sec:rgba(235,235,245,.6);--ter:rgba(235,235,245,.3);--sep:rgba(84,84,88,.55);
  --card:#1c1c1e;--card2:#2c2c2e;--green:#00d35a;--red:#ff453a;--orange:#ff9f0a;--cyan:#64d2ff;--blue:#0a84ff;
  --yellow:#ffd60a;--pink:#ff6b9a;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
  --cw:calc(100vw - 32px);
  --text-font:-apple-system,"SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif;
  --display-font:-apple-system,"SF Pro Display",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--text-font);font-size:17px;line-height:1.3;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body{min-height:100vh;padding-left:var(--sl);padding-right:var(--sr)}
.num,input,button{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.screen{display:none;padding:calc(var(--st) + 0px) 0 calc(var(--sb) + 96px)}
.screen.on{display:block}
.pad{padding:0 16px}
.hidden{display:none!important}

/* navbar */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;min-height:52px;padding:calc(var(--st) + 4px) 16px 4px;
  background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.nav .grow{flex:1}
.nav .title{font-weight:600;font-size:17px}
.iconbtn{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:22px}
.iconbtn svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.avatar{width:34px;height:34px;border-radius:17px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px}
.brand{display:flex;align-items:center;gap:4px;font-weight:600;font-size:17px;min-height:44px}
.brand .chev{color:var(--sec);font-weight:400}
.dot{width:8px;height:8px;border-radius:4px;display:inline-block}
.bell .dot{position:absolute;top:10px;right:10px;background:var(--green)}
.back{display:flex;align-items:center;gap:2px;color:var(--blue);min-height:44px;min-width:44px;font-size:17px}
.back svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:2.5}
.largetitle{font-family:var(--display-font);font-size:34px;font-weight:700;padding:4px 16px 8px;letter-spacing:.2px}

/* offline row */
.offline{display:flex;align-items:center;gap:8px;padding:10px 16px;color:var(--red);font-size:15px;border-bottom:.5px solid var(--sep)}
.offline .dot{background:var(--red)}

/* demo marker */
#demo{position:fixed;z-index:50;bottom:calc(var(--sb) + 66px);right:12px;background:var(--yellow);color:#000;
  font-weight:700;font-size:12px;letter-spacing:.3px;padding:3px 10px;border-radius:10px;pointer-events:none}

/* balance */
.balance{padding:8px 16px 0}
.balrow{display:flex;align-items:center;gap:10px}
.big{font-family:var(--display-font);font-size:66px;font-weight:600;letter-spacing:-1.5px;line-height:1.05}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font-size:13px;font-weight:600}
.pill.paper{background:var(--orange);color:#000}
.pill.live{background:var(--red);color:#fff}
.pill.mult{background:rgba(0,211,90,.18);color:var(--green)}
.pill.mult.neg{background:rgba(255,69,58,.18);color:var(--red)}
.pill.mono{font-family:var(--mono);font-weight:500;font-size:12px}
.pill.red{background:rgba(255,69,58,.16);color:var(--red)}
.pill.green{background:rgba(0,211,90,.16);color:var(--green)}
.today{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:17px;font-weight:500}
.up{color:var(--green)}.down{color:var(--red)}.sec{color:var(--sec)}.ter{color:var(--ter)}

/* odometer */
.odo{display:inline-flex;overflow:hidden;height:1.05em;line-height:1.05em}
.odo .d{display:inline-block;height:1.05em;overflow:hidden;position:relative}
.odo .s{display:flex;flex-direction:column;transition:transform 600ms cubic-bezier(.17,.84,.44,1)}
.odo .s span{height:1.05em;display:block;text-align:center}

/* charts */
.chartwrap{position:relative;margin:12px 0 0}
canvas{display:block;width:100%}
#homeChart{height:230px}
.ranges{display:flex;justify-content:space-between;padding:8px 16px 0}
.ranges button{min-height:44px;min-width:44px;padding:0 10px;border-radius:16px;font-size:15px;font-weight:600;color:var(--green)}
.ranges button.on{background:rgba(0,211,90,.18)}

/* sections */
.sechead{display:flex;align-items:baseline;justify-content:space-between;padding:26px 16px 10px}
.sechead h2{margin:0;font-size:22px;font-weight:700;font-family:var(--display-font)}
.sechead a,.sechead button{color:var(--blue);font-size:17px;min-height:44px;display:flex;align-items:center}

/* carousel + agent cards */
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;scrollbar-width:none;scroll-padding:0 16px}
.carousel::-webkit-scrollbar{display:none}
.acard{flex:0 0 var(--cw);width:var(--cw);aspect-ratio:504/470;border-radius:calc(var(--cw) * 42 / 504);background:var(--card);
  scroll-snap-align:start;padding:20px;display:flex;flex-direction:column;overflow:hidden}
.acard .hd{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.acard .lbl{font-family:var(--display-font);font-size:30px;font-weight:700;margin:6px 0 10px}
.acard .body{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}
.acard .foot{font-size:15px;color:var(--sec)}
.feed{display:flex;flex-direction:column;gap:7px;font-size:15px}
.feed .r{display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
.feed .r .n{overflow:hidden;text-overflow:ellipsis}
.killed .n{color:var(--ter);text-decoration:line-through;text-decoration-color:var(--red)}
.killed .why{color:var(--ter)}
.passed .why{color:var(--cyan)}
.strips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.strip{height:30px;border-radius:8px;background:var(--card2);transition:background-color 150ms}
.strip.ok{background:var(--green)}.strip.bad{background:var(--red)}
.ringrow{display:flex;align-items:center;gap:16px}
.ring{width:110px;height:110px;flex:0 0 110px}
.bar{height:8px;border-radius:4px;background:var(--card2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:4px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.empty{color:var(--sec);font-size:15px}

/* list rows */
.list{background:var(--card);border-radius:14px;margin:0 16px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px;position:relative}
.row+.row::before{content:"";position:absolute;top:0;left:64px;right:0;border-top:.5px solid var(--sep)}
.list.plain .row+.row::before{left:16px}
.row .ic{width:36px;height:36px;border-radius:18px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.row .tx{flex:1;min-width:0}
.row .t{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .st{font-size:15px;color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rt{text-align:right;font-size:15px;flex:0 0 auto;max-width:45%;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.row .rt.long{font-size:13px}
.row .chev{color:var(--ter);font-size:20px}
.emptybox{padding:40px 16px;text-align:center;color:var(--sec);font-size:17px}

/* agents tab */
.agentfull{background:var(--card);border-radius:20px;margin:0 16px 14px;padding:16px 0 4px}
.agentfull .top{display:flex;align-items:center;gap:10px;padding:0 16px 10px}
.agentfull .top .nm{font-size:20px;font-weight:700}
.agentfull .top .ct{color:var(--sec);font-size:15px}
.dec{display:grid;grid-template-columns:44px 1fr auto;gap:2px 10px;padding:9px 16px;border-top:.5px solid var(--sep);font-size:15px;align-items:baseline}
.dec .tm{color:var(--ter)}
.dec .why{grid-column:2/4;color:var(--sec);font-size:13px;font-family:var(--mono)}
.dec .v.pass,.dec .v.filled{color:var(--green)}.dec .v.kill,.dec .v.reject,.dec .v.stop,.dec .v.skip{color:var(--red)}
.linkrow{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border-top:.5px solid var(--sep);color:var(--blue)}

/* switch */
.sw{position:relative;width:51px;height:31px;flex:0 0 51px}
.sw input{opacity:0;width:100%;height:100%;margin:0;position:absolute;z-index:2;cursor:pointer}
.sw span{position:absolute;inset:0;border-radius:16px;background:rgba(120,120,128,.32);transition:background-color .2s}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:14px;background:#fff;transition:transform .2s}
.sw input:checked+span{background:var(--green)}
.sw input:checked+span::after{transform:translateX(20px)}
.sw input:disabled+span{opacity:.4}

/* auditor screen */
.discs{position:relative;width:220px;margin:18px auto 8px;height:236px}
.disc{position:absolute;left:0;width:220px;height:44px;border-radius:50%;background:var(--card2);border:0;
  display:flex;align-items:center;justify-content:center;transition:background-color 150ms}
.disc svg{width:20px;height:20px;stroke:#000;stroke-width:3;fill:none;opacity:0;transition:opacity 150ms}
.disc.ok{background:var(--green)}.disc.bad{background:var(--red)}
.disc.ok svg,.disc.bad svg{opacity:1}
.beam{position:absolute;left:-14px;right:-14px;height:3px;border-radius:2px;background:var(--cyan);opacity:0;transition:top 350ms ease-in-out,opacity .2s}
.verdict{text-align:center;padding:8px 16px 4px}
.verdict .v1{font-family:var(--display-font);font-size:24px;font-weight:700}
.verdict .v2{color:var(--sec);margin-top:4px}
.vrow{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 16px;position:relative}
.vrow+.vrow::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.vrow .k{flex:1;font-size:16px}.vrow .val{font-size:15px;color:var(--sec);text-align:right;max-width:55%}
.chk{width:22px;height:22px;border-radius:11px;flex:0 0 22px;background:var(--card2)}
.chk.ok{background:var(--green)}.chk.bad{background:var(--red)}
.cta{display:block;margin:20px 16px 0;min-height:52px;border-radius:26px;background:var(--green);color:#000;font-size:17px;font-weight:600;
  text-align:center;line-height:52px}
.cta.sell{background:var(--red);color:#fff}
.cta.blue{background:var(--blue);color:#fff}

/* coin */
.coinhead{padding:4px 16px 0}
.coinhead .nm{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700}
.coinhead .meta{color:var(--sec);font-size:15px;margin-top:2px}
.shield{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:12px;background:rgba(0,211,90,.16);color:var(--green);font-size:13px;font-weight:600}
.shield.bad{background:rgba(255,69,58,.16);color:var(--red)}
.price{font-family:var(--display-font);font-size:48px;font-weight:600;letter-spacing:-1px;padding:8px 16px 0}
.since{padding:2px 16px 0;font-size:17px;font-weight:500}
#coinChart{height:260px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sep);margin:16px;border-radius:14px;overflow:hidden}
.stats div{background:var(--card);padding:12px 14px}
.stats .k{color:var(--sec);font-size:13px}.stats .v{font-size:19px;font-weight:600;margin-top:2px}
.card{background:var(--card);border-radius:14px;margin:12px 16px 0;padding:14px 16px}
.card .h{font-size:15px;color:var(--sec)}
.card .m{font-size:20px;font-weight:600;margin-top:2px}
.exitline{display:flex;justify-content:space-between;align-items:center;min-height:40px;border-top:.5px solid var(--sep);font-size:15px}
.exitline:first-of-type{border-top:0}

/* account */
.seg{display:flex;background:var(--card2);border-radius:9px;padding:2px;margin:0 16px}
.seg button{flex:1;min-height:40px;border-radius:7px;font-size:15px;font-weight:600;color:var(--sec)}
.seg button.on{background:#636366;color:#fff}
.seg.small{margin:0;min-width:160px}
.seg.small button{min-height:32px;font-size:13px}
.field{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 16px;position:relative}
.field+.field::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.field .k{flex:1;font-size:16px;min-width:0}
.field .k small{display:block;color:var(--ter);font-family:var(--mono);font-size:11px;margin-top:1px}
.field input[type=number],.field input[type=text]{width:110px;background:var(--card2);border:0;border-radius:8px;color:#fff;
  font-size:16px;padding:8px 10px;text-align:right;font-family:var(--mono)}
.field input[type=text].wide{width:180px}
.setitem{padding:10px 16px;position:relative}
.setitem+.setitem::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.setitem .top{display:flex;align-items:center;gap:8px}
.setitem .k{flex:1;font-size:15px}
.setitem .k small{display:block;color:var(--ter);font-family:var(--mono);font-size:11px}
.setitem input[type=number],.setitem input[type=text]{width:104px;background:var(--card2);border:0;border-radius:8px;color:#fff;font-size:15px;
  padding:7px 9px;text-align:right;font-family:var(--mono)}
.setitem input[type=text]{width:170px}
.setitem input[type=range]{width:100%;margin:10px 0 2px;accent-color:var(--green);height:28px}
.err{color:var(--red);font-size:13px;margin-top:4px}
.grouptitle{padding:22px 16px 8px;font-size:15px;color:var(--sec);font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 100px);transform:translateX(-50%);background:var(--card2);color:#fff;padding:10px 16px;
  border-radius:20px;font-size:15px;z-index:60}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;padding:6px var(--sr) calc(var(--sb) + 6px) var(--sl);
  background:rgba(22,22,24,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--sep)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:49px;justify-content:center;color:rgba(235,235,245,.45);font-size:10px;font-weight:500}
.tabbar a svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:#fff}

/* search */
.searchbar{display:flex;gap:8px;align-items:center;padding:8px 16px}
.searchbar input{flex:1;background:var(--card2);border:0;border-radius:10px;color:#fff;font-size:17px;padding:9px 12px;min-height:40px}
.searchbar button{color:var(--blue);min-height:44px}

/* skeleton */
.sk{background:var(--card);border-radius:10px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}