:root{
  --bg:#0d1117; --panel:#141a22; --panel2:#1a212b; --line:#242c38;
  --text:#e6edf3; --dim:#8b98a8; --dimmer:#5f6b7a;
  --accent:#4c8dff; --green:#39d183; --amber:#f0b23a; --red:#f0553a; --purple:#a97bff;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--panel2); padding:1px 5px; border-radius:4px; font-size:.88em}
pre{background:var(--panel2); padding:12px; border-radius:var(--radius); overflow-x:auto}
pre code{background:none; padding:0}
hr{border:0; border-top:1px solid var(--line); margin:20px 0}

/* layout */
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(13,17,23,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1400px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.brand{font-weight:700; letter-spacing:-.02em; font-size:17px; color:var(--text); white-space:nowrap}
.brand span{color:var(--accent)}
.nav{display:flex; gap:2px; flex-wrap:wrap; flex:1}
.nav a{
  color:var(--dim); padding:6px 11px; border-radius:7px; font-size:14px; white-space:nowrap;
}
.nav a:hover{background:var(--panel); color:var(--text); text-decoration:none}
.nav a.on{background:var(--panel2); color:var(--text)}
.topbar-meta{color:var(--dimmer); font-size:12.5px; display:flex; gap:12px; align-items:center}
.wrap{max-width:1400px; margin:0 auto; padding:22px 18px 70px}

h1{font-size:23px; margin:0 0 4px; letter-spacing:-.02em}
h2{font-size:18px; margin:26px 0 10px; letter-spacing:-.01em}
h3{font-size:15.5px; margin:20px 0 8px}
.sub{color:var(--dim); font-size:13.5px; margin:0 0 18px}

/* panels */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px}
.panel-tight{padding:12px}
.grid{display:grid; gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* stat tiles */
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px}
.stat .k{color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.05em}
.stat .v{font-size:25px; font-weight:650; letter-spacing:-.02em; margin-top:3px}
.stat .n{color:var(--dimmer); font-size:12px; margin-top:2px}

/* tables */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  text-align:left; color:var(--dim); font-weight:600; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.05em; padding:8px 10px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel2)}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* badges */
.badge{
  display:inline-block; padding:2px 7px; border-radius:20px; font-size:11px;
  font-weight:600; letter-spacing:.01em; white-space:nowrap; border:1px solid transparent;
}
.b-neutral{background:var(--panel2); color:var(--dim); border-color:var(--line)}
.b-grey{background:var(--panel2); color:var(--dim); border-color:var(--line)}
.b-blue{background:rgba(76,141,255,.14); color:#8fb8ff; border-color:rgba(76,141,255,.3)}
.b-green{background:rgba(57,209,131,.14); color:#6fe0aa; border-color:rgba(57,209,131,.3)}
.b-amber{background:rgba(240,178,58,.14); color:#f3c76c; border-color:rgba(240,178,58,.3)}
.b-red{background:rgba(240,85,58,.14); color:#f58a75; border-color:rgba(240,85,58,.3)}
.b-purple{background:rgba(169,123,255,.14); color:#c3a4ff; border-color:rgba(169,123,255,.3)}

/* score */
.score{font-variant-numeric:tabular-nums; font-weight:650; font-size:15px}
.sc-high{color:var(--green)} .sc-mid{color:var(--amber)} .sc-low{color:var(--dimmer)}
.meter{display:inline-block; width:60px; height:5px; background:var(--panel2); border-radius:3px; overflow:hidden; vertical-align:middle}
.meter-fill{display:block; height:100%; border-radius:3px}
.meter-fill.sc-high{background:var(--green)} .meter-fill.sc-mid{background:var(--amber)} .meter-fill.sc-low{background:var(--dimmer)}

/* forms */
label{display:block; font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; margin:12px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],select,textarea{
  width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:7px; padding:9px 11px; font:inherit; font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent)}
textarea{min-height:90px; resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px}
.hint{color:var(--dimmer); font-size:12px; margin-top:4px}
.btn{
  display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:7px;
  padding:9px 15px; font:inherit; font-size:14px; font-weight:600; cursor:pointer;
}
.btn:hover{filter:brightness(1.1); text-decoration:none}
.btn-sm{padding:5px 10px; font-size:12.5px}
.btn-ghost{background:var(--panel2); color:var(--text); border:1px solid var(--line)}
.btn-green{background:var(--green); color:#06231a}
.btn-red{background:var(--red)}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px}
form.inline{display:inline}

/* flash */
.flash{padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:14px}
.flash.ok{background:rgba(57,209,131,.12); border:1px solid rgba(57,209,131,.3); color:#8fe8bd}
.flash.err{background:rgba(240,85,58,.12); border:1px solid rgba(240,85,58,.3); color:#f8a894}

/* misc */
.dim{color:var(--dim)} .dimmer{color:var(--dimmer)}
.small{font-size:12.5px}
.tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:5px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.gate{
  border-left:3px solid var(--amber); background:rgba(240,178,58,.07);
  padding:11px 14px; border-radius:0 8px 8px 0; margin:12px 0; font-size:13.5px;
}
.empty{color:var(--dimmer); text-align:center; padding:34px 14px; font-size:14px}
.split{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px}
.filters label{margin:0 0 3px}
.filters > div{min-width:120px}
.prose{font-size:14.5px; line-height:1.65}
.prose h2{margin-top:22px} .prose h3{margin-top:16px}
.prose ul{padding-left:20px} .prose li{margin:4px 0}
.quote{border-left:2px solid var(--line); padding-left:11px; color:var(--dim); font-size:13px; margin:6px 0}
.jobtitle{font-weight:600; font-size:14px; display:block; margin-bottom:2px}
.linkrow{display:flex; gap:10px; flex-wrap:wrap; font-size:13px; margin-top:6px}

@media (max-width:720px){
  .wrap{padding:16px 12px 60px}
  .topbar-meta{display:none}
  .stat .v{font-size:21px}
  th,td{padding:7px 8px}
}