/* NPC HUB — Trend module (layout from Trend Hunter, look from the HUB design system). */
#v-trend{--c-mega:#F87171;--c-super:#C084FC;--c-high:var(--pass);--c-good:var(--hold);--c-star:#FBBF24;--c-link:#93C5FD}

/* status bar: live dot · state · countdown · settings */
.th-status{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 6px 6px 16px;margin-bottom:12px;
  background:var(--slab);border:1px solid var(--edge);border-radius:var(--r)}
.th-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--idle)}
.th-dot.on{background:var(--pass);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.th-dot.off{background:var(--fail)}
.th-state{flex:1;min-width:0;font:600 15px/1.2 var(--fs);color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-count{font:700 15px/1 var(--fm);color:var(--chalk);font-variant-numeric:tabular-nums}
.th-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--edge);border-radius:12px;background:var(--slab2);color:var(--chalk);cursor:pointer}
.th-icon .i{width:22px;height:22px}

/* Start / Stop — one big button, tinted like Trend Hunter */
.th-controls{display:flex;gap:8px;margin-bottom:12px}
.th-go{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;font:700 16px/1 var(--fs);border-radius:var(--r)}
.th-go[hidden]{display:none}
.th-go.success{background:rgba(34,197,94,.14);color:var(--pass);border:1px solid rgba(34,197,94,.35)}
.th-go.danger{background:rgba(248,113,113,.12);color:var(--fail);border:1px solid rgba(248,113,113,.35)}
.th-go .i{width:18px;height:18px}

/* pass report with progress */
.th-report{padding:12px 16px;margin-bottom:12px;background:var(--slab);border:1px solid var(--edge);border-radius:var(--r);font:500 14px/1.35 var(--fs);color:var(--ash)}
.th-report[hidden]{display:none}
.th-report.scanning{color:var(--chalk)}
.th-rl-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-rl-bar{display:none;height:6px;margin-top:10px;border-radius:999px;background:var(--slab2);overflow:hidden}
.th-report.scanning .th-rl-bar{display:block}
.th-rl-bar i{display:block;height:100%;width:0;background:var(--hold);border-radius:999px;transition:width .4s ease}

/* category chips with counts */
.th-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;margin:0 0 8px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.th-chips::-webkit-scrollbar{display:none}
.th-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer;
  background:var(--slab);border:1px solid var(--edge);color:var(--ash);font:600 14px/1 var(--fs)}
.th-chip .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--slab2);color:var(--chalk);font:700 12px/1 var(--fs);font-variant-numeric:tabular-nums}
.th-chip.c-mega{color:var(--c-mega)} .th-chip.c-super{color:var(--c-super)} .th-chip.c-high{color:var(--c-high)} .th-chip.c-good{color:var(--c-good)} .th-chip.c-saved{color:var(--c-star)}
.th-chip.on{background:var(--chalk);border-color:var(--chalk);color:var(--ink)}
.th-chip.on .cnt{background:var(--ink);color:var(--chalk)}
.th-chip .i{width:16px;height:16px}
.th-sep{flex:none;width:1px;align-self:stretch;margin:8px 2px;background:var(--edge)}

/* toolbar: sort · subs · total */
.th-toolbar{display:flex;align-items:center;gap:8px;margin:4px 0 14px}
.th-select{position:relative;display:inline-flex;align-items:center}
.th-select select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 38px 0 14px;border-radius:12px;border:1px solid var(--ctl);
  background:var(--slab);color:var(--chalk);font:600 14px/1 var(--fs);cursor:pointer}
.th-select .i{position:absolute;right:12px;pointer-events:none;color:var(--ash)}
.th-subs{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--edge);background:var(--slab);color:var(--chalk);font:600 14px/1 var(--fs);cursor:pointer}
.th-total{margin-left:auto;font:500 13px/1 var(--fs);color:var(--ash);white-space:nowrap}
.th-total b{color:var(--chalk);font-variant-numeric:tabular-nums}

