:root { --green:#3ab54a; --ink:#111; --grey:#555; --bg:#f4f4f4; --line:#e6e6e6; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Rubik',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); }
.wrap { max-width:820px; margin:0 auto; padding:20px; }
.brand { font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:14px; }
.brand b { color:var(--green); }

/* login */
.login { min-height:100vh; display:grid; place-items:center; }
.card { background:#fff; border-radius:16px; padding:28px; width:100%; max-width:360px;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 8px 30px rgba(0,0,0,.06); }
.card h1 { font-size:18px; margin:14px 0 18px; }
label { display:block; font-size:12px; color:var(--grey); margin:12px 0 6px;
  text-transform:uppercase; letter-spacing:.06em; }
input[type=text],input[type=password],#q {
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:999px;
  font-size:15px; outline:none; }
input:focus,#q:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(58,181,74,.15); }
button { margin-top:18px; width:100%; padding:12px; border:0; border-radius:999px;
  background:var(--green); color:#fff; font-weight:700; font-size:15px; cursor:pointer;
  letter-spacing:.04em; }
button:hover { transform:translateY(-1px); }
.err { color:#c0271b; font-size:13px; margin-top:12px; min-height:16px; }

/* app */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.logout { width:auto; margin:0; padding:8px 14px; background:#111; font-size:12px; }
#q { border-radius:12px; margin:6px 0 18px; }
.hint { color:var(--grey); font-size:14px; padding:20px 0; }
.row { background:#fff; border-radius:12px; padding:12px 14px; margin-bottom:10px;
  display:flex; gap:12px; align-items:center;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.04); }
.row img { width:44px; height:44px; object-fit:cover; border-radius:8px; background:#eee; flex:none; }
.row .meta { flex:1; min-width:0; }
.row .title { font-weight:700; font-size:14px; }
.row .sub { color:var(--grey); font-size:12px; margin-top:2px; }
.badge { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#fff;
  background:#999; border-radius:6px; padding:2px 6px; margin-left:6px; }
.badge.draft { background:#e0a800; }
.qty { flex:none; font-weight:800; font-size:16px; padding:6px 12px; border-radius:999px;
  background:#eef7ef; color:var(--green); min-width:56px; text-align:center; }
.qty.low { background:#fdecea; color:#c0271b; }