*{margin:0;padding:0;box-sizing:border-box}body{font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#f5f5f5 0,#e0e0e0 100%);min-height:100vh;overflow:hidden}.preview-container{display:flex;flex-direction:column;height:100vh}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:rgba(255,255,255,.98);box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:100;flex-shrink:0}.preview-header__left{display:flex;align-items:center;gap:1rem}.preview-logo{display:flex;align-items:center}.preview-logo img{height:40px;width:auto}.preview-header__divider{width:1px;height:30px;background:#ddd}.preview-header__text{font-size:1rem;font-weight:600;color:#333;white-space:nowrap}.preview-header__right{display:flex;align-items:center;gap:1rem}.custom-group,.device-type-group,.fit-group,.orientation-group{display:flex;gap:.5rem;background:#f5f5f5;padding:.25rem;border-radius:8px}.custom-toggle,.device-toggle,.fit-toggle,.orientation-toggle{padding:.75rem;background:0 0;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;color:#666;white-space:nowrap;position:relative}.custom-toggle:hover,.device-toggle:hover,.fit-toggle:hover,.orientation-toggle:hover{background:#e0e0e0;color:#333}.custom-toggle.active,.device-toggle.active,.fit-toggle.active,.orientation-toggle.active{background:#667eea;border-color:#667eea;color:#fff}.custom-toggle svg,.device-toggle svg,.fit-toggle svg,.orientation-toggle svg{display:block;flex-shrink:0}.custom-toggle__text,.fit-toggle__text{font-size:.875rem;font-weight:600}.preview-content{flex:1;display:flex;align-items:center;justify-content:center;padding:0;overflow:auto;position:relative}.viewport-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:0;width:100%;height:100%;max-width:100%;max-height:100%}.viewport-frame{background:#fff;border-radius:0;box-shadow:0 10px 40px rgba(0,0,0,.2);overflow:hidden;transition:all .4s cubic-bezier(.4, 0, .2, 1);position:relative;flex-shrink:1;flex-grow:1}.viewport-frame.mobile{margin:1rem;border-radius:.5rem}.viewport-frame.mobile.portrait{width:375px;height:812px}.viewport-frame.mobile.landscape{width:812px;height:375px}.viewport-frame.tablet{margin:1rem;border-radius:.5rem}.viewport-frame.tablet.portrait{width:768px;height:1024px}.viewport-frame.tablet.landscape{width:1024px;height:768px}.viewport-frame.desktop{width:100%;height:100%;max-width:none;max-height:none;border-radius:0;box-shadow:0 10px 40px rgba(0,0,0,.2)}.viewport-frame.fit-to-window{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border-radius:0!important;margin:0!important;box-shadow:0 10px 40px rgba(0,0,0,.2)!important}.viewport-frame iframe{width:100%;height:100%;border:none;display:block}.viewport-info{background:rgba(255,255,255,.95);padding:.5rem 1.5rem;border-radius:20px;box-shadow:0 2px 10px rgba(0,0,0,.1);font-size:.875rem;font-weight:600;color:#667eea;font-variant-numeric:tabular-nums;flex-shrink:0}.preview-footer{padding:1rem 2rem;background:rgba(255,255,255,.98);display:flex;justify-content:space-between;align-items:center;box-shadow:0 -2px 10px rgba(0,0,0,.1);flex-shrink:0}.preview-footer span{font-size:.875rem;color:#666}.preview-footer a{font-size:.875rem;color:#667eea;text-decoration:none;font-weight:600;transition:color .3s ease}.preview-footer a:hover{color:#764ba2}@media (max-width:1024px){.preview-content{padding:1rem}}@media (max-width:768px){.preview-header{flex-direction:column;gap:1rem;padding:1rem}.preview-header__left{width:100%;justify-content:center}.preview-header__right{width:100%;justify-content:center;flex-wrap:wrap}.preview-header__text{font-size:.875rem}.preview-logo img{height:30px}.device-toggle,.fit-toggle,.orientation-toggle{padding:.5rem}.device-toggle svg,.fit-toggle svg,.orientation-toggle svg{width:16px;height:16px}.fit-toggle__text{display:none}.preview-content{padding:.5rem}.viewport-frame:not(.desktop):not(.fit-to-window){transform:scale(.8);transform-origin:center center}.viewport-frame.tablet.landscape:not(.fit-to-window),.viewport-frame.tablet.portrait:not(.fit-to-window){transform:scale(.7)}.preview-footer{padding:.75rem 1rem;flex-direction:column;gap:.5rem;text-align:center}.preview-footer a,.preview-footer span{font-size:.75rem}}@media (max-width:480px){.preview-header__divider{display:none}.device-type-group,.fit-group,.orientation-group{gap:.25rem;padding:.125rem}.viewport-frame.mobile.landscape:not(.fit-to-window),.viewport-frame.mobile.portrait:not(.fit-to-window){transform:scale(.6)}.viewport-frame.tablet.landscape:not(.fit-to-window),.viewport-frame.tablet.portrait:not(.fit-to-window){transform:scale(.5)}}.viewport-frame.loading{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.viewport-frame,.viewport-info{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.tooltip::before{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:.5rem .75rem;background:rgba(0,0,0,.9);color:#fff;font-size:.75rem;font-weight:500;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1000}.tooltip::after{content:'';position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid rgba(0,0,0,.9);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1000}.tooltip:hover::after,.tooltip:hover::before{opacity:1}@media (max-width:768px){.tooltip::after,.tooltip::before{display:none}}.custom-viewport-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center;padding:1rem;opacity:0;transition:opacity .3s ease}.custom-viewport-panel.active{display:flex;opacity:1}.custom-viewport-panel__content{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-width:600px;width:100%;animation:slideDown .3s ease}@keyframes slideDown{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.custom-viewport-panel__header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid #e0e0e0}.custom-viewport-panel__header h3{font-size:1.25rem;font-weight:600;color:#333;margin:0}.custom-viewport-panel__close{background:0 0;border:none;padding:.5rem;cursor:pointer;color:#666;border-radius:6px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.custom-viewport-panel__close:hover{background:#f5f5f5;color:#333}.custom-viewport-panel__body{padding:2rem}.custom-viewport-inputs{display:flex;align-items:flex-end;gap:1rem;margin-bottom:2rem}.custom-input-group{flex:1;display:flex;flex-direction:column;gap:.5rem}.custom-input-group label{font-size:.875rem;font-weight:600;color:#666}.custom-input-group input{padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;font-weight:600;color:#333;transition:all .2s ease;font-family:Montserrat,monospace}.custom-input-group input:focus{outline:0;border-color:#667eea;background:#f8f9ff}.custom-input-separator{font-size:1.5rem;font-weight:600;color:#999;padding-bottom:.75rem}.custom-viewport-presets{margin-bottom:2rem}.presets-label{font-size:.875rem;font-weight:600;color:#666;margin-bottom:.75rem}.presets-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}.preset-btn{padding:.75rem 1rem;background:#f5f5f5;border:2px solid #e0e0e0;border-radius:8px;font-size:.8125rem;font-weight:600;color:#666;cursor:pointer;transition:all .2s ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.preset-btn:hover{background:#667eea;border-color:#667eea;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(102,126,234,.3)}.custom-viewport-actions{display:flex;gap:.75rem}.btn-apply,.btn-swap{padding:.875rem 1.5rem;border:none;border-radius:8px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-apply{flex:1;background:#667eea;color:#fff}.btn-apply:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,.4)}.btn-swap{background:#f5f5f5;color:#666;border:2px solid #e0e0e0}.btn-swap:hover{background:#e0e0e0;border-color:#d0d0d0;color:#333}.btn-swap svg{width:16px;height:16px}.viewport-frame.custom{transition:all .4s cubic-bezier(.4, 0, .2, 1)}@media (max-width:768px){.custom-viewport-panel__content{max-width:calc(100% - 2rem)}.custom-viewport-panel__header{padding:1rem 1.5rem}.custom-viewport-panel__header h3{font-size:1rem}.custom-viewport-panel__body{padding:1.5rem}.custom-viewport-inputs{margin-bottom:1.5rem}.presets-buttons{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.preset-btn{padding:.625rem .75rem;font-size:.75rem}.custom-toggle__text,.fit-toggle__text{display:none}}@media (max-width:480px){.custom-viewport-inputs{flex-direction:column;align-items:stretch}.custom-input-separator{display:none}.presets-buttons{grid-template-columns:repeat(2,1fr)}.custom-viewport-actions{flex-direction:column}.btn-swap{order:2}}.explore-group{display:flex}.explore-toggle{padding:.75rem 1rem;background-color:#02225a;color:#fff;font-size:1rem;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;white-space:nowrap}.explore-toggle:hover{background-color:#1e40af}.explore-toggle__text{font-size:.875rem;font-weight:600}.drawer{display:none}.drawer__overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;z-index:200;opacity:0;transition:opacity .3s;will-change:opacity;background-color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drawer__header{padding:1.5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd}.drawer__title a{font-size:.85rem}.drawer__close{margin:0;padding:0;border:none;background-color:transparent;cursor:pointer;background-image:url("data:image/svg+xml,%0A%3Csvg width='15px' height='16px' viewBox='0 0 15 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='2.-Menu' transform='translate(-15.000000, -13.000000)' stroke='%23000000'%3E%3Cg id='Group' transform='translate(15.000000, 13.521000)'%3E%3Cpath d='M0,0.479000129 L15,14.2971819' id='Path-3'%3E%3C/path%3E%3Cpath d='M0,14.7761821 L15,-1.24344979e-14' id='Path-3'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");width:16px;height:15px;flex-shrink:0;margin-left:1rem}.drawer__wrapper{position:fixed;top:0;right:0;bottom:0;height:100%;width:100%;max-width:45vw;z-index:9999;overflow:auto;transition:transform .3s;will-change:transform;background-color:#fff;display:flex;flex-direction:column;-webkit-transform:translate3d(103%,0,0);transform:translate3d(103%,0,0);-webkit-overflow-scrolling:touch;box-shadow:0 2px 6px #777}.drawer__content{position:relative;overflow-x:hidden;overflow-y:auto;height:100%;flex-grow:1;padding:1.5rem}.drawer__content__inner{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;grid-column-gap:16px;grid-row-gap:16px}.drawer__content__inner .drawer__content__inner__item{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#f5f5f5;transition:background-color .3s;cursor:pointer;height:100%;width:100%;box-shadow:0 1px 5px #ccc;cursor:pointer;position:relative;overflow:hidden;text-decoration:none}.drawer__content__inner .drawer__content__inner__item.active,.drawer__content__inner .drawer__content__inner__item:hover{background-color:#fff;box-shadow:0 1px 5px #ccc;transition:all .3s ease-in-out}.drawer__content__inner .drawer__content__inner__item .template__item{position:relative;overflow:hidden;z-index:1}.drawer__content__inner .drawer__content__inner__item .template__item::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background-color:#8a9fc3;transition:left .3s ease;z-index:-1}.drawer__content__inner .drawer__content__inner__item:hover .template__item{color:#fff}.drawer__content__inner .drawer__content__inner__item:hover .template__item::before{left:0}.drawer__content__inner .drawer__content__inner__item.active{border:2px solid #02225a;position:relative}#mobile-template-list .template-item.active .template-overlay,.drawer__content__inner .drawer__content__inner__item.active .template__overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(2,34,90,.25);width:100%;height:100%;z-index:1}#mobile-template-list .template-item.active .template-overlay:before,.drawer__content__inner .drawer__content__inner__item.active .template__overlay:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center center}#mobile-template-list .template-item.active .template-name,.drawer__content__inner .drawer__content__inner__item.active .template__item{background-color:#02225a;color:#fff}.drawer__content__inner .drawer__content__inner__item .template__image{width:100%;height:11.5rem}.drawer__content__inner .drawer__content__inner__item .template__item{width:100%;height:3rem;background-color:#fff;display:flex;justify-content:center;align-items:center;color:#222;font-size:1rem}.drawer--left .drawer__wrapper{left:0;right:auto;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.drawer.is-active{display:block}.drawer.is-visible .drawer__wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.drawer.is-visible .drawer__overlay{opacity:.5}#loading{display:flex;align-items:center;justify-content:center;padding:20px;color:#666;font-size:.875rem}.bottom-sheet{display:none;position:fixed;left:0;right:0;bottom:0;width:100%;z-index:1000;visibility:hidden}.bottom-sheet__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1001;opacity:0;transition:opacity .3s ease}.bottom-sheet__content{position:fixed;left:0;right:0;bottom:-100%;width:100%;background:#fff;border-radius:16px 16px 0 0;padding:20px;z-index:1002;transition:bottom .3s cubic-bezier(.4, 0, .2, 1);max-height:85vh;overflow-y:auto}.bottom-sheet__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.bottom-sheet__body{-webkit-overflow-scrolling:touch}.bottom-sheet__close{background:0 0;border:none;font-size:24px;cursor:pointer;padding:0;color:#02225a}.bottom-sheet.active{display:block;visibility:visible}.bottom-sheet.active .bottom-sheet__overlay{opacity:1}.bottom-sheet.active .bottom-sheet__content{bottom:0}#mobile-template-list{display:grid;grid-template-columns:1fr;gap:16px;padding:0 0 80px 0}#mobile-template-list .template-item{padding:16px;background:#f5f5f5;height:250px;width:100%;cursor:pointer;transition:all .2s ease;position:relative}#mobile-template-list .template-item .template-name{position:absolute;bottom:0;left:0;right:0;background-color:#fff;color:#222;font-size:1rem;padding:1rem 1.5rem;text-align:center;box-shadow:0 1px 5px #ccc}#mobile-template-list .template-item:hover{background:#e5e5e5;transform:translateY(-2px)}#mobile-template-list .template-item.active{background:#8a9fc3;color:#fff}#mobile-loading{display:flex;align-items:center;justify-content:center;padding:20px;color:#666}.spinner{margin-left:10px;width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #02225a;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.mobile-explore-group{display:none;position:fixed;bottom:5rem;left:0;right:0;padding:1rem;background:rgba(255,255,255,.98);box-shadow:0 -2px 10px rgba(0,0,0,.1);z-index:100}.mobile-explore-toggle{width:100%;padding:1rem;background-color:#02225a;color:#fff;font-size:.875rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.mobile-explore-toggle:hover{background-color:#1e40af}@media (min-width:768px){.bottom-sheet{display:none!important}.mobile-explore-group{display:none!important}}@media (max-width:767px){.drawer__wrapper{max-width:100vw}.explore-toggle__text{font-size:.75rem}.explore-toggle{padding:.625rem .875rem}}@media (max-width:480px){.explore-group{display:none}.preview-header__divider#divider-explore{display:none}.mobile-explore-group{display:block}}