:root{
  --bg:#0e1116; --card:#161b22; --line:#252c36; --ink:#e6edf3; --dim:#9aa7b4;
  --good:#3fb950; --bad:#f0883e; --acc:#4c8dff; --accd:#2f6fe0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-wrap:break-word;
}
.wrap{width:100%; max-width:820px; margin:0 auto; padding:0 18px}
a{color:var(--acc)}
code{background:#1c232c; border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:13.5px; white-space:nowrap}

.hero{padding:32px 0 24px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#131922,var(--bg))}
.kicker{margin:0 0 10px; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); font-weight:700}
h1{font-size:30px; line-height:1.18; letter-spacing:-.02em; margin:0 0 14px}
.sub{color:var(--dim); margin:0 0 16px}
.privacy{font-size:14px; color:var(--dim); background:#112a17; border:1px solid #1e4527; border-left:3px solid var(--good); padding:11px 13px; border-radius:8px; margin:0}
.privacy strong{color:var(--good)}

main{padding:22px 0 10px}
section{margin:0 0 34px}
h2{font-size:22px; line-height:1.25; letter-spacing:-.01em; margin:0 0 12px; padding-top:6px}
h3{font-size:16.5px; margin:22px 0 6px}
p{margin:0 0 13px}
ul,ol{margin:0 0 13px; padding-left:20px}
li{margin-bottom:8px}
.dim{color:var(--dim); font-size:14.5px}

.toc{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px 6px; margin-bottom:30px}
.toc strong{display:block; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); margin-bottom:8px}
.toc ol{padding-left:20px}
.toc li{margin-bottom:6px; font-size:15px}

.callout{background:#1a1b12; border:1px solid #3a3a1e; border-left:3px solid var(--bad); padding:11px 13px; border-radius:8px; font-size:14.5px; color:#d9d3b8}
.callout strong{color:var(--bad)}

.steps li{margin-bottom:11px}

/* descriptor table */
.searchrow{margin:0 0 12px}
input[type=search],input[type=text],input[type=number],select{
  width:100%; background:#0f141b; color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; font:inherit; font-size:16px;
}
input:focus,select:focus{outline:none; border-color:var(--acc)}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:10px; background:var(--card)}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); font-weight:700; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
td code{font-size:13px}

/* worksheet form */
.addform{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0 0 16px}
.f{display:flex; flex-direction:column; gap:5px}
.f label{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); font-weight:700}
.f-name{flex:3 1 200px}
.f-amt{flex:1 1 100px}
.f-cyc{flex:1 1 120px}
.f-act{flex:1 1 110px}

.btn{
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:11px 16px; font:inherit; font-weight:600; cursor:pointer;
}
.btn:hover{border-color:var(--acc)}
.addform .btn{background:var(--acc); border-color:var(--acc); color:#06152e}
.btn.primary{display:inline-block; background:var(--acc); border-color:var(--acc); color:#06152e; text-decoration:none}
.btn.ghost{font-weight:500; font-size:14.5px; padding:9px 13px}
.btn.danger:hover{border-color:var(--bad); color:var(--bad)}
.linkbtn{background:none; border:none; color:var(--acc); font:inherit; padding:0; cursor:pointer; text-decoration:underline}

.empty{background:var(--card); border:1px dashed #33404f; border-radius:10px; padding:20px 16px; text-align:center; color:var(--dim); font-size:14.5px}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:14px 0}
.tile{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.tile.good{border-color:#1e4527; background:#112a17}
.tl{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); font-weight:700}
.tv{font-size:22px; font-weight:700; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums}
.tile.good .tv{color:var(--good)}

.rowbtns{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px}
.copied{color:var(--good); font-size:14px; font-weight:600}
.x{background:none; border:none; color:var(--dim); font-size:18px; line-height:1; cursor:pointer; padding:2px 6px}
.x:hover{color:var(--bad)}
.pill{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.05em; padding:3px 8px; border-radius:5px}
.pill.cancel{background:#3a2213; color:var(--bad)}
.pill.keep{background:#12261a; color:var(--good)}

.cta{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 18px}
.cta h2{margin-top:0}

footer{border-top:1px solid var(--line); margin-top:20px; padding:20px 0 34px; font-size:14.5px; color:var(--dim)}

@media (max-width:520px){
  h1{font-size:25px}
  h2{font-size:20px}
  .tv{font-size:19px}
  .addform .btn{width:100%}
}