:root{
  --bg:#0a0c10;--surface:#12151c;--surface-2:#1a1f29;--surface-hover:#222836;--border:#262c38;
  --text:#e6e9ef;--text-muted:#9aa4b2;--text-faint:#7a8494;
  --accent:#6366f1;--accent-hover:#818cf8;--accent-weak:rgba(99,102,241,0.14);--on-accent:#fff;
  --danger:#ef4444;--danger-weak:rgba(239,68,68,0.16);--warn:#f59e0b;--success:#34d399;--star:#facc15;
  --text-xs:12px;--text-sm:13px;--text-base:15px;--text-lg:18px;--text-xl:22px;--text-display:28px;
  --lh-tight:1.2;--lh:1.45;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
  --shadow:0 4px 16px rgba(0,0,0,0.4);
  /* Task 4 additions */
  --ctl-h:38px;
  --border-hover:#33415a;
  --danger-text:#fda4a4;--danger-border:#5b2a2a;--danger-strong:#7f1d1d;
  --success-border:#1f5a44;--success-strong:#14543c;
  --star-border:#4a4326;--star-ink:#1a1606;
  --warn-text:#fde68a;--warn-bg:#3a2e0a;--warn-border:#78350f;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--bg);color:var(--text);min-height:100%;overflow-x:hidden;max-width:100vw;
  font-size:var(--text-base);line-height:var(--lh);
}
a{color:inherit;text-decoration:none}

/* ---------- Nav / breadcrumb ---------- */
nav{
  position:sticky;top:0;z-index:10;
  background:var(--surface);                                  /* fallback */
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:var(--space-1);
  padding:var(--space-2) var(--space-4);min-height:52px;
  max-width:100vw;overflow:hidden;flex-wrap:wrap;
}
/* NEW: brand wordmark class (markup task 5 applies it to first .crumb) */
.brand{
  font-size:var(--text-lg);font-weight:650;letter-spacing:-0.01em;
  background:linear-gradient(90deg,var(--accent-hover),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:var(--space-1);
}
.crumb{
  color:var(--text-muted);padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);font-size:var(--text-base);white-space:nowrap;
}
.crumb:hover{color:var(--text);background:var(--surface-2)}
.crumb[aria-current]{color:var(--text);font-weight:550}
.crumb-sep{color:var(--text-faint);padding:0 var(--space-1);user-select:none}
.nav-spacer{flex:1}

