@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Space+Mono:wght@400;700&display=swap";:root{--bg:#0a0a0c;--surface:#141418;--surface-hover:#1c1c22;--border:#2a2a32;--border-hover:#3a3a44;--text:#e8e6f0;--text-muted:#8886a0;--accent:#e1306c;--accent-glow:#e1306c26;--green:#2ecc71;--green-glow:#2ecc7126;--orange:#f39c12;--orange-glow:#f39c1226;--blue:#6c5ce7;--blue-glow:#6c5ce726;--radius:12px;--radius-sm:8px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:DM Sans,sans-serif}.app{max-width:720px;margin:0 auto;padding:48px 24px 80px;position:relative}.grain{opacity:.03;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px;position:fixed;inset:0}.header{text-align:center;margin-bottom:48px;animation:.6s fadeUp}.logo{align-items:center;gap:12px;margin-bottom:12px;display:inline-flex}.logo svg{color:var(--accent);filter:drop-shadow(0 0 12px var(--accent-glow))}.header h1{letter-spacing:-.5px;background:linear-gradient(135deg, var(--text), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-family:Space Mono,monospace;font-size:28px;font-weight:700}.subtitle{color:var(--text-muted);font-size:15px;font-weight:400}.upload-section{margin-bottom:40px;animation:.6s .1s both fadeUp}.upload-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;background:var(--surface);padding:32px 20px;transition:all .25s;position:relative;overflow:hidden}.drop-zone:before{content:"";background:radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 70%);opacity:0;transition:opacity .3s;position:absolute;inset:0}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:var(--surface-hover)}.drop-zone:hover:before,.drop-zone.drag-over:before{opacity:1}.drop-zone.has-file{border-color:var(--green);border-style:solid}.drop-zone.has-file:before{background:radial-gradient(circle at 50% 50%, var(--green-glow), transparent 70%);opacity:1}.drop-zone.has-error{border-color:var(--accent)}.drop-zone-empty,.drop-zone-loaded{z-index:1;flex-direction:column;align-items:center;gap:8px;display:flex;position:relative}.drop-zone-empty svg{color:var(--text-muted);transition:color .25s}.drop-zone:hover .drop-zone-empty svg{color:var(--accent)}.drop-label{color:var(--text);font-family:Space Mono,monospace;font-size:13px;font-weight:700}.drop-hint{color:var(--text-muted);font-size:12px}.drop-zone-loaded svg{color:var(--green)}.file-name{color:var(--text);font-family:Space Mono,monospace;font-size:12px;font-weight:700}.file-count{color:var(--green);font-size:13px;font-weight:600}.drop-error{z-index:1;color:var(--accent);align-items:center;gap:6px;margin-top:8px;font-size:12px;display:flex;position:relative}.results-section{animation:.5s fadeUp}.stats-bar{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:32px;display:grid}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;flex-direction:column;align-items:center;gap:4px;padding:16px 12px;display:flex}.stat svg{color:var(--text-muted)}.stat span{color:var(--text);font-family:Space Mono,monospace;font-size:22px;font-weight:700}.stat label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-size:11px;font-weight:500}.stat.ghosts{background:var(--accent-glow);border-color:#e1306c40}.stat.ghosts svg,.stat.ghosts span{color:var(--accent)}.stat.mutual{background:var(--green-glow);border-color:#2ecc7133}.stat.mutual svg,.stat.mutual span{color:var(--green)}.results-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.results-header h2{color:var(--accent);align-items:center;gap:8px;font-size:16px;font-weight:600;display:flex}.search-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);flex:0 240px;align-items:center;gap:8px;padding:8px 12px;transition:border-color .2s;display:flex}.search-box:focus-within{border-color:var(--accent)}.search-box svg{color:var(--text-muted);flex-shrink:0}.search-box input{color:var(--text);background:0 0;border:none;outline:none;width:100%;font-family:DM Sans,sans-serif;font-size:14px}.search-box input::placeholder{color:var(--text-muted)}.clear-search{cursor:pointer;color:var(--text-muted);background:0 0;border:none;padding:2px;transition:color .2s;display:flex}.clear-search:hover{color:var(--text)}.results-grid{flex-direction:column;gap:4px;display:flex}.result-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:12px;padding:10px 14px;transition:all .2s;animation:.35s both fadeIn;display:flex}.result-card:hover{background:var(--surface-hover);border-color:var(--border-hover)}.result-avatar{background:linear-gradient(135deg, var(--accent), var(--blue));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-family:Space Mono,monospace;font-size:14px;font-weight:700;display:flex}.result-username{color:var(--text);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:14px;font-weight:500;overflow:hidden}.result-link{color:var(--text-muted);border-radius:6px;flex-shrink:0;padding:6px;transition:all .2s;display:flex}.result-link:hover{color:var(--accent);background:var(--accent-glow)}.show-more{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-muted);cursor:pointer;justify-content:center;align-items:center;gap:8px;margin-top:12px;padding:14px;font-family:DM Sans,sans-serif;font-size:14px;transition:all .2s;display:flex}.show-more:hover{border-color:var(--accent);color:var(--accent)}.empty-search{text-align:center;color:var(--text-muted);padding:40px;font-size:14px}.all-clear{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:48px 24px;display:flex}.all-clear svg{color:var(--green)}.all-clear h2{color:var(--green);font-size:24px}.all-clear p{color:var(--text-muted)}.footer{text-align:center;border-top:1px solid var(--border);margin-top:48px;padding-top:24px}.footer p{color:var(--text-muted);font-size:12px}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=520px){.app{padding:32px 16px 64px}.upload-grid{grid-template-columns:1fr}.stats-bar{grid-template-columns:repeat(2,1fr)}.results-header{flex-direction:column;align-items:stretch}.search-box{flex:1}.header h1{font-size:22px}}
