:root{
  --base:#191c21;
  --panel:#232830;
  --panel-2:#1f242b;
  --line:#333a45;
  --text:#e6e9ee;
  --muted:#8d96a5;
  --blue:#4d84c4;
  --blue-hi:#5e95d6;
  --amber:#d99b3f;
  --green:#4aa87c;
  --red:#c9605f;
  --radius:10px;
}

*{box-sizing:border-box;}

html,body{margin:0;height:100%;}

body{
  background:var(--base);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  font-variant-numeric:tabular-nums;
}

.screen{min-height:100%;display:flex;flex-direction:column;}
/* display:flex above beats the browser's [hidden] rule, so restate it */
.screen[hidden]{display:none;}
.wrap{
  flex:1;width:100%;max-width:640px;margin:0 auto;
  padding:28px 20px 24px;
  padding-top:calc(28px + env(safe-area-inset-top));
}

h1{font-size:26px;line-height:1.2;font-weight:650;margin:0 0 8px;letter-spacing:-.01em;}
h2{font-size:19px;font-weight:600;margin:0;}
.lede{color:var(--muted);margin:0 0 20px;max-width:46ch;}
.hint{color:var(--muted);font-size:13px;margin:6px 0 22px;}

/* ---------- paste ---------- */
.paste{
  width:100%;min-height:220px;resize:vertical;
  background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;font-size:13px;line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.paste:focus,input:focus,button:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}

/* ---------- fields ---------- */
.field{display:block;margin:0 0 4px;}
.field span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.field input{
  width:100%;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;font-size:17px;font-family:inherit;
}

/* ---------- device list ---------- */
.count{font-size:14px;color:var(--muted);margin:0 0 12px;}
.row{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;
}
.row.needs{border-color:var(--amber);}
.row.bad{border-color:var(--red);}
.row-top{display:flex;align-items:baseline;gap:12px;}
.row-name{flex:1;font-size:17px;font-weight:550;}
.row-qty{color:var(--muted);font-size:15px;}
.row-bot{display:flex;align-items:center;gap:12px;margin-top:8px;}
.row-price{
  width:120px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:16px;font-family:inherit;
}
.row-to{font-size:14px;color:var(--muted);}
.row-warn{font-size:14px;color:var(--red);margin:8px 0 0;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.chip{
  background:transparent;color:var(--text);
  border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:15px;font-family:inherit;cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}
.chip-group{margin-top:10px;}
.chip-group > span{font-size:13px;color:var(--amber);}

/* ---------- run log ---------- */
.runhead{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.dot{width:11px;height:11px;border-radius:50%;background:var(--blue);flex:none;}
.dot.working{animation:pulse 1.2s ease-in-out infinite;}
.dot.done{background:var(--green);}
.dot.bad{background:var(--red);}
@keyframes pulse{50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){.dot.working{animation:none;}}

.log{list-style:none;margin:0;padding:0;}
.log li{
  padding:10px 0 10px 20px;border-bottom:1px solid var(--line);
  position:relative;font-size:15px;
}
.log li:last-child{border-bottom:0;}
.log li::before{
  content:"";position:absolute;left:2px;top:17px;
  width:7px;height:7px;border-radius:50%;background:var(--muted);
}
.log li.ok::before{background:var(--green);}
.log li.wait::before{background:var(--amber);}
.log li.error::before{background:var(--red);}
.log li.error{color:var(--red);}
.log li.wait{color:var(--amber);font-weight:600;}
.log .detail{
  display:block;color:var(--muted);font-size:13px;margin-top:2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- buttons ---------- */
button{font-family:inherit;}
.wide{display:block;width:100%;}
.primary,.ghost,.danger{
  border-radius:var(--radius);padding:15px 18px;
  font-size:17px;font-weight:600;cursor:pointer;border:1px solid transparent;
}
.primary{background:var(--blue);color:#fff;}
.primary:hover{background:var(--blue-hi);}
.primary:disabled{background:#2b313a;color:#5f6874;cursor:not-allowed;}
.ghost{background:transparent;color:var(--muted);border-color:var(--line);margin-top:14px;}
.ghost:hover{color:var(--text);}
.danger{background:transparent;color:var(--red);border-color:var(--red);}
.danger:hover{background:var(--red);color:#fff;}

.dock{
  position:sticky;bottom:0;
  background:linear-gradient(to top,var(--base) 70%,rgba(25,28,33,0));
  padding:16px 20px calc(18px + env(safe-area-inset-bottom));
  max-width:640px;margin:0 auto;width:100%;
}
.blocked{color:var(--amber);font-size:14px;margin:0 0 10px;text-align:center;}
.err{color:var(--red);font-size:14px;margin:10px 0 0;}