/* ---------- Buttons (role-encoded) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--surface-2);color:var(--text);border:1px solid var(--border);
  padding:0 var(--space-3);height:var(--ctl-h);min-height:var(--ctl-h);
  border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:550;
  white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--surface-hover);border-color:var(--border-hover)}
.btn .icon{font-size:16px;color:var(--text-muted)}
.btn:hover .icon{color:var(--text)}
.btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.active .icon{color:var(--on-accent)}
/* NEW: primary CTA (Shuffle Play, Queue etc.) */
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-primary .icon,.btn-primary:hover .icon{color:var(--on-accent)}
/* NEW: toggle (Autoplay, Repeat, Shuffle on player) */
.btn-toggle.active{background:var(--accent-weak);border-color:var(--accent);color:var(--accent-hover)}
.btn-toggle.active .icon{color:var(--accent-hover)}
/* NEW: danger + restyle existing .btn-lock */
.btn-danger,.btn-lock{
  color:var(--danger-text);border-color:var(--danger-border);background:var(--danger-weak);
}
.btn-danger:hover,.btn-lock:hover{
  background:var(--danger-strong);border-color:var(--danger);color:#fff;
}
.btn-danger .icon,.btn-lock .icon{color:inherit}
/* Ghost (no fill) */
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
/* Star */
.btn-star{padding:6px 10px;line-height:1;width:var(--ctl-h);justify-content:center}
.btn-star .star-icon,.btn-star .icon{font-size:18px;color:var(--text-muted)}
.btn-star .star-icon .icon{fill:none;stroke:var(--text-muted)}
.btn-star.active{background:var(--accent-weak);border-color:var(--star-border)}
.btn-star.active .star-icon,.btn-star.active .icon{color:var(--star)}
.btn-star.active .star-icon .icon{fill:var(--star);stroke:var(--star)}
.btn-star.active:hover{filter:brightness(1.1)}
.btn-star[disabled]{opacity:0.6;cursor:wait}
/* Embed controls */
.btn-embed,.btn-embed-selected{color:var(--accent-hover);border-color:var(--border)}
.btn-embed:hover,.btn-embed-selected:hover{border-color:var(--accent-hover)}
/* Confirm / reject (inline tag accept/reject) */
.btn-confirm{background:rgba(52,211,153,.12);color:var(--success);border-color:var(--success-border);font-size:var(--text-xs);padding:2px 8px}
.btn-confirm:hover{background:var(--success-strong);color:#fff}
.btn-confirm .icon{color:inherit}
.btn-reject{color:var(--danger-text);border-color:var(--danger-border);font-size:var(--text-xs);padding:2px 8px}
.btn-reject:hover{background:var(--danger-strong);color:var(--danger-text)}
.btn-reject .icon{color:inherit}
/* Add-tag ghost pill */
.btn-add{
  background:var(--surface-2);border:1px dashed var(--border);color:var(--text-faint);
  border-radius:var(--radius-pill);height:28px;padding:0 var(--space-3);
  font-size:var(--text-sm);cursor:pointer;
}
/* Train/spinner states */
.btn-train.htmx-request{opacity:0.6;pointer-events:none}
.btn-train.htmx-request .btn-label{display:none}
.btn-train.htmx-request .btn-spinner{display:inline-block}
.btn-train:disabled,.btn-train.busy{opacity:0.5;cursor:not-allowed;pointer-events:none;border-color:var(--border)}
.btn-spinner{
  display:none;width:14px;height:14px;
  border:2px solid var(--text-faint);border-top-color:var(--accent-hover);
  border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Segmented sort control (sort-pills / sort-pill) ---------- */
.sort-pills{
  display:inline-flex;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:2px;gap:2px;
}
.sort-pill{
  display:inline-flex;align-items:center;gap:4px;
  height:calc(var(--ctl-h) - 6px);padding:0 var(--space-3);
  border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:550;
  color:var(--text-muted);white-space:nowrap;text-decoration:none;
  transition:background .15s,color .15s;
}
.sort-pill:hover{color:var(--text)}
.sort-pill.active{background:var(--accent);color:var(--on-accent)}
.sort-pill.active:hover{background:var(--accent-hover)}

/* ---------- Tag filter chips (tag-pill) ---------- */
.tag-pill{
  display:inline-flex;align-items:center;gap:var(--space-1);
  background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);
  padding:0 var(--space-3);height:30px;border-radius:var(--radius-pill);
  font-size:var(--text-sm);font-weight:550;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:all .15s;
}
.tag-pill:hover{background:var(--surface-hover);color:var(--text)}
.tag-pill.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tag-pill.active .tag-pill-count{color:rgba(255,255,255,0.8)}
.tag-pill.star-pill{color:var(--star);border-color:var(--star-border)}
.tag-pill.star-pill.active{background:var(--star);border-color:var(--star);color:var(--star-ink)}
.tag-pill-count{color:var(--text-faint);font-size:var(--text-xs)}

/* ---------- Manage-tags panel (directory rename/merge/remove) ---------- */
.tag-manager-details{display:inline-block}
.tag-manager-details[open] summary{color:var(--accent)}
.tag-manager{
  margin-top:var(--space-2);width:100%;
  display:flex;flex-direction:column;gap:var(--space-2);
}
.tag-manager-hint,.tag-manager-empty{
  color:var(--text-muted);font-size:var(--text-xs);margin:0 0 var(--space-1);
}
.tag-manager-row{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  padding:var(--space-1) 0;border-bottom:1px solid var(--border);
}
.tag-manager-name{flex:1;min-width:120px;font-size:var(--text-sm);color:var(--text)}
.tag-manager-name .cnt{color:var(--text-faint);font-size:var(--text-xs)}
.tag-manager-rename{display:flex;gap:var(--space-2);align-items:center;margin:0}
.tag-manager-rename input[type="text"]{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  padding:var(--space-1) var(--space-2);font-size:var(--text-sm);width:140px;outline:none;
}
.tag-manager-rename input:focus{border-color:var(--accent)}
.tag-manager-remove{margin:0}
.tag-manager-remove .btn-del{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--danger-text);background:rgba(153,27,27,.18);
  border:1px solid var(--danger);border-radius:var(--radius-md);
  padding:8px 12px;min-height:44px;
  /* reset card-del absolute positioning */
  position:static;width:auto;height:auto;opacity:1;
}
.tag-manager-remove .btn-del:hover{background:var(--danger-strong);color:#fff}
.tag-pill-x{font-size:10px;opacity:0.7;margin-left:2px}
.tag-pill-x:hover{opacity:1}
.tag-clear{color:var(--text-muted);font-size:var(--text-sm);cursor:pointer;text-decoration:underline;padding:4px 8px}

/* ---------- Tag filter row ---------- */
.tag-filter{
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
}
.tag-selected-pills{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center}

/* ---------- Tag search + dropdown (chip-search style) ---------- */
.tag-dropdown-wrap{position:relative;display:inline-block}
.tag-search{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-pill);color:var(--text);
  padding:0 var(--space-3);height:30px;font-size:var(--text-sm);width:220px;
}
.tag-search:focus{border-color:var(--accent);outline:none}
.tag-dropdown{
  display:none;position:absolute;top:100%;left:0;z-index:50;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);margin-top:4px;
  max-height:240px;overflow-y:auto;min-width:220px;box-shadow:var(--shadow);
}
.tag-dropdown.open{display:block}
.tag-dropdown a{
  display:flex;justify-content:space-between;padding:6px 12px;
  color:var(--accent-hover);text-decoration:none;
  font-size:var(--text-sm);transition:background .1s;
}
.tag-dropdown a:hover{background:var(--surface-2)}
.tag-dropdown a .cnt{color:var(--text-muted);font-size:var(--text-xs)}

/* ---------- Toolbar wrappers (NEW — markup task 5 applies these) ---------- */
.toolbar{
  display:flex;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);
}
.toolbar-view{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;flex:1 1 auto;min-width:0;
}
.toolbar-lib{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end;
}
.lib-group{
  display:flex;align-items:center;gap:var(--space-2);
  padding-left:var(--space-3);border-left:1px solid var(--border);
}
/* NEW: coverage badge (12/18 embedded) */
.coverage-badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  color:var(--text-muted);font-size:var(--text-sm);white-space:nowrap;
}
.coverage-badge .icon{color:var(--accent-hover)}
.coverage-badge b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
/* NEW: suggested badge chip */
.badge-suggested{
  display:inline-flex;align-items:center;gap:3px;background:var(--accent-weak);
  color:var(--accent-hover);font-size:var(--text-xs);font-weight:600;
  padding:1px 8px;border-radius:var(--radius-pill);
}

/* ---------- Action bar — grid-spanning wrapper for toolbar + status strips ---------- */
.action-bar{grid-column:1/-1}

/* ---------- File grid ---------- */
#file-list{
  padding:var(--space-4);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--space-3);
}

/* Directory rows — span all grid columns. A div wrapping an inner link
   (rather than the row being one big <a>) so a per-folder action button can
   sit beside it as valid HTML. */
