:root { color-scheme: light dark; }
body { font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; padding: 24px;
       background: #0f1115; color: #e6e6e6; }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: #8b93a7; margin: 0 0 16px; }
code { background: #1a1e2a; padding: 1px 5px; border-radius: 4px; }

.guide { max-width: 1100px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid #232838;
         border-radius: 8px; background: #141821; }
.guide > summary { cursor: pointer; color: #cdd6f4; font-weight: 600; }
.guide ul { margin: 10px 0 4px; padding-left: 18px; }
.guide li { margin-bottom: 8px; color: #c4c9d6; }
.guide b { color: #e6e6e6; }
.guide .gtag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
               border-radius: 999px; margin-right: 6px; color: #fff; vertical-align: middle; }
.guide .gtag.menu { background: #2748c8; }
.guide .gtag.merged { background: #3a4663; }
.guide .gtag.dedup { background: #2a3346; }

.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1100px;
            margin-bottom: 16px; }
.controls input[type=search] { flex: 1; min-width: 220px; padding: 7px 10px; font-size: 13px;
            border: 1px solid #2a3346; border-radius: 6px; background: #1a1e2a; color: #e6e6e6; }
.controls select { padding: 6px 8px; font-size: 13px; border: 1px solid #2a3346; border-radius: 6px;
            background: #1a1e2a; color: #e6e6e6; }
.controls label { color: #8b93a7; display: flex; align-items: center; gap: 6px; }
#dir { padding: 7px 10px; font-size: 13px; border: 1px solid #2a3346; border-radius: 6px;
       background: #1c2233; color: #cdd6f4; cursor: pointer; }
#dir:hover { filter: brightness(1.15); }

#list { display: flex; flex-direction: column; gap: 10px; max-width: 1100px; }
.card { display: grid; grid-template-columns: 132px 1fr auto; gap: 14px; align-items: center;
        padding: 12px; border: 1px solid #232838; border-radius: 8px; background: #141821; }
.thumb { width: 132px; height: 80px; object-fit: cover; border-radius: 6px;
         background: #1a1e2a; border: 1px solid #2a3043; }
.thumb.noimg { display: flex; align-items: center; justify-content: center; color: #5a6178; font-size: 12px; }
.sname { font-weight: 600; font-size: 15px; }
.meta { color: #8b93a7; font-size: 12.5px; margin-top: 2px; }
.badges { margin-top: 8px; }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
         margin-right: 6px; border: 1px solid transparent; }
.badge.ok { background: #16321f; color: #7ee0a0; border-color: #1f5232; }
.badge.no { background: #2a2330; color: #b08bb0; border-color: #4a3550; }
.links { text-align: right; white-space: nowrap; }
.btn { display: inline-block; padding: 7px 12px; border-radius: 6px; text-decoration: none;
       font-size: 13px; margin-left: 8px; background: #1c2233; color: #cdd6f4; border: 1px solid #2a3346; }
.btn.primary { background: #2748c8; color: #fff; border-color: #2748c8; }
.btn:hover { filter: brightness(1.15); }
.muted { color: #6b7286; font-size: 12.5px; }
.empty { color: #6b7286; padding: 24px 0; }
footer { color: #5a6178; font-size: 12px; margin-top: 24px; max-width: 1100px; }