:root {
  color-scheme: dark;
  --background: oklch(0.115 0.012 258);
  --card: oklch(0.163 0.014 258);
  --foreground: oklch(0.96 0.006 250);
  --muted-foreground: oklch(0.68 0.018 252);
  --border: oklch(0.75 0.04 250 / 16%);
  --input: oklch(0.75 0.04 250 / 22%);
  --primary: oklch(0.72 0.15 232);
  --primary-foreground: oklch(0.12 0.015 258);
  --destructive: oklch(0.68 0.21 22);
  --neon-live: oklch(0.70 0.23 12);
  --neon-wait: oklch(0.80 0.16 62);
  --neon-done: oklch(0.75 0.15 162);
  --neon-archive: oklch(0.72 0.15 232);
  --neon-studio: oklch(0.66 0.22 295);
  --radius: 0.75rem;
  --font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; }
/* .login-wrap and the board views set an explicit `display`, which outranks the
   UA stylesheet's [hidden] rule — without this they stay visible when hidden. */
[hidden] { display: none !important; }
body {
  font-family: system-ui, 'DM Sans', sans-serif;
  background: var(--background); color: var(--foreground);
  min-height: 100vh;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 42% at 12% 0%,  color-mix(in oklch, var(--neon-archive) 13%, transparent), transparent 70%),
    radial-gradient(52% 40% at 88% 6%,  color-mix(in oklch, var(--neon-studio) 11%, transparent), transparent 68%),
    radial-gradient(60% 46% at 55% 100%, color-mix(in oklch, var(--neon-done) 9%, transparent), transparent 72%);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate(0,0); filter: hue-rotate(0deg); }
  to   { transform: translate(1.5%,1%); filter: hue-rotate(14deg); }
}

header {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 1.2rem; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--card) 55%, transparent);
  backdrop-filter: blur(14px) saturate(1.5);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .55rem; }
header h1 { font-size: 1rem; letter-spacing: .02em; white-space: nowrap; }
.ver {
  font-family: var(--font-mono); font-size: .68rem; color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: 999px; padding: .1rem .5rem;
}
.user {
  color: var(--muted-foreground); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
}
.tabs { display: flex; gap: .2rem; flex-wrap: wrap; }
.tab {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: .42rem .95rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground);
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.tab:hover { color: var(--foreground); background: color-mix(in oklch, var(--foreground) 5%, transparent); }
.tab[data-active="true"] {
  color: var(--primary-foreground); background: var(--primary);
  box-shadow: 0 4px 14px -4px color-mix(in oklch, var(--primary) 55%, transparent);
}

main { padding: 1.2rem; max-width: 1500px; margin: 0 auto; }
.page { display: none; }
.page.show { display: grid; gap: 1.1rem; }

.panel {
  background: color-mix(in oklch, var(--card) 72%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.panel > h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted-foreground); font-weight: 600; margin-bottom: .8rem;
}

/* ---- controls ---- */
.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; }
.chips { display: flex; gap: .2rem; background: color-mix(in oklch, var(--foreground) 4%, transparent);
  border-radius: 999px; padding: .18rem; }
.chip {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: .34rem .8rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.chip.active { background: var(--primary); color: var(--primary-foreground); }
select, input[type=text], input[type=date], input[type=password], textarea {
  background: color-mix(in oklch, var(--background) 70%, transparent);
  border: 1px solid var(--input); border-radius: .5rem; color: var(--foreground);
  padding: .4rem .6rem; font-size: .82rem; font-family: inherit;
}
textarea { width: 100%; min-height: 8rem; font-family: var(--font-mono); font-size: .78rem; }
button.btn {
  border: 1px solid var(--border); background: color-mix(in oklch, var(--foreground) 6%, transparent);
  color: var(--foreground); border-radius: .5rem; padding: .4rem .8rem;
  font-size: .78rem; font-weight: 600; cursor: pointer;
}
button.btn:hover { background: color-mix(in oklch, var(--foreground) 12%, transparent); }
button.btn.primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
button.btn.danger { color: var(--destructive); }
.spacer { flex: 1; }

/* ---- status lights ---- */
.light { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; flex: none; }
.light-new       { background: var(--muted-foreground); }
.light-waiting   { background: var(--neon-wait);    box-shadow: 0 0 8px -1px var(--neon-wait); }
.light-generating{ background: var(--neon-studio);  box-shadow: 0 0 8px -1px var(--neon-studio); }
.light-generated { background: var(--neon-done);    box-shadow: 0 0 8px -1px var(--neon-done); }
.light-posted    { background: var(--neon-archive); box-shadow: 0 0 8px -1px var(--neon-archive); }

.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--border); border-radius: 999px;
  padding: .1rem .5rem; font-size: .66rem; color: var(--muted-foreground);
  white-space: nowrap;
}
.tag.warn   { color: var(--neon-wait); border-color: color-mix(in oklch, var(--neon-wait) 40%, transparent); }
.tag.danger { color: var(--destructive); border-color: color-mix(in oklch, var(--destructive) 45%, transparent); }
.tag.ok     { color: var(--neon-done); border-color: color-mix(in oklch, var(--neon-done) 40%, transparent); }

/* ---- CALENDAR: day agenda ---- */
/* Days run down the page, not across it. The old grid was 17 channels wide by 17
   days across (3090px) and had to be scrolled sideways to read; this reads top to
   bottom at any window width, and every row is placed by its real scheduledDate. */
