:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;width:100%;height:100vh;overflow:hidden}#root{width:100%;height:100vh}*{margin:0;padding:0;box-sizing:border-box}.makeup-app{width:100%;height:100vh;position:relative;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.sdk-container{width:100%;height:100vh;position:relative;z-index:1}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;justify-content:center;align-items:center;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.overlay-content{text-align:center;color:#fff;padding:2rem;max-width:500px}.overlay-content h2{margin-bottom:1rem;font-size:1.5rem;font-weight:600}.overlay-content p{color:#ccc;line-height:1.6}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.error-icon{font-size:3rem;margin-bottom:1rem}.error-hint{font-size:.875rem;color:#999;margin-top:1rem}.panel-toggle-btn{position:fixed;top:20px;right:20px;width:50px;height:50px;border-radius:50%;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:none;box-shadow:0 4px 20px #0003;cursor:pointer;font-size:1.5rem;z-index:200;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.panel-toggle-btn:hover{transform:scale(1.1);box-shadow:0 6px 25px #0000004d}.panel-toggle-btn.open{background:#667eeaf2;color:#fff}.control-panel{position:fixed;top:0;right:-400px;width:380px;height:100vh;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:-4px 0 20px #0003;z-index:150;overflow-y:auto;transition:right .3s ease;padding:1.5rem;display:flex;flex-direction:column}.control-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #f0f0f0;position:sticky;top:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10}.panel-header h3{font-size:1.25rem;font-weight:600;color:#333}.info-btn{background:#667eea;color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.875rem;transition:all .2s}.info-btn:hover{background:#5568d3;transform:translateY(-2px)}.control-section{margin-bottom:1.5rem}.control-section:last-child{margin-bottom:0}.control-section label{display:block;font-size:.875rem;font-weight:600;color:#555;margin-bottom:.75rem}.feature-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.feature-btn{padding:.6rem 1.2rem;border:2px solid #e0e0e0;background:#fff;border-radius:10px;cursor:pointer;font-size:.875rem;font-weight:500;color:#666;transition:all .2s}.feature-btn:hover{border-color:#667eea;color:#667eea;transform:translateY(-2px)}.feature-btn.active{background:#667eea;color:#fff;border-color:#667eea}.color-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.color-btn{width:40px;height:40px;border:3px solid transparent;border-radius:10px;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #0000001a}.color-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px #0003}.color-btn.active{border-color:#333;transform:scale(1.15)}.color-picker{width:100%;height:40px;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer}.pattern-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.pattern-btn{padding:.6rem 1.2rem;border:2px solid #e0e0e0;background:#fff;border-radius:10px;cursor:pointer;font-size:.875rem;font-weight:500;color:#666;transition:all .2s;text-transform:capitalize}.pattern-btn:hover{border-color:#667eea;color:#667eea;transform:translateY(-2px)}.pattern-btn.active{background:#667eea;color:#fff;border-color:#667eea}.transparency-slider{width:100%;height:8px;border-radius:4px;background:#e0e0e0;outline:none;-webkit-appearance:none}.transparency-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 6px #0003}.transparency-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.mode-buttons{display:flex;gap:.5rem}.mode-btn{flex:1;padding:.75rem 1rem;border:2px solid #e0e0e0;background:#fff;border-radius:10px;cursor:pointer;font-size:.875rem;font-weight:500;color:#666;transition:all .2s}.mode-btn:hover{border-color:#667eea;color:#667eea;transform:translateY(-2px)}.status-section{padding-top:1rem;border-top:2px solid #f0f0f0}.status-badge{display:inline-block;padding:.5rem 1rem;background:#f0f0f0;border-radius:8px;font-size:.875rem;font-weight:500;color:#666;text-transform:capitalize}.control-panel::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-track{background:#f0f0f0;border-radius:10px}.control-panel::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}.control-panel::-webkit-scrollbar-thumb:hover{background:#999}@media(max-width:768px){.control-panel{width:100%;right:-100%}.control-panel.open{right:0}.panel-header h3{font-size:1rem}.feature-btn,.pattern-btn{font-size:.75rem;padding:.5rem 1rem}.panel-toggle-btn{top:10px;right:10px;width:45px;height:45px;font-size:1.2rem}}.App{width:100%;height:100vh;overflow:hidden}