.item:not(.item-video){
  grid-column:1/-1;display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);min-height:48px;width:100%;
  transition:background .15s,border-color .15s;min-width:0;overflow:hidden;
  flex-wrap:wrap;
}
.item:not(.item-video):hover{background:var(--surface-hover);border-color:var(--border-hover)}
.item-link-dir{
  display:flex;align-items:center;gap:var(--space-3);flex:1;min-width:0;
  text-decoration:none;color:inherit;overflow:hidden;
}

/* Recursive re-encode scan: trigger + status widget */
.tree-scan-trigger{display:inline-flex}
.row-scan-trigger{margin-left:auto;flex-shrink:0}
.btn-icon-scan{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:none;color:var(--text-muted);cursor:pointer;flex-shrink:0;
}
.btn-icon-scan:hover{background:var(--surface-hover);color:var(--accent-hover)}
.tree-scan-widget{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;flex-basis:100%;
  font-size:var(--text-sm);color:var(--text-muted);
}
.tree-scan-widget.done,.tree-scan-widget.found{color:var(--text)}
.tree-scan-widget.error{color:var(--danger)}
#reencode-progress:empty{display:none}
#reencode-progress:not(:empty){padding:var(--space-2) var(--space-4)}
.item-icon{font-size:20px;flex-shrink:0;line-height:1;color:var(--accent-hover)}
.folder-poster{display:block;width:56px;height:84px;object-fit:cover;flex-shrink:0;border-radius:var(--radius-sm);background:var(--surface-hover)}

/* Video cards */
.item-video{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  transition:border-color .15s,transform .12s;
}
.item-video:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.item.playing{border-color:var(--accent)}
.item-link{
  display:flex;flex-direction:column;align-items:stretch;
  text-decoration:none;color:inherit;
}
.item-thumb{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--bg);
}
.item-thumb-placeholder{
  display:flex;align-items:center;justify-content:center;
  font-size:32px;color:var(--text-faint);
  aspect-ratio:16/9;background:var(--surface-2);
}
.item-thumb-placeholder-icon{display:block;flex-shrink:0;color:var(--text-faint)}
.item-video .item-info{
  display:flex;flex-direction:column;gap:var(--space-1);
  padding:var(--space-2) var(--space-3) var(--space-3);min-width:0;
}
.item-video .item-name{
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  white-space:normal;font-size:var(--text-sm);font-weight:550;
  line-height:var(--lh-tight);flex:none;
}
.item-size{color:var(--text-muted);font-size:var(--text-xs);flex-shrink:0}
.item-video .item-tags{
  padding:0 var(--space-3) var(--space-2);width:100%;
  color:var(--text-muted);font-size:var(--text-xs);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.item-tags.suggested{color:var(--accent-hover);opacity:1;font-style:italic}

/* Card delete button (hidden until hover) */
.btn-del{
  position:absolute;top:6px;right:6px;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:none;border-radius:var(--radius-sm);
  background:rgba(0,0,0,0.55);color:var(--text-muted);cursor:pointer;
  opacity:0;transition:opacity .15s,background .15s;
}
.item-video:hover .btn-del{opacity:1}
.btn-del:hover{background:var(--danger);color:#fff}

/* Embed checkbox on card */
.embed-check-label{position:absolute;top:6px;left:6px;z-index:2;margin:0}
.embed-check{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
.embed-pending{font-size:var(--text-sm);color:var(--accent-hover)}

/* Empty state */
.empty{
  grid-column:1/-1;width:100%;color:var(--text-faint);
  text-align:center;padding:40px 20px;font-size:var(--text-base);
}

/* ---------- Player area ---------- */
#player-area{position:sticky;top:0;z-index:5;background:#000}
video{width:100%;max-height:70vh;display:block;background:#000}
#video-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.7);color:#fff;padding:10px 20px;
  border-radius:var(--radius-md);font-size:20px;font-weight:bold;
  pointer-events:none;opacity:0;transition:opacity .15s;z-index:6;
}
#video-title{
  padding:var(--space-3) var(--space-4) 0;background:var(--surface);
  font-size:var(--text-lg);font-weight:600;line-height:var(--lh-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#controls{
  display:flex;align-items:center;padding:var(--space-2) var(--space-4);gap:var(--space-2);
  background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.tier{display:inline-flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:center}
.tier-transport .btn{height:42px;min-height:42px;font-size:var(--text-base);padding:0 var(--space-4)}
.tier-sep{width:1px;align-self:stretch;background:var(--border);margin:0 var(--space-1)}
#controls .spacer{flex:1}
.skip-group{
  display:inline-flex;gap:2px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:2px;
}
.btn-skip{
  height:34px;padding:0 var(--space-2);border:none;background:none;
  color:var(--text-muted);font-size:var(--text-xs);font-weight:600;
  border-radius:var(--radius-sm);cursor:pointer;font-variant-numeric:tabular-nums;
}
.btn-skip:hover{background:var(--surface-hover);color:var(--text)}
.speed-select{
  background:var(--surface-2);color:var(--text);border:1px solid var(--border);
  padding:6px var(--space-2);border-radius:var(--radius-md);font-size:var(--text-sm);
  cursor:pointer;min-height:32px;
}
.speed-select:hover{border-color:var(--accent-hover)}
#now-playing{
  flex:0 1 auto;text-align:center;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--text-faint);font-size:var(--text-xs);padding:0 var(--space-2);
}

/* ---------- Playback resume notice ---------- */
.resume-notice{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-2) var(--space-4);background:var(--surface-2);
  border-bottom:1px solid var(--border);color:var(--text);font-size:var(--text-sm);
}
.resume-notice[hidden]{display:none}
@media(max-width:600px){.resume-notice{align-items:flex-start;flex-direction:column}}

/* ---------- Transcode notice ---------- */
#transcode-notice{
  background:var(--warn-bg);color:var(--warn-text);
  border-bottom:1px solid var(--warn-border);
  padding:var(--space-2) var(--space-4);font-size:var(--text-sm);line-height:var(--lh);
}

