: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;text-decoration:none;color:inherit}.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:98vh;box-sizing:border-box;padding:8px;display:flex;align-items:center;justify-content:center;overflow:auto}.modal-content img{max-width:100%;max-height:100%;height:auto;display:block;margin:0 auto}.modal-close{position:absolute;top:16px;right:16px;background:#fff;border-radius:4px;padding:6px 8px;cursor:pointer}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:#fff3;color:#fff;border:none;font-size:32px;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;border-radius:4px}.nav-btn:hover{background:#fff6}.nav-prev{left:16px}.nav-next{right:16px}