:root { --bg:#101418; --panel:#1a2028; --panel2:#161c24; --line:#2a3038;
        --amber:#ffb020; --text:#e8eaf0; --muted:#8892a6; --dim:#7a86a0;
        --red:#ff5c5c; --green:#00c880; }
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--text);
       font:15px/1.5 "Segoe UI",system-ui,sans-serif; min-height:100vh;
       display:flex; flex-direction:column; }
header { text-align:center; padding:28px 16px 8px; }
#logo a { color:var(--amber); font-family:Consolas,monospace; font-size:30px;
          text-decoration:none; letter-spacing:1px; }
#logo span { color:var(--text); }
#tagline { color:var(--muted); font-size:13px; }
main { flex:1; max-width:1200px; width:100%; margin:0 auto; padding:16px; }
#searchbox { display:flex; gap:8px; align-items:center; margin:18px 0; }
#q { flex:1; background:var(--panel); border:1px solid var(--line); color:var(--text);
     border-radius:22px; padding:12px 18px; font-size:15px; outline:none; }
#q:focus { border-color:var(--amber); }
#typechip { background:var(--amber); color:var(--bg); border:0; border-radius:12px;
            padding:2px 10px; font-size:12px; font-weight:600; white-space:nowrap;
            cursor:pointer; }
#go { background:var(--amber); color:var(--bg); border:0; border-radius:22px;
      padding:12px 24px; font-weight:700; cursor:pointer; }
#results { display:flex; gap:16px; align-items:flex-start; }
#live { flex:2; min-width:0; }
#rail { flex:1; min-width:260px; position:sticky; top:12px; }
h2 { font-size:14px; color:var(--amber); font-family:Consolas,monospace;
     margin:10px 0 8px; }
.card { background:var(--panel); border-left:3px solid var(--dim); border-radius:6px;
        padding:10px 12px; margin-bottom:8px; }
.card.red { border-left-color:var(--red); }
.card.amber { border-left-color:var(--amber); }
.card.green { border-left-color:var(--green); }
.card h3 { font-size:13px; margin-bottom:4px; }
.card .meta { color:var(--dim); font-size:11px; float:right; }
.field { font-size:13px; color:var(--muted); }
.field b { color:var(--text); font-weight:600; }
.field .red { color:var(--red); } .field .amber { color:var(--amber); }
.field .green { color:var(--green); }
.degraded { color:var(--dim); font-size:12px; font-style:italic; }
#rail section { background:var(--panel2); border-radius:8px; padding:10px 12px;
                margin-bottom:12px; }
.pivotcat { color:var(--dim); font-size:11px; text-transform:uppercase;
            letter-spacing:1px; margin:8px 0 4px; }
.pivot { display:inline-block; background:var(--panel); border-radius:4px;
         padding:3px 8px; margin:2px; font-size:12px; color:var(--text);
         text-decoration:none; }
.pivot:hover { background:var(--amber); color:var(--bg); }
.dork { background:var(--panel); border-radius:4px; padding:6px 8px; margin:4px 0;
        font-size:12px; }
.dork code { color:var(--muted); display:block; overflow:hidden;
             text-overflow:ellipsis; white-space:nowrap; }
.dork a { color:var(--amber); text-decoration:none; margin-right:8px; font-size:11px; }
#copyall { background:none; border:0; cursor:pointer; font-size:13px; }
footer { text-align:center; color:var(--dim); font-size:12px; padding:16px; }
#about { max-width:900px; margin:32px auto 0; color:var(--dim); font-size:12px;
         line-height:1.6; padding:0 16px; }
#about p { margin:0; }
@media (max-width: 800px) {
  #results { flex-direction:column; }
  #rail { position:static; width:100%; min-width: 0; }
}