/* ---------- Video meta (tag panel on player page) ---------- */
.video-meta{
  padding:var(--space-2) var(--space-4);background:var(--surface);
  border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
}
.video-meta .item-tags{width:100%}
.video-meta input[type="text"]{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);
  color:var(--text);padding:var(--space-1) var(--space-3);font-size:var(--text-sm);
  flex:1;min-width:200px;
}
.video-meta input:focus{border-color:var(--accent);outline:none}

/* ---------- Video tag pills (vtag style) ---------- */
.video-tag-pills{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center;width:100%}
.video-tag-pill{
  display:inline-flex;align-items:center;gap:var(--space-1);
  background:var(--surface-2);color:var(--text);border:1px solid var(--border);
  padding:3px var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-sm);
}
.video-tag-pill.suggested{
  background:transparent;border:1px dashed var(--accent);color:var(--accent-hover);
}
.video-tag-pill.suspect{
  background:rgba(245,158,11,0.1);color:var(--warn);border:1px solid var(--warn);
}
.suspect-badge{width:1em;height:1em;vertical-align:middle;color:var(--warn)}
.tag-score{font-size:var(--text-xs);color:var(--text-faint);font-variant-numeric:tabular-nums;margin-left:2px}
.suggest-source{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--accent-hover);font-weight:600;margin-right:4px}
.tag-done-hint{font-size:var(--text-sm);color:var(--text-muted);font-weight:400}
.tag-controls{display:inline-flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.video-tag-remove{
  background:none;border:none;color:var(--text-faint);cursor:pointer;
  font-size:10px;padding:0 0 0 2px;line-height:1;
}
.video-tag-remove:hover{color:var(--danger)}
.video-tag-add{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-pill);
  color:var(--text);padding:4px var(--space-3);font-size:var(--text-sm);width:120px;outline:none;
}
.video-tag-add:focus{border-color:var(--accent)}

/* ---------- Tag progress panel (progress-strip style) ---------- */
.tag-progress-panel{
  display:flex;align-items:center;gap:var(--space-3);min-height:0;
  transition:all .3s ease;flex-wrap:wrap;
}
.tag-progress-panel:empty{display:none}
.tag-progress-bar-wrap{
  flex:0 1 200px;min-width:80px;height:6px;background:var(--surface-2);
  border-radius:var(--radius-pill);overflow:hidden;
}
.tag-progress-bar{
  height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));
  border-radius:var(--radius-pill);transition:width .4s ease;
}
.tag-progress-text{color:var(--text-muted);font-size:var(--text-sm);white-space:nowrap}
.tag-progress-phase{color:var(--accent-hover);font-size:var(--text-sm);font-weight:600}
.tag-progress-panel.active .tag-progress-phase{animation:pulse 1.5s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.tag-done{color:var(--success);font-size:var(--text-sm);font-weight:500;display:flex;align-items:center;gap:var(--space-2);animation:fadeIn .3s ease}
.tag-error{color:var(--danger);font-size:var(--text-sm);font-weight:500;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Download ---------- */
.download-details{display:inline-block}
.download-details[open] summary{color:var(--accent-hover)}
.download-hint{padding:var(--space-4) var(--space-4) 0;color:var(--text-muted);font-size:var(--text-sm)}
.download-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:var(--space-2);width:100%}
.download-form-page{margin:var(--space-2) var(--space-4) 0;width:auto}
.download-form input[type="url"],.download-form input[type="text"]{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);
  color:var(--text);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);
  flex:1;min-width:120px;outline:none;
}
.download-form input:focus{border-color:var(--accent)}
.download-url-input{flex:2 !important}
.download-path-input{flex:1}
/* The dedicated /download page gives this form a full, uncontested row, so
   at phone widths the URL + subfolder inputs + Queue button just barely fit
   on one line instead of wrapping like the narrower toolbar copy does —
   crowd them out into a deliberate stack instead. */
@media(max-width:480px){
  .download-form-page{flex-direction:column;align-items:stretch}
  .download-form-page input,.download-form-page button{width:100%}
}
.dl-cancel-form{display:inline}
.dl-section-form{display:inline;margin-left:var(--space-2)}
.download-progress-panel{
  display:flex;align-items:center;gap:var(--space-3);min-height:0;flex-wrap:wrap;
  transition:all .3s ease;
}
.download-progress-panel:empty{display:none}
.download-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);margin:var(--space-2) var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.download-card.err{border-color:var(--danger-border)}
.download-card .row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.download-card .title{font-size:var(--text-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.download-card .url{font-size:var(--text-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.download-card .meta{color:var(--text-muted);font-size:var(--text-xs)}
.download-board{padding:0 var(--space-4) var(--space-5)}
.download-section-title{
  color:var(--text-muted);font-size:var(--text-sm);font-weight:500;
  margin:var(--space-4) var(--space-4) var(--space-1);
  text-transform:uppercase;letter-spacing:.5px;
}

/* ---------- Related videos ---------- */
#related-videos{padding:var(--space-4);border-bottom:1px solid var(--border)}
.related-heading{
  color:var(--text-muted);font-size:var(--text-sm);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3);
}
.related-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3);
}

/* ---------- Playlist ---------- */
.playlist{padding:var(--space-4)}
.playlist-heading{
  color:var(--text-muted);font-size:var(--text-sm);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3);
}
.playlist-items{display:flex;flex-direction:column;gap:var(--space-1)}
.playlist-item{
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);
  border-radius:var(--radius-md);text-decoration:none;color:var(--text);transition:background .15s;
}
.playlist-item:hover{background:var(--surface-hover)}
.playlist-item.playing{background:var(--accent-weak)}
.playlist-thumb{
  width:80px;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius-sm);flex-shrink:0;background:var(--bg);
}
.playlist-thumb-placeholder{
  width:80px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--text-faint);background:var(--surface-2);
  border-radius:var(--radius-sm);flex-shrink:0;
}
.playlist-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--text-sm);font-weight:550;flex:1;min-width:0;
}
.playlist-pos{
  color:var(--text-faint);font-size:var(--text-xs);flex-shrink:0;
  min-width:20px;text-align:right;font-variant-numeric:tabular-nums;
}

