/* ════════════════════════════════════════════════════════════════════════════
   cleanup.css  —  Cleanup page specific styles
   Defines local aliases --gb / --shadow / --shine used within this page.
   .card, .btn, .section-label intentionally override shared.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Local aliases ── */
:root {
  --gb:     rgba(255,255,255,0.07);
  --shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  --shine:  linear-gradient(135deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.02) 100%);
}

/* ── Card (page override) ── */
.card { background:var(--card-bg); border:1px solid var(--gb); border-radius:22px; padding:1.4rem 1.6rem; margin-bottom:1rem; position:relative; overflow:hidden; backdrop-filter:blur(40px); box-shadow:var(--shadow); }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); }
.card::after  { content:''; position:absolute; inset:0; background:var(--shine); pointer-events:none; border-radius:22px; }

/* ── Section label (page override) ── */
.section-label { font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:.85rem; position:relative; z-index:1; }

/* ── View tabs ── */
.view-tabs { display:flex; gap:.3rem; background:rgba(0,0,0,.25); border-radius:12px; padding:3px; margin-bottom:1rem; width:fit-content; position:relative; z-index:1; }
.view-tab  { padding:.35rem .9rem; border-radius:9px; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .15s; border:none; background:none; color:var(--text-dim); font-family:inherit; }
.view-tab:hover:not(.active){ color:var(--text); }
.view-tab.active { background:rgba(124,92,252,.2); color:#a8b4ff; }
.panel       { display:none; }
.panel.active{ display:block; }

/* ── Buttons (page override) ── */
/* btn base + ghost/accent/danger/sm inherited from shared.css */

/* ── Strike list ── */
.strike-list { display:flex; flex-direction:column; gap:.5rem; position:relative; z-index:1; }
.strike-card { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:.85rem 1rem; display:flex; align-items:center; gap:.75rem; }
.strike-card.warn   { border-color:rgba(251,191,36,.2);  background:rgba(251,191,36,.04); }
.strike-card.danger { border-color:rgba(248,113,113,.25); background:rgba(248,113,113,.06); }
.strike-name   { flex:1; font-size:.85rem; font-weight:600; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.strike-reason { font-size:.72rem; color:var(--text-dim); margin-top:.15rem; }
.strike-dots   { display:flex; gap:.3rem; flex-shrink:0; }
.strike-dot    { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.strike-dot.filled.green { background:var(--green); border-color:rgba(52,211,153,.5);  box-shadow:0 0 6px rgba(52,211,153,.4); }
.strike-dot.filled.amber { background:var(--amber); border-color:rgba(251,191,36,.5);  box-shadow:0 0 6px rgba(251,191,36,.4); }
.strike-dot.filled.red   { background:var(--red);   border-color:rgba(248,113,113,.5); box-shadow:0 0 6px rgba(248,113,113,.4); }

/* ── Sparkline ── */
.sparkline-wrap { display:flex; align-items:flex-end; gap:2px; flex-shrink:0; height:16px; }
.spark-bar      { width:4px; border-radius:2px 2px 0 0; background:rgba(255,255,255,.08); }
.spark-bar.s0 { background:rgba(255,255,255,.08); }
.spark-bar.s1 { background:var(--green); }
.spark-bar.s2 { background:var(--amber); }
.spark-bar.s3 { background:var(--red); box-shadow:0 0 4px rgba(248,113,113,.4); }

/* ── History list ── */
.history-list    { display:flex; flex-direction:column; gap:.4rem; position:relative; z-index:1; }
.history-row     { padding:.65rem .85rem; border-radius:10px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); }
.history-row.removed { background:rgba(248,113,113,.04); border-color:rgba(248,113,113,.15); }
.history-row-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.2rem; }
.h-ts    { font-size:.7rem; color:var(--text-dim); font-family:'DM Mono',monospace; }
.h-name  { font-size:.84rem; color:var(--text); word-break:break-word; }
.h-reason{ font-size:.72rem; color:var(--text-muted); margin-top:.15rem; }
.h-ok    { font-size:.7rem; margin-left:auto; }
.h-ok.ok  { color:var(--green); }
.h-ok.fail{ color:var(--red); }

/* ── Config grid ── */
.cfg-grid   { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; position:relative; z-index:1; }
.field-group{ display:flex; flex-direction:column; gap:.25rem; }
.field-group label { font-size:.67rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
.field-input { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:.45rem .75rem; color:var(--text); font-size:.85rem; font-family:inherit; outline:none; transition:border-color .2s; }
.field-input:focus { border-color:var(--accent-border); }

/* ── Toggle rows ── */
.toggle-row         { display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.05); position:relative; z-index:1; }
.toggle-row:last-child { border-bottom:none; }
.toggle-label { font-size:.85rem; font-weight:600; }
.toggle-desc  { font-size:.72rem; color:var(--text-dim); margin-top:.1rem; }

/* ── Status pill ── */
.status-pill         { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .65rem; border-radius:20px; font-size:.75rem; font-weight:700; }
.status-pill.running { background:rgba(52,211,153,.1);  border:1px solid rgba(52,211,153,.3);  color:var(--green); }
.status-pill.stopped { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:var(--text-dim); }

/* ── Empty / spinner ── */
.empty-state { padding:2.5rem 1rem; text-align:center; color:var(--text-muted); font-size:.88rem; position:relative; z-index:1; }
.spinner     { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.1); border-top-color:var(--accent); border-radius:50%; animation:spin .75s linear infinite; vertical-align:middle; margin-right:.3rem; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Toast (stacked) ── */
#toast      { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.4rem; pointer-events:none; }
.toast-item { padding:.6rem 1rem; border-radius:10px; font-size:.82rem; font-weight:600; background:rgba(20,20,36,.95); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(12px); color:var(--text); animation:tIn .25s cubic-bezier(.16,1,.3,1); }
@keyframes tIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Tooltip ── */
.has-tooltip { position:relative; display:inline-flex; }
.has-tooltip .tooltip { position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:rgba(15,15,28,.97); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:.45rem .75rem; font-size:.73rem; color:var(--text); pointer-events:none; opacity:0; transition:opacity .15s; z-index:200; line-height:1.4; max-width:240px; white-space:normal; text-align:center; }
.has-tooltip:hover .tooltip { opacity:1; }

/* ── Torrent table ── */
.torrent-table    { width:100%; border-collapse:collapse; position:relative; z-index:1; font-size:.78rem; }
.torrent-table th { font-size:.63rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); padding:.45rem .65rem; border-bottom:1px solid rgba(255,255,255,.05); text-align:left; white-space:nowrap; }
.torrent-table td { padding:.55rem .65rem; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; }
.torrent-table tr:last-child td { border-bottom:none; }
.torrent-table tr:hover td { background:rgba(255,255,255,.02); }
.tor-state { display:inline-flex; padding:.12rem .45rem; border-radius:20px; font-size:.68rem; font-weight:700; white-space:nowrap; }
.tor-dl    { background:rgba(52,211,153,.1);  color:var(--green);    border:1px solid rgba(52,211,153,.25); }
.tor-stall { background:rgba(248,113,113,.1); color:var(--red);      border:1px solid rgba(248,113,113,.25); }
.tor-pause { background:rgba(255,255,255,.05); color:var(--text-dim); border:1px solid rgba(255,255,255,.1); }
.tor-other { background:rgba(251,191,36,.1);  color:var(--amber);    border:1px solid rgba(251,191,36,.25); }
.tor-strikes { display:flex; gap:2px; align-items:center; }
.tor-dot     { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.1); }
.tor-dot.s1  { background:var(--green); box-shadow:0 0 4px rgba(52,211,153,.5); }
.tor-dot.s2  { background:var(--amber); box-shadow:0 0 4px rgba(251,191,36,.5); }
.tor-dot.s3  { background:var(--red);   box-shadow:0 0 4px rgba(248,113,113,.5); }