/* cards */
.th-list{display:flex;flex-direction:column;gap:14px}
.th-card{position:relative;border-radius:18px;overflow:hidden}
.th-swipe{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 28px;opacity:0;background:var(--slab2);border-radius:18px}
.th-swipe .i{width:30px;height:30px}
.th-card.swiping .th-swipe{opacity:1}
.th-card.to-save .th-swipe{background:rgba(251,191,36,.22);color:var(--c-star)}
.th-card.to-del .th-swipe{background:rgba(248,113,113,.22);color:var(--fail)}
.th-card.to-save .sw-del,.th-card.to-del .sw-save{visibility:hidden}
.th-inner{position:relative;background:var(--slab);border:1px solid var(--edge);border-radius:18px;overflow:hidden;transition:transform .2s var(--ease)}
.th-card.swiping .th-inner{transition:none}
.th-top{position:absolute;top:10px;right:10px;z-index:2;display:flex;gap:8px}
.th-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;color:#F8FAFC;
  background:rgba(15,23,42,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.th-btn .i{width:20px;height:20px}
.th-btn.th-save.on{color:var(--c-star)}
.th-btn:active{transform:scale(.92)}
.th-media{position:relative;display:block;background:#0B1120;cursor:zoom-in}
.th-img{display:block;width:100%;max-height:72vh;min-height:180px;object-fit:cover}
.th-media.blurred{cursor:pointer}
.th-media.blurred .th-img{filter:blur(28px);transform:scale(1.08)}
.th-veil{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font:700 14px/1.3 var(--fs);color:#F8FAFC;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.th-play{position:absolute;left:12px;bottom:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(15,23,42,.7);color:#F8FAFC}
.th-noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px;background:var(--slab2);color:var(--dim);font:500 13px/1 var(--fs)}
.th-noimg .i{width:32px;height:32px}
.th-body{padding:14px 16px 16px}
.th-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.th-cat,.th-flag{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:999px;font:700 12px/1 var(--fs);letter-spacing:.04em;text-transform:uppercase}
.th-cat.c-mega{background:rgba(248,113,113,.16);color:var(--c-mega)} .th-cat.c-super{background:rgba(192,132,252,.16);color:var(--c-super)}
.th-cat.c-high{background:rgba(34,197,94,.16);color:var(--c-high)} .th-cat.c-good{background:rgba(245,158,11,.16);color:var(--c-good)}
.th-flag{background:var(--slab2);color:var(--ash);text-transform:none;letter-spacing:0}
.th-flag.new{background:var(--chalk);color:var(--ink)} .th-flag.nsfw{background:rgba(248,113,113,.16);color:var(--fail)}
.th-flag.grew{background:rgba(34,197,94,.14);color:var(--pass)}
.th-flag .i{width:13px;height:13px}
.th-title{font:600 16px/1.4 var(--fs);color:var(--chalk);margin-bottom:8px;overflow-wrap:anywhere}
.th-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 13px/1.3 var(--fs);color:var(--ash);margin-bottom:14px;font-variant-numeric:tabular-nums}
.th-meta span{display:inline-flex;align-items:center;gap:4px}
.th-meta .i{width:15px;height:15px}
.th-sub{color:var(--c-link);font-weight:600}
.th-rel{color:var(--pass);font-weight:700}
.th-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.th-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 8px;font:600 14px/1 var(--fs);
  background:var(--slab2);border:1px solid var(--edge);color:var(--chalk);border-radius:12px}
.th-act .i{width:16px;height:16px;color:var(--ash)}
.th-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:36px 20px;color:var(--ash);font:500 14px/1.5 var(--fs);
  background:var(--slab);border:1px dashed var(--edge);border-radius:var(--r)}
.th-empty b{color:var(--dim)} .th-empty .i.lg{width:32px;height:32px}
.th-empty-t{font:600 16px/1.3 var(--fs);color:var(--chalk)}

/* full-screen viewer */
.th-viewer{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.94)}
.th-viewer.on{display:flex}
.th-viewer img{max-width:100%;max-height:100%;object-fit:contain}
.th-viewer .th-viewer-x{position:absolute;top:calc(12px + var(--sa-top,0px));right:12px}

@media (prefers-reduced-motion:reduce){.th-inner,.th-rl-bar i{transition:none}}
