*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f0f1a;color:#eee;min-height:100vh;display:flex}.control-panel{width:380px;background:#1a1a2e;padding:20px;overflow-y:auto;border-right:1px solid #333;flex-shrink:0;display:flex;flex-direction:column;min-height:100vh}.control-panel h1{font-size:1.3rem;color:#fff;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #333}.section{margin-bottom:25px}.section h2{font-size:.85rem;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.input-group{margin-bottom:12px}.input-group label{display:block;font-size:.85rem;color:#aaa;margin-bottom:5px}.input-group input,.input-group select{width:100%;padding:10px 12px;background:#0f0f23;border:1px solid #333;border-radius:8px;color:#fff;font-size:.9rem}.input-group input:focus,.input-group select:focus{outline:none;border-color:#6366f1}.btn-row{display:flex;gap:8px;margin-top:15px}.btn{flex:1;padding:10px 16px;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:#6366f1;color:#fff}.btn-primary:hover{background:#5558e3}.btn-secondary{background:#2a2a4a;color:#fff}.btn-secondary:hover{background:#3a3a5a}.btn-success{background:#10b981;color:#fff}.btn-success:hover{background:#059669}.status-message{margin-top:10px;padding:10px 12px;border-radius:8px;font-size:.85rem}.status-message.success{background:#10b9811a;border:1px solid #10b981;color:#10b981}.status-message.error{background:#ef44441a;border:1px solid #ef4444;color:#ef4444}.status-message.info{background:#6366f11a;border:1px solid #6366f1;color:#a5b4fc}.info-footer{margin-top:auto;padding-top:20px;border-top:1px solid #333;font-size:.8rem;color:#666}.info-footer p{margin-bottom:5px}.preview-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:30px;background:radial-gradient(circle at 20% 20%,rgba(99,102,241,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,92,246,.1) 0%,transparent 50%),#0f0f1a}.mobile-frame{width:360px;height:800px;background:#000;border-radius:40px;padding:10px;position:relative;box-shadow:0 0 0 3px #1a1a1a,0 0 0 6px #333,0 25px 50px #00000080}.mobile-notch{position:absolute;top:10px;left:50%;transform:translate(-50%);width:120px;height:25px;background:#000;border-radius:0 0 15px 15px;z-index:10}.mobile-screen{width:100%;height:100%;background-color:#1a1a2e;background-size:cover;background-position:center top;background-repeat:no-repeat;border-radius:32px;overflow:hidden;position:relative}.placeholder-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#666;font-size:.9rem;text-align:center}.placeholder-text.hidden{display:none}.widget-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;display:none}.widget-wrapper.visible{display:block}.widget-iframe{border:none;background:transparent;overflow:hidden;display:block;width:100%;height:100%}@media (max-width: 900px){body{flex-direction:column}.control-panel{width:100%;min-height:auto;max-height:50vh;border-right:none;border-bottom:1px solid #333}.preview-panel{flex:1;padding:20px}.mobile-frame{width:280px;height:620px;border-radius:30px}.mobile-notch{width:90px;height:20px}.mobile-screen{border-radius:24px}}