: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);
  --danger:#b91c1c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Inter,Arial,sans-serif;background:#fff;color:#0b0b0c}

/* 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}
.note{background:#f1f5f9;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;margin:10px 0;color:#111}

/* Uploader */
.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 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;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%; height:auto; display:block;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#000;
}
.card .meta{padding:8px 9px;display:flex;gap:6px;align-items:center}
.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}
.card .actions{margin-left:auto;display:flex;gap:6px}
.icon-btn{border:1px solid #eee;background:#fafafa;border-radius:8px;padding:4px 8px;font-size:11px;cursor:pointer}
.icon-btn.danger{border-color:#fca5a5;background:#fee2e2;color:#7f1d1d}
.open-link{font-size:11px;color:#2563eb;text-decoration:underline;cursor:pointer}

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