:root { --bg:#0b1220; --card:#0f1a2b; --text:#e5e7eb; --muted:#9aa8bf; --primary:#2ea0ff; --primary2:#58c1ff; --border:#1f2a37; }
* { box-sizing: border-box; }
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; margin:0; background: var(--bg); color: var(--text); }
.nav { position: sticky; top:0; background: #0a1324; border-bottom:1px solid var(--border); box-shadow: 0 8px 28px rgba(3,10,20,0.6); }
.nav-inner { max-width:1080px; margin:0 auto; padding: 14px 24px; display:flex; align-items:center; justify-content: space-between; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; color: var(--text); }
.logo { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#0f1a2b,#102743); color:#7fd0ff; border-radius:6px; }
.brand-name { font-size:18px; }
.links a { color:#cbd5e1; text-decoration:none; margin-left:16px; }
.links a:hover { color: var(--primary); }
.hero { max-width:1080px; margin: 40px auto 0; padding: 48px 32px; display:block; border-radius:16px; background: linear-gradient(180deg,rgba(13,22,39,0.85),rgba(10,19,36,0.92)); border:1px solid var(--border); box-shadow: 0 24px 48px rgba(3,10,20,0.6); }
.hero-text { max-width:800px; margin:0 auto; text-align:center; }
.hero-title { font-size: 40px; font-weight: 800; color:#7fd0ff; }
.hero-desc { margin-top:16px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hero-actions { margin-top:24px; display:flex; gap:12px; justify-content:center; }
.btn { text-decoration:none; padding:12px 22px; border-radius:999px; }
.btn.primary { background: linear-gradient(90deg,var(--primary),var(--primary2)); color:#fff; }
.btn.ghost { background: transparent; border:1px solid var(--border); color: #cbd5e1; }
.container { max-width: 1080px; margin: 0 auto; padding: 24px; }
.section-title { font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px; color:#cbd5e1; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 18px; }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow:hidden; box-shadow: 0 6px 20px rgba(3,10,20,0.6); transition: transform .2s ease, box-shadow .2s ease; display:flex; flex-direction: column; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(3,10,20,0.7); }
.cover { width:100%; height: 160px; background: linear-gradient(135deg,#0f1a2b,#102743); display:flex; align-items:center; justify-content:center; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.content { padding: 16px; display:flex; flex-direction: column; gap: 8px; }
.name { font-size: 16px; font-weight: 600; color: var(--text); }
.desc { font-size: 14px; color: var(--muted); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }
.meta { display:flex; justify-content: space-between; align-items:center; margin-top: 8px; }
.badge { font-size: 12px; color: #a3b3cc; background:#0b1524; padding: 4px 8px; border-radius: 999px; border:1px solid #243447; }
.action { text-decoration:none; background: linear-gradient(90deg,var(--primary),var(--primary2)); color:#fff; padding:8px 12px; border-radius: 999px; display:inline-flex; align-items:center; gap:8px; }
.action:hover { filter: brightness(1.05); }
.action svg { width: 16px; height:16px; }
.footer { max-width:1080px; margin: 40px auto 24px; padding: 16px; text-align:center; color:#9aa8bf; border-top:1px solid var(--border); }

/* upload page variations */
.hero.upload { margin: 24px 0; }
.hero-title.small { font-size: 26px; }
.card.upload { margin-top: 18px; }
.card-inner { padding: 20px; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.input-hidden { display:none; }
.upload-dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding: 32px; border-radius:16px; border:1.5px dashed var(--border); background:#0b1524; cursor:pointer; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.upload-dropzone:hover { border-color: var(--primary); }
.upload-dropzone.active { border-color: var(--primary); box-shadow: 0 10px 28px rgba(3,10,20,0.7); background: linear-gradient(135deg,#0b1524,#102743); }
.upload-icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.upload-text { color:#cbd5e1; font-size:14px; }
.upload-filename { color:#7fd0ff; font-size:14px; }
.upload-actions { display:flex; gap:12px; align-items:center; margin-top:14px; }
.upload-success { margin-top:16px; padding:16px; border-radius:12px; background:#0b1524; border:1px solid var(--border); display:none; align-items:center; justify-content:space-between; gap:12px; }
.upload-success.show { display:flex; }
.upload-success .msg { color:#7fd0ff; font-size:14px; }
.success-actions { display:flex; gap:12px; }
.upload-progress { display:none; align-items:center; gap:8px; color:#cbd5e1; margin-top:10px; }
.upload-progress.show { display:flex; }
.spinner { width:14px; height:14px; border:2px solid var(--primary); border-top-color: transparent; border-radius:999px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top: 22px; }
.page-link { color: var(--primary); text-decoration:none; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#0b1524; }
.page-link[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.page-info { color:#cbd5e1; font-size: 14px; }