:root {
  color-scheme: light;
  --forest: #0d4a3c;
  --action: #0a8f70;
  --action-soft: #e4f4ef;
  --yellow: #e9ad28;
  --yellow-soft: #fff7dd;
  --red: #c83d4d;
  --red-soft: #fdecef;
  --ink: #15221e;
  --muted: #68746f;
  --line: #dce4e1;
  --surface: #ffffff;
  --page: #f2f5f4;
  --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--page); color: var(--ink); }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.screen { min-height: 100vh; }

#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; color: var(--forest); }
.login-card p { margin: 0 0 20px; font-size: 13px; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.field input, .field select {
  font: inherit;
  font-weight: 400;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
}

button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid transparent; }
button.primary { background: var(--action); color: #fff; padding: 11px 16px; font-weight: 700; }
button.primary:disabled { opacity: 0.6; cursor: default; }
button.full { width: 100%; }
button.secondary { background: var(--surface); border-color: var(--line); color: var(--ink); padding: 10px 14px; font-weight: 600; }
button.small { padding: 6px 12px; font-size: 13px; }
button.danger { background: var(--red-soft); color: var(--red); }
button.confirm { background: var(--action-soft); color: var(--action); }

.form-error { color: var(--red); font-size: 13px; margin: 8px 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; color: var(--forest); }
.brand span { font-weight: 500; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 12px; font-size: 13px; }

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

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type="search"], .toolbar select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
}
.toolbar input[type="search"] { flex: 1; min-width: 200px; }

.restaurant-list { display: flex; flex-direction: column; gap: 10px; }
.restaurant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.restaurant-row:hover { border-color: var(--action); }
.restaurant-row-main { display: flex; flex-direction: column; gap: 2px; }
.restaurant-row-name { font-weight: 700; }
.restaurant-row-meta { font-size: 12.5px; color: var(--muted); }

.badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge.status-none { background: var(--action-soft); color: var(--action); }
.badge.status-pending { background: var(--yellow-soft); color: var(--yellow); }
.badge.status-approved { background: var(--action-soft); color: var(--action); }
.badge.status-rejected { background: var(--red-soft); color: var(--red); }
.badge.activated-true { background: var(--action-soft); color: var(--action); }
.badge.activated-false { background: var(--red-soft); color: var(--red); }

.detail-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  margin-top: 14px;
}
.detail-card h2 { margin: 0 0 4px; }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--page); font-size: 13.5px; }
.detail-row:last-child { border-bottom: none; }
.detail-row span:first-child { color: var(--muted); }
.detail-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.member-list { margin-top: 8px; }
.member-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }