/* Visual theme: dark navy with purple and blue light. Presentation only: no selector here is used by app.js. */
:root {
  color-scheme: dark;
  --bg: #0c0b26; --panel: #1a1748; --ink: #eef0ff; --muted: #a7aad3; --line: rgba(150, 138, 255, .2);
  --brand: #8b5cf6; --brand-2: #6d28d9; --brand-soft: #b9a8ff; --brand-ink: #ffffff;
  --bad: #fda4af; --bad-bg: rgba(244, 63, 94, .12); --warn: #fcd34d; --warn-bg: rgba(245, 158, 11, .12); --good: #86efac; --good-bg: rgba(34, 197, 94, .12);
  --field: rgba(9, 8, 32, .65); --field-line: rgba(150, 138, 255, .28);
  --panel-bg: linear-gradient(160deg, rgba(58, 46, 140, .42) 0%, rgba(30, 27, 84, .5) 45%, rgba(18, 17, 54, .62) 100%);
  --panel-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 34px rgba(3, 2, 20, .45);
  --radius: 16px;
  scrollbar-color: rgba(167, 139, 250, .4) transparent;
}
* { box-sizing: border-box; }
html { background: #0a0920; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(1100px 620px at -8% -12%, rgba(124, 58, 237, .38), transparent 62%),
    radial-gradient(900px 560px at 108% 112%, rgba(37, 99, 235, .36), transparent 60%),
    radial-gradient(700px 420px at 92% 8%, rgba(99, 102, 241, .14), transparent 65%),
    linear-gradient(180deg, #100d30 0%, #0b0a24 55%, #0a0a22 100%);
  background-attachment: fixed;
}
header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 14px 28px;
  background: linear-gradient(180deg, rgba(20, 17, 56, .92), rgba(14, 12, 42, .82));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(3, 2, 20, .35);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
h1 {
  font-size: 21px; margin: 0; font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(90deg, #ffffff 0%, #ece8ff 45%, #b39dff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-size: 18px; margin: 0 0 12px; font-weight: 650; letter-spacing: -.005em; color: #f4f3ff; }
h3 { font-size: 14px; margin: 16px 0 6px; font-weight: 650; color: #e6e4ff; }
section.panel > h2::before {
  content: ""; display: inline-block; width: 4px; height: .95em; margin-right: 10px; vertical-align: -.1em;
  border-radius: 4px; background: linear-gradient(180deg, #c4b5fd, #7c3aed);
  box-shadow: 0 0 10px rgba(139, 92, 246, .6);
}
nav { display: flex; flex-wrap: wrap; gap: 6px; }
nav button { background: none; color: var(--muted); border: 0; padding: 7px 15px; border-radius: 10px; font-weight: 500; transition: background-color .15s, color .15s; }
nav button:hover:not(:disabled) { color: var(--ink); background: rgba(255, 255, 255, .07); }
nav button[aria-current="page"], nav button[aria-current="page"]:hover:not(:disabled) {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); color: var(--brand-ink); font-weight: 650;
  box-shadow: 0 4px 16px rgba(124, 58, 237, .5), 0 1px 0 rgba(255, 255, 255, .25) inset;
}
main { max-width: 1120px; margin: 0 auto; padding: 24px 20px 72px; }
section.panel {
  background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 18px; box-shadow: var(--panel-shadow);
}
button {
  font: inherit; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--field-line);
  background: rgba(255, 255, 255, .05); color: var(--ink); cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s, filter .15s;
}
button:where(:hover:not(:disabled)) { background: rgba(167, 139, 250, .14); border-color: rgba(167, 139, 250, .6); }
button.primary {
  background: linear-gradient(135deg, #9f7aea 0%, #7c3aed 55%, #6d28d9 100%); color: var(--brand-ink);
  border-color: rgba(196, 181, 253, .45); font-weight: 650;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .38), 0 1px 0 rgba(255, 255, 255, .22) inset;
}
button.primary:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 8px 24px rgba(124, 58, 237, .5), 0 1px 0 rgba(255, 255, 255, .25) inset; }
button.danger { color: var(--bad); border-color: rgba(251, 113, 133, .55); background: rgba(244, 63, 94, .06); }
button.danger:hover:not(:disabled) { background: rgba(244, 63, 94, .16); border-color: rgba(251, 113, 133, .85); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
label { display: block; margin: 12px 0 5px; font-weight: 600; font-size: 13px; color: #dcdaf7; }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; font-weight: 400; font-size: 14px; color: var(--ink); }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], input[type=date], input[type=time], select, textarea {
  width: 100%; font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--field); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25) inset; transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=time]:focus, select:focus, textarea:focus {
  border-color: rgba(167, 139, 250, .8); box-shadow: 0 0 0 3px rgba(139, 92, 246, .22);
}
select option { background: #16143f; color: var(--ink); }
input[type=color] { width: 56px; height: 36px; padding: 3px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); }
input[type=file] { color: var(--muted); font: inherit; font-size: 14px; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 650; margin-right: 12px; padding: 8px 16px; border-radius: 10px; cursor: pointer; color: #fff;
  border: 1px solid rgba(196, 181, 253, .45); background: linear-gradient(135deg, #9f7aea 0%, #7c3aed 55%, #6d28d9 100%);
  box-shadow: 0 6px 18px rgba(124, 58, 237, .32);
}
textarea { min-height: 72px; resize: vertical; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.alert { padding: 11px 15px; border-radius: 12px; margin-bottom: 14px; border: 1px solid transparent; border-left-width: 4px; box-shadow: 0 8px 22px rgba(3, 2, 20, .3); }
.alert.bad { background: var(--bad-bg); color: var(--bad); border-color: rgba(251, 113, 133, .35); border-left-color: #fb7185; }
.alert.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(251, 191, 36, .3); border-left-color: #fbbf24; }
.alert.good { background: var(--good-bg); color: var(--good); border-color: rgba(74, 222, 128, .3); border-left-color: #4ade80; }
#notice { max-width: 1120px; margin: 16px auto 0; padding: 0 20px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.stat b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.stat span { color: var(--muted); font-size: 13px; }
.post { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 20px; }
.post img { width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; box-shadow: 0 10px 26px rgba(3, 2, 20, .45); }
@media (max-width: 620px) { .post { grid-template-columns: 1fr; } }
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1.5;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--field-line); color: #d9d7f5; vertical-align: middle;
}
.badge.published, .badge.approved, .badge.queued { color: var(--good); border-color: rgba(74, 222, 128, .7); background: rgba(34, 197, 94, .12); box-shadow: 0 0 10px rgba(34, 197, 94, .14); }
.badge.failed, .badge.outcome_unknown, .badge.generation_failed { color: var(--bad); border-color: rgba(251, 113, 133, .7); background: rgba(244, 63, 94, .12); }
.badge.review { color: #d8ccff; border-color: rgba(167, 139, 250, .7); background: rgba(139, 92, 246, .16); }
.caption { white-space: pre-wrap; }
.check { list-style: none; padding: 0; margin: 0; }
.check li { padding: 4px 0; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--muted); font-weight: 600; font-size: 12.5px; letter-spacing: .01em; border-bottom-color: rgba(150, 138, 255, .32); }
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: rgba(167, 139, 250, .06); }
tbody tr:last-child td { border-bottom: 0; }
td.time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.preview { max-width: 280px; border: 1px solid var(--line); border-radius: 12px; display: block; margin-top: 10px; box-shadow: 0 10px 26px rgba(3, 2, 20, .45); }
.logo { max-width: 120px; max-height: 80px; display: block; margin-top: 8px; }
.import { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
.import textarea { width: 100%; }
.preview[hidden] { display: none; }
.badge.awaiting_image { color: var(--warn); border-color: rgba(251, 191, 36, .7); background: rgba(245, 158, 11, .12); }
.prompt-used { font-size: 13px; background: rgba(9, 8, 32, .5); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; margin: 10px 0; }
.prompt-used p { margin: 4px 0 0; }
.badge.awaiting_caption { color: var(--warn); border-color: rgba(251, 191, 36, .7); background: rgba(245, 158, 11, .12); }
.calendar { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.calendar li {
  border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 76px; font-size: 12px; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(170deg, rgba(48, 40, 120, .45), rgba(22, 20, 62, .55));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 16px rgba(3, 2, 20, .3);
}
.calendar li > b { font-size: 13.5px; font-weight: 650; color: #f2f1ff; }
.calendar li.free { background: rgba(255, 255, 255, .025); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; }
.calendar li.free .hint { font-size: 13px; }
.day-post { width: 100%; padding: 2px; display: flex; flex-direction: column; gap: 6px; align-items: center; border: 0; background: none; color: inherit; }
.day-post:hover:not(:disabled) { filter: brightness(1.12); }
.day-post img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 14px rgba(3, 2, 20, .45); }
.batch { list-style: none; padding: 0; margin: 14px 0 0; }
.batch-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.batch-row img { width: 120px; border-radius: 10px; border: 1px solid var(--line); }
.batch-row input, .batch-row textarea { margin-top: 6px; }
.batch-row .row input[type=date] { width: auto; }
details { margin-top: 12px; }
summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--brand-soft); }
summary:hover { color: #d8ccff; }
@media (max-width: 620px) { .batch-row { grid-template-columns: 1fr; } }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.switch-row h2 { font-size: 23px; margin-bottom: 4px; font-weight: 700; }
.switch-row p { margin: 0; }
section.panel.switch { padding: 22px 26px; }
section.panel.switch.on {
  border-color: rgba(167, 139, 250, .75); border-width: 2px;
  background: linear-gradient(120deg, rgba(91, 61, 196, .5) 0%, rgba(49, 38, 134, .5) 55%, rgba(37, 52, 150, .45) 100%);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .18), 0 0 34px rgba(124, 58, 237, .32), 0 14px 34px rgba(3, 2, 20, .45);
}
.toggle {
  display: inline-flex; align-items: center; gap: 10px; flex: none; min-width: 120px; padding: 6px 16px 6px 6px; border-radius: 999px;
  font-weight: 700; font-size: 17px; letter-spacing: .02em; background: rgba(255, 255, 255, .07); border-color: var(--field-line);
}
.toggle .knob { width: 32px; height: 32px; border-radius: 50%; background: #6b6e99; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .15s; }
.toggle.is-on {
  flex-direction: row-reverse; padding: 6px 6px 6px 18px; color: #052e16;
  background: linear-gradient(135deg, #86efac 0%, #4ade80 45%, #22c55e 100%); border-color: rgba(187, 247, 208, .7);
  box-shadow: 0 0 22px rgba(34, 197, 94, .4), 0 1px 0 rgba(255, 255, 255, .4) inset;
}
.toggle.is-on .knob { background: #ffffff; }
.toggle.is-on:hover:not(:disabled) { filter: brightness(1.06); background: linear-gradient(135deg, #86efac 0%, #4ade80 45%, #22c55e 100%); border-color: rgba(187, 247, 208, .9); }
button.link { border: 0; background: none; padding: 0; color: var(--brand-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(185, 168, 255, .5); font-size: inherit; }
button.link:hover:not(:disabled) { color: #ddd3ff; text-decoration-color: currentColor; }
.post.compact { grid-template-columns: minmax(90px, 140px) 1fr; }
.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0; }
.results { list-style: none; padding: 0; margin: 0; }
.results li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.results li:last-child { border-bottom: 0; }
.usage { padding: 0 4px; }
@media (max-width: 620px) {
  header { padding: 12px 16px; }
  main { padding: 18px 12px 60px; }
  section.panel { padding: 16px 16px; }
  .switch-row { flex-direction: column; align-items: flex-start; }
  .post.compact { grid-template-columns: 90px 1fr; }
}
#account-picker { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#account-picker select { width: auto; min-width: 210px; padding: 8px 12px; }
.account-line { margin: 0 0 14px; color: var(--muted); font-size: 15.5px; }
.account-line b { color: var(--ink); font-weight: 700; }
.hint.scope { font-weight: 600; }
.badge { white-space: nowrap; }
.scroll { overflow-x: auto; }
.scroll th, .scroll td { white-space: nowrap; }