/* ============================================================
 * Series Browser Modal — responsive, mobile-first
 * ============================================================ */
.sb-no-scroll { overflow: hidden; }

.sb-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:stretch; justify-content:center;
}
.sb-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
}
.sb-panel{
  position:relative;
  width:min(1180px, 100%);
  margin:0 auto;
  background:var(--bg-elevated, #1e1e2a);
  color:var(--text-primary, #f1f5f9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:0;
  display:flex; flex-direction:column;
  max-height:100vh; overflow:hidden;
}
@media (min-width: 720px){
  .sb-panel{ margin:24px auto; border-radius:16px; max-height:calc(100vh - 48px); }
}

.sb-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(99,102,241,.10), transparent);
}
.sb-title{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:1rem; min-width:0;
}
.sb-title i{ color:var(--accent-primary, #6366f1); }
.sb-title span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sb-icon{
  width:36px; height:36px; border:0; border-radius:8px;
  background:transparent; color:var(--text-muted, #94a3b8);
  cursor:pointer;
}
.sb-icon:hover{ background:rgba(255,255,255,.08); color:#fff; }

.sb-body{
  display:flex; flex-direction:column;
  flex:1; min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding:1rem;
  gap:.85rem;
}

.sb-toolbar{
  position:sticky; top:0; z-index:2;
  display:grid; grid-template-columns: 1fr; gap:.6rem;
  background:var(--bg-elevated, #1e1e2a);
  padding:.25rem 0 .5rem;
}
@media (min-width:720px){
  .sb-toolbar{ grid-template-columns: minmax(0,1fr) auto; align-items:center; }
}
.sb-search-wrap{ position:relative; min-width:0; }
.sb-search-icon{
  position:absolute; left:.8rem; top:50%; transform:translateY(-50%);
  color:var(--text-muted, #94a3b8); font-size:.9rem;
}
.sb-search{
  width:100%; height:42px; padding:0 .8rem 0 2.2rem;
  background:var(--bg-tertiary, #14141d);
  color:var(--text-primary, #f1f5f9);
  border:1px solid transparent; border-radius:10px;
  font-size:.95rem;
}
.sb-search:focus{ outline:none; border-color:var(--accent-primary, #6366f1); }

.sb-actions{
  display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-end;
}
.sb-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem .8rem; min-height:38px;
  background:var(--bg-tertiary, #14141d);
  color:var(--text-primary, #f1f5f9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px; cursor:pointer; font-size:.85rem;
}
.sb-btn:hover{ background:rgba(255,255,255,.06); }
.sb-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.sb-btn-primary{
  background:linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color:transparent; color:#fff; font-weight:600;
}

.sb-status{
  font-size:.82rem; color:var(--text-muted, #94a3b8);
  padding:.35rem .15rem;
}
.sb-status-loading{ color:#60a5fa; }
.sb-status-error{ color:#f87171; }
.sb-status-success{ color:#34d399; }

.sb-grid{
  display:grid; gap:.85rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (min-width:720px){
  .sb-grid{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

.sb-card{
  position:relative;
  background:var(--bg-tertiary, #14141d);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  display:flex; flex-direction:column;
  user-select:none;
}
.sb-card:hover{ transform:translateY(-2px); border-color:rgba(99,102,241,.45); }
.sb-card.is-selected{
  border-color:#6366f1;
  box-shadow:0 0 0 2px rgba(99,102,241,.45);
}
.sb-card.is-dup{ opacity:.92; }

.sb-cover{
  position:relative; aspect-ratio: 2 / 3;
  background:#0f0f17;
  display:flex; align-items:center; justify-content:center;
}
.sb-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.sb-cover-fallback{
  color:rgba(255,255,255,.18); font-size:2rem;
}

.sb-check{
  position:absolute; top:8px; right:8px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.6);
  color:transparent; font-size:.75rem;
  transition: all .12s ease;
}
.sb-card.is-selected .sb-check{
  background:#6366f1; border-color:#6366f1; color:#fff;
}
.sb-badge{
  position:absolute; bottom:8px; left:8px;
  background:rgba(0,0,0,.7); color:#fbbf24;
  padding:.2rem .45rem; border-radius:6px;
  font-size:.68rem; font-weight:600;
  border:1px solid rgba(251,191,36,.35);
}

.sb-info{ padding:.55rem .6rem .65rem; display:flex; flex-direction:column; gap:.3rem; }
.sb-card-title{
  font-size:.85rem; font-weight:600; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.sb-card-meta{ display:flex; flex-wrap:wrap; gap:.25rem; }
.sb-chip{
  background:rgba(99,102,241,.18); color:#c7d2fe;
  padding:.1rem .4rem; border-radius:999px;
  font-size:.68rem; font-weight:600;
}
.sb-chip-muted{ background:rgba(255,255,255,.06); color:var(--text-muted, #94a3b8); }
.sb-genres{ display:flex; flex-wrap:wrap; gap:.2rem; }
.sb-genre{
  font-size:.65rem; color:var(--text-muted,#94a3b8);
  background:rgba(255,255,255,.04); padding:.1rem .35rem; border-radius:4px;
}
.sb-src-url{
  font-size:.68rem; color:var(--text-muted,#94a3b8);
  text-decoration:none; word-break:break-all; line-clamp:1;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.sb-src-url:hover{ color:var(--accent-primary,#6366f1); text-decoration:underline; }

.sb-empty{ text-align:center; color:var(--text-muted,#94a3b8); padding:2rem 1rem; }
.sb-footer{ display:flex; align-items:center; justify-content:center; padding:.75rem; }
.sb-end{ font-size:.78rem; color:var(--text-muted,#94a3b8); }
.sb-spinner{
  width:22px; height:22px; border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--accent-primary,#6366f1);
  border-radius:50%; animation: sbspin .8s linear infinite;
}
@keyframes sbspin{ to{ transform:rotate(360deg); } }

/* Source plugin cards on the import page */
.sb-plugin-grid{
  display:grid; gap:.6rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top:.6rem;
}
.sb-plugin-card{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.7rem .8rem;
  background:var(--bg-tertiary, #14141d);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  cursor:pointer;
  transition: border-color .12s ease, transform .12s ease;
  text-align:left;
}
.sb-plugin-card:hover{ border-color:var(--accent-primary,#6366f1); transform:translateY(-1px); }
.sb-plugin-card .name{ font-weight:600; font-size:.9rem; }
.sb-plugin-card .domain{ font-size:.72rem; color:var(--text-muted,#94a3b8); }
.sb-plugin-card i{ color:var(--accent-primary,#6366f1); }

/* ===== Locked import toggle (in modal toolbar) ===== */
.sb-lock-wrap{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem;
  background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.4);
  border-radius:8px;
  color:#fbbf24;
  font-size:.82rem; font-weight:600;
  cursor:pointer; user-select:none;
}
.sb-lock-wrap input{ accent-color:#f59e0b; cursor:pointer; }
.sb-lock-wrap i{ color:#f59e0b; }

/* ===== Locked row indicator in admin imported list ===== */
.imported-row.is-locked{
  border-left:3px solid #f59e0b;
  background:linear-gradient(90deg, rgba(245,158,11,.08), transparent 40%);
}

/* ============================================================
   Tabs + Latest Releases view (added for Browse Series upgrade)
   ============================================================ */
.sb-tabs{
  display:flex; gap:.5rem; padding:.25rem 0 .75rem; flex-wrap:wrap;
}
.sb-tab{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:inherit; font-size:.85rem; font-weight:600;
  transition:background .15s, border-color .15s, color .15s;
}
.sb-tab:hover{ background:rgba(255,255,255,.08); }
.sb-tab.is-active{
  background:rgba(99,102,241,.18);
  border-color:rgba(99,102,241,.55);
  color:#c7d2fe;
}
.sb-view{ display:flex; flex-direction:column; gap:.5rem; }

.sb-cover-empty{
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.25); font-size:1.6rem;
  background:rgba(255,255,255,.03);
}
.sb-latest-card{ display:flex; flex-direction:column; }
.sb-card-body{ display:flex; flex-direction:column; gap:.2rem; padding:.5rem .6rem; }
.sb-card-sub{ font-size:.8rem; color:#a5b4fc; font-weight:600; }
.sb-latest-card .sb-card-meta{
  font-size:.72rem; color:rgba(255,255,255,.55);
  display:flex; align-items:center; gap:.25rem;
}
.sb-latest-import{ margin:.4rem .6rem .6rem; justify-content:center; }
.sb-latest-import.is-disabled{ opacity:.5; cursor:not-allowed; }

/* --- Toolbar additions: sort / status / hide-imported --- */
.sb-select{
  appearance:none;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:inherit; font-size:.8rem; font-weight:600;
  padding:.45rem .75rem; padding-right:1.75rem;
  border-radius:10px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#a5b4fc 50%),linear-gradient(135deg,#a5b4fc 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  transition:border-color .15s, background-color .15s;
}
.sb-select:hover{ background-color:rgba(255,255,255,.09); border-color:rgba(139,92,246,.45); }
.sb-select:focus{ outline:none; border-color:#8b5cf6; }

/* --- Smooth cover fade-in + shimmer placeholder (V12) --- */
.sb-cover{ overflow:hidden; }
.sb-cover::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.06) 50%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #14141d 0%, #0d0d14 100%);
  background-size: 220% 100%, 100% 100%;
  animation: sbShimmer 1.4s linear infinite;
  z-index:0; pointer-events:none;
  transition: opacity .25s ease;
}
.sb-cover.is-ready::before,
.sb-cover-empty::before{ opacity:0; animation:none; }
.sb-cover img,
.sb-cover .sb-cover-fallback{ position:relative; z-index:1; }
.sb-cover img{
  opacity:0;
  transition:opacity .25s ease;
}
.sb-cover img.is-loaded{ opacity:1; }
@keyframes sbShimmer{
  0%   { background-position: 200% 0, 0 0; }
  100% { background-position: -120% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .sb-cover::before{ animation:none; }
}


/* ============================================================
   Browse Series upgrade: health badge, favorite, preview drawer,
   per-card mini actions (additive, no overrides).
   ============================================================ */
.sb-health{
  display:inline-flex; align-items:center; gap:.3rem;
  margin-left:.6rem; padding:.15rem .55rem;
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
  border-radius:999px; text-transform:uppercase;
  border:1px solid transparent;
}
.sb-health-online  { background:rgba(52,211,153,.15); color:#34d399; border-color:rgba(52,211,153,.35); }
.sb-health-slow    { background:rgba(251,191,36,.15); color:#fbbf24; border-color:rgba(251,191,36,.35); }
.sb-health-offline { background:rgba(248,113,113,.15); color:#f87171; border-color:rgba(248,113,113,.4); }
.sb-health-unknown { background:rgba(255,255,255,.05); color:#94a3b8; border-color:rgba(255,255,255,.12); }

.sb-fav-btn, .sb-open-src{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer; margin-left:.25rem;
  background:rgba(255,255,255,.05); color:#94a3b8; text-decoration:none;
  transition: background .15s, color .15s, transform .12s;
}
.sb-fav-btn:hover, .sb-open-src:hover{ background:rgba(255,255,255,.12); color:#fff; transform:translateY(-1px); }
.sb-fav-btn.is-fav{ color:#fbbf24; background:rgba(251,191,36,.12); }

.sb-card-actions{
  display:flex; gap:.3rem; margin-top:.15rem;
}
.sb-mini-btn{
  flex:0 0 auto;
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:#cbd5e1;
  border-radius:8px; cursor:pointer; text-decoration:none;
  font-size:.72rem;
  transition: background .15s, border-color .15s, color .15s;
}
.sb-mini-btn:hover{
  background:rgba(99,102,241,.18); border-color:rgba(99,102,241,.55); color:#fff;
}

/* --- Preview drawer --- */
.sb-preview-overlay{
  position:fixed; inset:0; z-index:10010;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.sb-preview-card{
  width:min(720px, 100%); max-height:90vh; overflow:hidden;
  background:var(--bg-elevated, #1e1e2a); color:var(--text-primary, #f1f5f9);
  border:1px solid rgba(255,255,255,.1); border-radius:14px;
  display:flex; flex-direction:column;
}
.sb-preview-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.sb-preview-title{ font-weight:700; font-size:1rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-preview-body{
  display:grid; grid-template-columns: 200px 1fr; gap:1rem;
  padding:1rem; overflow:auto;
}
@media (max-width:640px){ .sb-preview-body{ grid-template-columns: 1fr; } }
.sb-preview-cover{
  aspect-ratio:2/3; background:#0f0f17; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.sb-preview-cover img{ width:100%; height:100%; object-fit:cover; }
.sb-preview-meta{ display:flex; flex-direction:column; gap:.4rem; font-size:.88rem; line-height:1.45; }
.sb-preview-desc{ color:var(--text-muted,#94a3b8); margin:.5rem 0 0; font-size:.85rem; }
.sb-preview-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.sb-preview-loading{
  grid-column:1/-1; display:flex; align-items:center; gap:.6rem;
  color:var(--text-muted,#94a3b8); padding:1.5rem; justify-content:center;
}

/* ============================================================
   Browse Series by Source Plugin — improved picker layout
   (admin-import-series.html). Additive only: the original
   .sb-plugin-grid / .sb-plugin-card rules above still apply.
   ============================================================ */
.sb-plugin-section{ border:1px solid rgba(99,102,241,.28); }

.sb-plugin-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap; margin-bottom:.9rem;
}
.sb-plugin-title{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.125rem; font-weight:600; margin:0;
}
.sb-plugin-title i{ color:var(--accent-primary,#6366f1); }
.sb-plugin-sub{
  margin:.3rem 0 0; font-size:.8rem; color:var(--text-muted,#94a3b8);
}
.sb-plugin-count{
  font-size:.75rem; font-weight:600; white-space:nowrap;
  color:var(--text-muted,#94a3b8);
  background:var(--bg-tertiary,#14141d);
  border:1px solid rgba(255,255,255,.06);
  padding:.35rem .7rem; border-radius:999px;
}

.sb-plugin-toolbar{
  display:flex; flex-direction:column; gap:.6rem; margin-bottom:.2rem;
}
.sb-plugin-search{ position:relative; }
.sb-plugin-search > i.lead{
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  color:var(--text-muted,#94a3b8); font-size:.85rem; pointer-events:none;
}
.sb-plugin-search input[type="search"]{
  width:100%; height:42px; padding:0 2.4rem;
  background:var(--bg-tertiary,#14141d);
  border:1px solid rgba(255,255,255,.06); border-radius:10px;
  color:var(--text-primary,#e5e7eb); font-size:.92rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sb-plugin-search input[type="search"]::-webkit-search-cancel-button{ display:none; }
.sb-plugin-search input[type="search"]:focus{
  outline:none; border-color:var(--accent-primary,#6366f1);
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}
.sb-plugin-search .clear{
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:7px;
  background:transparent; color:var(--text-muted,#94a3b8);
  cursor:pointer; display:none; align-items:center; justify-content:center;
}
.sb-plugin-search .clear:hover{ background:var(--bg-hover,rgba(255,255,255,.06)); color:var(--text-primary,#e5e7eb); }
.sb-plugin-search.has-query .clear{ display:flex; }

.sb-plugin-filters{ display:flex; gap:.4rem; flex-wrap:wrap; }
.sb-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .8rem; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:inherit; font-size:.8rem; font-weight:600;
  transition:background .15s, border-color .15s, color .15s;
}
.sb-chip:hover{ background:rgba(255,255,255,.08); }
.sb-chip.is-active{
  background:rgba(99,102,241,.18);
  border-color:rgba(99,102,241,.55);
  color:#c7d2fe;
}
.sb-chip i{ font-size:.75rem; }

/* Grouped (categorised) plugin listing */
.sb-plugin-group{ margin-top:1rem; }
.sb-plugin-group > .sb-group-label{
  display:flex; align-items:center; gap:.45rem;
  font-size:.74rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted,#94a3b8);
  margin:0 0 .1rem;
}
.sb-plugin-group > .sb-group-label i{ color:var(--accent-primary,#6366f1); }
.sb-plugin-group > .sb-group-label .n{
  font-weight:600; letter-spacing:0; text-transform:none; opacity:.75;
}

/* Card refinements + favorite toggle */
.sb-plugin-card{ position:relative; padding-right:2.4rem; }
.sb-plugin-card .name{
  display:flex; align-items:center; gap:.4rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sb-plugin-card .domain{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-plugin-card .sb-type{
  font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:.1rem .34rem; border-radius:4px;
  background:rgba(99,102,241,.16); color:#c7d2fe;
}
.sb-plugin-card .sb-type.is-novel{ background:rgba(16,185,129,.16); color:#6ee7b7; }
.sb-plugin-card > i.fa-arrow-right{ position:absolute; right:.8rem; top:50%; transform:translateY(-50%); }
.sb-fav-btn{
  position:absolute; top:.3rem; right:.28rem;
  width:24px; height:24px; border:0; border-radius:6px;
  background:transparent; color:var(--text-muted,#94a3b8);
  font-size:.72rem; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .12s ease, color .12s ease;
}
.sb-plugin-card:hover .sb-fav-btn,
.sb-fav-btn.is-on{ opacity:1; }
.sb-fav-btn.is-on{ color:#fbbf24; }
.sb-fav-btn:hover{ background:rgba(255,255,255,.08); color:#fbbf24; }

.sb-plugin-empty{
  padding:1.1rem; text-align:center;
  font-size:.84rem; color:var(--text-muted,#94a3b8);
  background:var(--bg-tertiary,#14141d);
  border:1px dashed rgba(255,255,255,.10); border-radius:10px;
  margin-top:.6rem;
}

@media (min-width:820px){
  .sb-plugin-toolbar{ flex-direction:row; align-items:center; }
  .sb-plugin-search{ flex:1 1 320px; min-width:0; }
  .sb-plugin-filters{ flex:0 0 auto; justify-content:flex-end; }
}