:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#080b12; color:#f6f7fb; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top,#19213a 0,#080b12 42%); }
button,input { font:inherit; }
button { border:0; cursor:pointer; }
.shell { width:min(1080px,calc(100% - 32px)); margin:0 auto; padding:64px 0; }
.card { background:rgba(17,22,34,.88); border:1px solid rgba(255,255,255,.09); border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,.3); backdrop-filter:blur(18px); }
.auth-card { width:min(430px,100%); margin:8vh auto 0; padding:36px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:10px; letter-spacing:-.04em; } h2 { margin-bottom:0; }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:.18em; color:#86a8ff; margin-bottom:10px; }
.muted { color:#929bb0; }
label:not(.dropzone) { display:block; margin:25px 0 8px; font-size:14px; color:#c9cfda; }
input[type=password] { width:100%; background:#0b0f19; color:#fff; border:1px solid #2a3346; border-radius:13px; padding:14px; outline:none; }
input[type=password]:focus { border-color:#7399ff; box-shadow:0 0 0 4px rgba(115,153,255,.12); }
button { background:linear-gradient(135deg,#6e91f7,#8b6ef7); color:white; padding:13px 18px; border-radius:13px; font-weight:750; transition:.2s transform,.2s opacity; }
button:hover { transform:translateY(-1px); } button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.auth-card button { width:100%; margin-top:16px; }
.button-secondary { background:#171d2b; border:1px solid #2c3548; color:#dce1ec; padding:10px 14px; }
.topbar,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar { margin-bottom:24px; } .topbar h1 { margin:0; }
.upload-card { padding:24px; }
.dropzone { min-height:220px; border:1.5px dashed #3c4863; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; color:#abb4c7; transition:.2s; }
.dropzone:hover,.dropzone.dragging { border-color:#82a4ff; background:rgba(89,127,233,.08); }
.drop-icon { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#1b2742; color:#9bb5ff; font-size:28px; }
.preview-wrap { margin:18px 0; display:flex; align-items:center; gap:14px; padding:12px; border-radius:15px; background:#0c111d; }
.preview-wrap img { width:76px; height:76px; object-fit:cover; border-radius:12px; }
.preview-wrap div { min-width:0; display:flex; flex-direction:column; gap:6px; } #fileName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-card button[type=submit] { width:100%; margin-top:18px; }
.progress { height:7px; background:#20283a; overflow:hidden; border-radius:20px; margin-top:14px; }
.progress span { display:block; height:100%; width:0; background:linear-gradient(90deg,#719bff,#a372ff); transition:width .15s; }
.message { min-height:22px; margin:12px 0 0; font-size:14px; color:#ff9b9b; } .message.success { color:#7fe5af; }
.gallery-section { margin-top:38px; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px; }
.gallery-item { overflow:hidden; background:#111723; border:1px solid #252e40; border-radius:18px; }
.gallery-item img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#0a0e17; }
.gallery-info { padding:13px; }
.gallery-name { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; }
.gallery-meta { display:block; color:#8791a6; font-size:12px; margin-top:5px; }
.gallery-actions { display:flex; gap:8px; margin-top:12px; }
.gallery-actions button,.gallery-actions a { flex:1; text-align:center; text-decoration:none; padding:9px 10px; border-radius:10px; font-size:12px; font-weight:750; }
.gallery-actions a { color:#e6ebf5; background:#20283a; } .delete { background:#3a1d26; color:#ffafbd; }
.empty { text-align:center; color:#8a94a9; padding:50px; }
.hidden { display:none !important; }
#loadMoreButton { display:block; margin:22px auto 0; }
@media (max-width:760px) { .shell{padding:32px 0}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-card{padding:26px}.topbar{align-items:flex-start}.upload-card{padding:16px} }
@media (max-width:460px) { .gallery{grid-template-columns:1fr}.shell{width:min(100% - 20px,1080px)} }