*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,sans-serif;background:#0e0e10;color:#eaeaea}.app{display:flex;flex-direction:column;height:100%}header{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;border-bottom:1px solid #222;background:#17171a}header h1{margin:0;font-size:1.1rem;letter-spacing:.05em}nav{display:flex;gap:.5rem;align-items:center;flex:1}nav button{background:transparent;border:1px solid #333;color:#ccc;padding:.35rem .85rem;border-radius:.25rem;cursor:pointer}nav button.active{background:#2a2a30;border-color:#666;color:#fff}nav input{flex:1;background:#1e1e22;border:1px solid #333;color:#eaeaea;padding:.4rem .75rem;border-radius:.25rem;max-width:400px;margin-left:auto}main{flex:1;overflow:auto;padding:1.25rem}.hint{color:#888;text-align:center;margin-top:3rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.card{background:#1a1a1e;border-radius:.5rem;overflow:hidden;cursor:pointer;transition:transform .1s,box-shadow .1s}.card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0006}.thumb{aspect-ratio:16/9;background:#000;position:relative}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.badge.live-badge{position:absolute;top:.4rem;left:.4rem;background:#d02020;color:#fff;font-size:.7rem;font-weight:700;padding:.15rem .45rem;border-radius:.15rem}.meta{padding:.6rem .75rem}.name{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub{display:flex;justify-content:space-between;font-size:.75rem;color:#888;margin-top:.25rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#17171a;border-radius:.5rem;width:min(90vw,1200px);display:flex;flex-direction:column;overflow:hidden}.modal header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border:0;border-bottom:1px solid #222}.modal header h2{font-size:1rem;margin:0;font-weight:500}.modal header button{background:none;border:0;color:#ccc;font-size:1.5rem;cursor:pointer}.modal video{width:100%;aspect-ratio:16/9;background:#000}.modal footer{padding:.5rem 1rem;color:#888;font-size:.8rem}