*,html,body,#root{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#f8fafc;color:#1e293b;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#root{width:100vw;height:100vh}.preview-page{display:flex;flex-direction:column;height:100vh;background:#f1f5f9}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:#fff;border-bottom:1px solid #e2e8f0}.preview-header-left{flex:1;display:flex;align-items:center}.preview-logo{height:28px;width:auto}.preview-logo-text{font-size:18px;font-weight:700;color:#6f55ff}.preview-header-center{flex:2;display:flex;justify-content:center}.preview-project-name{font-size:15px;font-weight:600;color:#1e293b;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.preview-header-right{flex:1;display:flex;justify-content:flex-end}.preview-device-switcher{display:flex;align-items:center;gap:4px;padding:4px;background:#f1f5f9;border-radius:10px}.preview-device-btn{display:flex;align-items:center;justify-content:center;width:40px;height:36px;border:none;background:transparent;border-radius:8px;cursor:pointer;color:#64748b;transition:all .2s}.preview-device-btn:hover{color:#1e293b;background:#e2e8f0}.preview-device-btn.active{background:#fff;color:#6f55ff;box-shadow:0 1px 3px #0000001a}.preview-main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}.preview-viewport-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}.preview-viewport{width:100%;height:100%;background:#fff;border-radius:8px;box-shadow:0 2px 12px #00000014;overflow:hidden;position:relative}.preview-viewport-device{border-radius:20px;border:6px solid #1e293b;box-shadow:0 8px 32px #00000026;max-height:100%}.preview-iframe{width:100%;height:100%;border:none;background:#fff;transition:opacity .3s ease}.preview-iframe-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:#64748b}.preview-footer-warning{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:#fef3c7;border-top:1px solid #fde68a;font-size:12px;color:#92400e}.preview-footer-warning svg{flex-shrink:0;color:#d97706}@media (max-width: 768px){.preview-main{padding:0}.preview-viewport{border-radius:0;box-shadow:none}.preview-footer-warning{font-size:11px;padding:6px 12px}.preview-footer-warning span{text-align:center}}.preview-loading-screen,.preview-error-screen{flex:1;display:flex;align-items:center;justify-content:center;background:#f8fafc}.preview-loading-content,.preview-error-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px}.preview-loading-spinner{margin-bottom:20px;color:#6f55ff}.preview-loading-content h2,.preview-error-content h2{font-size:20px;font-weight:600;color:#1e293b;margin-bottom:8px}.preview-loading-content p,.preview-error-content p{font-size:14px;color:#64748b}.preview-error-icon{width:80px;height:80px;background:#ef44441a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#ef4444}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}@media (max-width: 768px){.preview-header{padding:12px 16px;flex-wrap:wrap;gap:12px}.preview-header-left{order:1}.preview-header-center{order:3;flex:100%;justify-content:center}.preview-header-right{order:2}.preview-main{padding:16px}.preview-warning-content{font-size:12px}.preview-secure-badge span{display:none}}