/* ---------- Responsive grid breakpoints ---------- */
@media(max-width:1024px){
  #file-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .related-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media(max-width:640px){
  #file-list{padding:var(--space-2);gap:var(--space-1);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .related-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  #video-title{font-size:var(--text-base);padding:var(--space-1) var(--space-3) 0}
  .playlist-thumb,.playlist-thumb-placeholder{width:60px}
  nav{padding:var(--space-2) var(--space-3)}
  #controls{padding:6px var(--space-3);justify-content:center}
}

/* ---------- Unlock box ---------- */
.unlock-box{
  max-width:380px;margin:40px auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-5);
}
.unlock-box h1{margin-bottom:var(--space-4);font-size:var(--text-lg);font-weight:600;display:flex;align-items:center;gap:var(--space-2)}
.pw-field{position:relative}
/* Selector targets the class, not [type="password"] — the reveal toggle below
   flips the input's type attribute at runtime, which would drop this styling
   if it were keyed off the type. */
.pw-field .unlock-pass-input{
  width:100%;padding:var(--space-3);padding-right:64px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-md);color:var(--text);font-size:16px;outline:none;
}
/* 16px (not --text-base=15px): <16px makes iOS Safari auto-zoom on focus — see mobile audit P/no-zoom */
.unlock-box input:focus{border-color:var(--accent)}
.pw-toggle{
  position:absolute;top:0;right:0;bottom:0;padding:0 var(--space-3);
  background:none;border:none;color:var(--text-muted);
  font-size:var(--text-xs);font-weight:600;cursor:pointer;border-radius:var(--radius-md);
}
.pw-toggle:hover{color:var(--text)}
.unlock-actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-4)}
.unlock-error{color:var(--danger);font-size:var(--text-sm);margin-top:10px;min-height:1.2em}
.unlock-warning{
  display:flex;align-items:flex-start;gap:var(--space-2);color:var(--danger);
  font-size:var(--text-sm);line-height:1.5;
}
.unlock-warning svg{flex:none;margin-top:2px}
.unlock-hint{color:var(--text-muted);font-size:var(--text-sm);line-height:1.6;margin-top:var(--space-3)}
.unlock-hint code{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:1px 5px;white-space:nowrap;/* a command split across lines is not copy-pasteable */
}
.error-page{color:var(--danger);text-align:center;padding:60px 20px;font-size:var(--text-base)}
/* Error box variant of unlock-box */
.error-box{text-align:center}
.error-box h1{justify-content:center}
.error-msg{color:var(--danger-text);margin-top:var(--space-2)}

/* ---------- Misc ---------- */
.notice{
  background:var(--surface-2);color:var(--text-muted);border-bottom:1px solid var(--border);
  padding:10px var(--space-4);font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-2);
}
.error-back{margin-top:20px;display:flex;justify-content:center}

/* --- Mobile & accessibility audit fixes (2026-06-05) --- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px;border-radius:4px}
.tag-search:focus,.video-meta input:focus{box-shadow:0 0 0 2px rgba(99,102,241,.35)}
/* L1: stop long filenames/tags from blowing out video cards. The card is a
   column flex box; flex-wrap:nowrap stops a long name from reflowing below thumb. */
