:root {
  color: #17211f;
  background: #f6faf8;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { min-height: 44px; font: inherit; }
button {
  border: 0;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
  padding: 0 16px;
  font-weight: 700;
}

.topbar {
  align-items: center;
  background: #0b3b37;
  color: #fff;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
}
.shell { margin: 0 auto; max-width: 1120px; padding: 16px; }
.panel, .module { margin: 0 0 20px; }
.login {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
h1, h2 { margin: 0 0 12px; }
label { display: grid; gap: 6px; font-weight: 700; }
input, select {
  border: 1px solid #b8cbc6;
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
}
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.tabs a {
  border: 1px solid #9bb8b2;
  border-radius: 999px;
  color: #0b3b37;
  min-height: 44px;
  padding: 10px 14px;
  text-decoration: none;
  white-space: nowrap;
}
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.product, .queue li {
  border: 1px solid #d4e1de;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.queue { display: grid; gap: 8px; padding-left: 24px; }
.notice { color: #4f625e; }
@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .shell { padding: 12px; }
  .login { grid-template-columns: 1fr; }
  button { width: 100%; }
}