/* twitched console — built on the Twitch shell in style.css */
.netpill{display:flex;align-items:center;gap:8px;background:var(--alt2);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted);font-family:var(--mono)}
.netpill i{width:7px;height:7px;border-radius:50%;background:#f0a500;display:block}
.netpill i.ok{background:var(--green)}
.netpill i.bad{background:var(--live)}
.solprice{font-family:var(--mono);font-size:12px;color:var(--muted);padding-right:4px}

#steps{padding:4px 0}
.step{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 16px}
.step:hover{background:var(--alt2)}
.step i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted);width:16px;flex:none}
.step div{min-width:0;flex:1}
.step b{display:block;font-size:13px;font-weight:600}
.step span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step u{width:8px;height:8px;border-radius:50%;background:var(--alt3);flex:none;text-decoration:none}
.step u.ok{background:var(--green)}
.step u.run{background:#f0a500}
.step u.bad{background:var(--live)}
.consts{padding:2px 16px 6px;font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--muted);word-break:break-all}
.consts b{display:block;color:var(--text2);font-weight:600;margin-top:6px;font-family:var(--font);font-size:11px}
.consts a{color:var(--purple-light)}

.conhead{padding:42px 0 24px}
.conhead h1{font-size:clamp(30px,4vw,44px);font-weight:800}
.conhead p{color:var(--muted);max-width:66ch;margin:14px 0 0;font-size:15px;line-height:1.65}
.panels{padding-bottom:80px;display:flex;flex-direction:column;gap:16px}

.panel{background:var(--base);border:1px solid var(--alt3);border-radius:var(--r-lg);overflow:hidden;scroll-margin-top:66px}
.panel.note{background:transparent;border-style:dashed}
.panel.note b{font-size:13px}
.panel.note p{color:var(--muted);font-size:13px;line-height:1.7;margin:8px 0 0;max-width:86ch}
.ph{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--alt3)}
.ph .n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ph h2{font-size:15px;font-weight:700;flex:1}
.ph .st{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--alt);padding:3px 8px;border-radius:999px}
.ph .st.ok{color:var(--green)}
.ph .st.run{color:#f0a500}
.ph .st.bad{color:#ff6b6b}
.pb{padding:16px}
.hint{color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 14px;max-width:88ch}
.hint code,.mono{font-family:var(--mono);color:var(--purple-light);background:rgba(145,71,255,.12);padding:1px 5px;border-radius:3px;font-size:12px}
.hint b{color:var(--text2)}

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fld.grow{flex:1;min-width:220px}
.sugrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.sugrow .sl{font-size:11px;color:var(--muted);font-family:var(--mono)}
.sugrow button{background:var(--alt2);border:0;color:var(--text2);font-size:12px;font-family:var(--mono);padding:4px 9px;border-radius:999px;cursor:pointer}
.sugrow button:hover{background:var(--purple);color:#fff}

/* output blocks */
.out-card{margin-top:14px;background:var(--bg);border:1px solid var(--alt3);border-radius:var(--r);padding:14px}
.prof{display:flex;gap:14px;align-items:flex-start}
.prof img{width:64px;height:64px;border-radius:50%;flex:none;background:var(--alt2)}
.prof .m{min-width:0;flex:1}
.prof h3{font-size:18px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.prof .hn{font-size:13px;color:var(--muted);font-family:var(--mono)}
.prof .desc{font-size:13px;color:var(--muted);margin-top:6px;max-width:64ch}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.bdg{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--alt2);color:var(--text2);letter-spacing:.02em}
.bdg.live{background:var(--live);color:#fff}
.bdg.off{background:var(--alt3);color:var(--muted)}
.bdg.part{background:var(--purple);color:#fff}
.bdg.aff{background:rgba(145,71,255,.22);color:var(--purple-light)}
.bdg.no{background:rgba(235,4,0,.16);color:#ff8a85}

.kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--alt3);border:1px solid var(--alt3);border-radius:var(--r);overflow:hidden;margin-top:14px}
.kvs .c{background:var(--bg);padding:11px 13px}
.kvs .c span{display:block;font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.kvs .c b{display:block;font-size:17px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;word-break:break-all}
.kvs .c b.sm{font-size:12px;font-family:var(--mono);font-weight:500;color:var(--text2)}
.kvs .c b.pl{color:var(--purple-light)}
.kvs .c b.gr{color:var(--green)}

pre.term{
  margin:14px 0 0;background:#050506;border:1px solid var(--alt3);border-radius:var(--r);
  padding:12px 13px;font-family:var(--mono);font-size:11.5px;line-height:1.65;color:#cfcfd6;
  overflow-x:auto;white-space:pre-wrap;word-break:break-all
}
pre.term .g{color:#5ee9a0}
pre.term .p{color:var(--purple-light)}
pre.term .r{color:#ff8a85}
pre.term .d{color:#6b6b76}
a.sol{color:var(--purple-light);font-family:var(--mono);font-size:12px;display:inline-flex;align-items:center;gap:4px}
a.sol svg{width:12px;height:12px}

.verdict{display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;border-radius:var(--r);font-size:13px;font-weight:600}
.verdict.ok{background:rgba(0,245,147,.10);color:#5ee9a0;border:1px solid rgba(0,245,147,.25)}
.verdict.bad{background:rgba(235,4,0,.10);color:#ff8a85;border:1px solid rgba(235,4,0,.28)}
.verdict.warn{background:rgba(240,165,0,.10);color:#f0c05a;border:1px solid rgba(240,165,0,.28)}

.simrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.simrow label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.simrow label b{color:var(--text);font-family:var(--mono);font-size:15px}
.simrow input[type=range]{flex:1;min-width:200px;accent-color:var(--purple)}

.rails{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.rail{background:var(--bg);border:1px solid var(--alt3);border-radius:var(--r);padding:14px}
.rail h4{margin:0;font-size:13px;display:flex;align-items:center;gap:7px}
.rail h4 svg{width:15px;height:15px;color:var(--purple-light)}
.rail .big{font-size:26px;font-weight:800;margin-top:10px;font-variant-numeric:tabular-nums}
.rail .sub{font-size:12px;color:var(--muted);margin-top:2px}
.bar{height:8px;border-radius:99px;background:var(--alt2);overflow:hidden;display:flex;margin-top:12px}
.bar i{display:block;height:100%}
.bar i.a{background:var(--purple)}
.bar i.b{background:var(--alt3)}
.split{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px;font-family:var(--mono)}
.split b{color:var(--text2)}

.reg{margin-top:12px}
.regrow{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:var(--r);font-size:13px}
.regrow:hover{background:var(--alt)}
.regrow img{width:28px;height:28px;border-radius:50%;flex:none;background:var(--alt2)}
.regrow .m{flex:1;min-width:0}
.regrow .m b{display:block;font-size:13px}
.regrow .m span{font-size:11px;color:var(--muted);font-family:var(--mono);word-break:break-all}
.regrow .t{font-size:11px;color:var(--muted);font-family:var(--mono);flex:none}

@media (max-width:960px){#sidenav{display:none}main{margin-left:0}}
@media (max-width:760px){.rails{grid-template-columns:1fr}.panels{padding-bottom:50px}}