:root{
  --bg:#ffffff; --line:#e5e7eb; --text:#0b1220; --muted:#6b7280; --accent:#0a84ff; --ok:#16a34a;
  --danger:#b91c1c; --danger-border:#fecaca; --danger-bg:#fee2e2;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:18px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.wrap{max-width:640px;margin:0 auto;padding:16px}
h1{font-size:22px;margin:0 0 12px}
.row{display:flex;gap:.5rem;align-items:center}
input,button{padding:.65rem;border:1px solid var(--line);border-radius:10px;font-size:16px}
input{flex:1;min-width:0}
/* Qty input sized for visibility on mobile */
input.qty{flex:0 0 auto;width:4ch !important;max-width:4ch !important;text-align:center;letter-spacing:.4px}
button{cursor:pointer;background:#fff}
.btn-add{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.small{font-size:12px;color:var(--muted);margin-top:6px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:.5rem;flex-wrap:wrap}
.link{border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;color:#374151;background:#fff}
.sync{display:flex;align-items:center;gap:.5rem}
.dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--line)}
.okdot{background:#86efac}
.warn{background:#fde68a}
.list{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.item{
  display:grid;
  grid-template-columns:auto auto auto 1fr auto; /* ✓ qty controls name date */
  align-items:center;
  gap:.5rem;
  border:1px solid var(--line);
  padding:.6rem;
  border-radius:10px
}
.qtypill{border:1px solid var(--line);border-radius:999px;padding:.15rem .5rem;font-weight:700;min-width:2ch;text-align:center}
.controls{display:flex;flex-direction:column;gap:2px}
.ctrl{border:1px dashed var(--line);border-radius:8px;padding:.1rem .45rem;line-height:1}
.ctrl:active{transform:scale(.97)}
.name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.meta{font-size:12px;color:var(--muted);text-align:right}
.meta.hidden{display:none}
.ok{background:#dcfce7;border-color:#bbf7d0;color:#166534;border:1px solid #bbf7d0;border-radius:8px;padding:.4rem .6rem}
.hx{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger);border-radius:8px;padding:.4rem .6rem;font-size:16px;line-height:1}
@media (max-width:400px){.item{grid-template-columns:auto auto auto 1fr}.meta{grid-column:1/-1;text-align:left}}