/* ── Custom checkbox ── */
.vc-cb-wrap { display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; user-select:none; position:relative; }
.vc-cb-wrap input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.vc-cb-box  { width:17px; height:17px; flex-shrink:0; border-radius:5px; border:1.5px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; transition:all .15s; }
.vc-cb-wrap input:checked + .vc-cb-box { background:var(--accent); border-color:var(--accent); box-shadow:0 0 8px rgba(124,92,252,.45); }
.vc-cb-wrap input:checked + .vc-cb-box::after { content:''; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); display:block; }

/* ── Toggle switch ── */
.vc-toggle-wrap { display:inline-flex; align-items:center; gap:.65rem; cursor:pointer; user-select:none; }
.vc-toggle-wrap input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.vc-toggle-track { width:32px; height:18px; border-radius:9px; flex-shrink:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); position:relative; transition:all .2s; }
.vc-toggle-thumb { width:12px; height:12px; border-radius:50%; background:var(--text-dim); position:absolute; top:2px; left:2px; transition:all .2s; }
.vc-toggle-wrap input:checked ~ .vc-toggle-track { background:var(--accent); border-color:var(--accent); box-shadow:0 0 8px rgba(124,92,252,.35); }
.vc-toggle-wrap input:checked ~ .vc-toggle-track .vc-toggle-thumb { left:16px; background:#fff; }
.vc-toggle-wrap input:disabled ~ .vc-toggle-track { opacity:.35; cursor:not-allowed; }
.vc-toggle-wrap:hover { color:var(--text); }

/* ── Dry run banner ── */
.dry-run-banner     { display:none; align-items:center; gap:.6rem; padding:.55rem .9rem; margin-bottom:.75rem; background:rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.25); border-radius:10px; font-size:.78rem; color:var(--amber); position:relative; z-index:1; }
.dry-run-banner.show{ display:flex; }

