:root {
  --bg: #0f1015;
  --bg2: #16181f;
  --bg3: #1e2129;
  --line: #2a2e38;
  --fg: #e9ebf0;
  --fg2: #a3a9b6;
  --fg3: #6c7280;
  --accent: #7c8cff;
  --accent2: #5867f2;
  --danger: #ff5c7a;
  --ok: #4fd1a5;
  --card: 168px;
  --side: 272px;
  --top: 56px;
  --r: 12px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ic { display: inline-flex; width: 24px; height: 24px; flex: none; }
.ic svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------------- layout ---------------- */
#app { display: flex; min-height: 100vh; }
#main { flex: 1; min-width: 0; }
#side {
  position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(86vw, var(--side));
  background: var(--bg2); border-right: 1px solid var(--line);
  transform: translateX(-102%); transition: transform .22s ease;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--sat) + 8px) 0 calc(var(--sab) + 16px) var(--sal);
}
#side.open { transform: none; }
#side-scrim { position: fixed; inset: 0; z-index: 29; background: #0008; opacity: 0; pointer-events: none; transition: opacity .2s; }
#side.open + #side-scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 900px) {
  #side { position: sticky; top: 0; height: 100vh; transform: none; flex: none; width: var(--side); }
  #side-scrim { display: none !important; }
  body.side-off #side { display: none; }
}

/* iPhone/iPad (WebKit): content-visibility + backdrop blur + image fades cause ghosting and laggy taps
   while scrolling big grids, so keep rendering simple there */
@supports (-webkit-touch-callout: none) {
  .card { content-visibility: visible; contain-intrinsic-size: none; }
  #top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .thumb img { transition: none; }
}

/* ---------------- top bar ---------------- */
#top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 2px;
  height: calc(var(--top) + var(--sat)); padding: var(--sat) calc(var(--sar) + 6px) 0 calc(var(--sal) + 6px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.tbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--fg2); flex: none; }
.tbtn:active, .tbtn.on { background: var(--bg3); color: var(--fg); }
.crumbs {
  flex: 1; min-width: 0; display: flex; align-items: center; overflow-x: auto; scrollbar-width: none;
  white-space: nowrap; mask-image: linear-gradient(90deg, transparent 0, #000 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px);
  padding-left: 8px;
}
.crumbs::-webkit-scrollbar { display: none; }
.crumb { padding: 9px 8px; border-radius: 8px; color: var(--fg2); font-weight: 500; flex: none; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.crumb:last-child { color: var(--fg); font-weight: 650; }
.crumb:active { background: var(--bg3); }
.crumb .ic { width: 20px; height: 20px; vertical-align: -4px; }
.csep { color: var(--fg3); flex: none; font-size: 13px; }

/* ---------------- search bar ---------------- */
#searchbar {
  position: sticky; top: calc(var(--top) + var(--sat)); z-index: 19;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 10px calc(var(--sar) + 12px) 10px calc(var(--sal) + 12px);
}
.sb-row { display: flex; gap: 8px; align-items: center; }
.sb-input {
  flex: 1; min-width: 0; height: 44px; border-radius: 22px; border: 1px solid var(--line);
  background: var(--bg2); padding: 0 16px; font-size: 16px; outline: none;
}
.sb-input:focus { border-color: var(--accent); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--fg2); display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
}
.chip.on { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 18%, var(--bg2)); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.pill-btn {
  height: 44px; padding: 0 16px; border-radius: 22px; background: var(--accent2); color: #fff; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; flex: none;
}
.pill-btn.ghost { background: var(--bg3); color: var(--fg); }
.pill-btn .ic { width: 20px; height: 20px; }

/* ---------------- content ---------------- */
#content { padding: 12px calc(var(--sar) + 12px) calc(var(--sab) + 96px) calc(var(--sal) + 12px); }
.vhead { display: flex; align-items: center; gap: 10px; margin: 4px 2px 14px; }
.vhead h1 { font-size: 22px; margin: 0; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhead .count { color: var(--fg3); font-size: 14px; }
.vhead .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg3); margin: 22px 2px 10px; font-weight: 650; display: flex; align-items: center; }
.section-title:first-child { margin-top: 4px; }
.section-title button { margin-left: auto; color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 14px; }

