:root{--preview-bg:rgba(15,23,42,.85);--preview-border:hsla(0,0%,100%,.12);--preview-text-primary:#f8fafc;--preview-text-secondary:#94a3b8;--preview-accent:#10b981;--preview-accent-glow:rgba(16,185,129,.4);--preview-active-bg:hsla(0,0%,100%,.1);--preview-hover-bg:hsla(0,0%,100%,.06)}.preview-bar-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:999999;display:flex;align-items:center;gap:16px;background:var(--preview-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--preview-border);box-shadow:0 12px 40px -8px rgba(0,0,0,.6),0 0 20px rgba(0,0,0,.2);padding:8px 16px;border-radius:9999px;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .4s cubic-bezier(.16,1,.3,1);animation:previewBarSlideIn .6s cubic-bezier(.16,1,.3,1) forwards}.preview-bar-container,.preview-bar-container *{font-family:Segoe UI,system-ui,-apple-system,sans-serif!important}.preview-bar-container:hover{border-color:rgba(16,185,129,.3);box-shadow:0 16px 48px -8px rgba(0,0,0,.7),0 0 25px rgba(16,185,129,.15);transform:translateX(-50%) translateY(-2px)}@keyframes previewBarSlideIn{0%{transform:translateX(-50%) translateY(100px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}.preview-logo-badge{display:flex;align-items:center;gap:8px;padding-right:12px;border-right:1px solid hsla(0,0%,100%,.15);flex-shrink:0}.preview-logo-badge svg{width:20px;height:20px;color:var(--preview-accent);filter:drop-shadow(0 0 8px var(--preview-accent-glow));animation:previewPulse 2s ease-in-out infinite}@keyframes previewPulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.preview-logo-badge span{font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--preview-text-primary);background:linear-gradient(135deg,#fff 30%,var(--preview-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.preview-links-wrapper{display:flex;align-items:center;gap:6px}.preview-nav-link{font-weight:550;text-decoration:none!important;color:var(--preview-text-secondary);padding:6px 14px;border-radius:9999px;transition:all .25s cubic-bezier(.16,1,.3,1);border:1px solid transparent;display:inline-flex;align-items:center}.preview-nav-link:hover{color:var(--preview-text-primary);background:var(--preview-hover-bg)}.preview-nav-link.active{color:var(--preview-text-primary);background:var(--preview-active-bg);border-color:rgba(16,185,129,.4);box-shadow:inset 0 1px 1px hsla(0,0%,100%,.1),0 0 10px rgba(16,185,129,.1)}.preview-dropdown-container{position:relative;display:inline-block}.preview-dropdown-btn{background:transparent;border:1px solid transparent;font-weight:550;color:var(--preview-text-secondary);padding:6px 14px;border-radius:9999px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .25s cubic-bezier(.16,1,.3,1);outline:none!important}.preview-dropdown-btn:hover{color:var(--preview-text-primary);background:var(--preview-hover-bg)}.preview-dropdown-btn.active{color:var(--preview-text-primary);background:var(--preview-active-bg);border-color:rgba(16,185,129,.2)}.preview-dropdown-menu{position:absolute;bottom:calc(100% + 12px);right:0;width:180px;background:rgba(15,23,42,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--preview-border);border-radius:12px;padding:6px;box-shadow:0 10px 25px -5px rgba(0,0,0,.5),0 0 15px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(10px) scale(.95);transform-origin:bottom right;transition:all .3s cubic-bezier(.16,1,.3,1);z-index:1000000}.preview-dropdown-container:focus-within .preview-dropdown-menu,.preview-dropdown-container:hover .preview-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.preview-dropdown-item{display:block;font-size:13px;font-weight:500;text-decoration:none!important;color:var(--preview-text-secondary);padding:8px 12px;border-radius:6px;transition:all .2s ease}.preview-dropdown-item:hover{color:var(--preview-text-primary);background:var(--preview-hover-bg)}.preview-dropdown-item.active{color:var(--preview-accent);font-weight:600;background:rgba(16,185,129,.08)}.preview-dropdown-btn svg{transition:transform .3s ease}.preview-dropdown-container:hover .preview-dropdown-btn svg{transform:rotate(180deg)}@media (max-width:640px){.preview-bar-container{position:fixed;bottom:0;left:0;right:0;transform:none;border-radius:16px 16px 0 0;border-bottom:none;padding:8px 12px;gap:8px;min-width:0;max-width:100%;height:auto;overflow:visible;z-index:999999;transition:box-shadow .4s ease,border-color .4s ease}.preview-bar-container:hover{transform:none;border-color:rgba(16,185,129,.3)}@keyframes previewBarSlideIn{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}.preview-logo-badge{flex-shrink:0;gap:6px;padding-right:8px}.preview-logo-badge svg{width:18px;height:18px}.preview-logo-badge span{white-space:nowrap}.preview-links-wrapper{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;flex:1;min-width:0;gap:4px;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}.preview-links-wrapper::-webkit-scrollbar{display:none}.preview-dropdown-container,.preview-nav-link{flex-shrink:0;touch-action:manipulation}.preview-nav-link{padding:6px 10px;white-space:nowrap}.preview-nav-link:active{background:var(--preview-active-bg)}.preview-dropdown-container{position:relative;z-index:1000001}.preview-dropdown-btn{padding:6px 10px;white-space:nowrap;touch-action:manipulation}.preview-dropdown-btn:active{background:var(--preview-active-bg);color:var(--preview-text-primary)}.preview-dropdown-menu{position:fixed;bottom:auto;right:12px;left:auto;top:auto;width:160px;max-height:calc(100vh - 120px);min-height:auto;background:rgba(15,23,42,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.12);border-radius:12px;padding:6px;box-shadow:0 15px 35px -5px rgba(0,0,0,.6),0 0 20px rgba(0,0,0,.3);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.95);transform-origin:bottom right;transition:all .3s cubic-bezier(.16,1,.3,1);z-index:1000000;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:hsla(0,0%,100%,.2) transparent}.preview-dropdown-menu::-webkit-scrollbar{width:4px}.preview-dropdown-menu::-webkit-scrollbar-track{background:transparent}.preview-dropdown-menu::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.2);border-radius:2px}.preview-dropdown-btn:focus~.preview-dropdown-menu,.preview-dropdown-container.show .preview-dropdown-menu,.preview-dropdown-container:focus-within .preview-dropdown-menu,.preview-dropdown-container:hover .preview-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-8px) scale(1);bottom:60px}.preview-dropdown-container:active .preview-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-8px) scale(1);bottom:60px}.preview-dropdown-item{display:block;font-weight:500;text-decoration:none!important;color:var(--preview-text-secondary);padding:8px 12px;border-radius:6px;transition:all .2s ease;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation}.preview-dropdown-item:active,.preview-dropdown-item:focus{color:var(--preview-text-primary);background:var(--preview-active-bg);outline:none}.preview-dropdown-item:hover{color:var(--preview-text-primary);background:var(--preview-hover-bg)}.preview-dropdown-item.active{color:var(--preview-accent);font-weight:600;background:rgba(16,185,129,.1)}.preview-dropdown-btn svg{transition:transform .3s ease}.preview-dropdown-container.show .preview-dropdown-btn svg,.preview-dropdown-container:active .preview-dropdown-btn svg,.preview-dropdown-container:focus-within .preview-dropdown-btn svg,.preview-dropdown-container:hover .preview-dropdown-btn svg{transform:rotate(180deg)}}.preview-toolbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:2147483000;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(17,20,28,.9);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);box-shadow:0 10px 30px -8px rgba(0,0,0,.45),inset 0 0 0 1px hsla(0,0%,100%,.08)}.preview-toolbar,.preview-toolbar a{font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.preview-toolbar a{outline:none}.preview-toolbar a:focus-visible{box-shadow:0 0 0 2px hsla(0,0%,100%,.55)}.preview-toolbar-devices{display:flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:hsla(0,0%,100%,.06)}.preview-toolbar-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:500;line-height:1;color:hsla(0,0%,100%,.6);text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease}.preview-toolbar-btn:hover{color:#fff}.preview-toolbar-btn.active{background:hsla(0,0%,100%,.16);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}.preview-toolbar-sep{width:1px;height:18px;margin:0 4px;background:hsla(0,0%,100%,.14)}.preview-toolbar-store{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 11px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1;color:#fff;text-decoration:none;white-space:nowrap;transition:background .15s ease}.preview-toolbar-store:hover{background:hsla(0,0%,100%,.1)}.preview-toolbar-store-arrow{opacity:.6;transition:transform .15s ease,opacity .15s ease}.preview-toolbar-store:hover .preview-toolbar-store-arrow{opacity:1;transform:translate(1px,-1px)}.preview-toolbar-exit{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:2px;border-radius:50%;background:hsla(0,0%,100%,.1);color:#fff;text-decoration:none;transition:background .15s ease}.preview-toolbar-exit:hover{background:hsla(0,0%,100%,.2)}@media (max-width:720px){.preview-toolbar{top:10px}.preview-toolbar-btn span,.preview-toolbar-store span,.preview-toolbar-store-arrow{display:none}.preview-toolbar-btn,.preview-toolbar-store{padding:0 10px}}.preview-device-stage{min-height:100vh;padding:28px 16px 120px;background:#0f1115;display:flex;flex-direction:column;align-items:center;gap:10px}.preview-device-shell{max-width:100%;max-height:none;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px hsla(0,0%,100%,.08)}.preview-device-mobile{border-radius:28px}.preview-device-viewport{display:block;width:100%;height:100%;border:0}.preview-device-caption{margin:0;font:500 11px/1 Segoe UI,system-ui,sans-serif;letter-spacing:.04em;color:hsla(0,0%,100%,.45)}