: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)}

/* Header */
.site-header{position:sticky;top:0;z-index:10;display:flex;gap:6px;align-items:center;background:#fff;border-bottom:1px solid #eee;padding:8px 10px}
h1{margin:0;font-size:16px}
.status{font-size:12px;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:6px 12px;font-weight:600;cursor:pointer;min-height:32px;font-size:12px}
.btn.primary{background:var(--accent);color:#fff}
.btn:focus{outline:none;box-shadow:0 0 0 4px var(--ring)}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:12px}
.panel{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px;box-shadow:var(--shadow);margin-bottom:12px}
.uploader{display:grid;gap:8px}
.drop{padding:14px;border:2px dashed #ccc;border-radius:12px;color:#374151;text-align:center;background:#fafafa;font-size:13px}

/* Grid: 50% smaller tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:16px}
.card{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.card video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.card .meta{padding:8px 9px}
.card .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:12px}
.card .muted{color:#6b7280;font-size:11px}

.small{font-size:11px}.muted{color:#6b7280}
.foot{padding:14px;text-align:center;color:#6b7280;font-size:12px}