/* ── Modal ── */
.modal-backdrop     { display:none; position:fixed; inset:0; z-index:8000; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
.modal-backdrop.open{ display:flex; }
.modal-box { background:linear-gradient(145deg,#0e0e1c,#12121e); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1.75rem 2rem; width:92%; max-width:520px; box-shadow:0 24px 64px rgba(0,0,0,.6); position:relative; overflow:hidden; }
.modal-box::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); }
.modal-title  { font-size:1rem; font-weight:800; color:var(--text); margin-bottom:.25rem; }
.modal-sub    { font-size:.78rem; color:var(--text-dim); margin-bottom:1.1rem; }
.modal-footer { display:flex; justify-content:flex-end; margin-top:1.25rem; }

/* ── Dry run results ── */
.dry-result-list { display:flex; flex-direction:column; gap:.4rem; max-height:320px; overflow-y:auto; }
.dry-result-row  { padding:.5rem .75rem; border-radius:8px; background:rgba(248,113,113,.06); border:1px solid rgba(248,113,113,.18); font-size:.8rem; }
.dry-result-name  { font-weight:600; color:var(--text); }
.dry-result-reason{ font-size:.72rem; color:var(--text-muted); margin-top:.15rem; }

/* ── Blocklist ── */
.blocklist-add    { display:flex; gap:.5rem; margin-bottom:1rem; position:relative; z-index:1; }
.blocklist-add .field-input { flex:1; }
.blocklist-item   { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:9px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); margin-bottom:.3rem; position:relative; z-index:1; }
.blocklist-pattern{ flex:1; font-family:'DM Mono',monospace; font-size:.78rem; color:var(--text); }
.blocklist-source { font-size:.68rem; color:var(--text-muted); }

/* ── Action bar ── */
.cleanup-action-bar { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }

/* ── Mobile ── */
@media (max-width:600px) {
  .cfg-grid { grid-template-columns:1fr; }
  .title-card { flex-wrap:wrap; align-items:flex-start; }
  .title-card > div[style*="margin-left:auto"] { width:100%; margin-left:0 !important; padding-top:0.4rem; border-top:1px solid rgba(255,255,255,0.07); margin-top:0.35rem; flex-wrap:wrap; gap:0.35rem; }
  .status-pill { font-size:0.72rem; padding:0.2rem 0.55rem; }
}
@media (max-width:540px) {
  body { padding-left:0.65rem; padding-right:0.65rem; }
  .card, .glass-card { padding:1.1rem 1.1rem; }
}