.container{min-height:100vh;background:#fff;display:flex;justify-content:center;align-items:center;padding:16px}.viewer{background:#fff;border-radius:16px;padding:20px;width:100%;max-width:520px;box-shadow:0 10px 30px #00000040;display:flex;flex-direction:column;align-items:center}.image-box{width:100%;aspect-ratio:4 / 3;background:#f2f2f2;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}.image-box img{width:100%;height:100%;object-fit:contain}.controls{margin-top:16px;display:flex;gap:12px}.controls button{padding:10px 18px;border-radius:10px;border:none;font-size:14px;cursor:pointer;background:#222;color:#fff;transition:background .2s,transform .1s}.controls button:hover:not(:disabled){background:#444;transform:translateY(-1px)}.controls button:disabled{opacity:.4;cursor:not-allowed}.counter{margin-top:14px;font-size:13px;color:#666}@media(max-width:480px){.controls{flex-direction:column;width:100%}.controls button{width:100%}}.category-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;justify-content:center}.category-bar button{padding:8px 16px;border-radius:50px;border:none;background:#222;color:#eee;font-weight:500;cursor:pointer;transition:all .2s ease}.category-bar button:hover{background:#555;transform:translateY(-2px)}.category-bar button.active{background:#4f46e5;color:#fff;box-shadow:0 4px 12px #4f46e566}