:root {
  --bg: #fafafa;
  --fg: #000000;
  --muted: #52525b;
  --muted-2: #71717a;
  --border: #e4e4e7;
  --card-bg: #ffffff;
  --btn-fg: #ffffff;
  --btn-bg: #000000;
  --btn-bg-hover: #27272a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --fg: #fafafa;
    --muted: #a1a1aa;
    --muted-2: #71717a;
    --border: #27272a;
    --card-bg: #09090b;
    --btn-fg: #000000;
    --btn-bg: #ffffff;
    --btn-bg-hover: #e4e4e7;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}
main { max-width: 56rem; margin: 0 auto; padding: 4rem 1.5rem; }
main.narrow { max-width: 48rem; }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; gap: 1rem; flex-wrap: wrap; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0; }
.subtitle { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted); }
.actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1.25rem;
  border-radius: 9999px; font-size: 0.875rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--border); color: var(--fg); background: transparent; cursor: pointer;
}
.btn:hover { background: rgba(127,127,127,0.1); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-link { border: none; background: none; padding: 0; height: auto; color: var(--muted); font-size: 0.875rem; }
.btn-link:hover { color: var(--fg); background: none; }
.btn-danger { color: #dc2626; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.card { border: 1px solid var(--border); border-radius: 0.5rem; background: var(--card-bg); padding: 1.5rem; }
.empty { border: 1px dashed var(--border); border-radius: 0.5rem; padding: 2.5rem 1.5rem; text-align: center; font-size: 0.875rem; color: var(--muted-2); }
.banner-success { border: 1px solid #a7f3d0; background: #ecfdf5; color: #065f46; border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; margin-bottom: 1.5rem; }
@media (prefers-color-scheme: dark) { .banner-success { border-color: #064e3b; background: #022c22; color: #6ee7b7; } }

ul.list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 0.5rem; }
ul.list > li { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
ul.list > li:last-child { border-bottom: none; }
.row-title { font-size: 0.875rem; font-weight: 500; }
.row-sub { font-size: 0.75rem; color: var(--muted); margin: 0.15rem 0 0; }

.badge { display: inline-block; border-radius: 9999px; padding: 0.1rem 0.5rem; font-size: 0.7rem; font-weight: 500; }
.badge-red { background: #fef2f2; color: #b91c1c; }
.badge-amber { background: #fffbeb; color: #92400e; }
.badge-blue { background: #eff6ff; color: #1d4ed8; }
.badge-emerald { background: #ecfdf5; color: #047857; }
.badge-zinc { background: #f4f4f5; color: #3f3f46; }
@media (prefers-color-scheme: dark) {
  .badge-red { background: #450a0a; color: #fca5a5; }
  .badge-amber { background: #451a03; color: #fcd34d; }
  .badge-blue { background: #172554; color: #93c5fd; }
  .badge-emerald { background: #022c22; color: #6ee7b7; }
  .badge-zinc { background: #27272a; color: #d4d4d8; }
}

form.card { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field label { font-size: 0.875rem; font-weight: 500; }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
input, select, textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 0.375rem; padding: 0.5rem 0.75rem;
  font-size: 0.875rem; background: var(--card-bg); color: var(--fg); font-family: inherit;
}
.hint { font-size: 0.75rem; color: var(--muted); margin: 0; }
.error-box { background: #fef2f2; color: #b91c1c; border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.success-box { background: #ecfdf5; color: #047857; border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
@media (prefers-color-scheme: dark) {
  .error-box { background: #450a0a; color: #fca5a5; }
  .success-box { background: #022c22; color: #6ee7b7; }
}

.day-group { margin-bottom: 1.5rem; }
.day-group h3 { font-size: 0.875rem; font-weight: 600; text-transform: capitalize; color: var(--muted); margin: 0 0 0.5rem; }
.adset-block { padding-left: 0.75rem; margin-top: 0.5rem; }
.ad-block { padding-left: 1rem; margin-top: 0.25rem; }
.section-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; }
.mt-10 { margin-top: 2.5rem; }