:root{
  --bg:#0b1020;--panel:#11182a;--panel2:#151f35;--border:#263553;
  --text:#f5f7fb;--muted:#94a3b8;--accent:#6f7cff;--accent2:#8792ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;background:rgba(11,16,32,.94);border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}
.brand{font-size:20px;font-weight:800}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
button,select,.primary{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;text-decoration:none;cursor:pointer}
button.active,.primary{background:var(--accent);border-color:var(--accent);color:white}
main{max-width:1200px;margin:auto;padding:24px}
.crumbs{color:var(--muted);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--accent2);text-decoration:none}
.hero{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}
h1{font-size:clamp(28px,4vw,46px);margin:0 0 6px}
#meta{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.list{display:flex;flex-direction:column;gap:8px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;min-width:0}
.card:hover{border-color:#41527b}
.grid .thumb{height:150px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:46px;overflow:hidden}
.grid .thumb img,.grid .thumb video{width:100%;height:100%;object-fit:cover}
.card-body{padding:14px}
.name{font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub{color:var(--muted);font-size:13px;margin-top:5px}
.card-actions{display:flex;gap:8px;margin-top:12px}
.card-actions a,.card-actions button{font-size:13px;padding:8px 10px}
.list .card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;padding:8px 10px}
.list .thumb{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--panel2);border-radius:8px;overflow:hidden}
.list .thumb img{width:100%;height:100%;object-fit:cover}
.list .card-body{padding:0 12px}
.list .card-actions{margin:0}
.folder{cursor:pointer}
.error{background:#451a1a;border:1px solid #7f1d1d;color:#fecaca;padding:14px;border-radius:12px}
.hidden{display:none}
dialog{width:min(1000px,94vw);height:min(780px,90vh);padding:0;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:16px}
dialog::backdrop{background:rgba(0,0,0,.7)}
.preview-head{height:56px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.preview-body{height:calc(100% - 56px);display:flex;align-items:center;justify-content:center;background:#050814}
.preview-body img,.preview-body video{max-width:100%;max-height:100%}
.preview-body iframe{border:0;width:100%;height:100%;background:white}
@media(max-width:720px){
  .topbar{align-items:flex-start;flex-direction:column;padding:14px}
  .actions{justify-content:flex-start}
  main{padding:16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid .thumb{height:120px}
  .list .card{grid-template-columns:46px minmax(0,1fr)}
  .list .card-actions{grid-column:1/-1}
}