* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: #f7f7f8;
  color: #1a1a1a;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.topnav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  background: #1a1a2e;
  color: #fff;
}
.topnav-brand { font-weight: 700; }
.topnav-links { display: flex; gap: 16px; flex: 1; }
.topnav-links a, .topnav-user a { color: #cfd2ff; text-decoration: none; }
.topnav-links a:hover, .topnav-user a:hover { text-decoration: underline; }
.topnav-user { display: flex; gap: 10px; align-items: center; color: #cfd2ff; }

h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; margin-top: 2rem; }

.card {
  background: #fff;
  border: 1px solid #e2e2e6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
th { color: #555; font-weight: 600; background: #fafafa; }
tr:hover { background: #fafbff; }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a {
  padding: 6px 14px;
  border-radius: 6px 6px 0 0;
  text-decoration: none;
  color: #333;
  background: #eceef2;
}
.tabs a.active { background: #1a1a2e; color: #fff; }

label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 0.9rem; }
input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
}
textarea { min-height: 160px; font-family: monospace; }
small.hint { color: #777; }

button, .button {
  background: #4048e0;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  margin-top: 16px;
}
button:hover, .button:hover { background: #3138b8; }
button.secondary, .button.secondary { background: #eceef2; color: #333; }
button.secondary:hover { background: #dcdfe6; }
button.danger { background: #c0392b; }
.link-button { background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; margin: 0; font-size: inherit; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; }
.badge-approved { background: #d4f4dd; color: #1e7a34; }
.badge-rejected { background: #fbdada; color: #a12525; }
.badge-needs_review { background: #fff2cc; color: #8a6d1a; }
.badge-pending { background: #e6e6e6; color: #555; }
.badge-yes { background: #d4f4dd; color: #1e7a34; }
.badge-no { background: #fbdada; color: #a12525; }
.badge-unknown { background: #e6e6e6; color: #555; }

.caveat { font-size: 0.78rem; color: #a15c00; background: #fff8e6; padding: 4px 8px; border-radius: 4px; display: inline-block; margin-top: 4px; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.flash-error { background: #fbdada; color: #a12525; }
.flash-ok { background: #d4f4dd; color: #1e7a34; }

.reel-links a { margin-right: 8px; font-size: 0.85rem; }