/* public/assets/css/style.css */
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; margin:0; padding:0; color:#0b1220; background:#f7f7fb; }
.container { max-width: 840px; margin: 48px auto; padding: 0 16px; }
h1 { font-size: 28px; margin: 0 0 12px; }
a { color: #0a58ca; }

/* Gallery */
.hero { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.topnav a { color:#0a58ca; text-decoration:none; margin-right:8px; }
.grid { display:grid; gap:12px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px){ .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .grid-4 { grid-template-columns: repeat(2, 1fr); } }
.card { display:block; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.card img, .card video { display:block; width:100%; height:200px; object-fit:cover; }
.more { text-decoration:none; }
.pagination { margin:16px 0; display:flex; gap:8px; }
.pagination a, .pagination .current { padding:6px 10px; border-radius:8px; background:#eef2ff; color:#1e3a8a; text-decoration:none; }
.pagination .current { background:#1e3a8a; color:#fff; }
.file-details .detail-img, .file-details .detail-video { width:100%; max-height:70vh; object-fit:contain; border-radius:12px; background:#000; }
.progress { position:relative; background:#e5e7eb; border-radius:10px; height:12px; margin:10px 0; }
.progress-bar { position:absolute; left:0; top:0; height:100%; width:0%; background:#3b82f6; border-radius:10px; transition:width .1s linear; }
.progress-pct { display:inline-block; margin-left:8px; font-size:12px; color:#374151; }
.progress-speed { font-size:12px; color:#6b7280; margin-top:4px; }

/* Upload advanced fields */
details.adv { margin-top:12px; }
details.adv > summary { cursor:pointer; margin-bottom:8px; }
textarea { width:100%; padding:10px; border-radius:10px; border:1px solid #e5e7eb; background:#ffffff; color:#0b1220; }

.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (max-width: 720px){ .grid-2 { grid-template-columns: 1fr; } }
.meta-card { background:#fff; border-radius:12px; padding:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.meta-card .thumb img, .meta-card .thumb video { width:100%; height:200px; object-fit:cover; border-radius:8px; background:#000; }
.meta-card label { display:block; margin-top:8px; }
.annotate-opt { display:block; margin-top:8px; color:#374151; }