*{box-sizing:border-box}body{margin:0;background:#17191c;color:#e7e9ed;font:14px system-ui}header{height:62px;background:#111316;border-bottom:1px solid #30343a;display:flex;align-items:center;gap:12px;padding:0 18px;position:sticky;top:0;z-index:3}header b{font-size:20px}header b span{color:#8eb7ff}form{flex:1;max-width:800px;display:flex}input{background:#202329;border:1px solid #3b4048;color:#fff;border-radius:7px;padding:11px;outline:0}form input{flex:1}button{background:#292d34;color:#eee;border:1px solid #40454e;border-radius:7px;padding:9px 13px;cursor:pointer}main{max-width:1500px;margin:auto;padding:18px}.bar{display:flex;justify-content:space-between}.bar h2{margin:0}.bar small,#empty{color:#9199a5}#popular{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.tag{padding:5px 8px}#grid{columns:5 220px;column-gap:10px}.card{break-inside:avoid;background:#202328;border:1px solid #2d3138;border-radius:6px;overflow:hidden;margin-bottom:10px}.card img{width:100%;display:block;cursor:pointer}.foot{padding:7px;color:#aeb6c2;font-size:11px}.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;padding:18px;z-index:5}.modal[hidden]{display:none}.box{width:min(650px,100%);background:#202328;border:1px solid #3d424b;border-radius:10px;padding:22px;position:relative}.x{position:absolute;right:10px;top:7px;background:none;border:0;font-size:28px}.drop{height:150px;border:2px dashed #4a5059;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#a0a8b3}.drop input{display:none}.box input:not([type=file]){width:100%;margin:12px 0}.box>button:last-child{width:100%;background:#4778ba}.box img{width:110px;height:110px;object-fit:cover;margin:10px 8px 0 0;border-radius:5px}@media(max-width:900px){#grid{columns:3 170px}}@media(max-width:600px){#grid{columns:2 140px}header{padding:0 8px}header b{font-size:17px}}