.agenda { display: grid; gap: .5rem; }
.day {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: color-mix(in oklch, var(--card) 45%, transparent); overflow: hidden;
}
.day.is-today { border-color: color-mix(in oklch, var(--primary) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 25%, transparent); }
.day.is-past { opacity: .62; }
.day.is-empty .day-head { opacity: .5; }
.day-head {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem .8rem; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--foreground) 3%, transparent);
}
.day.is-empty .day-head { border-bottom: 0; }
.day-name { font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.day.is-today .day-name { color: var(--primary); }
.day-date { font-size: .72rem; color: var(--muted-foreground); font-family: var(--font-mono); }
.day-count { margin-left: auto; font-size: .68rem; color: var(--muted-foreground); }
.day-rows { display: grid; }

/* one line per video — the old calendar drew a full bordered card in all 289
   cells, most of them empty. A line fits ~14 days on one screen. */
.vrow {
  display: flex; align-items: center; gap: .55rem;
  padding: .38rem .8rem; cursor: pointer; border-top: 1px solid color-mix(in oklch, var(--border) 45%, transparent);
  font-size: .82rem;
}
.vrow:first-child { border-top: 0; }
.vrow:hover { background: color-mix(in oklch, var(--foreground) 5%, transparent); }
.vrow-ch { width: 12.5rem; flex: none; color: var(--muted-foreground); font-size: .76rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow-flags { display: flex; gap: .3rem; flex: none; }
.vrow.is-overdue { background: color-mix(in oklch, var(--destructive) 9%, transparent); }
.vrow.is-killed .vrow-ch { text-decoration: line-through; }

/* ---- RUNWAY ---- */
.runway { display: grid; gap: .35rem; }
.rw {
  display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem;
  border-radius: .5rem; cursor: pointer; font-size: .82rem;
}
.rw:hover { background: color-mix(in oklch, var(--foreground) 5%, transparent); }
.rw-name { width: 14rem; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-bar { flex: 1; height: .55rem; border-radius: 999px;
  background: color-mix(in oklch, var(--foreground) 7%, transparent); overflow: hidden; }
.rw-fill { height: 100%; border-radius: 999px; background: var(--neon-done); }
.rw-fill.low  { background: var(--neon-wait); }
.rw-fill.crit { background: var(--destructive); }
.rw-meta { width: 12rem; flex: none; text-align: right; font-size: .72rem;
  color: var(--muted-foreground); font-family: var(--font-mono); }

/* ---- KANBAN ---- */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: .7rem; }
.kcol { background: color-mix(in oklch, var(--card) 45%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; min-height: 6rem; }
.kcol h3 { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted-foreground); margin-bottom: .55rem; display: flex; align-items: center; gap: .35rem; }
.kcol h3 .n { margin-left: auto; }
.kcard {
  background: color-mix(in oklch, var(--foreground) 5%, transparent);
  border: 1px solid var(--border); border-radius: .5rem;
  padding: .45rem .55rem; margin-bottom: .4rem; cursor: pointer; font-size: .78rem;
}
.kcard:hover { background: color-mix(in oklch, var(--foreground) 10%, transparent); }
.kcard-ch { font-size: .68rem; color: var(--muted-foreground); margin-bottom: .15rem; }
.kcard-flags { display: flex; gap: .25rem; margin-top: .3rem; flex-wrap: wrap; }

/* ---- CHANNEL CARDS ---- */
.chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .7rem; }
.chcard {
  background: color-mix(in oklch, var(--card) 60%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .8rem .9rem; cursor: pointer; border-left: 3px solid var(--border);
}
.chcard:hover { background: color-mix(in oklch, var(--card) 85%, transparent); }
.chcard.killed { opacity: .55; border-left-color: var(--destructive); }
.chcard-top { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; }
.chcard-name { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chcard-niche { font-size: .72rem; color: var(--muted-foreground); margin-bottom: .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chcard-stats { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ---- DRAWER ---- */
.drawer-back { position: fixed; inset: 0; background: oklch(0 0 0 / 55%); z-index: 30; display: none; }
.drawer-back.show { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--card); border-left: 1px solid var(--border); z-index: 31;
  transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column;
}
.drawer.show { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: .95rem; flex: 1; }
.drawer-body { padding: 1rem; overflow-y: auto; flex: 1; display: grid; gap: .9rem; }
.field { display: grid; gap: .25rem; }
.field label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted-foreground); font-weight: 600; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.empty-state { color: var(--muted-foreground); font-size: .82rem; padding: 1.2rem; text-align: center; }

/* ---- docs / releases ---- */
.prose { line-height: 1.65; font-size: .9rem; max-width: 62rem; }
.prose h3 { font-size: .95rem; margin: 1.1rem 0 .3rem; }
.prose p { margin: .5rem 0; color: color-mix(in oklch, var(--foreground) 88%, transparent); }
.prose ul { margin: .4rem 0 .4rem 1.1rem; }
.prose li { margin: .25rem 0; }
.prose code { font-family: var(--font-mono); font-size: .82em;
  background: color-mix(in oklch, var(--foreground) 8%, transparent); padding: .05rem .3rem; border-radius: .25rem; }
.rel { border-left: 2px solid var(--border); padding: 0 0 1rem 1rem; margin-left: .3rem; }
.rel h3 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .3rem; }
.rel .relver { font-family: var(--font-mono); color: var(--primary); }
.rel .reldate { font-size: .72rem; color: var(--muted-foreground); }

/* ---- login ---- */
.login-wrap { display: grid; place-items: center; min-height: 80vh; }
.login { display: grid; gap: .7rem; width: min(320px, 90vw); }
.login .who { display: flex; gap: .4rem; }
.login .who button { flex: 1; }
.err { color: var(--destructive); font-size: .78rem; min-height: 1rem; }

@media (max-width: 820px) {
  .kanban { grid-template-columns: 1fr; }
  .vrow-ch { width: 7rem; }
  .rw-name { width: 8rem; }
  .rw-meta { width: 7rem; }
  header { flex-wrap: wrap; }
}