.item-video{flex-wrap:nowrap}
.item-name,.item-tags{min-width:0}
/* Contrast: lift muted greys to meet WCAG AA */
.item-size,.item-tags{color:var(--text-muted)}
.item-tags.suggested{opacity:1;color:var(--accent-hover);font-style:italic}
.tag-pill-count{color:var(--text-muted)}
.tag-dropdown a .cnt{color:var(--text-muted)}
.download-card .url{color:var(--text-muted)}
/* A13: resting (non-hover) affordance for the card delete control */
.item-video .btn-del{color:var(--text-muted)}
/* V4: distinguish sort pills from tag-filter chips */
.sort-pill{border-radius:var(--radius-sm)}
/* L5: status strips below the toolbar get padding to align with toolbar zones */
.tag-progress-panel:not(:empty),.download-progress-panel:not(:empty){padding:var(--space-2) var(--space-4)}
/* L6: keep the tag dropdown inside the viewport */
.tag-dropdown{max-width:calc(100vw - 24px)}
/* P5: don't let the position counter grab the controls row */
#now-playing{flex:0 1 auto}
/* T2/T3: separate and visually flag the destructive bulk delete */
.tag-delete-all{flex-basis:100%;margin-top:6px}
.tag-delete-all .btn-del{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--danger-text);background:rgba(153,27,27,.18);
  border:1px solid var(--danger);border-radius:var(--radius-md);
  padding:8px 12px;min-height:44px;
  /* reset card-del absolute positioning */
  position:static;width:auto;height:auto;opacity:1;
}
.tag-delete-all .btn-del:hover{background:var(--danger-strong);color:#fff}
#delete-form{margin-left:0}
/* T1: real hit area for the suggested-tag remove control */
.video-tag-remove{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:4px;margin:-2px -4px -2px 0;font-size:14px}
/* U3/U4/U5: state-page polish */
#transcode-notice{display:flex;align-items:flex-start;gap:var(--space-2)}
#transcode-notice .tn-close{margin-left:auto;background:none;border:none;color:var(--warn-text);font-size:18px;cursor:pointer;line-height:1;padding:0 6px}
.unlock-error{font-size:14px}
/* A10: respect reduced-motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* T1: >=44px touch targets + consistent gutters on phones */
@media(max-width:640px){
  .btn,.btn-skip,.speed-select,.sort-pill,.tag-pill,.tag-clear,.btn-star{min-height:44px}
  .sort-pill,.tag-pill{padding-top:10px;padding-bottom:10px}
  .tag-clear{padding:11px 8px}
  .btn-skip{padding:8px 12px}
  .btn-star{min-width:44px}
  .tag-search,.video-tag-add,.download-form input{min-height:44px}
  .tag-dropdown a{padding:10px 12px}
  .item-video .btn-del{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}
  nav,.tag-filter,#file-list,.download-board{padding-left:12px;padding-right:12px}
  /* toolbar-lib wrapping right-aligned under a left-aligned toolbar-view reads as a
     zig-zag once both wrap to their own rows; keep every row left-to-right. */
  .toolbar-lib{justify-content:flex-start}
}
/* P3: in landscape, don't trap the controls under a viewport-filling video */
@media(orientation:landscape) and (max-height:520px){
  nav,#player-area{position:static}
  video{max-height:68vh}
  #controls{padding-top:4px;padding-bottom:4px;gap:6px}
  .btn,.btn-skip,.speed-select,.btn-star{min-height:36px}
}
/* P9: legible 2-line titles for the touch-navigation lists; clearer current item */
.related-list .item-name,.playlist-name{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.playlist-item.playing .playlist-name{color:var(--accent-hover);font-weight:600}
/* T1: bring the last sub-floor controls up to a 44px touch target on phones */
@media(max-width:640px){
  .crumb{min-height:44px;display:inline-flex;align-items:center}
  .tag-dropdown a{min-height:44px;align-items:center}
}
/* V1: tighten the type scale — no sub-12px text, drop the stray 15px step */
.crumb,.empty{font-size:var(--text-base)}
.item-tags,.tag-pill-count,.tag-dropdown a .cnt,.tag-pill-x{font-size:var(--text-xs)}
.icon{display:inline-block;vertical-align:-0.125em;flex-shrink:0}
/* lazy-load sentinel for paginated lists */
.load-more{width:100%;height:1px;grid-column:1/-1}

/* Series catalog: poster-first cards */
.item.item-series{
  grid-column:auto;display:block;padding:0;min-height:0;flex-wrap:nowrap;
  overflow:hidden;align-self:start;background:var(--surface);
  border-radius:var(--radius-md);transition:border-color .15s,transform .12s;
}
.item.item-series:hover{
  background:var(--surface);border-color:var(--accent);transform:translateY(-2px);
}
.series-card-link{display:block;min-width:0;color:inherit;text-decoration:none}
.series-card-poster{
  display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
  background:var(--surface-hover);
}
.series-card-placeholder{
  display:flex;align-items:center;justify-content:center;width:100%;
  aspect-ratio:2/3;background:var(--surface-hover);color:var(--text-muted);
  font-size:32px;
}
.series-card-info{padding:10px 12px 14px;min-width:0}
.series-card-title{
  margin:0 0 7px;font-size:var(--text-base);font-weight:650;
  line-height:1.3;overflow-wrap:anywhere;
}
.series-card-facts{font-size:var(--text-sm);color:var(--text-muted);line-height:1.6}
.series-card-genres{
  margin-top:4px;font-size:var(--text-sm);color:var(--accent-hover);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.series-card-plot{
  margin:8px 0 0;color:var(--text-muted);font-size:var(--text-sm);
  line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
}
.series-details{
  grid-column:1/-1;display:grid;
  grid-template-columns:minmax(130px,200px) minmax(0,1fr);
  gap:clamp(14px,3vw,32px);padding:clamp(14px,3vw,28px);
  width:100%;box-sizing:border-box;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  align-items:start;min-width:0;
}
.series-details-art{min-width:0}
.series-details-poster{
  display:block;width:100%;height:auto;aspect-ratio:2/3;
  object-fit:cover;border-radius:var(--radius-md);background:var(--surface-hover);
}
.series-details-placeholder{
  display:flex;align-items:center;justify-content:center;width:100%;
  aspect-ratio:2/3;border-radius:var(--radius-md);
  background:var(--surface-hover);color:var(--text-muted);font-size:32px;
}
.series-details-content{min-width:0}
.series-details-kicker{
  color:var(--accent-hover);font-size:var(--text-sm);font-weight:650;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;
}
.series-details-title{
  margin:0;font-size:clamp(22px,3vw,34px);line-height:1.15;
  overflow-wrap:anywhere;
}
.series-details-original{margin-top:6px;color:var(--text-muted);overflow-wrap:anywhere}
.series-details-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-weight:600}
.series-details-rating{
  display:inline-block;margin-top:10px;padding:3px 7px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-muted);font-size:var(--text-sm);
}
.series-details-plot{margin:14px 0;line-height:1.65;white-space:normal}
.series-details-extra{
  margin-top:8px;font-size:var(--text-sm);line-height:1.55;
  overflow-wrap:anywhere;color:var(--text-muted);
}
.series-details-extra strong{color:var(--text)}
@media(max-width:520px){
  .series-details{grid-template-columns:100px minmax(0,1fr);gap:12px;padding:12px}
  .series-details-title{font-size:21px}
  .series-card-info{padding:8px}
}

.item-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--text-base);font-weight:550;flex:1;
}

