/* Event Media AI — Local DEV Review UI */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f0f2f5;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.5;
}

header {
  background: #1e293b;
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
header h1 { font-size: 1.1rem; font-weight: 600; }
header .badge {
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.05em;
  font-weight: 700;
}
header nav { margin-left: auto; display: flex; gap: 16px; }
header nav a { color: #94a3b8; text-decoration: none; font-size: 0.9rem; }
header nav a:hover { color: #fff; }

.container { max-width: 900px; margin: 32px auto; padding: 0 16px; }

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}
.card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; color: #1e293b; }
.card h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; color: #334155; }

label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 4px; color: #374151; }
input[type=text], input[type=email], input[type=number], input[type=password], textarea, select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 12px;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
button:hover { background: #1d4ed8; }
button.secondary { background: #64748b; }
button.secondary:hover { background: #475569; }
button.danger { background: #dc2626; }
button.danger:hover { background: #b91c1c; }
button.success { background: #16a34a; }
button.success:hover { background: #15803d; }
button:disabled { opacity: 0.5; cursor: default; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.status {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.875rem;
  margin-top: 10px;
}
.status.ok   { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.status.err  { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.status.info { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.status.warn { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }

.hidden { display: none !important; }

pre.code {
  background: #1e293b;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 8px;
}

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th { text-align: left; padding: 8px 10px; border-bottom: 2px solid #e2e8f0; color: #6b7280; font-size: 0.8rem; }
td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
tr:hover td { background: #f8fafc; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.tag.draft       { background:#f1f5f9; color:#475569; }
.tag.upload_open { background:#dcfce7; color:#15803d; }
.tag.upload_closed { background:#fef3c7; color:#92400e; }
.tag.generation_ready { background:#dbeafe; color:#1d4ed8; }
.tag.generating  { background:#ede9fe; color:#5b21b6; }
.tag.complete    { background:#d1fae5; color:#065f46; }
.tag.generation_failed { background:#fee2e2; color:#b91c1c; }
.tag.curation    { background:#fef9c3; color:#854d0e; }
.tag.default     { background:#f1f5f9; color:#374151; }

.section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.link { color: #2563eb; text-decoration: none; }
.link:hover { text-decoration: underline; }

.mono { font-family: ui-monospace, monospace; font-size: 0.85em; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.checkbox-row input[type=checkbox] { width: auto; margin: 0; }

.manifest-item {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.manifest-item a { color: #2563eb; word-break: break-all; }