html,body{height:100%;margin:0}.page-wrapper{flex-direction:column;min-height:100vh;display:flex}.content{flex:1}.work-page{--work-image-ratio:1745 / 980;--work-grid-max-width:min(98vw, 2200px);--work-grid-gap:1.2rem;color:#111;background:#fff;min-height:100vh;padding-bottom:2rem}.add-btn-wrapper{justify-content:center;margin-bottom:3.5rem;display:flex}.add-btn{color:#222;cursor:pointer;text-align:center;background-color:#0000;border:2px solid #222;border-radius:.5rem;width:200px;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;text-decoration:none;transition:all .2s ease-in-out}.add-btn:hover{color:#fff;background-color:#222}.list-container{width:100%;max-width:var(--work-grid-max-width);flex-direction:column;gap:1.5rem;margin:0 auto;padding:0 1vw 6rem;display:flex}.category-bar{z-index:1;background-color:#fff;flex-wrap:wrap;align-items:center;gap:10px;width:100%;padding:1.4rem 0 1.3rem;display:flex;position:sticky;top:0}.category-btn{color:#444;cursor:pointer;background:#fff;border:1px solid #d7d7d7;border-radius:30px;padding:.55rem 1.5rem;font-size:1rem;font-weight:500;transition:all .2s ease-in-out}.category-btn:hover{color:#111;border-color:#9d9d9d}.category-btn.active{color:#fff;background-color:#111;border-color:#111}.work-grid{gap:var(--work-grid-gap);grid-template-columns:repeat(4,minmax(0,1fr));width:100%;display:grid}.work-tile{cursor:pointer;background:#fff;border:1px solid #d9d9d9;border-radius:14px;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s;display:flex;overflow:hidden}.work-tile:hover{border-color:#8f8f8f;transform:translateY(-4px);box-shadow:0 12px 30px #0000001f}.work-tile-media{width:100%;aspect-ratio:var(--work-image-ratio);background-color:#f5f5f5;position:relative;overflow:hidden}.work-tile-image{object-fit:cover;width:100%;height:100%;transition:transform .35s;display:block}.work-tile-media:hover .work-tile-image{transform:scale(1.06)}.work-tile-meta{flex-direction:column;gap:.75rem;padding:1rem;display:flex}.info-top{color:#7d7d7d;justify-content:space-between;font-size:.97rem;display:flex}.title{color:#111;text-align:left;margin:0;font-size:1.35rem;font-weight:500}.action-btns{justify-content:flex-end;margin-top:.25rem;display:flex}.edit-btn{color:#4a90e2;cursor:pointer;background:0 0;border:1px solid #4a90e2;border-radius:6px;padding:6px 12px;font-size:.9rem;transition:all .2s}.edit-btn:hover{color:#fff;background-color:#4a90e2}.work-tile-skeleton{background:#fff;border:1px solid #e4e4e4;border-radius:14px;flex-direction:column;display:flex;overflow:hidden}.work-tile-skeleton-media{width:100%;aspect-ratio:var(--work-image-ratio);background:linear-gradient(90deg,#f0f0f0 25%,#f9f9f9 50%,#f0f0f0 75%) 0 0/200% 100%;animation:1.2s linear infinite shimmer}.work-tile-skeleton-meta{flex-direction:column;gap:.7rem;padding:1rem;display:flex}.work-skeleton-line{background:linear-gradient(90deg,#f0f0f0 25%,#f8f8f8 50%,#f0f0f0 75%) 0 0/200% 100%;border-radius:8px;width:100%;height:18px;animation:1.2s linear infinite shimmer}.work-skeleton-line-short{width:72%}.work-empty,.work-error{color:#4d4d4d;text-align:center;letter-spacing:.01rem;width:100%;margin:0 auto;padding:2.5rem .5rem;font-size:1rem}.work-error{color:#8a1f1f}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media (width<=1400px){.work-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.category-bar{width:100%;padding-left:0;padding-right:0}}@media (width<=1280px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}}@media (width<=900px){.category-bar{justify-content:center;gap:8px;margin-bottom:.8rem;padding:1rem 0}.category-btn{border-radius:20px;padding:.4rem 1.1rem;font-size:.9rem}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:100%}.title{font-size:1.15rem}}@media (width<=768px){.work-page{--work-image-ratio:1745 / 980}.category-bar{width:100%;padding:1rem 0}.work-grid{grid-template-columns:1fr;width:100%}.add-btn-wrapper{margin-bottom:2rem}.info-top{gap:.3rem;font-size:.9rem}.edit-btn{padding:4px 8px;font-size:.8rem}}