:root {
  --bg: #0f1115; --panel: #161a21; --panel-2: #1c212a; --line: #262d38;
  --text: #e6e9ef; --muted: #8b95a7; --dim: #5d6675;
  --accent: #97ce4c; --accent-dim: #6f9c34;
  --warn: #e0a33e; --bad: #e0574c; --good: #4caf7d;
  --radius: 10px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f6f9; --panel: #ffffff; --panel-2: #f0f3f7; --line: #dde3ea;
    --text: #1a1f27; --muted: #5c6675; --dim: #8b95a7;
    --accent: #4f8c1c; --accent-dim: #6f9c34;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.top {
  display: flex; align-items: center; gap: 22px;
  padding: 0 22px; height: 56px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 700; font-size: 16px; letter-spacing: .3px; }
.brand .wordmark span { color: var(--accent); }
nav.top-nav { display: flex; gap: 4px; margin-left: 8px; }
nav.top-nav a {
  padding: 6px 12px; border-radius: 7px; color: var(--muted); font-weight: 500;
}
nav.top-nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
nav.top-nav a.active { background: var(--panel-2); color: var(--accent); }
.spacer { flex: 1; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 22px; }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 26px 0 10px; color: var(--muted);
     text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.sub { color: var(--muted); margin: 0 0 18px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
         gap: 12px; margin-bottom: 24px; }
.stat { background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 14px 16px; }
.stat .n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat .l { color: var(--muted); font-size: 12px; text-transform: uppercase;
           letter-spacing: .6px; margin-top: 4px; }
.stat.accent .n { color: var(--accent); }
.stat.warn .n { color: var(--warn); }

.panel { background: var(--panel); border: 1px solid var(--line);
         border-radius: var(--radius); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase;
     letter-spacing: .7px; color: var(--dim); font-weight: 600;
     padding: 10px 14px; background: var(--panel-2);
     border-bottom: 1px solid var(--line); }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--panel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.bar { height: 6px; background: var(--panel-2); border-radius: 4px;
       overflow: hidden; min-width: 90px; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; background: var(--accent); }
.bar.full > i { background: var(--good); }

.btn { display: inline-block; padding: 7px 14px; border-radius: 7px;
       border: 1px solid var(--line); background: var(--panel-2);
       color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }
.btn:hover { border-color: var(--accent-dim); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent);
               color: #10160a; font-weight: 600; }
.btn.primary:hover { background: var(--accent-dim); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
           margin-bottom: 18px; }
form.inline { display: inline; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 20px;
        font-size: 11px; font-weight: 600; letter-spacing: .3px;
        background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.pill.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.pill.bad  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.pill.run  { color: var(--accent); border-color: var(--accent-dim); }

.console { background: #0a0c10; border: 1px solid var(--line);
           border-radius: var(--radius); padding: 12px 14px; max-height: 300px;
           overflow-y: auto; font: 12px/1.65 ui-monospace, Consolas, monospace;
           color: #c6cedd; white-space: pre-wrap; word-break: break-word; }
.console:empty::after { content: "no activity yet"; color: var(--dim); }
.console .err { color: var(--bad); }

label.field { display: block; margin-bottom: 12px; }
label.field span { display: block; color: var(--muted); font-size: 12px;
                   margin-bottom: 5px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
         gap: 0 22px; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.muted { color: var(--muted); }
.scroll-x { overflow-x: auto; }
details.settings { margin-top: 26px; }
details.settings summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
details.settings > div { background: var(--panel); border: 1px solid var(--line);
                         border-radius: var(--radius); padding: 18px; margin-top: 10px; }
.issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px,1fr));
              gap: 6px; padding: 16px; }
.issue-chip { text-align: center; padding: 8px 4px; border-radius: 7px;
              border: 1px solid var(--line); background: var(--panel-2);
              font-size: 12px; font-variant-numeric: tabular-nums; }
.issue-chip.have { border-color: var(--accent-dim);
                   background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }
.issue-chip.have b { color: var(--accent); }

