:root{
  color-scheme: light dark;
  --bg: #0b1220;
  --card: #111a2d;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(148,163,184,.18);
  --link: #60a5fa;
  --linkHover: #93c5fd;
  --btn: #2563eb;
  --btnHover: #1d4ed8;
  --danger: #ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --card:#f8fafc;
    --text:#0f172a;
    --muted:#475569;
    --border: rgba(15,23,42,.12);
    --link:#2563eb;
    --linkHover:#1d4ed8;
    --btn:#2563eb;
    --btnHover:#1d4ed8;
    --shadow: 0 10px 30px rgba(15,23,42,.10);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--linkHover); text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:24px 16px 48px}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background: rgba(17,26,45,.35);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:26px; height:26px; border-radius:6px}
.brand strong{font-weight:800; letter-spacing:-.01em}
.nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(255,255,255,.04);
  color: inherit;
}
.pill:hover{background: rgba(255,255,255,.07); text-decoration:none}
.hero{padding:22px 0 12px}
.hero h1{margin:0 0 6px; font-size:28px; letter-spacing:-.02em}
.hero p{margin:0; color:var(--muted)}
.grid{display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:14px; margin-top:16px}
@media (min-width: 720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width: 1020px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{
  border:1px solid var(--border);
  border-radius:16px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.cardHeader{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px 10px;
}
.logo{
  width:40px;
  height:40px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  overflow:hidden;
}
.logo img{max-width:70%; max-height:70%}
.cardTitle{flex:1; min-width:0}
.cardTitle h2{margin:0; font-size:16px}
.meta{margin:2px 0 0; color:var(--muted); font-size:13px}
.cardBody{padding:0 14px 14px}
details{
  border-top:1px solid var(--border);
}
summary{
  cursor:pointer;
  list-style:none;
  padding:12px 14px;
  font-weight:700;
}
summary::-webkit-details-marker{display:none}
.files{display:flex; flex-direction:column; gap:10px; padding:0 14px 14px}
.file{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,.03);
}
.fileGrid{display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:start}
.thumb{
  width:84px;
  aspect-ratio:3/4;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
}
.coverPreview{
  width:min(280px, 100%);
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  margin:0 0 14px;
}
@media (max-width: 520px){.fileGrid{grid-template-columns:64px 1fr}.thumb{width:64px}}
.fileTitle{font-weight:700; margin:0 0 4px}
.fileMeta{margin:0 0 10px; font-size:13px; color:var(--muted)}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: inherit;
  font-weight:700;
}
.btn:hover{background: rgba(255,255,255,.07); text-decoration:none}
.btnPrimary{
  background: var(--btn);
  border-color: rgba(0,0,0,.0);
  color: #fff;
}
.btnPrimary:hover{background: var(--btnHover)}
.footer{margin-top:28px; color:var(--muted); font-size:13px}