:root { --ink: #1f1f1f; --amber: #f2a900; --grey: #6b6b6b; --line: #e3e3e3; --bg: #ffffff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
main { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
h1 { font-size: 1.6rem; margin: 0 0 8px; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
th { color: var(--grey); font-weight: 600; }
.stock { font-weight: 600; }
.stock.in-stock { color: #1a7f37; }
.stock.low { color: #b45309; }
.stock.out { color: var(--grey); }
button, .btn { background: var(--amber); color: var(--ink); border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 600; }
form.login { max-width: 360px; margin: 48px auto; display: grid; gap: 12px; }
form.login label, form label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--grey); }
input, select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
form.inline { display: inline; }
form.inline button { padding: 4px 10px; font-size: 0.85rem; margin-left: 4px; }
.error { color: #b42318; font-weight: 600; }
.notice { color: #1a7f37; font-weight: 600; }