: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 { 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] { 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; }
.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; }

/* ---- 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: var(--green); }
.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; }
.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 { 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 */
.mposter .myear { z-index: 1; }
.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 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 */

/* ---- 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; }
.setlist { display: grid; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; }
.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); }
#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); } }
#pwmsg { font-size: 13px; min-height: 1.2em; }
#pwmsg.ok { color: var(--green); }
#pwmsg.bad { color: #ff7a93; }
@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; }
}