* { box-sizing: border-box; }

body {

  margin: 0;

  font-family: Arial, sans-serif;

  background: #f4f6f8;

  color: #1f2933;

}

main { width: min(980px, 100%); margin: 0 auto; padding: 16px; }

nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 16px;

}

a { color: #1d4ed8; text-decoration: none; font-weight: 700; }

.panel {

  background: #fff;

  border: 1px solid #d9e2ec;

  border-radius: 8px;

  padding: 18px;

  margin-bottom: 16px;

}

.narrow { max-width: 420px; margin: 56px auto; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

h1, h2 { margin-top: 0; }

label { display: block; font-weight: 700; margin: 12px 0; }

input {

  width: 100%;

  display: block;

  margin-top: 6px;

  padding: 12px;

  border: 1px solid #bcccdc;

  border-radius: 6px;

  font-size: 16px;

}

button {

  border: 0;

  border-radius: 6px;

  background: #126d57;

  color: #fff;

  padding: 12px 16px;

  font-weight: 700;

  cursor: pointer;

}

nav button { background: #52606d; }

#reader { max-width: 420px; margin-bottom: 12px; }

.result { margin-top: 16px; }

.pick {

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 10px;

  border-top: 1px solid #d9e2ec;

  padding: 12px 0;

  font-size: 18px;

}

.qty { font-weight: 800; }

.warning { color: #9a3412; font-weight: 700; }

.ok { color: #126d57; font-weight: 700; }