:root{--gap: 12px}body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;margin:0;background:#fafafa;color:#111}.app{max-width:1100px;margin:0 auto;padding:18px}header h1{margin:0 0 12px;font-size:20px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--gap)}.item{background:#fff;border:1px solid #eee;padding:6px;display:flex;align-items:center;justify-content:center;flex-direction:column}.item img{width:100%;height:200px;object-fit:cover;display:block;border-radius:2px}.filename{font-size:12px;color:#444;margin-top:6px;word-break:break-all}.dir-card{border:1px solid #e2e2e2;background:#fff;padding:6px;text-align:left;display:flex;gap:8px;align-items:center;cursor:pointer}.dir-thumb img{width:80px;height:80px;object-fit:cover}.dir-meta{font-size:13px}.dir-meta .count{color:#666;font-size:12px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{max-width:95%;max-height:95%}.modal-content img{max-width:100%;max-height:100%;display:block}.modal-close{position:absolute;top:16px;right:16px;background:#fff;border-radius:4px;padding:6px 8px;cursor:pointer}