:root {
  --bg: #0e1116;
  --bg-elev: #161b22;
  --bg-elev-2: #1f2630;
  --fg: #e6edf3;
  --fg-muted: #8b949e;
  --accent: #2f81f7;
  --accent-hover: #4493f8;
  --border: #30363d;
  --ok: #2ea043;
  --warn: #d29922;
  --err: #f85149;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--bg-elev); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
header h1 { font-size: 1.25rem; margin: 0; font-weight: 600; }
header .actions { display: flex; align-items: center; gap: 12px; }
button {
  background: var(--accent); color: white; border: 0; padding: 6px 12px;
  border-radius: 6px; cursor: pointer; font-weight: 500;
}
button:hover { background: var(--accent-hover); }
button:disabled { background: var(--fg-muted); cursor: progress; }
.muted { color: var(--fg-muted); font-size: 0.9rem; }
main { padding: 16px 24px; max-width: 1600px; margin: 0 auto; }
.table-wrap{width:100%;overflow-x:auto;border-radius:8px;border:1px solid var(--border)}
.filters {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 0 14px 0;
}
.filters label { display: flex; align-items: center; gap: 6px; }
input[type=search], select {
  background: var(--bg-elev-2); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 8px; font: inherit;
}
input[type=search] { min-width: 240px; }
table { width: 100%; min-width:1280px; border-collapse: collapse; background: var(--bg-elev); }
th, td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
th { background: var(--bg-elev-2); font-weight: 600; font-size: 0.85rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr:hover { background: rgba(255,255,255,0.03); }
tbody tr.section-viewed td { color: var(--fg-muted); }
td.imdb { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }
td.quality { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--accent); white-space: nowrap; }
td.title{min-width:260px;max-width:440px} td.title strong { display: block; }
td.title small { color: var(--fg-muted); font-size: 0.8rem; }
.bucket-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-elev-2); border: 1px solid var(--border); font-size: 0.78rem;
  white-space: nowrap;
}
.bucket-pill.bucket-book { color: #79c0ff; border-color: #1f6feb55; }
.bucket-pill.bucket-wath { color: #d2a8ff; border-color: #8957e555; }
.bucket-pill.bucket-viewed { color: #56d364; border-color: #2ea04355; }
.bucket-pill.bucket-scheduled { color: #f0883e; border-color: #db6d2855; }
.bucket-pill.bucket-look, .bucket-pill.bucket-like { color: #e3b341; border-color: #d2992255; }
.row-actions select { font-size: 0.8rem; }
footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 24px; border-top: 1px solid var(--border); background: var(--bg-elev);
}
#empty { padding: 40px; text-align: center; }
@media (max-width: 900px) {
  /* Hide lower-priority columns on narrow viewports.  Kept: poster, #, title,
     year, date-added, status, update (cols 1,2,3,4,5,12,13). */
  th:nth-child(6), td:nth-child(6),
  th:nth-child(7), td:nth-child(7),
  th:nth-child(8), td:nth-child(8),
  th:nth-child(9), td:nth-child(9),
  th:nth-child(10), td:nth-child(10),
  th:nth-child(11), td:nth-child(11) { display: none; }
}
@media (max-width: 700px) {
  /* Mobile: keep poster (1), title (3), year (4), date-added (5), status (12), update (13). */
  table { min-width: 0; }
  th:nth-child(2), td:nth-child(2),
  th:nth-child(6), td:nth-child(6),
  th:nth-child(7), td:nth-child(7),
  th:nth-child(8), td:nth-child(8),
  th:nth-child(9), td:nth-child(9),
  th:nth-child(10), td:nth-child(10),
  th:nth-child(11), td:nth-child(11) { display: none; }
  header { padding: 10px 14px; }
  main { padding: 10px 14px; }
  .filters { gap: 8px; }
  td.title { max-width: none; }
  td.row-actions select { font-size: 0.85rem; }
  tbody tr { cursor: pointer; }
}
.tabs{display:flex;gap:6px;padding:10px 24px 0 24px;background:var(--bg-elev);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:9}
.tab{background:transparent;color:var(--fg-muted);border:1px solid transparent;border-radius:6px 6px 0 0;padding:8px 12px;cursor:pointer;font:inherit}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--fg);background:var(--bg);border-color:var(--border);border-bottom-color:var(--bg)}
.tab .badge{display:inline-block;margin-left:6px;padding:1px 8px;background:var(--bg-elev-2);color:var(--fg-muted);border-radius:999px;font-size:0.75rem}
.tab.active .badge{color:var(--fg)}

td.poster{width:46px;padding:4px 6px}
.poster-open{display:block;width:40px;height:60px;padding:0;border:0;border-radius:4px;background:var(--bg-elev-2);cursor:pointer;overflow:hidden}
.poster-open:hover{outline:2px solid var(--accent)}
.poster-open img{display:block;width:40px;height:60px;object-fit:cover}
/* Compact placeholder: tiny gradient tile with subtle "no poster" affordance
   instead of a giant em-dash.  Visibly distinct from a real broken image. */
.poster-fallback{
  display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  color:var(--fg-muted);font-size:0.7rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.04) 75%, transparent 75%, transparent) 0 0/8px 8px,
    var(--bg-elev-2);
}
@media (max-width:700px){.poster-open,.poster-open img{width:30px;height:44px}}

