:root {
  --bg: #0b0d12;
  --panel: #141821;
  --panel-2: #1a1f2b;
  --line: #262c3a;
  --text: #e8ebf2;
  --muted: #8b93a7;
  --accent: #6366f1;
  --accent-2: #22d3ee;
  --green: #34d399;
  --amber: #fbbf24;
  --coral: #ff7a59;
  --red: #f43f5e;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); min-height: 100vh; min-height: 100dvh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(700px 400px at 100% 0%, rgba(34,211,238,.12), transparent 60%),
    var(--bg);
}
main {
  max-width: 860px; margin: 0 auto;
  padding: max(40px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(80px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.logo { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.logo i {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 24px rgba(99,102,241,.45);
}
.logo svg { width: 20px; height: 20px; stroke: #fff; }
.totals { display: flex; gap: 10px; }
.chip {
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.chip b { color: var(--text); font-weight: 600; }

#add {
  display: flex; gap: 10px; padding: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
#add:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
#add input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--text); font-size: 15px; padding: 12px 14px;
}
#add input::placeholder { color: #5b6377; }
#add input:focus::placeholder { color: transparent; }   /* the hint disappears as soon as the box is clicked */

button, .btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); padding: 8px 14px; border-radius: 10px;
  transition: .15s; display: inline-flex; align-items: center; gap: 6px;
}
@media (hover: hover) { button:hover, .btn:hover { border-color: #3a4256; background: #212737; } }
button svg, .btn svg { width: 14px; height: 14px; }
.primary {
  border: 0; padding: 12px 22px; font-size: 14px; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
}
@media (hover: hover) { .primary:hover { filter: brightness(1.12); background: linear-gradient(135deg, var(--accent), #8b5cf6); } }
@media (hover: hover) { .danger:hover { background: rgba(244,63,94,.15); border-color: var(--red); color: #ff7a93; } }


#list { display: grid; gap: 14px; margin-top: 18px; }
.card {
  background: linear-gradient(180deg, var(--panel), #11141b); border: 1px solid var(--line);
  border-radius: 18px; padding: 18px 20px; transition: border-color .2s, transform .2s;
}
@media (hover: hover) { .card:hover { border-color: #353d52; } }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; line-height: 1.35; }
.pill {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; background: rgba(99,102,241,.15); color: #a5a8ff;
}
.pill.downloading, .pill.getting { background: rgba(34,211,238,.14); color: var(--accent-2); }
.pill.seeding, .pill.finished { background: rgba(52,211,153,.14); color: var(--green); }
.pill.stopped { background: rgba(255,122,89,.15); color: var(--coral); }
.pill.no { background: rgba(244,63,94,.15); color: #ff7a93; }   /* "no space": stopped because the disk is full */

.bar { height: 10px; background: #0d1017; border-radius: 999px; margin: 16px 0 6px; overflow: hidden; border: 1px solid var(--line); }
.bar div {
  height: 100%; border-radius: 999px; transition: width .6s ease;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px rgba(34,211,238,.5);
}
.card.complete .bar div { background: linear-gradient(90deg, #10b981, var(--green)); box-shadow: 0 0 14px rgba(52,211,153,.45); }
.card.stopped .bar div { background: var(--coral); box-shadow: none; }
.card.complete.stopped .bar div { background: linear-gradient(90deg, #8b5cf6, #a78bfa); box-shadow: none; }   /* finished and stopped (the Complete tab): the tab's purple */
.pct { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 14px 0; }
.stat { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; }
.stat span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.actions { display: flex; gap: 8px; justify-content: flex-end; }

.empty { text-align: center; color: var(--muted); padding: 60px 20px; border: 1px dashed var(--line); border-radius: 18px; }
.empty svg { width: 42px; height: 42px; stroke: #4a5266; margin-bottom: 10px; }

@media (max-width: 520px) {
  #add { flex-direction: column; }
  .actions { justify-content: stretch; }
  .actions button { flex: 1; justify-content: center; }
}
.btn { text-decoration: none; }
.save { border: 0; color: #fff; background: linear-gradient(135deg, #10b981, #34d399); }
@media (hover: hover) { .save:hover { filter: brightness(1.1); background: linear-gradient(135deg, #10b981, #34d399); } }
@media (max-width: 520px) { .actions .btn { flex: 1; justify-content: center; } }
.plays { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.plays:empty { display: none; }
.play { background: linear-gradient(135deg, var(--accent), #8b5cf6); border: 0; color: #fff; text-align: left; overflow-wrap: anywhere; }
@media (hover: hover) { .play:hover { filter: brightness(1.12); background: linear-gradient(135deg, var(--accent), #8b5cf6); } }
#player { position: fixed; inset: 0; background: rgba(5,7,10,.88); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 10; padding: 20px; }
#player[hidden] { display: none; }
#player .box { width: min(1100px, 100%); }
#player .bar-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; font-weight: 600; overflow-wrap: anywhere; }
#player video { width: 100%; max-height: 78vh; max-height: 78dvh; background: #000; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.tabs { display: flex; gap: 6px; margin: 22px 0 4px; border-bottom: 1px solid var(--line); }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); padding: 10px 14px; font-size: 14px; }
@media (hover: hover) { .tab:hover { background: transparent; color: var(--text); } }
.tab.on { color: var(--text); border-bottom-color: var(--accent); }
.tab span { background: var(--panel-2); border-radius: 999px; padding: 1px 8px; font-size: 11px; margin-left: 4px; }
.tab span:empty { display: none; }
#library { display: grid; gap: 14px; margin-top: 18px; }
#library[hidden], #list[hidden] { display: none; }
.meta { color: var(--muted); font-size: 13px; margin: 8px 0 12px; }
#pstatus { padding: 60px 20px; text-align: center; color: var(--muted); background: var(--panel); border-radius: 14px; }
#pstatus[hidden] { display: none; }
#player { --plyr-color-main: #6366f1; --plyr-video-background: #000; --plyr-control-radius: 10px;
  --plyr-font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
#player .plyr { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.65); }
#player .plyr video { max-height: 78vh; border-radius: 0; box-shadow: none; }
#player .plyr--video .plyr__control--overlaid { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 8px 30px rgba(99,102,241,.5); }
.play:disabled { opacity: .7; cursor: progress; filter: none; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
#smsg { margin-right: auto; font-size: 13px; }
#smsg.ok { color: var(--green); }
#smsg.bad { color: #ff7a93; }
/* Fixed 16:9 frame so the player doesn't resize when the video's metadata loads. */
#player .box { width: min(1100px, 100%, calc((100vh - 130px) * 16 / 9)); }
#player .box { width: min(1100px, 100%, calc((100dvh - 130px) * 16 / 9)); }
#player .plyr__video-wrapper { aspect-ratio: 16 / 9; background: #000; }
#player .plyr video { width: 100%; height: 100%; max-height: none; object-fit: contain; }

#dialog, #picker { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px;
  background: rgba(5,7,10,.7); backdrop-filter: blur(6px); animation: fade .15s ease; }
#dialog[hidden], #picker[hidden] { display: none; }
.dlg { width: min(420px, 100%); background: linear-gradient(180deg, var(--panel), #11141b); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.65); animation: pop .18s ease; }
.dlg-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(244,63,94,.14); color: #ff7a93; }
.dlg-icon svg { width: 24px; height: 24px; }
.dlg h3 { margin: 0 0 8px; font-size: 18px; }
.dlg p { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#dcheckrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -10px 0 18px; color: var(--muted); font-size: 13px; cursor: pointer; }
#dcheckrow[hidden] { display: none; }
#dcheckrow input { width: 16px; height: 16px; accent-color: var(--accent); }
.dlg-actions { display: flex; gap: 10px; }
.dlg-actions button { flex: 1; justify-content: center; padding: 11px 14px; font-size: 14px; }
.danger-solid { border: 0; color: #fff; background: linear-gradient(135deg, #e11d48, var(--red)); }
@media (hover: hover) { .danger-solid:hover { filter: brightness(1.12); background: linear-gradient(135deg, #e11d48, var(--red)); } }
@keyframes fade { from { opacity: 0 } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97) } }
.ghost { background: transparent; border: 1px dashed #3a4256; color: var(--muted); padding: 0 14px; border-radius: 12px; white-space: nowrap; }
@media (hover: hover) { .ghost:hover { color: var(--text); border-color: var(--accent); background: rgba(99,102,241,.08); } }
#add.drag { border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(34,211,238,.18); }
@media (max-width: 520px) { .ghost { padding: 12px; justify-content: center; } }
#dropzone { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none;
  background: rgba(11,13,18,.82); backdrop-filter: blur(6px); }
#dropzone[hidden] { display: none; }
#dropzone > div { text-align: center; padding: 70px 90px; border: 2px dashed var(--accent-2); border-radius: 28px; background: rgba(34,211,238,.06); }
#dropzone svg { width: 54px; height: 54px; color: var(--accent-2); }
#dropzone h2 { margin: 14px 0 0; font-size: 22px; }
.thumbwrap { aspect-ratio: 16 / 9; margin-bottom: 14px; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; position: relative; }
.thumbwrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); opacity: 0; transition: .2s; }
@media (hover: hover) { .thumbwrap:hover::after { opacity: 1; } }
.thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .25s, transform .35s; }
.thumb.loaded { opacity: 1; }
@media (hover: hover) { .thumbwrap:hover .thumb { transform: scale(1.04); } }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; border-radius: 999px;
  background: #2f3646; position: relative; cursor: pointer; transition: background .2s; border: 0; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .2s; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.switch:checked { background: linear-gradient(135deg, var(--accent), #8b5cf6); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
#pclose, #sclose, #searchclose { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; flex: none; }
#pclose svg, #sclose svg, #searchclose svg { width: 16px; height: 16px; }
.play { position: relative; }
.btn.disabled { opacity: .4; pointer-events: none; cursor: not-allowed; filter: grayscale(.6); }
.btn .ic { display: inline-flex; }
#player .box { position: relative; }
#pload { position: absolute; left: 0; right: 0; top: 52px; z-index: 6; aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; color: var(--text); font-size: 15px; pointer-events: auto; cursor: progress;  /* swallows clicks on the video while it loads */
  background: rgba(0,0,0,.55); border-radius: 16px; }
#pload[hidden] { display: none; }
.spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent-2); animation: spin .8s linear infinite; }
#pload.failed .spin { display: none; }
@keyframes spin { to { transform: rotate(360deg) } }
.plays { display: grid; gap: 8px; }
.vrow { display: flex; gap: 6px; align-items: stretch; }
.vrow .play { flex: 1; min-width: 0; }
.vdl { position: relative; padding: 8px 12px; justify-content: center; }
.btn[hidden] { display: none; }

.split { position: relative; display: inline-flex; }
.split .main { border-radius: 10px 0 0 10px; }
.split .caret { border-radius: 0 10px 10px 0; padding: 8px 9px; border-left: 1px solid rgba(255,255,255,.28); }
.split .caret[hidden] { display: none; }
.split:has(.caret[hidden]) .main { border-radius: 10px; }
.split.disabled { opacity: .4; filter: grayscale(.6); cursor: not-allowed; }
.split.disabled > * { pointer-events: none; }  /* the wrapper itself still gets hover, for the tooltip */
.split .menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 8; min-width: 190px; padding: 6px;
  background: #0b0d12; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.split .menu[hidden] { display: none; }
.mi { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none; cursor: pointer; }
@media (hover: hover) { .mi:hover { background: var(--panel-2); } }
.mi svg { width: 15px; height: 15px; color: var(--green); }
.actions .split { margin-right: auto; }
.tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; }
.tag-complete { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  background: rgba(52,211,153,.16); color: var(--green); border: 1px solid rgba(52,211,153,.35); }
.tag-complete[hidden] { display: none; }
.wglock { display: inline-flex; align-items: center; align-self: center; color: var(--amber); opacity: .9; }
.wglock[hidden] { display: none; }
.wglock svg { width: 14px; height: 14px; }

/* ---- Tabs: pill buttons, each with its own colour; the count badge uses the same colour ---- */
.tabs { gap: 8px; flex-wrap: wrap; border-bottom: 0; margin: 24px 0 6px; }
.tab { --c: #a5a8ff; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--line); border-bottom-width: 1px; background: var(--panel); color: var(--muted);
  font-size: 14px; font-weight: 600; transition: .18s; }
.tab[data-tab="active"] { --c: #22d3ee; }
.tab[data-tab="seeding"] { --c: #34d399; }
.tab[data-tab="complete"] { --c: #a78bfa; }
.tab[data-tab="stopped"] { --c: var(--coral); }
@media (hover: hover) { .tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--c) 55%, var(--line));
  background: color-mix(in srgb, var(--c) 8%, var(--panel)); } }
.tab.on { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, var(--panel));
  box-shadow: 0 8px 26px color-mix(in srgb, var(--c) 28%, transparent); }
.tab span, .countpill { margin: 0; min-width: 22px; padding: 1px 8px; border-radius: 999px; text-align: center;
  font-size: 12px; font-weight: 800; background: var(--c); color: #0b0d12; }
.tab span:empty { display: none; }
.countpill { --c: #a5a8ff; }   /* the same pill in a window title (the tabs set their own --c) */
/* Complete tag: a touch stronger than the other badges */
.tag-complete { background: rgba(52,211,153,.26); border-color: rgba(52,211,153,.65); color: #6ee7b7;
  box-shadow: 0 0 14px rgba(52,211,153,.28); }

/* Tooltip (follows the mouse): the only tooltip style in the app. Small, dim, fades in. */
#tip { position: fixed; z-index: 100; pointer-events: none; max-width: 220px; padding: 4px 9px; border-radius: 8px;
  background: #151922; color: #9aa3b8; border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); animation: fade .15s ease; }
#tip[hidden] { display: none; }
.tipwrap { display: flex; }
.vrow .tipwrap { flex: 1 1 0; min-width: 0; }  /* Play and Download share the row 50/50 */
.tipwrap .vdl { flex: 1; }
.tipwrap .play { flex: 1; width: 100%; }
.play:disabled { pointer-events: none; }

/* Play and Download in a video row share one style */
.vrow .play, .vrow .vdl { background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 8px 14px; justify-content: center; text-align: center; filter: none; }
@media (hover: hover) { .vrow .play:hover:not(:disabled), .vrow .vdl:hover { background: #212737; border-color: #3a4256; filter: none; } }
.vrow .play:disabled { opacity: .55; }

/* Card Download / Download Zip button: same style as the other buttons */
.split .save { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); filter: none; }
@media (hover: hover) { .split .save:hover { background: #212737; border-color: #3a4256; filter: none; } }
.split .caret { margin-left: -1px; }

/* Video row: Play video 75% / Download 25% */
.vrow .tipwrap:first-child { flex: 3 1 0; }
.vrow .tipwrap:last-child { flex: 1 1 0; }
.vrow .vdl { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.vrow .play { justify-content: flex-start; text-align: left; }

/* Card actions: Stop / Magnet / Delete on the left, Download on the far right */
.actions { justify-content: flex-start; }
.actions .split { order: 99; margin-left: auto; margin-right: 0; }

/* ---- File rows ---- */
.files { display: grid; gap: 8px; margin: 14px 0 10px; }
.files:empty { display: none; }
.frow { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.frow.all { background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25); }
.finfo { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.fname { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fsize { font-size: 12px; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.fbtns { display: flex; gap: 6px; align-items: stretch; }
.fbtns .grow3 { flex: 3 1 0; min-width: 0; }
.fbtns .splitwrap { flex: 1 1 0; min-width: 0; display: flex; }
.fbtns .splitwrap.solo { flex: 1 1 100%; }
.fbtns .split { display: flex; width: 100%; }
.fbtns .split .main { flex: 1; min-width: 0; justify-content: center; white-space: nowrap; }
.fbtns .tipwrap { display: flex; }
.fbtns .play { flex: 1; width: 100%; }
.zipall { flex: 1; justify-content: center; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
@media (hover: hover) { .zipall:hover { background: #212737; border-color: #3a4256; } }
.more { align-self: start; background: transparent; border: 0; color: var(--accent-2); padding: 4px 2px; font-size: 13px; }
@media (hover: hover) { .more:hover { background: transparent; text-decoration: underline; } }
@media (max-width: 520px) { .fbtns { flex-wrap: wrap; } .fbtns .grow3, .fbtns .splitwrap { flex: 1 1 100%; } }
.zipwrap[hidden] { display: none; }

.patterns { width: 100%; box-sizing: border-box; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); padding: 12px 14px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; outline: 0; resize: vertical; }
.patterns:focus { border-color: var(--accent); }
code { background: var(--panel-2); border-radius: 6px; padding: 1px 6px; font-size: 12px; }
.actions .zipwrap { order: 99; margin-left: auto; }  /* Download All: far right of the row */

/* ---- Dual download button: a little more life ---- */
.split .save { background: linear-gradient(135deg, rgba(99,102,241,.24), rgba(34,211,238,.16));
  border: 1px solid rgba(99,102,241,.55); color: #fff; transition: background .18s, border-color .18s, box-shadow .18s, transform .08s; }
@media (hover: hover) { .split .save:hover { background: linear-gradient(135deg, rgba(99,102,241,.42), rgba(34,211,238,.30));
  border-color: var(--accent-2); box-shadow: 0 6px 22px rgba(34,211,238,.2); } }
.split .save:active { transform: translateY(1px); }
.split .main svg { transition: transform .18s; }
.split .caret { border-left-color: rgba(255,255,255,.2); }
.split .caret svg { transition: transform .2s; }
.split:has(.menu:not([hidden])) .caret svg { transform: rotate(180deg); }  /* flips while the menu is open */
.split .menu { border-color: rgba(99,102,241,.4); box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(99,102,241,.12); }
@media (hover: hover) { .mi:hover { background: rgba(99,102,241,.2); } }
.mi svg { color: var(--accent-2); }
.split .menu.up { top: auto; bottom: calc(100% + 8px); }
.more { justify-self: start; width: auto; }  /* only the text is clickable, not the whole row */
.mi[hidden] { display: none; }
.mi.disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) { .mi.disabled:hover { background: transparent; } }


/* Progress row: bar + percent on the left, Stop / Resume on the right */
.progrow { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 16px 0 4px; }
.progcol .bar { margin: 0 0 6px; }
.ctl { padding: 10px 18px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  font-size: 13px; font-weight: 700; }
@media (hover: hover) { .ctl:hover { background: #212737; border-color: #3a4256; } }
.ctl .tg { display: inline-flex; align-items: center; gap: 7px; }
.ctl svg { width: 13px; height: 13px; }
@media (max-width: 420px) { .progrow { grid-template-columns: 1fr; } .progrow .ctl { justify-self: start; } }

/* Stop / Resume: the main control of the card */
.ctl { min-width: 128px; justify-content: center; padding: 13px 22px; border: 0; border-radius: 14px; color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .03em;
  background: linear-gradient(135deg, #ff9a5c, #ff6a5a);               /* Stop: warm coral */
  box-shadow: 0 8px 22px rgba(255,122,89,.32), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .12s, box-shadow .18s, filter .18s; }
@media (hover: hover) { .ctl:hover { background: linear-gradient(135deg, #ff9a5c, #ff6a5a); border: 0; filter: brightness(1.1);
  transform: translateY(-1px); box-shadow: 0 12px 28px rgba(255,122,89,.42), inset 0 1px 0 rgba(255,255,255,.28); } }
.ctl:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(255,122,89,.3); }
.ctl svg { width: 15px; height: 15px; }
.card.stopped .ctl { background: linear-gradient(135deg, #10b981, #34d399);   /* Resume: green */
  box-shadow: 0 8px 22px rgba(52,211,153,.30), inset 0 1px 0 rgba(255,255,255,.22); }
@media (hover: hover) { .card.stopped .ctl:hover { background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 12px 28px rgba(52,211,153,.42), inset 0 1px 0 rgba(255,255,255,.28); } }
.card.stopped .ctl:active { box-shadow: 0 4px 12px rgba(52,211,153,.3); }
.actions .del { margin-left: auto; }  /* Delete: far right of the row */

/* Copy-magnet button sits on the name line, right after the name */
.namewrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.namewrap .name { min-width: 0; }
.namewrap .copy { flex: none; padding: 6px 9px; border-radius: 9px; font-size: 12px; }
.namewrap { gap: 6px; }
.copy { transition: color .25s, background .25s, border-color .25s; }
.copy.copied { color: var(--green); border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.12); }

/* Stop / Resume: a bit smaller */
.ctl { min-width: 100px; padding: 9px 16px; border-radius: 12px; font-size: 13px; }
.ctl svg { width: 13px; height: 13px; }

/* ---- Logo ---- */
.logo { gap: 14px; font-size: 30px; letter-spacing: -.035em; user-select: none; }
.logo i { position: relative; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #22d3ee 100%);
  box-shadow: 0 8px 26px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .35s, box-shadow .35s; }
.logo i::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 55%); pointer-events: none; }
.logo svg { width: 23px; height: 23px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
@media (hover: hover) { .logo:hover i { transform: rotate(-6deg) scale(1.06); box-shadow: 0 12px 34px rgba(34,211,238,.45), inset 0 1px 0 rgba(255,255,255,.4); } }
.wordmark { display: inline-flex; align-items: baseline; font-weight: 800; line-height: 1; }
.wordmark b { font-weight: 800; color: var(--text); }
.wordmark span { font-weight: 800; background: linear-gradient(100deg, #22d3ee 0%, #6366f1 60%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@media (max-width: 420px) { .logo { font-size: 25px; } .logo i { width: 38px; height: 38px; } }

/* Stop / Resume: a bit bigger than the small version (between the two earlier sizes) */
.ctl { min-width: 114px; padding: 11px 19px; border-radius: 13px; font-size: 14px; }
.ctl svg { width: 14px; height: 14px; }

/* Stop / Resume: calmer, flat look (same size) */
.ctl, .ctl:hover, .ctl:active, .card.stopped .ctl, .card.stopped .ctl:hover, .card.stopped .ctl:active {
  box-shadow: none; transform: none; filter: none; letter-spacing: 0; font-weight: 700; }
.ctl { background: rgba(255,122,89,.13); border: 1px solid rgba(255,122,89,.42); color: #ff9a80; }
@media (hover: hover) { .ctl:hover { background: rgba(255,122,89,.22); border: 1px solid rgba(255,122,89,.65); } }
.card.stopped .ctl { background: rgba(52,211,153,.13); border: 1px solid rgba(52,211,153,.42); color: #6ee7b7; }
@media (hover: hover) { .card.stopped .ctl:hover { background: rgba(52,211,153,.22); border: 1px solid rgba(52,211,153,.65); } }

/* ---- Touch devices (phones, tablets): bigger tap targets, no input zoom, roomier tablet layout.
   Everything here is behind (pointer: coarse), so mouse-and-keyboard desktops are unaffected. ---- */
@media (pointer: coarse) {
  button, .btn { min-height: 44px; }
  .copy, #pclose { min-width: 44px; min-height: 44px; }
  .mi { min-height: 44px; }
  input, textarea, select { font-size: 16px !important; }  /* iOS Safari zooms into inputs under 16px */
  button, .btn, .tab, .thumbwrap { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}
@media (pointer: coarse) and (min-width: 700px) {
  main { max-width: 980px; }
  .chip { font-size: 14px; padding: 10px 16px; }
  .fname { font-size: 14px; }
  .tab { padding-top: 12px; padding-bottom: 12px; }
}

/* ---- Small screens (phones): one uniform, full-width column layout. Desktop and tablet are untouched. ---- */
@media (max-width: 560px) {
  main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }

  /* Header: logo on top, the two speed chips share one full-width row */
  header { flex-direction: column; align-items: stretch; gap: 14px; }
  .totals { width: 100%; }
  .totals .chip { flex: 1; text-align: center; }

  /* Add form: input and both buttons are the same full width */
  #add { flex-direction: column; }
  #add input:not([hidden]), #add .ghost, #add .primary { width: 100%; justify-content: center; }

  /* Tabs: four equal pills in a 2 x 2 grid instead of a ragged wrapped row */
  .tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tab { justify-content: center; padding-left: 8px; padding-right: 8px; gap: 6px; }

  /* Card: name on its own line, tags under it; every block spans the full card width */
  .card { padding: 16px; }
  .top { flex-direction: column; gap: 10px; }
  .tags { justify-content: flex-start; }
  .progrow { grid-template-columns: 1fr; }
  .progrow .ctl { width: 100%; justify-self: stretch; }
  .stats { grid-template-columns: 1fr 1fr; }
  .catstat { grid-column: 1 / -1; }   /* Category takes a full row; the other four are two and two */

  /* Card buttons: equal widths, sharing the row (a lone button takes the whole row) */
  .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .actions .del, .actions .split, .actions .zipwrap, .actions > button, .actions > .btn {
    flex: 1 1 140px; min-width: 0; margin: 0; order: 0; justify-content: center; }
  .actions .split, .actions .zipwrap { display: flex; }
  .actions .split .main { flex: 1; justify-content: center; }
  #smsg { margin: 0; }

  /* File rows: Play and Download stack at the same full width */
  .fbtns { flex-wrap: wrap; }
  .fbtns .grow3, .fbtns .splitwrap { flex: 1 1 100%; }
}

/* The tabs stay invisible (but keep their space) until the first data arrives, so the page never shows the
   wrong tab and then jumps to the right one. */
.tabs { transition: opacity .2s; }
body:not(.ready) .tabs { opacity: 0; pointer-events: none; }

/* A grid column defaults to "as wide as its content", so one long unbreakable line (a file name) stretched the
   whole card past the screen. Every column is now capped at the container width and long text truncates instead. */
#list, #library { grid-template-columns: minmax(0, 1fr); }
.files, .frow { grid-template-columns: minmax(0, 1fr); }
.card, .files, .frow, .finfo, .fbtns, .top, .progrow, .progcol, .actions, .stats, .stat { min-width: 0; max-width: 100%; }
.name, .fname { min-width: 0; }
.progrow { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 560px) { .progrow { grid-template-columns: minmax(0, 1fr); } }

/* While the video player is open the page behind it does not scroll. */
html.noscroll, html.noscroll body { overflow: hidden; }
html.noscroll { padding-right: var(--sbw, 0px); }
#player { overscroll-behavior: contain; }

/* The speed chips double as a hidden toggle (speed <-> lifetime total): no visible hint, just no text selection. */
#chipdown, #chipup { user-select: none; -webkit-user-select: none; cursor: default; }
#chipdown:focus-visible, #chipup:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Header icon buttons (settings gear, stop / resume all): just a quiet icon next to the speed chips, no pill, border or fill */
.totals { align-items: center; }
.hdrbtn { background: none; border: 0; border-radius: 8px; padding: 8px; color: var(--muted); justify-content: center; }
.hdrbtn svg { width: 16px; height: 16px; }
.hdrbtn { transition: opacity .2s; }
#settingsbtn + #logoutbtn { margin-left: -8px; }   /* the two icons sit together, not a full chip gap apart */
.hdrbtn.off { opacity: 0; pointer-events: none; }   /* keeps its place, so the pills never shift when it appears */
@media (hover: hover) {
  .hdrbtn:hover { background: none; color: var(--text); }                    /* the gear brightens */
  #allctl:hover { background: none; color: #ff9a80; }                         /* stop: warms to coral */
  #allctl.resume:hover { background: none; color: #6ee7b7; }                  /* resume: warms to green */
}
.hdrbtn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* The icon + text box has a fixed minimum width, so the pills never change size as the numbers change or when they
   switch between speed and total. 9ch of text (up to "56.6 MB/s") plus the icon; only a speed of 100 MB/s or more
   widens it by a character. */
.chip { --chip-icon: 17px; }
#tdown, #tup { display: inline-block; min-width: calc(9ch + var(--chip-icon)); text-align: left; white-space: nowrap; }

/* The small icon in a pill (speedometer for speed, hard drive for a total): dim, tiny, on the text baseline.
   Its width + margin must add up to --chip-icon above. */
.chip svg { width: 12px; height: 12px; margin-right: 5px; vertical-align: -1.5px; color: var(--muted); opacity: .7; }

/* ---- Settings window (opens over the page like the video player) ---- */
#smodal, #searchmodal { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; padding: 20px;
  background: rgba(5,7,10,.78); backdrop-filter: blur(6px); overscroll-behavior: contain; animation: fade .15s ease; }
#smodal[hidden], #searchmodal[hidden] { display: none; }
.smbox { width: min(720px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--panel), #11141b); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65); animation: pop .18s ease; }
.smhead { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.smhead h2 { margin: 0; font-size: 18px; }
@media (max-width: 560px) {
  #smodal, #searchmodal { padding: 10px; }
  .smbox { border-radius: 14px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .smhead { padding-left: 14px; padding-right: 14px; }
}

/* Disk pill: free / total space. Fixed minimum width ("87.0 GB / 100 GB" is the longest), so it never changes size as the numbers do. */
#tdisk { display: inline-block; min-width: 16ch; text-align: left; white-space: nowrap; }
#chipdisk { cursor: default; user-select: none; -webkit-user-select: none; }
@media (max-width: 560px) { .totals { flex-wrap: wrap; } }

/* ---- Toast notifications (static/toast.js): the one place the app shows short messages ---- */
#toasts { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: min(300px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px;
  padding: 18px 12px 18px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--toast-c, var(--accent-2)) 45%, var(--line));
  border-left: 4px solid var(--toast-c, var(--accent-2));
  background: color-mix(in srgb, var(--toast-c, var(--accent-2)) 16%, #1d2331); color: #f1f3f9; font-size: 14px; font-weight: 500; line-height: 1.45;
  box-shadow: 0 14px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.35), 0 0 26px color-mix(in srgb, var(--toast-c, var(--accent-2)) 28%, transparent);
  animation: toast-in .25s cubic-bezier(.2,.8,.2,1) both; }
/* A small coloured badge in front of the text, so the kind of message is clear at a glance */
.toast::before { content: "i"; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--toast-c, var(--accent-2)); color: #0b0d12; font-size: 15px; font-weight: 800; line-height: 1; }
.toast-error::before { content: "!"; }
.toast-success::before { content: "\2713"; }
.toast.out { animation: toast-out .2s ease-in both; pointer-events: none; }
.toast-error { --toast-c: #ff7a93; }
.toast-success { --toast-c: #2ee66b; }   /* a bright, clean green of its own (the old emerald --green stays for the seeding pills and bars) */
.toast-info { --toast-c: var(--accent-2); }
.toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-close { flex: none; width: 20px; height: 20px; min-height: 0; padding: 0; justify-content: center; border: 0; background: none;
  color: #c3c9d9; font-size: 18px; line-height: 1; border-radius: 6px; }
@media (hover: hover) { .toast-close:hover { background: none; color: var(--text); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(calc(100% + 24px)); } }   /* slides in from the right edge */
@keyframes toast-out { to { opacity: 0; transform: translateX(calc(100% + 24px)); } }     /* and slides back out to it */
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation: none; } }
@media (max-width: 560px) { #toasts { left: 16px; right: 16px; width: auto; align-items: stretch; } }

/* ---- Search results window ---- */
.srbody { padding: 12px 20px 20px; display: grid; gap: 8px; }
.srow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.sinfo { flex: 1; min-width: 0; }
.stitle { font-weight: 600; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.smeta .copy { flex: none; align-self: center; width: 16px; height: 16px; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.smeta .copy:hover { color: var(--text); background: none; }
.smeta .copy.copied { color: var(--green); background: none; border: 0; }
.smeta .copy svg { width: 14px; height: 14px; }
.smeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.smeta a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.smeta a:hover { color: var(--text); }
.smeta .up { color: var(--green); font-weight: 600; }
.sadd { flex: none; padding: 9px 18px; }
.sadd.done { opacity: .65; background: var(--panel); color: var(--green); }
/* The Add button takes the colour of the card's pill for the torrent's state */
.sadd.done.s-downloading, .sadd.done.s-getting { opacity: 1; background: rgba(34,211,238,.14); color: var(--accent-2); }
.sadd.done.s-seeding, .sadd.done.s-finished { opacity: 1; background: rgba(52,211,153,.14); color: var(--green); }
.sadd.done.s-stopped { opacity: 1; background: rgba(255,122,89,.15); color: var(--coral); }
.sadd.done.s-no { opacity: 1; background: rgba(244,63,94,.15); color: #ff7a93; }
.sadd.done.s-complete { opacity: 1; background: rgba(167,139,250,.15); color: #a78bfa; }
.sload { display: grid; justify-items: center; gap: 14px; padding: 48px 0; color: var(--muted); text-align: center; }
@media (max-width: 560px) { .srbody { padding-left: 14px; padding-right: 14px; } .srow { gap: 10px; padding: 10px; } }

/* Category: the first box of the stats row, in golden yellow so it is not missed */
.catstat { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.5); padding-left: 8px; padding-right: 8px; }
.catstat > span { color: #fbbf24; font-weight: 700; }
.catslot { display: block; font-style: normal; }
.cdd { display: block; margin-top: 4px; }
.cdd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 38px; padding: 6px 8px;
  background: var(--panel-2); color: var(--text); border: 1px solid rgba(251,191,36,.6); border-radius: 10px;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
.cdd-btn .cdd-val { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: inherit; color: inherit; text-transform: none; letter-spacing: 0; }   /* not the small grey caps of .stat span */
.cdd-btn svg { flex: none; width: 14px; height: 14px; color: #fbbf24; }
.cdd-btn .cdd-ico { flex: none; display: flex; width: auto; margin-right: -2px; }   /* the category icon in front of the name */
.cdd-btn .cdd-val { flex: 1; text-align: left; }   /* the golden chevron: this is a drop-down */
@media (hover: hover) { .cdd-btn:hover { background: rgba(251,191,36,.1); border-color: #fbbf24; } }
.cdd-btn:focus-visible, .cdd-btn[aria-expanded="true"] { outline: none; border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.25); }
.cdd-btn[aria-expanded="true"] > svg { transform: rotate(180deg); }   /* only the chevron flips, not the category icon */
@media (max-width: 520px) {
  .catstat { padding-left: 12px; padding-right: 12px; }
  .cdd-btn { min-height: 46px; padding: 9px 12px; font-size: 16px; }
  .cdd-btn svg { width: 18px; height: 18px; }
  .cdd-btn .cdd-ico { margin-right: 0; }
}
/* The open menu */
.cdd-menu { position: fixed; z-index: 40; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid rgba(251,191,36,.5);
  box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.cdd-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; }
@media (hover: hover) { .cdd-item:hover { background: rgba(251,191,36,.12); } }
.cdd-item.on { color: #fbbf24; }
.cdd-item.on::after { content: "✓"; margin-left: auto; }
.cdd-head { margin: 6px 8px 2px; padding-top: 8px; border-top: 1px solid var(--line); color: #fbbf24; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; }
.cdd-item.sub { width: calc(100% - 12px); margin-left: 12px; padding-left: 12px; border-left: 2px solid rgba(251,191,36,.55); border-radius: 0 8px 8px 0; }
.cdd-item svg { flex: none; width: 17px; height: 17px; color: #fbbf24; }   /* the category icon */

/* The delete dialog has three choices: stacked, the safe one first, the red one second, Cancel last */
.dlg-actions.three { flex-direction: column; }
.dlg-actions.three #dalt { order: 1; }
.dlg-actions.three #dok { order: 2; }
.dlg-actions.three #dcancel { order: 3; }
.dlg-actions button[hidden], .dlg p[hidden] { display: none; }
.dlg.nomsg h3 { margin-bottom: 22px; }   /* a dialog with only a title keeps the usual space above its buttons */

/* Sort bar of the search results: a row of pill chips, like the tabs */
.ssort { display: flex; align-items: center; gap: 12px; padding: 2px 20px 8px; flex-wrap: wrap; }
.ssort[hidden] { display: none; }
.ssort .slabel { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.schips { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); flex-wrap: wrap; }
.schip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 0; background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: .18s; }
.schip i { font-style: normal; font-size: 13px; line-height: 1; }
.schip i:empty { display: none; }
@media (hover: hover) { .schip:hover { color: var(--text); background: rgba(255,255,255,.05); } }
.schip.on { color: #fff; background: linear-gradient(135deg, #6366f1, #818cf8); box-shadow: 0 4px 14px rgba(99,102,241,.4); }
@media (max-width: 560px) { .ssort { padding-left: 14px; padding-right: 14px; } .schip { padding: 7px 11px; } }

/* The Movies and Series tabs open a window (they are not lists of torrents): golden. On phones they sit side by side below the 2 x 2 */
.tab.opener { --c: #fbbf24; }
.tab.opener svg { width: 16px; height: 16px; }
/* The movie grid in that window: generic posters */
.mgrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px 14px; }
.mtile { min-width: 0; }
.mposter { position: relative; aspect-ratio: 2 / 3; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(160deg, #2b3050 0%, #181b2c 60%, #11141b 100%); border: 1px solid var(--line); color: rgba(251,191,36,.75); }
.mposter svg { width: 44%; height: auto; }
.myear { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; font-weight: 700; }
.myear:empty { display: none; }
.mposter .myear { z-index: 1; }
.mtitle { margin-top: 8px; font-size: 13px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.msize:empty { display: none; }   /* a poster with nothing under the title takes no room for it */
.msize { margin-top: 3px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* the real poster covers the generic one */
.mq { padding: 0 6px; border-radius: 5px; border: 1px solid rgba(251,191,36,.6); color: #fbbf24; font-size: 11px; font-weight: 800; line-height: 1.5; }   /* 4K, 1080p ... under the poster, after the size */
#searchtitle { display: flex; align-items: center; gap: 10px; }
#searchtitle svg { flex: none; width: 22px; height: 22px; color: #fbbf24; }   /* the Movies tab's film icon */
.mtile[role="button"] { cursor: pointer; }
.mtile .mposter { transition: transform .18s, border-color .18s; }
@media (hover: hover) { .mtile:hover .mposter { transform: translateY(-3px); border-color: #fbbf24; } }
.mtile:focus-visible { outline: none; }
.mtile:focus-visible .mposter { border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.25); }
/* a play triangle that appears over the poster on hover */
.mposter::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .18s;
  background: rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 38% no-repeat; }
@media (hover: hover) { .mtile:hover .mposter::after { opacity: 1; } }
/* the trending posters search for the title instead of playing it: a magnifier over the poster */
.mfind .mposter::after { background: rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / 34% no-repeat; }

/* The search box inside the results window */
.sfind { display: flex; gap: 10px; padding: 16px 20px 12px; }   /* space between the header's border and the box */
.sfind[hidden] { display: none; }
.sfind input { flex: 1; min-width: 0; padding: 10px 14px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  font-size: 15px; font-family: inherit; outline: 0; -webkit-appearance: none; appearance: none; }
.sfind input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.sfind input::placeholder { color: #5b6377; }
.sfind .primary { padding: 10px 20px; font-size: 14px; }
@media (max-width: 560px) { .sfind { padding-left: 14px; padding-right: 14px; } }

/* The search / movies window keeps one height from the start, so it does not jump taller when the results arrive */
#searchmodal .smbox { height: min(760px, calc(100vh - 40px)); height: min(760px, calc(100dvh - 40px)); }
@media (max-width: 560px) { #searchmodal .smbox { height: calc(100vh - 20px); height: calc(100dvh - 20px); } }
#searchmodal .smbox:focus { outline: none; }

/* Series window: back button, the list of episodes by season */
.smtitle { display: flex; align-items: center; gap: 10px; min-width: 0; }
.smtitle h2 { min-width: 0; overflow-wrap: anywhere; }
#searchback { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; flex: none; }
#searchback[hidden] { display: none; }
#searchback svg { width: 18px; height: 18px; }
.epseason { display: flex; align-items: center; margin: 14px 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: #fbbf24; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.epseason:first-child { margin-top: 0; }
.eprow { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.epmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.epmain .epn { flex: none; min-width: 54px; padding: 2px 8px; border-radius: 6px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.45);
  color: #fbbf24; font-size: 12px; font-weight: 800; text-align: center; }
.epmain .epname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.epmain .epsize { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.epmain svg { flex: none; width: 16px; height: 16px; color: #fbbf24; opacity: .8; }
/* a row that searches for the missing episode above or below an episode */
.epfind { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 13px;
  background: transparent; border: 1px dashed rgba(251,191,36,.45); color: var(--muted); }
.epfind .epn { flex: none; min-width: 54px; padding: 2px 8px; border-radius: 6px; border: 1px dashed rgba(251,191,36,.45); color: rgba(251,191,36,.8);
  font-size: 12px; font-weight: 800; text-align: center; }
.epfind .epname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.epfind svg { flex: none; width: 16px; height: 16px; color: #fbbf24; }
@media (hover: hover) { .epfind:hover { background: rgba(251,191,36,.1); border-color: #fbbf24; color: var(--text); } }
@media (max-width: 560px) { .epmain .epsize { display: none; } }
.epfind .epnote { flex: none; font-size: 11px; font-style: italic; color: var(--muted); }
.epfind .epnote:empty { display: none; }
.cdd-head.first { margin-top: 2px; padding-top: 4px; border-top: 0; }
.cdd-item .vlabel { font-weight: 800; }
.cdd-item .vsize { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Movies and Series sit at the right end of the tab row, with the free space between them and the four torrent tabs. */
.tab[data-tab="movies"] { margin-left: auto; }
@media (max-width: 560px) { .tab[data-tab="movies"] { margin-left: 0; } }   /* on a phone the tabs are a grid */
.epmain .epq { flex: none; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid rgba(251,191,36,.6); color: #fbbf24; font-size: 11px; font-weight: 800; }
.epmain .epq:empty { display: none; }
.epseasonfind { margin-left: 10px; width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 8px; color: #fbbf24; border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08); }
.epseasonfind svg { width: 15px; height: 15px; }
@media (hover: hover) { .epseasonfind:hover { background: rgba(251,191,36,.2); border-color: #fbbf24; } }
.smeta .res { padding: 0 6px; border-radius: 5px; border: 1px solid rgba(251,191,36,.55); color: #fbbf24; font-weight: 800; line-height: 1.5; }   /* 720p, 1080p, 4K in the title */
.mposter .mq { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 2px 8px; background: rgba(0,0,0,.55); line-height: normal; }   /* 4K, 1080p ... on the poster, bottom-right, opposite the year */
.mposter .mres { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 2px 8px; border-radius: 5px; border: 1px solid rgba(251,191,36,.6); background: rgba(0,0,0,.55); color: #fbbf24; font-size: 11px; font-weight: 800; line-height: normal; }   /* 1080p, 4K ... on the movie poster, top-left (the trash is top-right) */

/* ---- Sign-in page (templates/login.html): the header's logo above a card ---- */
#login { max-width: none; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 28px; padding: 20px; }
#login .logo { font-size: 32px; }
#login .logo i { width: 46px; height: 46px; border-radius: 13px; }
#login .logo svg { width: 24px; height: 24px; }
#login form { width: min(380px, 100%); display: grid; gap: 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
#login h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--muted); }
#login label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
#login input:not([type="hidden"]) { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; outline: 0;
  color: var(--text); font: inherit; font-size: 15px; padding: 12px 14px; }
#login input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
#login .err { margin: 0; min-height: 1.2em; color: #ff7a93; font-size: 13px; }
#login .err:empty { display: none; }
#login button { justify-content: center; padding: 12px 14px; font-size: 14px; }

/* ---- Settings window: a menu on the left, one group at a time on the right, every setting a row (name + hint | control) ---- */
#smodal .smbox { display: flex; flex-direction: column; width: min(880px, 100%); height: min(680px, calc(100vh - 40px));
  height: min(680px, calc(100dvh - 40px)); overflow: hidden; }
#smodal .smhead { position: static; flex: none; }
.smbody { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); }
#snav { display: flex; flex-direction: column; gap: 2px; padding: 12px; overflow-y: auto; border-right: 1px solid var(--line); background: rgba(0,0,0,.14); }
#snav button { justify-content: flex-start; width: 100%; background: none; border: 0; border-radius: 10px; padding: 9px 12px;
  color: var(--muted); font-size: 14px; font-weight: 600; text-align: left; }
@media (hover: hover) { #snav button:hover { background: var(--panel-2); color: var(--text); } }
#snav button.on { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); color: #fff; }
#spanes { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#sform { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#sform[hidden], .spane[hidden] { display: none; }
#sfields { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#spanes > .spane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#sfields > .spane, #spanes > .spane { padding: 20px 24px; }
.spane h3 { margin: 0 0 4px; font-size: 18px; }
.spane .hint { margin: 0 0 16px; }
.spane h4 { margin: 24px 0 4px; font-size: 15px; }   /* a section inside a pane that holds several */
.spane h4 + .setlist { margin-top: 12px; }
.spane h3 + h4 { margin-top: 16px; }
.spane h3 + .setlist { margin-top: 16px; }   /* a tab without a hint line: the same gap between its title and the first card */
.setlist { display: grid; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; }
.setlist + .setlist { margin-top: 14px; }   /* two cards in one tab (WireGuard: the switch, then the config file) get a gap between them */
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); cursor: default; }
.setrow:first-child { border-top: 0; }
.setrow.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.setlabel { font-size: 14px; line-height: 1.35; }
.setlabel small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.setrow input.num, .setrow select, .setrow input.wide, .pwfield input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; outline: 0;
  color: var(--text); font: inherit; font-size: 14px; padding: 9px 12px; }
.setrow input.num { width: 130px; flex: none; text-align: right; }
.setrow select { flex: none; min-width: 150px; }
.setrow input.wide { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.setrow input:focus, .setrow select:focus, .setrow textarea:focus, .pwfield input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.setrow input:disabled, .setrow select:disabled { opacity: .55; cursor: not-allowed; }
.setrow .patterns { background: var(--bg); }
#sform .actions { flex: none; margin: 0; padding: 12px 24px; align-items: center; background: #11141b; border-top: 1px solid var(--line); }
#sform .actions { justify-content: flex-end; }   /* the Save button sits at the right edge on every screen size, at its own width */
#sform .actions button { flex: none; min-width: 140px; justify-content: center; }   /* a fixed minimum: "Saving…" and "Save settings" never change its size */
#smsg { margin-right: auto; font-size: 13px; }
.pwrow { display: flex; gap: 8px; align-items: stretch; }
.pwfield { position: relative; flex: 1; min-width: 0; display: flex; }
.pwfield input { flex: 1; min-width: 0; padding-right: 44px; }
.eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 7px; color: var(--muted);
  user-select: none; -webkit-user-select: none; touch-action: none; }
.eye:active { color: var(--text); }
.eye svg { width: 17px; height: 17px; }
@media (hover: hover) { .eye:hover { background: none; color: var(--text); } }
.wgcheck { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.wgcheck input { width: 18px; height: 18px; accent-color: var(--red); }
#appbtn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 680px) {
  #smodal .smbox { height: calc(100vh - 20px); height: calc(100dvh - 20px); }
  .smbody { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #snav { flex-direction: row; gap: 6px; padding: 10px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
  #snav button { width: auto; flex: none; white-space: nowrap; padding: 8px 12px; }
  #sfields > .spane, #spanes > .spane { padding: 16px 14px; }
  #sform .actions { padding: 10px 14px; }
  .setrow { gap: 12px; }
  .setrow input.num { width: 104px; }
}

/* Trending window: the "Show more" button takes the whole last row of the poster grid; on phones the tab takes a full row below Movies and Series */
.trendend { grid-column: 1 / -1; display: grid; justify-items: center; padding: 18px 0 8px; min-height: 60px; }   /* the endless-scroll marker: a spinner, or "Try again" */
.moretrend { padding: 10px 22px; }
.ssort .schips + .schips { margin-left: 4px; }

/* The trending button in the Movies / Series window header: a pill with the word, on the right with a wide gap before the close button; lit while the trending posters are showing */
.smactions { display: flex; align-items: center; gap: 22px; flex: none; }   /* a wide gap, so reaching for Trending cannot close the window */
#trendbtn[hidden] { display: none; }
#trendbtn { flex: none; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fbbf24; border-color: rgba(251,191,36,.45); }
#trendbtn svg { width: 15px; height: 15px; }
#trendbtn.on { color: #0b0d12; background: #fbbf24; border-color: #fbbf24; }
@media (max-width: 560px) { #trendbtn { padding: 6px 10px; } .smactions { gap: 16px; } }

/* The red trash in the top-right corner of a library poster (Movies and Series): on hover or keyboard focus; always on touch screens, which have no hover */
.mdel { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%;
  background: rgba(0,0,0,.6); border: 1px solid rgba(244,63,94,.55); color: #ff7a93; opacity: 0; transition: opacity .18s, background .18s; }
.mdel svg { width: 16px; height: 16px; }
.setrow.wgdrop { border: 1.5px dashed transparent; border-radius: 12px; padding: 14px; margin: 8px 0; transition: border-color .15s, background .15s; }   /* invisible until a file is dragged over it; the margin keeps it off the edge of the list, and "border" (not border-top: 0 of .setrow:first-child) draws all four sides */
.setrow.wgdrop.drag { border-color: var(--accent-2); background: rgba(34,211,238,.07); }
.wgdrop > small { color: var(--muted); font-size: 12px; }
.setlabel small .wgbad, .setlabel small > span { display: block; margin-top: 4px; }
.setlabel small .wgbad { color: #ff7a93; }
.mdel { min-width: 0; min-height: 0; aspect-ratio: 1; }   /* the 44px minimum height of buttons on touch screens must not stretch the circle into an egg */
@media (pointer: coarse) { .mdel { width: 38px; height: 38px; } }   /* a little bigger for a finger, still round */
.mtile:focus-within .mdel { opacity: 1; }
@media (hover: hover) { .mtile:hover .mdel { opacity: 1; } .mdel:hover { background: var(--red); border-color: var(--red); color: #fff; } }
@media (hover: none) { .mdel { opacity: .85; } }

/* "Which version to delete?": a list of big buttons in the same dialog look */
#pkchoices { display: grid; gap: 8px; margin-bottom: 14px; }
.pkchoice { justify-content: space-between; width: 100%; padding: 12px 14px; font-size: 14px; font-weight: 700; }
.pkchoice small { color: var(--muted); font-size: 12px; font-weight: 600; }
.pkchoice.all { justify-content: center; border: 0; color: #fff; background: linear-gradient(135deg, #e11d48, var(--red)); }
@media (hover: hover) { .pkchoice:hover { border-color: var(--red); } .pkchoice.all:hover { filter: brightness(1.12); background: linear-gradient(135deg, #e11d48, var(--red)); } }
#pkmsg { overflow-wrap: anywhere; }

/* The red trash at the end of an episode row (Series > a show) */
.epdel { flex: none; width: 42px; padding: 0; justify-content: center; border-radius: 10px; color: #ff7a93; background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.35); }
.epdel svg { width: 16px; height: 16px; }
@media (hover: hover) { .epdel:hover { background: var(--red); border-color: var(--red); color: #fff; } }

/* A torrent stopped because it holds a program file (an .exe posing as a movie) */
.tag-blocked { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  background: rgba(244,63,94,.18); border: 1px solid rgba(244,63,94,.6); color: #ff7a93; }
.tag-blocked[hidden] { display: none; }