body {
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  color: #1a1a1a;
  background: #fafafa;
}

.container {
  max-width: 960px;
  margin: 24px auto;
  padding: 0 20px;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: #1a1a1a;
  color: #fff;
}
.topnav a { color: #fff; text-decoration: none; }
.topnav a:hover { text-decoration: underline; }
.topnav .brand { font-weight: 700; }
.topnav .spacer { flex: 1; }
.topnav .whoami { opacity: 0.8; font-size: 0.9em; }

.inline-form { display: inline; }
.link-button {
  background: none; border: none; color: #fff; text-decoration: underline;
  cursor: pointer; font: inherit; padding: 0;
}

.flash { padding: 8px 12px; border-radius: 4px; margin-bottom: 16px; }
.flash-ok { background: #e6f4ea; color: #1a7f37; }
.flash-error { background: #fde8e8; color: #c0392b; }

.login-box { max-width: 320px; margin: 60px auto; }
.login-box form { display: flex; flex-direction: column; gap: 12px; }
.user-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; }
input, select { padding: 6px 8px; font-size: 1em; }
button { padding: 8px 12px; cursor: pointer; }

.hint { color: #666; font-size: 0.85em; }

.warehouse-select { margin-bottom: 16px; }

.upload-box { margin: 16px 0; padding: 12px; border: 1px solid #ddd; border-radius: 6px; background: #fff; }
.upload-box form { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

.price-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.price-table th, .price-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #eee; }
.price-table th { background: #f0f0f0; }

.table-scroll { overflow-x: auto; margin-top: 12px; }
.comparison-table { white-space: nowrap; margin-top: 0; }

.row-above { background: #fde8e8; }
.row-below { background: #e6f4ea; }
.row-neutral { color: #888; }

.source-box { margin: 16px 0; padding: 12px; border: 1px solid #ddd; border-radius: 6px; background: #fff; }
.source-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; max-width: 640px; }
.source-form textarea { font-family: monospace; padding: 6px 8px; }
.source-form fieldset { border: 1px solid #ddd; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.source-form legend { padding: 0 6px; color: #555; font-size: 0.85em; }
.checkbox-label { flex-direction: row !important; align-items: center; gap: 6px !important; }
.checkbox-label input[type="checkbox"] { width: auto; }
.source-actions { display: flex; gap: 8px; }
button.danger { background: #fde8e8; color: #c0392b; border: 1px solid #f3b3b3; }