/* Catalog facelift: consistent posters and calmer layout */
#file-list{
  grid-template-columns:repeat(auto-fill,minmax(170px,210px));
  justify-content:start;align-items:stretch;
  column-gap:20px;row-gap:24px;
}
.item.item-series{
  grid-column:auto;display:block;width:100%;min-width:0;min-height:0;
  box-sizing:border-box;padding:0;overflow:hidden;align-self:stretch;
  border-radius:var(--radius-md);
  transition:border-color .15s,box-shadow .15s;
}
.item.item-series:hover{
  background:var(--surface);border-color:var(--accent);
  box-shadow:0 8px 22px rgba(0,0,0,.20);transform:none;
}
.series-card-link{
  display:flex;flex-direction:column;height:100%;min-width:0;
  color:inherit;text-decoration:none;
}
.series-card-art{
  width:100%;aspect-ratio:2/3;flex-shrink:0;overflow:hidden;
  position:relative;background:var(--surface-hover);
}
.series-card-poster{
  display:block;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:center;background:var(--surface-hover);
  transition:transform .2s;
}
.item.item-series:hover .series-card-poster{transform:scale(1.025)}
.series-card-placeholder{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  box-sizing:border-box;background:var(--surface-hover);
  color:var(--text-muted);font-size:34px;
}
.series-card-info{
  display:flex;flex:1;flex-direction:column;gap:6px;
  min-width:0;box-sizing:border-box;padding:13px 13px 15px;
}
.series-card-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em;margin:0;
  font-size:var(--text-base);font-weight:650;line-height:1.3;
  overflow-wrap:anywhere;
}
.series-card-facts{
  min-height:1.45em;font-size:var(--text-sm);line-height:1.45;
  font-weight:600;color:var(--text-muted);
}
.series-card-genres{
  min-height:1.4em;margin:0;color:var(--accent-hover);
  font-size:var(--text-sm);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.series-card-plot{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:4.35em;margin:4px 0 0;
  color:var(--text-muted);font-size:var(--text-sm);line-height:1.45;
}
.series-details{
  grid-column:1/-1;display:grid;
  grid-template-columns:minmax(145px,210px) minmax(0,1fr);
  gap:clamp(16px,3vw,34px);align-items:start;
  padding:clamp(16px,3vw,30px);box-sizing:border-box;width:100%;
  min-width:0;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--surface),var(--bg));
}
.series-details-art{
  width:100%;aspect-ratio:2/3;overflow:hidden;align-self:start;
  border-radius:var(--radius-md);background:var(--surface-hover);
  box-shadow:0 5px 18px rgba(0,0,0,.22);
}
.series-details-poster{
  display:block;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:center;border-radius:0;
}
.series-details-placeholder{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  box-sizing:border-box;background:var(--surface-hover);
  color:var(--text-muted);font-size:34px;
}
.series-details-content{min-width:0}
.series-details-kicker{
  margin:0 0 7px;color:var(--accent-hover);
  font-size:var(--text-sm);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
}
.series-details-title{
  margin:0;font-size:clamp(23px,3vw,36px);font-weight:750;
  line-height:1.13;letter-spacing:-.025em;overflow-wrap:anywhere;
}
.series-details-original{
  margin-top:7px;color:var(--text-muted);font-size:var(--text-sm);
  overflow-wrap:anywhere;
}
.series-details-facts{
  margin-top:14px;color:var(--text);font-size:var(--text-sm);
  font-weight:650;line-height:1.8;
}
.series-details-rating{
  display:inline-block;margin-top:10px;padding:4px 8px;
  border:1px solid var(--border);border-radius:5px;
  color:var(--text-muted);font-size:var(--text-sm);
}
.series-details-plot{
  max-width:76ch;margin:17px 0;line-height:1.7;
  color:var(--text);font-size:var(--text-base);
}
.series-details-extra{
  max-width:85ch;margin-top:9px;
  color:var(--text-muted);font-size:var(--text-sm);
  line-height:1.6;overflow-wrap:anywhere;
}
.series-details-extra strong{color:var(--text);font-weight:650}

@media(max-width:1024px){
  #file-list{grid-template-columns:repeat(auto-fill,minmax(150px,195px))}
}
@media(max-width:640px){
  #file-list{
    padding:12px;gap:13px;
    grid-template-columns:repeat(auto-fill,minmax(min(42vw,160px),1fr));
  }
  .series-card-info{padding:10px}
  .series-details{
    grid-template-columns:minmax(105px,135px) minmax(0,1fr);
    gap:13px;padding:13px;
  }
  .series-details-title{font-size:22px}
  .series-details-plot{margin:12px 0;line-height:1.55}
}

/* ---------- Lightweight root catalogue search and filters ---------- */
.catalog-controls{
  display:grid;grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(170px,1fr);
  align-items:end;gap:10px 14px;margin:0 16px 18px;padding:14px;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);
}
.catalog-search-field,.catalog-control-field{display:grid;gap:5px;min-width:0}
.catalog-search-field>label,.catalog-control-field>label{font-size:var(--text-sm);color:var(--text-muted)}
.catalog-search-row{display:flex;gap:8px;min-width:0}
.catalog-search-row input,.catalog-controls select{
  min-width:0;min-height:44px;padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font:inherit;
}
.catalog-search-row input{width:100%;flex:1}
.catalog-controls select{width:100%;margin-top:5px}
.catalog-search-row .btn{min-height:44px}
.catalog-no-results{margin:0 16px 18px;padding:12px 14px;color:var(--text-muted);border:1px dashed var(--border);border-radius:var(--radius-md)}
.catalog-filtered-out{display:none!important}
@media(max-width:640px){
  .catalog-controls{grid-template-columns:1fr 1fr;margin:0 12px 14px;padding:12px;gap:9px}
  .catalog-search-field{grid-column:1/-1}
  .catalog-no-results{margin-left:12px;margin-right:12px}
}