/* ---- covers ---- */
.cover-grid { display: grid; gap: 14px; padding: 16px;
              grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cover { position: relative; display: block; border-radius: 8px;
         overflow: hidden; background: var(--panel-2);
         border: 1px solid var(--line); aspect-ratio: 2 / 3; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.missing { display: flex; align-items: center; justify-content: center;
                 border-style: dashed; color: var(--dim); }
.cover .num { position: absolute; left: 0; right: 0; bottom: 0;
              padding: 5px 8px; font-size: 12px; font-weight: 600;
              font-variant-numeric: tabular-nums; color: #fff;
              background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.cover.owned { border-color: var(--accent-dim); }
.cover.owned .num { color: var(--accent); }
.cover-figure { display: block; }
.cover-figure .cap { margin-top: 5px; font-size: 11px; color: var(--muted);
                     text-align: center; overflow: hidden;
                     text-overflow: ellipsis; white-space: nowrap; }

/* small poster in the library table */
.poster { width: 34px; height: 51px; border-radius: 4px; object-fit: cover;
          border: 1px solid var(--line); background: var(--panel-2);
          display: block; flex: 0 0 auto; }
.poster-cell { display: flex; align-items: center; gap: 11px; }
.poster-fallback { width: 34px; height: 51px; border-radius: 4px;
                   border: 1px dashed var(--line); background: var(--panel-2);
                   flex: 0 0 auto; }
.legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
          margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
            border: 1px solid var(--line); margin-right: 5px; vertical-align: -1px; }
.legend i.owned { border-color: var(--accent-dim);
                  background: color-mix(in srgb, var(--accent) 30%, transparent); }
.legend i.gap { border-style: dashed; }

a.brand { color: var(--text); text-decoration: none; }
a.brand:hover { text-decoration: none; opacity: .85; }
label.field input[type=checkbox] { margin-right: 7px; vertical-align: -1px; }

/* ---- forms ---- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 4px 22px; }
.field { display: block; margin-bottom: 16px; }
.field > .label { display: block; color: var(--text); font-size: 13px;
                  font-weight: 500; margin-bottom: 6px; }
.field > .help { display: block; color: var(--muted); font-size: 11.5px;
                 line-height: 1.5; margin-top: 5px; }
.field .hint-inline { color: var(--dim); font-weight: 400; font-size: 11.5px; }

input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
select, textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  color: var(--text); padding: 9px 12px; border-radius: 8px;
  font: inherit; font-size: 13px; line-height: 1.4;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
input[type=number] { max-width: 190px; }
input::placeholder { color: var(--dim); }
input:hover, select:hover, textarea:hover { border-color: var(--dim); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-dim); background: var(--panel-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
input.mono-input { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
select { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* checkbox rows */
.check { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0;
         cursor: pointer; }
.check input[type=checkbox] { appearance: none; width: 17px; height: 17px;
  flex: 0 0 auto; margin-top: 1px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--bg); cursor: pointer; position: relative;
  transition: background .12s ease, border-color .12s ease; }
.check input[type=checkbox]:checked { background: var(--accent);
  border-color: var(--accent); }
.check input[type=checkbox]:checked::after { content: "";
  position: absolute; left: 5px; top: 1px; width: 4px; height: 9px;
  border: solid #10160a; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.check input[type=checkbox]:focus-visible { outline: 2px solid var(--accent-dim);
  outline-offset: 2px; }
.check .ct { font-size: 13px; line-height: 1.45; }
.check .ct em { display: block; color: var(--muted); font-style: normal;
                font-size: 11.5px; margin-top: 2px; }

.section { background: var(--panel); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 20px 22px; }
.section + h2 { margin-top: 28px; }
.row-actions { display: flex; gap: 10px; align-items: center;
               flex-wrap: wrap; margin-top: 6px; }
.test-result { font-size: 12px; }
.sticky-save { position: sticky; bottom: 0; margin-top: 22px;
  padding: 14px 0; background: linear-gradient(transparent, var(--bg) 32%);
  display: flex; gap: 10px; align-items: center; }
.envtable td { padding: 7px 12px; font-size: 12px; }

/* ---- naming templates ---- */
.naming-h { font-size: 12px; text-transform: uppercase; letter-spacing: .7px;
            color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.preview-box { background: var(--bg); border: 1px solid var(--line);
               border-radius: 8px; padding: 11px 13px; min-height: 42px;
               font: 12px/1.7 ui-monospace, Consolas, monospace;
               color: var(--muted); overflow-x: auto; }
.preview-box .pv { white-space: nowrap; }
.preview-box .pv::before { content: "→ "; color: var(--accent); }
details.tokens { margin-top: 20px; }
details.tokens summary { cursor: pointer; color: var(--muted); font-size: 12.5px;
                         padding: 6px 0; }
details.tokens summary:hover { color: var(--text); }
details.tokens > table { margin-top: 8px; background: var(--bg);
                         border: 1px solid var(--line); border-radius: 8px; }

.field > .help .mono { font-size: 11px; background: var(--panel-2);
                       padding: 1px 5px; border-radius: 4px;
                       border: 1px solid var(--line); white-space: nowrap; }
.field > .help code, .section p.muted .mono { white-space: nowrap; }

/* ---- brand mark ---- */
a.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { width: 26px; height: 26px; display: block; flex: 0 0 auto;
              filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 40%, transparent)); }