/* --- Modal --- */
body.modal-open{overflow:hidden}
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.65);
  display:flex;align-items:flex-start;justify-content:center;
  z-index:1000;padding:24px;overflow-y:auto;
}
.modal-backdrop[hidden]{display:none}
.modal{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;
  width:min(900px,100%);max-height:calc(100vh - 48px);overflow-y:auto;
  position:relative;padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
}
.modal-close{
  position:absolute;top:8px;right:8px;
  background:var(--bg-elev-2);color:var(--fg);border:1px solid var(--border);
  border-radius:6px;width:36px;height:36px;font-size:1.4rem;line-height:1;cursor:pointer;z-index:2;
  padding:0;
}
.modal-close:hover{background:var(--accent)}
.modal-grid{display:grid;grid-template-columns:240px 1fr;gap:24px}
.modal-poster-wrap{display:flex;flex-direction:column;gap:8px;align-items:center}
.modal-poster{
  width:100%;aspect-ratio:2/3;background:var(--bg-elev-2);border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.modal-poster img{width:100%;height:100%;object-fit:cover;display:block}
.modal-poster-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--fg-muted);min-height:240px}
.modal-quality{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.85rem;color:var(--accent);
  background:var(--bg-elev-2);border:1px solid var(--border);border-radius:999px;
  padding:4px 12px;text-align:center;word-break:break-word;
}
.modal-info{display:flex;flex-direction:column;gap:12px;min-width:0}
.modal-title{margin:0;font-size:1.5rem;font-weight:600}
.modal-title-orig{color:var(--fg-muted);font-size:1rem;word-break:break-word}
.modal-sub{color:var(--fg-muted);font-size:0.95rem}
.modal-overview{margin:0;line-height:1.5;white-space:pre-wrap}
.modal-ratings{display:flex;flex-wrap:wrap;gap:8px}
.rating-badge{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:var(--bg-elev-2);border:1px solid var(--border);font-size:0.85rem;white-space:nowrap;
}
.modal-facts{display:grid;grid-template-columns:max-content 1fr;column-gap:12px;row-gap:6px;margin:0}
.modal-facts dt{color:var(--fg-muted);font-size:0.85rem}
.modal-facts dd{margin:0;font-size:0.92rem;word-break:break-word}
.modal-section{line-height:1.6}
.modal-links{word-break:break-word}
.modal-links a{color:var(--accent);text-decoration:none}
.modal-links a:hover{text-decoration:underline}
.modal-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.modal-bucket{display:inline-flex;align-items:center;gap:8px}
.modal-bucket-under-poster{width:100%;justify-content:center;flex-wrap:wrap;padding:8px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px}
.modal-bucket select{font-size:0.95rem}
.modal-secondary{
  background:var(--bg-elev-2);color:var(--fg);border:1px solid var(--border);
}
.modal-secondary:hover{background:var(--bg);border-color:var(--accent)}
@media (max-width:700px){
  .modal-backdrop{padding:12px}
  .modal{padding:16px;max-height:calc(100vh - 24px);border-radius:8px}
  .modal-grid{grid-template-columns:1fr;gap:16px}
  .modal-title{font-size:1.25rem}
}