/* ---------- Pantalla de inicio de sesión y sesión de usuario ---------- */
.login-wrapper {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(24px, 5vh, 48px) 16px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow);
}
.login-brand {
  text-align: center;
  margin-bottom: var(--space-5);
}
.brand-lg {
  font-size: var(--text-display);
}
.login-subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}
.login-error {
  background: var(--danger-weak);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  text-align: center;
}
.login-form .form-group {
  margin-bottom: var(--space-4);
}
.login-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.form-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  font-size: var(--text-base);
  outline: none;
  transition: border-color 0.15s ease;
}
.form-input:focus {
  border-color: var(--accent);
}
.btn-block {
  width: 100%;
  padding: var(--space-3);
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--space-2);
  cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
}
.btn-block:hover {
  background: var(--accent-hover);
}
.user-badge {
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
}
.btn-logout {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-logout:hover {
  color: var(--danger-text);
  border-color: var(--danger-border);
}


/* ---------- Playback history ---------- */
.history-page{max-width:1100px;margin:0 auto;padding:var(--space-4)}
.history-page>h1{font-size:var(--text-xl);margin:var(--space-3) 0 var(--space-5)}
.history-section{margin-bottom:var(--space-5)}
.history-section>h2{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:var(--space-3)}
.history-card{display:flex;gap:var(--space-3);min-width:0;padding:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}
.history-poster,.history-poster-placeholder{width:92px;height:136px;flex:0 0 92px;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface-2)}
.history-poster-placeholder{display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:30px}
.history-card-info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-width:0;flex:1}
.history-card-info h2{font-size:var(--text-base);line-height:var(--lh-tight);margin:0;color:var(--text)}
.history-filename,.history-location{margin:0;color:var(--text-muted);font-size:var(--text-sm);overflow-wrap:anywhere}
.history-location{font-size:var(--text-xs)}
.history-progress{width:100%;height:8px;accent-color:var(--accent);border:0;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-2)}
.history-progress::-webkit-progress-bar{background:var(--surface-2)}
.history-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--accent-hover))}
.history-progress::-moz-progress-bar{background:var(--accent)}
.history-details{display:flex;flex-wrap:wrap;gap:var(--space-2);color:var(--text-muted);font-size:var(--text-xs)}
.history-completed{color:var(--success);font-weight:600}
.history-action{margin-top:auto}
.history-empty{border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--surface)}
@media(max-width:480px){.history-page{padding:var(--space-3)}.history-grid{grid-template-columns:1fr}.history-card{gap:var(--space-2);padding:var(--space-2)}.history-poster,.history-poster-placeholder{width:76px;height:114px;flex-basis:76px}}


/* ---------- Changelog ---------- */
.changelog-page{max-width:900px;margin:0 auto;padding:var(--space-4)}
.changelog-page>h1{font-size:var(--text-xl);margin:var(--space-3) 0 var(--space-5)}
.changelog-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);line-height:var(--lh)}
.changelog-content h2{font-size:var(--text-lg);margin:var(--space-5) 0 var(--space-2);color:var(--text)}
.changelog-content h2:first-child{margin-top:0}
.changelog-content h3{font-size:var(--text-base);margin:var(--space-4) 0 var(--space-2)}
.changelog-content p{color:var(--text-muted);margin:0 0 var(--space-3)}
.changelog-content ul{padding-left:1.4rem;margin:0 0 var(--space-4);color:var(--text-muted)}
.changelog-content li{padding-left:var(--space-1);margin:var(--space-1) 0}
.changelog-empty{border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--surface)}
@media(max-width:600px){.changelog-page{padding:var(--space-3)}.changelog-content{padding:var(--space-3)}}


/* ---------- Featured continue-watching card ---------- */
.continue-section{max-width:1120px;margin:0 auto var(--space-5);padding:var(--space-4) var(--space-4) 0}
.continue-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.continue-heading h2{margin:0;font-size:var(--text-xl);color:var(--text)}
.continue-history-link{font-size:var(--text-sm);color:var(--accent-hover);text-decoration:none;white-space:nowrap}
.continue-history-link:hover{text-decoration:underline}
.continue-card{display:flex;gap:clamp(18px,4vw,36px);min-height:260px;padding:clamp(16px,3vw,28px);background:linear-gradient(115deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.continue-poster,.continue-poster-placeholder{display:block;width:174px;height:240px;flex:0 0 174px;object-fit:cover;align-self:center;border-radius:var(--radius-md);background:var(--surface-hover);box-shadow:0 8px 22px rgba(0,0,0,.32)}
.continue-poster-placeholder{display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:48px}
.continue-card-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--space-3);min-width:0;flex:1}
.continue-series{margin:0;color:var(--accent-hover);font-size:var(--text-lg);font-weight:650;overflow-wrap:anywhere}
.continue-card-info h3{margin:0;color:var(--text);font-size:var(--text-xl);line-height:var(--lh-tight);overflow-wrap:anywhere}
.continue-progress-label{display:flex;flex-direction:column;gap:var(--space-2);width:100%;max-width:600px;color:var(--text);font-size:var(--text-sm);font-weight:600}
.continue-progress{display:block;width:100%;height:12px;accent-color:var(--accent);border:0;border-radius:var(--radius-pill);overflow:hidden;background:var(--bg)}
.continue-progress::-webkit-progress-bar{background:var(--bg)}
.continue-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--accent-hover))}
.continue-progress::-moz-progress-bar{background:var(--accent)}
.continue-timing{display:flex;flex-wrap:wrap;gap:var(--space-4);color:var(--text-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.continue-action{min-height:48px;padding:var(--space-3) var(--space-5);font-size:var(--text-base);font-weight:650}
@media(max-width:640px){.continue-section{padding:var(--space-3) var(--space-3) 0;margin-bottom:var(--space-4)}.continue-heading h2{font-size:var(--text-lg)}.continue-card{min-height:0;gap:var(--space-3);padding:var(--space-3)}.continue-poster,.continue-poster-placeholder{width:104px;height:156px;flex-basis:104px}.continue-card-info{gap:var(--space-2)}.continue-series{font-size:var(--text-base)}.continue-card-info h3{font-size:var(--text-base)}.continue-timing{gap:var(--space-2);font-size:var(--text-xs)}.continue-action{min-height:44px;padding:var(--space-2) var(--space-3)}}
@media(max-width:380px){.continue-card{align-items:flex-start}.continue-poster,.continue-poster-placeholder{width:78px;height:117px;flex-basis:78px}}