:root { color-scheme: light; --bg:#f7f7f4; --text:#1f2933; --muted:#65727f; --line:#d9ded8; --panel:#ffffff; --accent:#126c5d; --dark:#101418; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:2; }
h1 { font-size:20px; margin:0; letter-spacing:0; }
.stats { display:flex; gap:10px; color:var(--muted); white-space:nowrap; }
.layout { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 65px); }
.nav { padding:18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.nav a, .button, button, .actions a { color:var(--text); border:1px solid var(--line); background:#fff; border-radius:6px; padding:8px 10px; text-decoration:none; min-height:36px; }
.content { min-width:0; padding:18px; }
.filters { display:grid; grid-template-columns:repeat(8, minmax(110px, 1fr)); gap:8px; align-items:center; margin-bottom:12px; }
input, select { width:100%; min-height:36px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--text); padding:8px; }
.preview-toggle { display:flex; gap:16px; margin:10px 0 16px; }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.asset-list { display:grid; gap:10px; }
.asset-list .asset-card { grid-template-columns:96px 1fr; }
.asset-card { background:var(--panel); border:1px solid var(--line); border-radius:8px; display:grid; grid-template-rows:auto 1fr; overflow:hidden; min-width:0; }
.preview { height:140px; display:grid; place-items:center; color:#111; background:#fff; border-bottom:1px solid var(--line); }
.preview.dark { background:var(--dark); color:#fff; }
.preview img { width:64px; height:64px; object-fit:contain; color:currentColor; }
.meta { padding:12px; min-width:0; }
.meta h2 { font-size:16px; margin:0 0 4px; overflow-wrap:anywhere; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.trunc { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
dl { display:grid; grid-template-columns:90px minmax(0,1fr); gap:4px 8px; margin:10px 0; font-size:13px; }
dt { color:var(--muted); }
dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.actions { display:flex; flex-wrap:wrap; gap:6px; }
.actions button, .actions a { font-size:12px; min-height:32px; padding:6px 8px; }
.upload { margin-top:24px; border-top:1px solid var(--line); padding-top:18px; }
.upload form { display:grid; grid-template-columns:repeat(4, minmax(130px,1fr)); gap:8px; }
@media (max-width: 900px) {
  .layout { grid-template-columns:1fr; }
  .nav { border-right:0; border-bottom:1px solid var(--line); flex-direction:row; overflow:auto; }
  .filters, .upload form { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 430px) {
  .topbar { align-items:flex-start; flex-direction:column; padding:14px; }
  h1 { font-size:17px; }
  .content { padding:12px; }
  .filters, .upload form { grid-template-columns:1fr; }
  .asset-grid { grid-template-columns:1fr; }
  .asset-card { border-radius:6px; }
  .preview { height:112px; }
}