*{box-sizing:border-box}
:root{--bg:#0f1115;--muted:#8a8f98;--text:#e9edf1;--panel:#171a21;--accent:#4c8bf5;--line:#242a33}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel),#10131a)}
.brand{display:flex;align-items:center;gap:.5rem}
.logo{width:22px;height:22px;fill:var(--accent);opacity:.9}
.title{font-weight:600;letter-spacing:.2px}
.actions{display:flex;gap:.5rem}
.btn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--text);
  padding:.5rem .75rem;border-radius:.5rem;cursor:pointer}
.btn:hover{border-color:#2d3440}
.btn.solid{background:var(--accent);border-color:var(--accent);color:white}
.content{max-width:960px;margin:0 auto;padding:2rem 1rem}
.hero{padding:1.25rem;border:1px dashed #2a303b;border-radius:.75rem;color:var(--muted);text-align:center}
.viewer{margin-top:1.25rem;display:grid;gap:1rem}
.card{display:flex;gap:.75rem;align-items:center;background:var(--panel);border:1px solid var(--line);padding:.75rem;border-radius:.75rem}
.file-icon{width:60px;height:72px;border-radius:.5rem;background:#10131a;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#b3c4ff;border:1px solid var(--line)}
.meta .name{font-weight:600}
.meta .sub{color:var(--muted);font-size:.9rem}
.preview{background:var(--panel);border:1px solid var(--line);padding:1rem;border-radius:.75rem;color:var(--muted)}
.footer{border-top:1px solid var(--line);padding:1rem;text-align:center;color:var(--muted)}