@media (max-width: 640px) { .brand-mark { width: 22px; height: 22px; } }

/* The flex gap must separate the icon from the wordmark only -- when the
   accent-coloured "r" was a direct flex child it inherited the gap too. */
a.brand .wordmark { display: inline; white-space: nowrap; }

/* ---- series hero ---- */
.hero { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 26px;
        flex-wrap: wrap; }
.hero-poster { width: 190px; flex: 0 0 auto; border-radius: 10px;
               overflow: hidden; border: 1px solid var(--line);
               background: var(--panel-2); aspect-ratio: 2/3;
               box-shadow: 0 8px 26px rgba(0,0,0,.38); }
.hero-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-poster.empty { display: flex; align-items: center; justify-content: center;
                     color: var(--dim); border-style: dashed; font-size: 12px; }
.hero-body { flex: 1 1 340px; min-width: 0; }
.hero-body h1 { font-size: 26px; margin: 2px 0 6px; line-height: 1.2; }
.hero-meta { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.hero-meta .dot { color: var(--dim); margin: 0 7px; }
.hero-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 18px; }
.hero-stats .hs { min-width: 62px; }
.hero-stats .hs .n { font-size: 21px; font-weight: 700; line-height: 1.15; }
.hero-stats .hs .l { color: var(--muted); font-size: 10.5px;
                     text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; }
.hero-stats .hs.accent .n { color: var(--accent); }
.hero-stats .hs.warn .n { color: var(--warn); }

/* clickable covers */
.cover-figure button.cover-btn { all: unset; display: block; cursor: pointer;
                                 width: 100%; border-radius: 8px; }
.cover-figure button.cover-btn:focus-visible { outline: 2px solid var(--accent-dim);
                                               outline-offset: 2px; }
.cover-figure button.cover-btn:hover .cover { border-color: var(--accent-dim);
                                              transform: translateY(-2px); }
.cover { transition: transform .12s ease, border-color .12s ease; }

/* ---- issue modal ---- */
.modal-back { position: fixed; inset: 0; background: rgba(6,8,11,.76);
              display: none; align-items: flex-start; justify-content: center;
              padding: 46px 20px; z-index: 60; overflow-y: auto;
              backdrop-filter: blur(2px); }
.modal-back.open { display: flex; }
.modal { background: var(--panel); border: 1px solid var(--line);
         border-radius: 12px; width: min(860px, 100%); overflow: hidden;
         box-shadow: 0 22px 60px rgba(0,0,0,.5); }