.grid { display: grid; gap: 14px 12px; grid-template-columns: repeat(auto-fill, minmax(var(--card), 1fr)); }
.size-s { --card: 124px; }
.size-m { --card: 168px; }
.size-l { --card: 280px; }
.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--card), 1fr); gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.shelf::-webkit-scrollbar { display: none; }
@media (max-width: 600px) { .shelf { grid-auto-columns: 46%; } }

.card {
  position: relative; display: block; min-width: 0; cursor: pointer; border-radius: var(--r);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  content-visibility: auto; contain-intrinsic-size: auto 200px;
}
.thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--bg3);
  transition: transform .12s ease;
}
.card:active .thumb { transform: scale(.97); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .2s; }
.thumb img.ld { opacity: 1; }
.badge {
  position: absolute; right: 6px; bottom: 6px; background: #000b; color: #fff; font-size: 12px; font-weight: 600;
  padding: 2px 6px; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.watched-badge { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #062; display: grid; place-items: center; }
.watched-badge .ic { width: 16px; height: 16px; }
.card.watched .thumb img { filter: saturate(.5) brightness(.75); }
.prog { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); }
.prog-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #fff3; }
.meta { padding: 7px 2px 0; }
.name { font-size: 14px; font-weight: 550; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.sub { font-size: 12.5px; color: var(--fg3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tagrow { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; max-height: 40px; overflow: hidden; }
.tg.short { font-weight: 700; letter-spacing: .02em; }
.tg { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff); white-space: nowrap; }

.card.folder .thumb { background: linear-gradient(135deg, #232735, #1a1d26); }
.card.folder .thumb img.ld { opacity: .45; }
.folder-ic { position: absolute; inset: 0; display: grid; place-items: center; color: #c5ccff; pointer-events: none; }
.folder-ic .ic { width: 42px; height: 42px; filter: drop-shadow(0 2px 6px #0008); }
.card.folder .name { font-weight: 650; }

.sel-ring { display: none; position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #0006; place-items: center; }
.selecting .card.file .sel-ring { display: grid; }
.card.sel .sel-ring { background: var(--accent2); border-color: var(--accent2); }
.card.sel .sel-ring .ic { display: inline-flex; }
.sel-ring .ic { width: 18px; height: 18px; display: none; color: #fff; }
.card.sel .thumb { outline: 3px solid var(--accent2); outline-offset: -3px; }

/* list layout */
.grid.list { grid-template-columns: 1fr; gap: 6px; }
.grid.list .card { display: flex; gap: 12px; align-items: center; padding: 4px; content-visibility: visible; }
.grid.list .thumb { width: 132px; flex: none; border-radius: 8px; }
.grid.list .meta { padding: 0; flex: 1; min-width: 0; }
.grid.list .folder-ic .ic { width: 30px; height: 30px; }

.empty { text-align: center; color: var(--fg3); padding: 60px 20px; }
.empty .ic { width: 48px; height: 48px; opacity: .5; }
.skel { aspect-ratio: 16/9; border-radius: var(--r); background: linear-gradient(90deg, var(--bg2), var(--bg3), var(--bg2)); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------------- sidebar ---------------- */
.brand { display: flex; align-items: center; gap: 10px; padding: 10px 18px 14px; font-weight: 750; font-size: 18px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.sgroup { padding: 6px 0; }
.shead { display: flex; align-items: center; padding: 10px 18px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--fg3); font-weight: 650; }
.shead button + button { margin-left: 0; }
.shead button { margin-left: auto; color: var(--fg3); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.shead button.on { color: var(--accent); background: var(--bg3); }
.shead .ic { width: 18px; height: 18px; }
.sitem {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); margin: 0 8px; padding: 10px 10px; border-radius: 10px;
  color: var(--fg2); text-align: left; font-weight: 500; min-height: 44px;
}
.sitem .ic { width: 22px; height: 22px; color: var(--fg3); }
.sitem.active { background: var(--bg3); color: var(--fg); }
.sitem.active .ic { color: var(--accent); }
.sitem:active { background: var(--bg3); }
.sitem .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitem .n { font-size: 12px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.sitem .dot { width: 12px; height: 12px; border-radius: 50%; margin: 0 5px; flex: none; }
.sitem.editing .n { display: none; }
.sitem .edit-ic { display: none; }
.sitem.editing .edit-ic { display: inline-flex; color: var(--accent); }
.sfoot { padding: 14px 18px; color: var(--fg3); font-size: 13px; border-top: 1px solid var(--line); margin-top: 10px; }
.sfoot button { color: var(--accent); }

/* ---------------- selection bar ---------------- */
#selbar {
  position: fixed; z-index: 25; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sab) + 14px); width: min(560px, calc(100% - 20px));
  background: var(--bg3); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 40px #000a;
  display: flex; align-items: center; gap: 2px; padding: 6px;
}
#selbar .count { flex: 1; font-weight: 650; padding: 0 8px; }
.sbtn { height: 44px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fg2); }
.sbtn:active { background: var(--line); }
.sbtn.primary { background: var(--accent2); color: #fff; }
.sbtn .ic { width: 20px; height: 20px; }

/* ---------------- sheets ---------------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; background: #0009; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
.sheet {
  width: min(560px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column;
  background: var(--bg2); border-radius: 20px 20px 0 0; border: 1px solid var(--line); border-bottom: 0;
  padding-bottom: var(--sab); animation: up .2s ease;
}
@media (min-width: 700px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 20px; border-bottom: 1px solid var(--line); } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.sh-head { display: flex; align-items: center; padding: 14px 10px 8px 20px; }
.sh-head h2 { font-size: 18px; margin: 0; flex: 1; }
.sh-body { overflow-y: auto; padding: 4px 12px 16px; overscroll-behavior: contain; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 8px 12px; border-radius: 12px; text-align: left; font-size: 15.5px;
}
.opt:active { background: var(--bg3); }
.opt .ic { color: var(--fg3); }
.opt .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.opt .n { color: var(--fg3); font-size: 13px; }
.opt.on .ic.chk { color: var(--accent); }
.opt.danger { color: var(--danger); }
.opt.danger .ic { color: var(--danger); }
.opt .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; margin: 0 5px; }
.box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--fg3); display: grid; place-items: center; flex: none; }
.box .ic { width: 18px; height: 18px; display: none; color: #fff; }
.box.all { background: var(--accent2); border-color: var(--accent2); }
.box.all .ic { display: inline-flex; }
.box.some { border-color: var(--accent2); }
.box.some::after { content: ""; width: 10px; height: 3px; border-radius: 2px; background: var(--accent); }
.box.ex { background: var(--danger); border-color: var(--danger); }
.box.ex::after { content: ""; width: 12px; height: 3px; border-radius: 2px; background: #fff; }
.field { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0 14px; font-size: 16px; outline: none; margin: 4px 0 10px; }
.field:focus { border-color: var(--accent); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 2px 16px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 10px; justify-items: center; }
.sw { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; }
.sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--bg) inset; }
.sw.custom { position: relative; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: conic-gradient(#e53935, #ffd54f, #4caf50, #4dd0e1, #5c6bc0, #ab47bc, #e53935); }
.sw.custom .ic { width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 0 2px #0008); }
.sw.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.row-btns { display: flex; gap: 10px; margin-top: 6px; }
.row-btns .pill-btn { flex: 1; justify-content: center; }
.seg { display: flex; background: var(--bg); border-radius: 12px; padding: 4px; gap: 4px; margin: 4px 0 12px; }
.seg button { flex: 1; height: 40px; border-radius: 9px; color: var(--fg2); font-weight: 600; }
.seg button.on { background: var(--bg3); color: var(--fg); }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg3); margin: 12px 4px 6px; font-weight: 650; }
.toggle { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 4px 12px; border-radius: 12px; width: 100%; text-align: left; }
.toggle .sw2 { width: 46px; height: 28px; border-radius: 14px; background: var(--line); position: relative; transition: background .15s; flex: none; }
.toggle .sw2::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle.on .sw2 { background: var(--accent2); }
.toggle.on .sw2::after { transform: translateX(18px); }
.hint { color: var(--fg3); font-size: 13px; padding: 2px 12px 8px; }

/* ---------------- toast ---------------- */
#toast {
  position: fixed; z-index: 90; left: 50%; bottom: calc(var(--sab) + 24px); transform: translate(-50%, 20px);
  background: #2b2f3a; color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 550; box-shadow: 0 8px 30px #0009;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------------- login ---------------- */
.login { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; padding: 24px; }
.login form { width: min(360px, 100%); text-align: center; }
.login img { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 12px; }
.login h1 { margin: 0 0 20px; }
.login .pill-btn { width: 100%; justify-content: center; margin-top: 4px; }
.login .err { color: var(--danger); min-height: 22px; margin-top: 10px; }

/* ---------------- player ---------------- */
#player { position: fixed; inset: 0; z-index: 50; background: #000; overflow: hidden; touch-action: none; }
#player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pl-gest { position: absolute; inset: 0; }
.pl-ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.pl-ui.show { opacity: 1; }
.pl-ui.show button, .pl-ui.show .seek { pointer-events: auto; }
.pl-top, .pl-bot { position: absolute; left: 0; right: 0; display: flex; align-items: center; }
.pl-top {
  top: 0; padding: calc(var(--sat) + 6px) calc(var(--sar) + 8px) 28px calc(var(--sal) + 8px); gap: 4px;
  background: linear-gradient(#000c, #0000);
}
.pl-title { flex: 1; min-width: 0; padding: 0 6px; }
.pl-title .t { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-title .s { font-size: 12.5px; color: #fffa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbtn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; flex: none; }
.pbtn:active { background: #fff2; }
.pbtn.txt { font-weight: 700; font-size: 14px; width: auto; min-width: 48px; padding: 0 8px; border-radius: 24px; }
.pl-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 36px; }
.pl-center .pbtn { background: #0006; }
.pl-center .big { width: 76px; height: 76px; }
.pl-center .big .ic { width: 44px; height: 44px; }
.skip { position: relative; }
.skip .n10 { position: absolute; font-size: 9px; font-weight: 800; top: 50%; left: 50%; transform: translate(-50%, -26%); }
.skip.fwd .ic { transform: scaleX(-1); }
.pl-bot { bottom: 0; flex-direction: column; align-items: stretch; padding: 30px calc(var(--sar) + 14px) calc(var(--sab) + 8px) calc(var(--sal) + 14px); background: linear-gradient(#0000, #000c); }
.pl-row { display: flex; align-items: center; gap: 2px; }
.pl-time { font-size: 13px; font-variant-numeric: tabular-nums; color: #fffd; padding: 0 6px; flex: 1; }
.seek { position: relative; height: 36px; cursor: pointer; touch-action: none; }
.seek .rail, .seek .buf, .seek .fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; }
.seek .rail { right: 0; background: #fff3; }
.seek .buf { background: #fff5; }
.seek .fill { background: var(--accent); }
.seek .knob { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px #0008; transition: transform .1s; }
.seek.drag .knob { transform: scale(1.35); }
.seek.drag .rail, .seek.drag .buf, .seek.drag .fill { height: 6px; margin-top: -3px; }
.pl-prev {
  position: absolute; z-index: 3; pointer-events: none; display: none; flex-direction: column; align-items: center; gap: 4px;
}
.pl-prev.show { display: flex; }
.pl-prev .img { width: 200px; aspect-ratio: 16/9; border-radius: 8px; border: 2px solid #fff; background: #111 no-repeat; box-shadow: 0 6px 24px #000a; }
.pl-prev .img.none { display: none; }
.pl-prev .tm { background: #000c; color: #fff; padding: 3px 9px; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.pl-prev.center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pl-prev.center .img { width: min(320px, 60vw); }
.pl-flash {
  position: absolute; top: 0; bottom: 0; width: 38%; display: grid; place-items: center; pointer-events: none; opacity: 0;
  transition: opacity .3s; font-weight: 800; font-size: 18px; color: #fff;
}
.pl-flash.l { left: 0; background: radial-gradient(ellipse at 0% 50%, #fff3, transparent 70%); }
.pl-flash.r { right: 0; background: radial-gradient(ellipse at 100% 50%, #fff3, transparent 70%); }
.pl-flash.show { opacity: 1; transition: none; }
.pl-msg {
  position: absolute; z-index: 4; left: 50%; bottom: calc(var(--sab) + 110px); transform: translateX(-50%);
  background: #000d; color: #fff; padding: 8px 8px 8px 16px; border-radius: 14px; display: flex; align-items: center; gap: 10px;
  font-weight: 550; white-space: nowrap; transition: opacity .25s; pointer-events: auto;
}
.pl-msg.hide { opacity: 0; pointer-events: none; }
.pl-msg button { background: #fff2; padding: 8px 12px; border-radius: 10px; font-weight: 650; }
.pl-spin { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; border: 4px solid #fff3; border-top-color: #fff; animation: spin .8s linear infinite; pointer-events: none; display: none; }
.pl-spin.show { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.pbtn.on { color: var(--accent); }
.pbtn.on::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translateY(15px); }
.pbtn { position: relative; }

/* ---------------- auto-tag rules ---------------- */
.opt.rule .lbl { display: flex; flex-direction: column; white-space: normal; gap: 2px; }
.opt.rule.off { opacity: .55; }
.rule-sub { color: var(--fg3); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0 0 10px; }
.chip .ic { width: 16px; height: 16px; margin-right: -4px; }
.hint.inline { padding: 8px 4px; }
.rule-prev { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0 12px; font-size: 14px; }
.rule-sample { color: var(--fg3); font-size: 13px; margin-top: 6px; }
.rule-sample div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-btn.danger { color: var(--danger); }
.pill-btn.full { width: 100%; justify-content: center; margin: 4px 0 8px; }
.crumb-line { color: var(--fg2); font-weight: 600; padding: 4px 6px 10px; }
.empty-small { color: var(--fg3); padding: 16px 12px; text-align: center; }

/* ---------------- combined tags ---------------- */
.scombo { width: 28px; height: 28px; margin: -4px -6px -4px 2px; border-radius: 50%; display: grid; place-items: center; color: var(--fg3); flex: none; }
.scombo .ic { width: 18px; height: 18px; }
.scombo:hover, .scombo:active { background: var(--line); color: var(--fg); }
.combo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.combo .plus { color: var(--fg3); font-weight: 700; }
.combo .chip { height: 36px; font-size: 15px; font-weight: 600; }

/* ---------------- badges, hover-scrub, rule exceptions ---------------- */
.cbadges { position: absolute; left: 6px; bottom: 9px; display: flex; gap: 3px; pointer-events: none; }
.cbadges span { min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: #000b; color: #ffd54f;
  font-size: 13px; line-height: 22px; text-align: center; }
.badge-pick { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 18px; flex: none; color: #ffd54f; }
.scrub { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scrub-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); pointer-events: none; }
.chip.ex { background: color-mix(in srgb, var(--danger) 22%, transparent); color: color-mix(in srgb, var(--danger) 75%, #fff); }

/* library folder warnings (missing / unreadable / no videos) */
.warnbar { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px 4px; padding: 11px 14px; border-radius: 12px;
  background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .35); color: #ffc861; font-size: 14px; line-height: 1.4; }
.warnbar .ic svg, .warn-small .ic svg { fill: currentColor; }
.warnbar .ic { flex: none; margin-top: 1px; }
.warn-small { display: flex; gap: 6px; align-items: center; color: #ffc861; margin-bottom: 6px; }
/* copy to badge folder */
.badge-ic { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
.opt.dim { opacity: .55; cursor: default; }