:root{--bg:#fff;--text:#0b0b0c;--muted:#6b6f76;--accent:#111827;--ring:rgba(17,24,39,.12);--shadow:0 2px 10px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.06)}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Inter,Arial,sans-serif;background:#fff;color:var(--text)}
.site-header{position:sticky;top:0;z-index:10;display:flex;gap:8px;align-items:center;background:#fff;border-bottom:1px solid #eee;padding:10px 12px}
h1{margin:0;font-size:18px}
.container{max-width:1200px;margin:0 auto;padding:16px}
.status{font-size:14px;color:var(--accent);margin-left:8px}
.spacer{flex:1}
.btn{border:1px solid rgba(0,0,0,.1);background:#f8f8f8;color:#111;border-radius:999px;padding:8px 14px;font-weight:600;cursor:pointer;min-height:38px}
.btn.primary{background:var(--accent);color:#fff}
.btn:focus{outline:none;box-shadow:0 0 0 4px var(--ring)}
.panel{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;box-shadow:var(--shadow);margin-bottom:16px}
.uploader{display:grid;gap:10px}
.drop{padding:20px;border:2px dashed #ccc;border-radius:12px;color:#374151;text-align:center;background:#fafafa}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:24px}
.card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.card video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.card .meta{padding:10px 12px}
.card .name{font-weight:600}
.card .muted{color:#6b7280;font-size:12px}
.small{font-size:12px}.muted{color:#6b7280}
.foot{padding:20px;text-align:center;color:#6b7280}