:root{--previewer-accent:#e4657f;--previewer-accent-hover:#d64d6a;--previewer-background:#f0f0f0;--previewer-background-dark:#e0e0e0;--previewer-border:#e0e0e0;--previewer-text:#333;--previewer-text-light:#666;--previewer-overlay:rgba(0,0,0,0.9);--previewer-shadow:rgba(0,0,0,0.1)}body{touch-action:manipulation}.previewer-wrapper{display:flex;align-items:stretch;margin:0 auto;touch-action:manipulation;height:100%}.previewer-wrapper button{touch-action:manipulation;padding:0}.previewer-main-navigation{flex-shrink:0;width:60px;display:flex;align-items:center;justify-content:center;background-color:transparent;border:0;cursor:pointer;transition:background-color .2s ease}.previewer-main-navigation-icon{width:48px;height:48px;fill:none;stroke:var(--previewer-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.previewer-main-navigation:hover .previewer-main-navigation-icon{stroke:var(--previewer-accent-hover)}.previewer-main-navigation:disabled{opacity:.3;cursor:not-allowed}.previewer-main-navigation:hover{background-color:transparent}.previewer-main-navigation:disabled .previewer-main-navigation-icon{stroke:var(--previewer-accent)}.previewer-container{flex:1;background-color:var(--previewer-background);overflow:hidden}.previewer-main{position:relative;height:calc(100% - 96px);cursor:pointer;overflow:hidden;padding:16px 0}.previewer-main-image{width:100%;height:100%;display:block;object-fit:contain}.previewer-zoom-hint{position:absolute;bottom:10px;right:10px;background-color:var(--previewer-accent);color:#fff;padding:6px 12px;font-size:12px;opacity:0;transition:opacity .3s ease;pointer-events:none}.previewer-main:hover .previewer-zoom-hint{opacity:1}.previewer-counter{position:absolute;top:10px;left:10px;background-color:rgba(0,0,0,0.6);color:#fff;padding:4px 10px;font-size:13px}.previewer-thumbnails-wrapper{position:relative;padding:8px;background-color:var(--previewer-background-dark);overflow:hidden}.previewer-thumbnails{display:flex;gap:8px;transition:transform .3s ease}.previewer-thumbnail{flex-shrink:0;width:80px;height:80px;border:1px solid transparent;overflow:hidden;cursor:pointer}.previewer-thumbnail:hover{border-color:var(--previewer-accent-hover)}.previewer-thumbnail.active{border-color:var(--previewer-accent);box-shadow:0 2px 8px rgba(228,101,127,0.3)}.previewer-thumbnail img{width:100%;height:100%;object-fit:contain;display:block}.previewer-lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--previewer-overlay);z-index:10000;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;touch-action:manipulation}.previewer-lightbox.visible{display:flex;opacity:1}.previewer-lightbox-content{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}.previewer-lightbox-image{max-width:100%;max-height:90vh;object-fit:contain;box-shadow:0 4px 30px rgba(0,0,0,0.5)}.previewer-lightbox-close{position:absolute;top:-40px;right:-40px;width:36px;height:36px;background-color:transparent;border:2px solid #fff;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}.previewer-lightbox-close:hover{background-color:var(--previewer-accent);border-color:var(--previewer-accent)}.previewer-lightbox-navigation{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background-color:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.5);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}.previewer-lightbox-navigation:hover{background-color:var(--previewer-accent);border-color:var(--previewer-accent)}.previewer-lightbox-navigation.previous{left:-70px}.previewer-lightbox-navigation.next{right:-70px}.previewer-lightbox-navigation:disabled{opacity:.3;cursor:not-allowed}.previewer-lightbox-navigation:disabled:hover{background-color:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.5)}.previewer-lightbox-thumbnails{position:absolute;bottom:-100px;left:50%;transform:translateX(-50%);display:flex;gap:8px;max-width:80vw;overflow-x:auto;padding:10px;scrollbar-width:none}.previewer-lightbox-thumbnails::-webkit-scrollbar{display:none}.previewer-lightbox-thumbnail{flex-shrink:0;width:60px;height:45px;border:2px solid transparent;overflow:hidden;cursor:pointer;opacity:.6;transition:opacity .2s ease,border-color .2s ease}.previewer-lightbox-thumbnail:hover{opacity:1}.previewer-lightbox-thumbnail.active{border-color:var(--previewer-accent);opacity:1}.previewer-lightbox-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.previewer-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:3px solid var(--previewer-border);border-top-color:var(--previewer-accent);border-radius:50%;animation:previewer-spin .8s linear infinite}@keyframes previewer-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@media(max-width:768px){.previewer-wrapper{max-width:100%}.previewer-main{padding:8px 0;height:calc(100% - 70px)}.previewer-main-navigation{width:30px}.previewer-main-navigation-icon{width:36px;height:36px}.previewer-thumbnail{width:60px;height:60px}.previewer-thumbnails-wrapper{padding:5px}.previewer-lightbox-close{right:0}.previewer-lightbox-navigation{width:40px;height:40px;font-size:16px}.previewer-lightbox-navigation.previous{left:0;top:auto;bottom:-65px}.previewer-lightbox-navigation.next{right:0;top:auto;bottom:-65px}.previewer-lightbox-thumbnails{bottom:20px}}