:root{--bg:#0c1a2b;--card:#0f223a;--text:#e9f1ff;--muted:#9bb3d1;--hi:#ffd34d;--danger:#ff4d4d;--accent:#3aa0ff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:rgba(12,26,43,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.6px}.logo{height:26px}
.back,.btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14)}.btn{background:var(--accent);color:#001;border:0}
.container{max-width:1100px;margin:26px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{padding:16px;border-radius:16px;background:var(--card);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .18s ease,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.25)}
.card-title{font-weight:700;margin-bottom:6px}.card-sub{color:var(--muted);font-size:14px}
.uploader input[type=file]{display:block;margin:12px 0}
.uploader button{background:var(--accent);color:#001;border:0}
.progress{position:relative;margin-top:12px;height:14px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden}.progress.hidden{display:none}
.progress-bar{height:100%;width:0;background:var(--accent);transition:width .2s}
.progress-text{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:12px;color:#001}
.slideshow #slideWrap{height:42vh;min-height:280px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:var(--card)}
#slide{width:100%;height:100%;background-size:cover;background-position:center;animation:fade 3.5s infinite}.slide-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);animation:none}
@keyframes fade{0%{opacity:.2}15%{opacity:1}85%{opacity:1}100%{opacity:.2}}
.masonry{columns:260px;column-gap:14px}
.tile{display:inline-block;width:100%;margin:0 0 14px;position:relative;border-radius:14px;overflow:hidden;background:#061426;border:1px solid rgba(255,255,255,.07)}
.tile img,.tile video.media{width:100%;display:block;background:#000}
.tile.hi{outline:3px solid var(--hi);box-shadow:0 0 0 4px rgba(255,211,77,.15) inset}
.menu{position:absolute;right:8px;bottom:8px}.dot{border:0;background:rgba(0,0,0,.45);color:#fff;font-size:22px;border-radius:10px;padding:2px 8px;cursor:pointer}
.menu-list{position:absolute;right:0;bottom:34px;display:none;flex-direction:column;min-width:150px;background:rgba(12,26,43,.95);border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden}
.menu-list.open,.menu .menu-list.open{display:flex}
.menu-list button,.menu-list a{padding:10px 12px;background:transparent;color:var(--text);text-align:left;border:0}
.menu-list button:hover,.menu-list a:hover{background:rgba(255,255,255,.06)}.menu-list .danger{color:var(--danger)}