/* --- Year sort control --- */
.sort-control{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.sort-control .sort-label{font-size:0.85rem}
.sort-btn{
  background:var(--bg-elev-2);color:var(--fg);border:1px solid var(--border);
  border-radius:6px;padding:5px 10px;cursor:pointer;font:inherit;font-weight:500;
}
.sort-btn:hover{background:var(--accent);border-color:var(--accent);color:white}
.sort-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:white}

/* --- Date-added column --- */
td.date-added-cell{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:0.85rem}
.date-added{color:var(--fg)}
.date-added-missing{color:var(--fg-muted);font-style:italic}
@media (max-width:700px){
  td.date-added-cell{font-size:0.78rem}
}

.primary{background:#2563eb;color:white;border-color:#2563eb}.add-panel{margin:1rem 0;padding:1rem;border:1px solid #334155;border-radius:14px;background:rgba(15,23,42,.65)}.add-form{display:flex;gap:.5rem;flex-wrap:wrap}.add-form input,.add-form select{padding:.55rem;border-radius:10px}.add-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;margin-top:1rem}.add-card{display:grid;grid-template-columns:72px 1fr;gap:.75rem;padding:.75rem;border:1px solid #334155;border-radius:12px;background:rgba(2,6,23,.45)}.add-card h3{margin:.1rem 0}.add-card p{margin:.25rem 0}.add-card .poster img{width:72px;border-radius:8px}.duplicate{color:#fbbf24}

/* --- Genre filter: collapsible toggle + checkboxes (chips) --- */
.genre-filter-wrap{display:flex;flex-direction:column;gap:.5rem;width:100%}
.genre-toggle{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;padding:.45rem .7rem;border:1px solid var(--border);border-radius:10px;background:rgba(15,23,42,.55);color:var(--fg);cursor:pointer;font-size:.9rem;line-height:1.2;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
.genre-toggle:hover{border-color:#475569}
.genre-toggle:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.genre-toggle-label{font-weight:600}
.genre-toggle-summary{font-size:.82rem}
.genre-toggle-summary:not(.muted){color:#93c5fd}
.genre-toggle-chevron{font-size:.7rem;transition:transform .18s ease;opacity:.75}
.genre-toggle[aria-expanded="true"] .genre-toggle-chevron{transform:rotate(180deg)}
.genre-checkbox-list{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;max-width:60ch}
.genre-checkbox-list[hidden]{display:none}
.genre-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;border:1px solid var(--border);border-radius:999px;background:rgba(15,23,42,.55);cursor:pointer;font-size:.85rem;line-height:1.2;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,color .15s}
.genre-chip:hover{border-color:#475569}
.genre-chip input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0}
.genre-chip-name{color:var(--fg)}
.genre-chip-count{color:var(--fg-muted);font-size:.78rem;background:rgba(148,163,184,.15);padding:.05rem .45rem;border-radius:999px}
.genre-chip:has(input:checked){background:#2563eb;border-color:#2563eb;color:#fff}
.genre-chip:has(input:checked) .genre-chip-name{color:#fff}
.genre-chip:has(input:checked) .genre-chip-count{background:rgba(255,255,255,.18);color:#e2e8f0}
.genre-loading{padding:.25rem .5rem}

/* --- Status variants (PWA + delete results) --- */
#sync-status.status-ok{color:#22c55e;font-weight:600}
#sync-status.status-partial{color:#fbbf24;font-weight:600}
#sync-status.status-error{color:#ef4444;font-weight:600}

/* --- Delete button --- */
.delete-btn{
  background:transparent;color:var(--fg-muted);
  border:1px solid var(--border);border-radius:6px;
  padding:2px 8px;margin-left:6px;cursor:pointer;
  font-size:0.95rem;line-height:1;
}
.delete-btn:hover{background:var(--danger);border-color:var(--danger);color:white}
.delete-btn:disabled{opacity:0.4;cursor:not-allowed}

/* --- Delete dialog --- */
.delete-dialog{display:flex;flex-direction:column;gap:14px}
.delete-title{margin:0;color:var(--danger);font-size:1.25rem}
.delete-warning{margin:0;color:var(--fg);font-size:0.95rem}
.delete-warning strong{color:var(--danger)}
.delete-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.delete-facts dt{color:var(--fg-muted);font-size:0.85rem}
.delete-facts dd{margin:0;font-weight:500}
.delete-sources{border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin:0}
.delete-sources legend{padding:0 6px;color:var(--fg-muted);font-size:0.85rem}
.delete-sources label{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer}
.delete-sources input[type="checkbox"]{width:auto;margin:0}
.delete-affirm{font-size:0.85rem;margin:0}
.delete-confirm{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--danger)}
.delete-confirm input{width:auto;margin:0}
.delete-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.delete-actions button{padding:8px 18px;border-radius:8px;cursor:pointer;font:inherit;font-weight:600}
.delete-actions .danger{background:var(--danger);color:white;border:1px solid var(--danger)}
.delete-actions .danger:hover:not(:disabled){filter:brightness(1.1)}
.delete-actions .danger:disabled{opacity:0.5;cursor:not-allowed}
#delete-status{padding:8px;border-radius:6px;background:var(--bg-elev-2);min-height:1.5em;font-size:0.9rem}
#delete-status:empty{display:none}

/* --- Lampac Timecode progress --- */
.tc-row > td{padding:0 12px 6px 12px;border-top:0}
.tc-row .tc-bar{padding:4px 0}
.tc-bar{display:flex;flex-direction:column;gap:2px;padding:2px 0}
.tc-bar-track{position:relative;height:6px;background:rgba(148,163,184,.18);border-radius:999px;overflow:hidden}
.tc-bar-fill{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .25s ease}
.tc-bar-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--fg-muted)}
.tc-bar-pct{color:var(--fg);font-weight:600}
.tc-bar-summary{color:var(--fg-muted)}
.tc-bar:empty,.tc-bar-summary:empty{display:none}

/* Compact inline progress bar under the title in the main table row. */
.tc-bar-compact{display:block;position:relative;height:3px;margin-top:3px;background:rgba(148,163,184,.18);border-radius:999px;overflow:hidden}
.tc-bar-compact .tc-bar-fill{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .25s ease}
.tc-bar-compact-meta{display:block;font-size:.7rem;color:var(--fg-muted);margin-top:2px;line-height:1.3}

.modal-tc{margin-top:6px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:rgba(15,23,42,.45)}
.modal-tc-title{margin:0 0 8px 0;font-size:1rem}
.modal-tc-summary{display:flex;flex-direction:column;gap:6px}
.modal-tc-progress{position:relative;height:10px;background:rgba(148,163,184,.18);border-radius:999px;overflow:hidden}
.modal-tc-fill{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .25s ease}
.modal-tc-stats{font-size:.95rem}
.modal-tc-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.modal-tc-list li{display:grid;grid-template-columns:14ch 1fr 6ch 10ch;gap:8px;align-items:center;font-size:.85rem}
.modal-tc-bar{position:relative;height:6px;background:rgba(148,163,184,.18);border-radius:999px;overflow:hidden}
.modal-tc-bar > span{display:block;height:100%;background:linear-gradient(90deg,#38bdf8,#0ea5e9)}
.modal-tc-pct{text-align:right;font-variant-numeric:tabular-nums}
.modal-tc-updated{text-align:right}
@media (max-width:700px){
  .modal-tc-list li{grid-template-columns:10ch 1fr 5ch 8ch;font-size:.78rem}
}