:root {
  --bg:#0b0d10; --panel:#111418; --panel2:#171b20; --line:#242a31; --text:#f5f7f8;
  --muted:#9099a3; --accent:#e9ff70; --soft:#dce4ed; --max:1480px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#0d1014 0,#090b0e 520px);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;z-index:20;background:rgba(11,13,16,.82);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid #323941;border-radius:10px;color:var(--accent);font-size:20px}
.brand strong{display:block;font-size:14px;letter-spacing:-.01em}
.brand small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.header-actions{display:flex;gap:8px}
.ghost-btn{border:1px solid var(--line);color:#d9dee4;background:#11151a;border-radius:10px;padding:9px 12px}
.ghost-btn:hover{border-color:#4a545f;background:#171c22}
main{max-width:var(--max);margin:auto;padding:0 28px 80px}
.hero{padding:72px 0 38px;max-width:950px}
.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:750;color:var(--accent);margin:0 0 15px}
.hero h1{font-size:clamp(42px,6vw,78px);line-height:.98;letter-spacing:-.055em;margin:0;max-width:900px}
.hero-copy{font-size:17px;line-height:1.65;color:#aeb6bf;max-width:780px;margin:25px 0}
.stats{display:flex;flex-wrap:wrap;gap:8px}
.stat{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:11px;padding:10px 13px;font-size:12px;color:#aab2bb}
.stat b{font-size:18px;color:#fff;margin-right:6px}
.controls-wrap{position:sticky;top:72px;z-index:15;background:linear-gradient(180deg,rgba(11,13,16,.98),rgba(11,13,16,.92) 80%,transparent);padding:10px 0 18px}
.controls{border:1px solid var(--line);border-radius:15px;background:#101318;padding:12px}
.search-box{height:48px;display:flex;align-items:center;gap:10px;border:1px solid #2a3037;border-radius:10px;background:#0c0f13;padding:0 13px}
.search-box>span{font-size:23px;color:#77818c}
.search-box input{width:100%;border:0;outline:0;background:transparent;color:white;font-size:14px}
.search-box input::placeholder{color:#68727c}
kbd{border:1px solid #353c45;border-bottom-width:2px;background:#151a20;color:#77818b;padding:2px 7px;border-radius:5px;font-size:11px}
.filter-row{display:flex;gap:7px;overflow:auto;padding:10px 0 0;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter{white-space:nowrap;border:1px solid #292f36;background:#15191e;color:#98a1aa;border-radius:999px;padding:8px 11px;font-size:12px}
.filter.active{background:var(--accent);border-color:var(--accent);color:#0a0c0e;font-weight:750}
.secondary-row{display:flex;align-items:center;gap:8px;padding-top:10px}
select{color:#b9c0c7;background:#15191e;border:1px solid #292f36;border-radius:9px;padding:8px 10px;font-size:12px;outline:none;max-width:240px}
.result-count{margin-left:auto;font-size:12px;color:#747e88}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:7px 0 24px}
.legend>div{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:rgba(255,255,255,.018);font-size:11px;color:#7f8993;line-height:1.5}
.legend strong{display:inline-block;color:#dce1e6;margin:0 7px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#777}
.dot.organic{background:#ff4d77}.dot.youtube{background:#ff3939}.dot.tiktok{background:#5eead4}
.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.video-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);min-width:0;transition:transform .16s ease,border-color .16s ease}
.video-card:hover{transform:translateY(-2px);border-color:#3b444e}
.player-shell{aspect-ratio:9/16;background:#050607;position:relative;overflow:hidden}
.player-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .25s ease;background:#050607}
.player-shell.loaded iframe{opacity:1}
.player-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;color:#5d6670;font-size:11px}
.player-shell.loaded .player-placeholder{display:none}
.spinner{height:22px;width:22px;border:2px solid #2b3138;border-top-color:#77828e;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card-body{padding:12px 12px 13px}
.meta-line{display:flex;align-items:center;gap:6px;min-height:24px}
.source-pill,.section-pill{font-size:9px;letter-spacing:.04em;text-transform:uppercase;border:1px solid #303740;border-radius:999px;padding:4px 7px;color:#9aa3ac;max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.source-pill[data-source="organic-embed"]{border-color:rgba(255,77,119,.38);color:#ff92ac}
.source-pill[data-source="youtube-search"]{border-color:rgba(255,57,57,.4);color:#ff8c8c}
.source-pill[data-source="direct-tiktok"]{border-color:rgba(94,234,212,.35);color:#8ff5e5}
.fav-btn{margin-left:auto;border:0;background:transparent;color:#65707a;font-size:20px;padding:0 2px}
.fav-btn.saved{color:var(--accent)}
.card-body h2{font-size:14px;line-height:1.35;letter-spacing:-.015em;margin:10px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.subtitle{font-size:11px;line-height:1.5;color:#77818a;min-height:32px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-footer{border-top:1px solid #20262c;margin-top:11px;padding-top:9px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#65707a}
.open-link{color:#8e99a3;text-decoration:none}
.open-link:hover{color:white}
.load-wrap{display:flex;justify-content:center;padding:30px 0}
.load-btn{border:1px solid #3b434c;background:#151a20;color:#e7ebee;border-radius:11px;padding:12px 20px;font-size:13px}
.empty{grid-column:1/-1;padding:90px 20px;text-align:center;color:#6f7983;border:1px dashed #2d343c;border-radius:14px}
@media(max-width:1100px){.video-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .topbar{padding:0 15px}.brand small{display:none}.header-actions .ghost-btn:first-child{display:none}
  main{padding:0 14px 70px}.hero{padding:48px 0 28px}.hero h1{font-size:47px}.hero-copy{font-size:14px}
  .controls-wrap{top:72px}.secondary-row{flex-wrap:wrap}.result-count{width:100%;margin:1px 0 0}
  .legend{grid-template-columns:1fr}.legend>div:nth-child(n+2){display:none}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .card-body{padding:9px}.card-body h2{font-size:12px}.subtitle{font-size:10px}
}
@media(max-width:430px){.video-grid{grid-template-columns:1fr 1fr}.source-pill,.section-pill{font-size:8px;padding:3px 5px}.card-footer{font-size:9px}}