:root {
  --bg: #15171a;
  --fg: #e6e6e6;
  --muted: #8a8f98;
  --accent: #6cb2ff;
  --border: #2a2d33;
  --row-hover: #1d2026;
  --bad: #ff6b6b;
  --good: #6cff9b;
  --warn: #ffd66c;
  --running: #6cb2ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
h1 { font-size: 1.4rem; font-weight: 500; margin: 1rem 0; }
header { border-bottom: 1px solid var(--border); padding: .75rem 1.5rem; background: #101216; }
nav { display: flex; gap: 1rem; align-items: center; max-width: 1100px; margin: 0 auto; }
.brand { font-weight: 600; color: var(--fg); }
.sep { width: 1px; height: 1.2em; background: var(--border); }
.nav-link { color: var(--muted); padding: .15rem 0; border-bottom: 1px solid transparent; }
.nav-link:hover { color: var(--fg); text-decoration: none; }
.nav-link.is-active { color: var(--fg); border-bottom-color: var(--accent); }
.queue-link { color: var(--accent); font-weight: 500; }

.breadcrumbs { color: var(--muted); margin: .5rem 0 1rem; }
.breadcrumbs .crumb-sep { padding: 0 .25rem; color: var(--border); }

.preset-info { color: var(--muted); font-size: .9em; padding: .5rem .75rem; background: #1a1d22; border-left: 2px solid var(--accent); margin: 1rem 0; }
.preset-info em { color: var(--warn); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: var(--row-hover); }
td.num, th.num { text-align: right; color: var(--muted); }
td.icon { width: 1.5em; text-align: center; }
td.actions, th:last-child { text-align: right; white-space: nowrap; }
td.path { word-break: break-all; }
td.path .err { color: var(--bad); font-size: .85em; margin-top: .25rem; }
.empty { color: var(--muted); text-align: center; padding: 2rem; }

button { background: #2a2d33; color: var(--fg); border: 1px solid var(--border); padding: .25rem .5rem; cursor: pointer; font: inherit; border-radius: 3px; margin-left: .15rem; }
button:hover { background: #353941; }
button.danger { color: var(--bad); }

.badge { display: inline-block; padding: .15rem .5rem; border-radius: 2px; font-size: .8em; background: #2a2d33; }
.status-queued       { color: var(--muted); }
.status-dispatching  { color: var(--warn); }
.status-uploading    { color: var(--running); }
.status-completed    { color: var(--good); }
.status-failed       { color: var(--bad); }
.status-cancelled    { color: var(--muted); text-decoration: line-through; }

.enqueue-form { display: inline; margin: 0; }
.enqueue-form.primary-form { display: inline; }
.primary-action { background: var(--accent); color: #0c1218; border: none; font-weight: 500; }
.primary-action:hover { background: #8cc4ff; }
.action-menu { position: relative; display: inline-block; margin-left: -.15rem; }
.action-menu summary { list-style: none; cursor: pointer; padding: .25rem .4rem; background: #2a2d33; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); font-size: .85em; }
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu summary::marker { content: ""; }
.action-menu summary:hover { background: #353941; color: var(--fg); }
.action-menu[open] summary { background: #353941; color: var(--fg); }
.action-menu .action-list { list-style: none; position: absolute; right: 0; top: calc(100% + .25rem); background: #1a1d22; border: 1px solid var(--border); border-radius: 3px; min-width: 9rem; padding: .25rem 0; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.4); margin: 0; }
.action-menu .action-list li { padding: 0; }
.action-menu .action-list form { display: block; }
.action-menu .action-list button { width: 100%; text-align: left; background: transparent; border: none; padding: .35rem .75rem; border-radius: 0; margin: 0; color: var(--fg); }
.action-menu .action-list button:hover { background: var(--row-hover); }

dl.job-detail { display: grid; grid-template-columns: 10rem 1fr; gap: .25rem 1rem; }
dl.job-detail dt { color: var(--muted); }
dl.job-detail dd { margin: 0; word-break: break-all; }
dl.job-detail dd.err { color: var(--bad); }
code { background: #1a1d22; padding: .1rem .3rem; border-radius: 2px; }

/* settings */
.settings-form section { margin: 1.5rem 0; padding: 1rem; background: #1a1d22; border: 1px solid var(--border); border-radius: 4px; }
.settings-form h2 { font-size: 1rem; margin: 0 0 .75rem; color: var(--accent); font-weight: 500; }
.settings-form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem 1rem; align-items: end; }
.settings-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85em; color: var(--muted); }
.settings-form label.ck { flex-direction: row; align-items: center; gap: .5rem; color: var(--fg); }
.settings-form input[type=text], .settings-form input[type=number], .settings-form input[type=password], .settings-form select, .settings-form textarea {
  background: #15171a; color: var(--fg); border: 1px solid var(--border); padding: .35rem .5rem; font: inherit; border-radius: 3px;
}
.settings-form textarea { width: 100%; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; }
.settings-form label.full { display: block; margin-top: .75rem; }
.settings-form fieldset.groups-fieldset { border: 1px solid var(--border); padding: .75rem; margin-top: .75rem; border-radius: 3px; }
.settings-form fieldset.groups-fieldset legend { color: var(--muted); padding: 0 .5rem; font-size: .85em; }
.settings-form .group-section { margin-bottom: .75rem; }
.settings-form .group-section h3 { font-size: .85em; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: .25rem 0 .35rem; font-weight: 500; }
.settings-form .group-section label.ck { display: flex; padding: .15rem 0; }
.settings-form fieldset.server-row { border: 1px solid var(--border); padding: .75rem; margin-bottom: .75rem; border-radius: 3px; }
.settings-form fieldset.server-row legend { color: var(--muted); padding: 0 .5rem; font-size: .85em; }
.settings-form .server-actions { margin-top: .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.settings-form .form-actions { margin: 1rem 0; }
.settings-form button.primary { background: var(--accent); color: #0c1218; border: none; padding: .4rem 1rem; font-weight: 500; }
.settings-form button.primary:hover { background: #8cc4ff; }
.test-result { font-size: .85em; }
.test-result .ok { color: var(--good); }
.test-result .err { color: var(--bad); }
.notice { background: #1a2a1a; border-left: 3px solid var(--good); color: var(--good); padding: .5rem .75rem; margin: 1rem 0; }
p.err { background: #2a1a1a; border-left: 3px solid var(--bad); color: var(--bad); padding: .5rem .75rem; margin: 1rem 0; }
.apikey { margin: 1rem 0; padding: 1rem; background: #1a1d22; border: 1px solid var(--border); border-radius: 4px; }
.apikey h2 { font-size: 1rem; margin: 0 0 .25rem; color: var(--accent); font-weight: 500; }
.ct-groups-hint { color: var(--muted); font-size: .85em; margin: 0 0 .75rem; }
.ct-groups-grid { grid-template-columns: repeat(3, 1fr); }
.apikey .hint { color: var(--muted); font-size: .85em; margin: .25rem 0 .75rem; }
.apikey-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.apikey-val { font-size: .9em; word-break: break-all; flex: 1; }

/* home / library picker */
.muted { color: var(--muted); margin: 0 0 1.5rem; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.library-card { display: block; background: #1a1d22; border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; color: var(--fg); transition: border-color .1s, background .1s; }
.library-card:hover { background: #1f232a; border-color: var(--accent); text-decoration: none; }
.library-card.unavailable { opacity: .55; }
.library-card.unavailable:hover { border-color: var(--border); background: #1a1d22; }
.library-card-title { font-size: 1.1rem; font-weight: 500; color: var(--accent); margin-bottom: .5rem; }
.library-card-meta { color: var(--muted); font-size: .85em; }
.library-card-peek { list-style: none; padding: 0; margin: .5rem 0 0; color: var(--muted); font-size: .85em; }
.library-card-peek li { padding: .1rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge.bad { background: #2a1a1a; color: var(--bad); }

/* posting groups */
.groups-details { margin-top: 1.5rem; }
.groups-details > summary { cursor: pointer; color: var(--muted); font-size: .85em; padding: .3rem 0; user-select: none; }
.groups-details > summary:hover { color: var(--fg); }
.groups-details > summary::marker { content: ""; }
.groups-details > summary::-webkit-details-marker { display: none; }
.groups-details[open] > summary::before { content: "▾ "; }
.groups-details:not([open]) > summary::before { content: "▸ "; }
.groups-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.groups-list li { font-size: .8rem; color: var(--muted); padding: .1rem 0; }
.groups-list li::before { content: "→ "; color: var(--border); }

/* upload progress bar */
.job-progress { background: var(--border); border-radius: 2px; height: 3px; margin-top: 4px; overflow: hidden; min-width: 60px; }
.job-progress-bar { background: var(--running); height: 3px; border-radius: 2px; }
.job-progress-label { display: block; font-size: .75em; color: var(--muted); margin-top: 2px; }

/* postie log panel */
.log-details { margin-top: 1.5rem; }
.log-details > summary { cursor: pointer; color: var(--muted); font-size: .85em; padding: .3rem 0; user-select: none; }
.log-details > summary:hover { color: var(--fg); }
.log-details > summary::marker { content: ""; }
.log-details > summary::-webkit-details-marker { display: none; }
.log-details[open] > summary::before { content: "▾ "; }
.log-details:not([open]) > summary::before { content: "▸ "; }
.log-panel {
  background: #0d1117;
  color: #c9d1d9;
  font-size: .75rem;
  line-height: 1.4;
  padding: .5rem .75rem;
  max-height: 260px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: .4rem 0 0;
}

/* stats */
.stats-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.stat-card { background: #1a1d22; border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; }
.stat-label { color: var(--muted); font-size: .8em; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.5rem; font-weight: 500; color: var(--accent); margin-top: .25rem; }
.stats-section { margin: 1.5rem 0; }
.stats-section h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--accent); font-weight: 500; }
.stats-table .bar-cell { width: 30%; min-width: 8rem; }
.stats-table .bar { background: var(--border); border-radius: 2px; height: 6px; overflow: hidden; }
.stats-table .bar-fill { background: var(--accent); height: 6px; border-radius: 2px; }

/* dedupe confirm */
.dedupe-warn { background: #2a261a; border-left: 3px solid var(--warn); padding: .75rem 1rem; border-radius: 3px; margin: 1rem 0; }
.dedupe-warn p { margin: .25rem 0; }
.dedupe-meta { color: var(--muted); font-size: .9em; }
.dedupe-actions { display: flex; gap: 1rem; align-items: center; margin: 1.5rem 0; }
.cancel-link { color: var(--muted); }

/* per-row queue status circle on the library browser */
td.qstatus-cell { width: 1.6em; padding-right: 0; padding-left: .25rem; text-align: center; }
.qstatus {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  background: conic-gradient(var(--qcolor, var(--muted)) calc(var(--qp, 100) * 1%), var(--border) 0);
  position: relative;
  vertical-align: middle;
  --qcolor: var(--muted);
}
.qstatus::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--bg);
}
.qstatus.is-queued      { --qcolor: var(--muted); }
.qstatus.is-dispatching { --qcolor: var(--warn); }
.qstatus.is-packing     { --qcolor: var(--warn); }
.qstatus.is-uploading   { --qcolor: var(--running); }
.qstatus.is-completed   { --qcolor: var(--good); }
.qstatus.is-failed      { --qcolor: var(--bad); }
.qstatus.is-cancelled   { --qcolor: var(--muted); opacity: .55; }
.qstatus.is-completed::after, .qstatus.is-failed::after { display: none; }
.qstatus.is-active { animation: qstatus-pulse 1.6s ease-in-out infinite; }
.qstatus-link { position: absolute; inset: 0; border-radius: 50%; }
@keyframes qstatus-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px rgba(108,178,255,.18); } }
.status-text { font-size: .85em; color: var(--muted); padding: 0 .35rem; }
.status-text.status-completed { color: var(--good); }
.status-text.status-failed    { color: var(--bad); }
.status-text.status-uploading, .status-text.status-dispatching, .status-text.status-packing { color: var(--running); }

/* nav badge with the count of active jobs */
.queue-badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 .35em;
  margin-left: .35em;
  font-size: .75em;
  line-height: 1.4em;
  text-align: center;
  border-radius: .8em;
  background: var(--accent);
  color: #0c1218;
  font-weight: 600;
  vertical-align: middle;
}
.queue-badge:empty { display: none; }