.modal-head { display: flex; align-items: center; gap: 12px;
              padding: 15px 18px; border-bottom: 1px solid var(--line);
              background: var(--panel-2); }
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-close { all: unset; cursor: pointer; color: var(--muted);
               font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.modal-close:hover { color: var(--text); background: var(--line); }
.modal-body { display: flex; gap: 22px; padding: 20px; flex-wrap: wrap; }
.modal-cover { width: 210px; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
               border: 1px solid var(--line); background: var(--panel-2); }
.modal-cover img { width: 100%; display: block; }
.modal-info { flex: 1 1 320px; min-width: 0; }
.kv { display: grid; grid-template-columns: 118px 1fr; gap: 7px 14px;
      font-size: 13px; align-items: baseline; }
.kv dt { color: var(--muted); font-size: 11.5px; text-transform: uppercase;
         letter-spacing: .5px; }
.kv dd { margin: 0; word-break: break-word; }
.summary-txt { margin: 16px 0 0; font-size: 13px; line-height: 1.6;
               color: var(--text); }
.summary-txt strong { display: block; color: var(--muted); font-size: 11.5px;
                      text-transform: uppercase; letter-spacing: .5px;
                      margin-bottom: 5px; font-weight: 600; }

/* ---- confirm dialog ---- */
.modal.confirm { width: min(460px, 100%); }
.modal.confirm .modal-body { display: block; padding: 20px 22px 6px; }
.modal.confirm p { margin: 0; font-size: 13.5px; line-height: 1.6;
                   color: var(--text); }
.modal.confirm p.detail { margin-top: 10px; color: var(--muted);
                          font-size: 12.5px; }
.modal.confirm .modal-foot { display: flex; justify-content: flex-end; gap: 9px;
                             padding: 18px 22px 20px; }
.btn.destructive { background: var(--bad); border-color: var(--bad);
                   color: #fff; font-weight: 600; }
.btn.destructive:hover { background: color-mix(in srgb, var(--bad) 84%, #000);
                         border-color: color-mix(in srgb, var(--bad) 84%, #000); }

/* ---- hero refinements ---- */
.hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
             margin: 0 0 15px; font-size: 13px; color: var(--muted); }
.hero-meta .dot { margin: 0; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 5px;
       font-size: 11px; font-weight: 600; letter-spacing: .2px;
       background: var(--panel-2); border: 1px solid var(--line);
       color: var(--muted); white-space: nowrap; }
.tag.warn { color: var(--warn);
            border-color: color-mix(in srgb, var(--warn) 38%, transparent); }
/* A tag the operator can change. Keeps the tag's appearance -- it is still
   reporting what the series is -- while reading as something clickable. */
button.tag.as-button { cursor: pointer; font-family: inherit; }
button.tag.as-button:hover { color: var(--text); border-color: var(--muted); }
button.tag.as-button.warn:hover {
    border-color: color-mix(in srgb, var(--warn) 70%, transparent); }

a.tag.link { color: var(--accent); text-decoration: none;
             border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
a.tag.link:hover { background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
                   text-decoration: none; }

.progress-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                 margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.progress-line .bar { width: 190px; height: 7px; }
.progress-line .pcount b { color: var(--text); font-size: 15px; font-weight: 700; }
.progress-line .pmiss { color: var(--warn); }

.toolbar { margin-bottom: 12px; }
.hero-path { margin: 4px 0 0; font-size: 11.5px; color: var(--dim); }

.panel-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
              padding: 13px 16px; border-bottom: 1px solid var(--line);
              background: var(--panel-2); }
.panel-head input[type=text] { padding: 6px 10px; font-size: 12px; }
.pad { padding: 16px; }

/* ---- toolbar: one button shape, weight carries the hierarchy ---- */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           margin: 0 0 10px; }
.toolbar .spacer { flex: 1 1 auto; }
.toolbar form.inline { display: inline-flex; }

/* Every button in a toolbar is the same height and shape. Emphasis comes from
   colour and weight, never from a different size or corner radius -- mixing
   segmented groups with lone buttons is what made this row look uneven. */
.toolbar .btn {
  height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
  white-space: nowrap; line-height: 1;
}
.toolbar .btn.primary { font-weight: 600; }

.toolbar.subtle { margin-top: -2px; margin-bottom: 12px; gap: 6px; }
.toolbar.subtle .btn { height: 30px; padding: 0 11px; font-size: 12.5px; }
.tlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
          color: var(--dim); font-weight: 600; margin-right: 3px; }

.btn.quiet { background: transparent; border-color: var(--line);
             color: var(--muted); }
.btn.quiet:hover { background: var(--panel-2); color: var(--text);
                   border-color: var(--dim); }
.btn.quiet.danger:hover { color: var(--bad);
                          border-color: color-mix(in srgb, var(--bad) 55%, transparent);
                          background: color-mix(in srgb, var(--bad) 12%, transparent); }
.linked-dot { color: var(--accent); font-size: 8px; vertical-align: 1px;
              margin-left: 3px; }

/* ---- management controls ---- */
.btn.toggle { gap: 7px; }
.btn.toggle .dotm { width: 8px; height: 8px; border-radius: 50%;
                    background: var(--dim); display: inline-block; flex: 0 0 auto; }
.btn.toggle.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.btn.toggle.on .dotm { background: var(--accent);
                       box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.danger-outline { border-color: color-mix(in srgb, var(--bad) 40%, transparent);
                      color: var(--bad); background: transparent; }
.btn.danger-outline:hover { background: color-mix(in srgb, var(--bad) 14%, transparent);
                            border-color: var(--bad); }
.modal-actions { display: flex; align-items: center; gap: 10px;
                 margin-top: 18px; padding-top: 14px;
                 border-top: 1px solid var(--line); }
.modal-actions .del-msg { font-size: 12px; }
.modal.confirm .check { padding: 0; }
.modal.confirm .modal-foot { border-top: 1px solid var(--line); }

/* ---- bulk actions ---- */
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius);
           background: var(--panel); border: 1px solid var(--line); }
.bulkbar .spacer { flex: 1 1 auto; }
.bulkbar .btn { height: 30px; padding: 0 12px; font-size: 12.5px;
                display: inline-flex; align-items: center; border-radius: 7px; }
.bulkbar .ct { font-size: 12.5px; color: var(--muted); }
.bulkbar #sel-count { color: var(--text); font-weight: 700; }
td .rowsel { appearance: none; width: 16px; height: 16px; border-radius: 4px;
             border: 1px solid var(--line); background: var(--bg);
             cursor: pointer; position: relative; vertical-align: middle; }
td .rowsel:checked { background: var(--accent); border-color: var(--accent); }
td .rowsel:checked::after { content: ""; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 9px; border: solid #10160a; border-width: 0 2px 2px 0;
  transform: rotate(42deg); }

/* ---- sign in ---------------------------------------------------------- */
.login-wrap {
  min-height: 78vh; display: flex; align-items: center; justify-content: center;
}
.login-card {
  width: 100%; max-width: 380px; padding: 30px 28px 24px; text-align: center;
}
.login-mark { width: 62px; height: 62px; margin-bottom: 10px; }
.login-card h1 { font-size: 19px; margin: 0 0 20px; font-weight: 600; }
.login-card .field { text-align: left; margin-bottom: 13px; }
.login-card .field input { width: 100%; }
.login-err, .login-warn { display: block; margin: 0 0 16px; text-align: left; }
.remember {
  display: flex; gap: 8px; align-items: center; text-align: left;
  margin: 2px 0 18px; font-size: 12.5px; color: var(--muted);
}
.login-go { width: 100%; justify-content: center; padding: 9px; }
.login-foot {
  font-size: 11.5px; margin: 18px 0 0; line-height: 1.6;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.signout {
  color: var(--muted); font-size: 12.5px; margin-left: 14px; white-space: nowrap;
}
.signout:hover { color: var(--text); }

/* ---- OPDS page -------------------------------------------------------- */
.opds-url { margin: 18px 0 6px; }
.urlrow { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.urlrow input {
  flex: 1; min-width: 0; font-size: 13px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text);
}
.urlrow .btn { white-space: nowrap; }
.opds-stats { margin-top: 22px; }
.steps { margin: 0 0 12px; padding-left: 20px; line-height: 1.85; font-size: 13px; }
.steps b { color: var(--text); }
.open-banner {
  background: var(--bad); color: #fff; padding: 9px 18px; font-size: 13px;
  text-align: center; line-height: 1.5;
}
.open-banner a { color: #fff; text-decoration: underline; margin-left: 6px; }
.setup-card { max-width: 420px; }
.setup-intro { font-size: 12.5px; text-align: left; margin: -8px 0 20px; }
.setup-skip { width: 100%; justify-content: center; margin-top: 10px; }

/* ---- download queue ---------------------------------------------------- */
.queue-bar { margin: 18px 0 14px; }
.queue-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.queue-table th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim); font-weight: 600;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.queue-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.queue-table tr:last-child td { border-bottom: 0; }
.col-state { width: 108px; }
.col-prog  { width: 240px; }
.col-act   { width: 92px; text-align: right; }
.qtitle {
  color: var(--muted); font-size: 11.5px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
.qbar {
  height: 6px; background: var(--panel-2); border-radius: 3px;
  overflow: hidden; margin-bottom: 5px;
}
.qbar i { display: block; height: 100%; background: var(--accent);
          transition: width .4s ease; }
.qnum { font-size: 11.5px; color: var(--muted); }
.qerr { color: var(--bad); font-size: 11.5px; }
.btn.small { padding: 4px 10px; font-size: 11.5px; }
.nav-badge {
  display: none; margin-left: 6px; padding: 1px 6px; border-radius: 9px;
  background: var(--accent); color: #0f1115; font-size: 10.5px; font-weight: 700;
}
.nav-badge.show { display: inline-block; }

/* ---- collections ------------------------------------------------------- */
.col-grid {
  display: grid; gap: 18px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.col-card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; color: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
.col-card:hover { border-color: var(--accent-dim); text-decoration: none;
                  transform: translateY(-2px); }
.col-art { position: relative; aspect-ratio: 2 / 3; background: var(--panel-2); }
.col-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-fallback {
  position: absolute; inset: 0; display: none; align-items: center;
  justify-content: center; font-size: 52px; font-weight: 700; color: var(--dim);
}
.col-art.no-art img { display: none; }
.col-art.no-art .col-fallback { display: flex; }
.col-meta { padding: 10px 12px 12px; }
.col-meta b { display: block; font-size: 13.5px; margin-bottom: 3px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-meta .muted { font-size: 11.5px; }
.col-bar { height: 4px; background: var(--panel-2); border-radius: 2px;
           margin-top: 8px; overflow: hidden; }
.col-bar i { display: block; height: 100%; background: var(--accent); }

.col-hero .col-poster { background: var(--panel-2); }
.col-desc { max-width: 70ch; margin: 4px 0 14px; }
.section-h { font-size: 13px; text-transform: uppercase; letter-spacing: .07em;
             color: var(--dim); margin: 26px 0 12px; }
.back { display: inline-block; margin-bottom: 14px; font-size: 13px; }
.warn-text { color: var(--warn); }

.chip {
  display: inline-block; padding: 3px 9px; margin-right: 6px; font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--panel-2);
  color: var(--text);
}
.chip:hover { border-color: var(--accent-dim); text-decoration: none; }

.sugg { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sugg:last-child { border-bottom: 0; }
.sugg-head { display: flex; gap: 10px; align-items: center; margin-bottom: 5px; }
.sugg-body { font-size: 11.5px; line-height: 1.6; }

.collect-list { max-height: 46vh; overflow-y: auto; margin-bottom: 14px; }
.collect-row {
  display: flex; gap: 10px; align-items: center; padding: 8px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px;
}
.collect-row:last-child { border-bottom: 0; }
.collect-row span:nth-of-type(1) { flex: 1; }
.collect-new { display: flex; gap: 8px; }
.collect-new input { flex: 1; }

/* ---- series grid (collection page) ------------------------------------- */
/* Its own grid rather than the issue one: .poster there is the 34px thumbnail
   used in the library table, which renders postage-stamp covers under
   full-size captions that wrap a word per line. */
.series-grid {
  display: grid; gap: 20px 16px; margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.series-card { position: relative; min-width: 0; }
.series-art {
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2);
  transition: transform .12s ease, border-color .12s ease;
}
.series-art:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.series-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.series-fallback {
  position: absolute; inset: 0; display: none; align-items: center;
  justify-content: center; font-size: 40px; font-weight: 700; color: var(--dim);
}
.series-art.no-art img { display: none; }
.series-art.no-art .series-fallback { display: flex; }
.series-flag {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 7px;
  border-radius: 20px; font-size: 10.5px; font-weight: 600;
  background: rgba(6, 8, 11, .82); color: var(--warn);
}
.series-name {
  display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.35;
  color: var(--text); font-weight: 500;
  /* Two lines, then ellipsis -- long titles must not shove the grid around.
     The box is always two lines tall so a one-line title does not pull its
     card's year and progress up out of line with its neighbours. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.35em);
}
.series-name:hover { color: var(--accent); text-decoration: none; }
.series-sub {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px; font-size: 11px; color: var(--muted);
}
.series-bar {
  height: 3px; background: var(--panel-2); border-radius: 2px;
  margin-top: 6px; overflow: hidden;
}
.series-bar i { display: block; height: 100%; background: var(--accent); }
/* The remove action lives on the card, revealed on hover, rather than as a
   button under every cover competing with the title for attention. */
.series-drop {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border: 0; border-radius: 50%; cursor: pointer; opacity: 0;
  background: rgba(6, 8, 11, .82); color: var(--text);
  font-size: 17px; line-height: 22px; text-align: center;
  transition: opacity .12s ease, background .12s ease;
}
.series-card:hover .series-drop { opacity: 1; }
.series-drop:hover { background: var(--bad); color: #fff; }
.series-drop:focus-visible { opacity: 1; outline: 2px solid var(--accent-dim); }

/* ---- search source filter ---------------------------------------------- */
.src-row {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.src-tag {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--panel-2);
  font-size: 10.5px; color: var(--muted); white-space: nowrap;
}

/* ---- sign-in artwork --------------------------------------------------- */
.login-wrap { position: relative; }
.login-art {
  position: fixed; left: 0; bottom: 0;
  width: min(46vw, 560px); height: auto;
  opacity: .5;
  /* Behind the card, and never in the way of a click or a text selection. */
  z-index: 0; pointer-events: none; user-select: none;
}
/* On a phone the form fills the screen and the artwork would sit underneath
   the fields rather than beside them, so it goes away entirely. */
@media (max-width: 820px) { .login-art { display: none; } }
.login-card { position: relative; z-index: 1; }