.mobile-app-icon-maker{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;background-color:#f8fafc;color:#1e293b}.mobile-app-icon-maker .header{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:3rem 1rem;text-align:center;margin-bottom:2rem}.mobile-app-icon-maker .header h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.mobile-app-icon-maker .header p{font-size:1.1rem;opacity:.9}.mobile-app-icon-maker .container{max-width:1400px;margin:0 auto;padding:0 2rem}.mobile-app-icon-maker .grid-container{display:grid;gap:2rem}@media(min-width:1024px){.mobile-app-icon-maker .grid-container{grid-template-columns:350px 1fr}}.mobile-app-icon-maker .control-panel{background:#fff;border-radius:1rem;padding:1.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:2rem}.mobile-app-icon-maker .control-panel .control-section h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:#1e293b}.mobile-app-icon-maker .control-panel .control-section .hidden-input{display:none}.mobile-app-icon-maker .control-panel .control-section .upload-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:.75rem;background-color:#4f46e5;color:#fff;border-radius:.5rem;font-weight:500;transition:all .2s;border:none;cursor:pointer}.mobile-app-icon-maker .control-panel .control-section .upload-btn:hover{background-color:#4338ca;transform:translateY(-1px)}.mobile-app-icon-maker .control-panel .control-section .upload-btn .icon{margin-right:.5rem;width:1.25rem;height:1.25rem}.mobile-app-icon-maker .control-panel .control-section .bg-style-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}.mobile-app-icon-maker .control-panel .control-section .bg-style-selector .bg-style-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.75rem;border-radius:.5rem;border:1px solid #e2e8f0;background:#fff;cursor:pointer;transition:all .2s}.mobile-app-icon-maker .control-panel .control-section .bg-style-selector .bg-style-btn.active{background-color:#4f46e5;color:#fff;border-color:#4f46e5}.mobile-app-icon-maker .control-panel .control-section .bg-style-selector .bg-style-btn.active .icon{color:#fff}.mobile-app-icon-maker .control-panel .control-section .bg-style-selector .bg-style-btn:hover:not(.active){background-color:#f1f5f9}.mobile-app-icon-maker .control-panel .control-section .bg-style-selector .bg-style-btn .icon{width:1.25rem;height:1.25rem;margin-bottom:.5rem;color:#4f46e5}.mobile-app-icon-maker .control-panel .control-section .bg-style-selector .bg-style-btn span{font-size:.875rem;font-weight:500}.mobile-app-icon-maker .control-panel .control-section .color-picker{margin-bottom:1.5rem}.mobile-app-icon-maker .control-panel .control-section .color-picker label{display:block;margin-bottom:.5rem;font-size:.875rem;color:#64748b}.mobile-app-icon-maker .control-panel .control-section .color-picker .color-input{display:flex;align-items:center;gap:.5rem}.mobile-app-icon-maker .control-panel .control-section .color-picker .color-input .icon{width:1.25rem;height:1.25rem;color:#64748b}.mobile-app-icon-maker .control-panel .control-section .color-picker .color-input input[type=color]{width:2rem;height:2rem;border:none;border-radius:.25rem;cursor:pointer;padding:0}.mobile-app-icon-maker .control-panel .control-section .color-picker .color-input span{font-size:.875rem;font-family:monospace}.mobile-app-icon-maker .control-panel .control-section .alignment-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.5rem;margin-bottom:1.5rem}.mobile-app-icon-maker .control-panel .control-section .alignment-grid .align-btn{padding:.5rem;border-radius:.25rem;border:1px solid #e2e8f0;background:#fff;cursor:pointer;transition:all .2s;font-size:.875rem}.mobile-app-icon-maker .control-panel .control-section .alignment-grid .align-btn:first-child{grid-column:2;grid-row:1}.mobile-app-icon-maker .control-panel .control-section .alignment-grid .align-btn:nth-child(2){grid-column:1;grid-row:2}.mobile-app-icon-maker .control-panel .control-section .alignment-grid .align-btn:nth-child(3){grid-column:2;grid-row:2}.mobile-app-icon-maker .control-panel .control-section .alignment-grid .align-btn:nth-child(4){grid-column:3;grid-row:2}.mobile-app-icon-maker .control-panel .control-section .alignment-grid .align-btn:nth-child(5){grid-column:2;grid-row:3}.mobile-app-icon-maker .control-panel .control-section .alignment-grid .align-btn.active{background-color:#4f46e5;color:#fff;border-color:#4f46e5}.mobile-app-icon-maker .control-panel .control-section .alignment-grid .align-btn:hover:not(.active){background-color:#f1f5f9}.mobile-app-icon-maker .control-panel .control-section .slider-container{margin-bottom:1.5rem}.mobile-app-icon-maker .control-panel .control-section .slider-container label{display:block;margin-bottom:.5rem;font-size:.875rem;color:#64748b}.mobile-app-icon-maker .control-panel .control-section .slider-container .scale-slider{width:100%;height:.5rem;appearance:none;background:#e2e8f0;border-radius:.25rem;outline:none}.mobile-app-icon-maker .control-panel .control-section .slider-container .scale-slider::-webkit-slider-thumb{appearance:none;width:1.25rem;height:1.25rem;background:#4f46e5;border-radius:50%;cursor:pointer}.mobile-app-icon-maker .control-panel .control-section .toggle-container{margin-bottom:1.5rem}.mobile-app-icon-maker .control-panel .control-section .toggle-container .grid-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;border:1px solid #e2e8f0;background:#fff;cursor:pointer;transition:all .2s;font-size:.875rem}.mobile-app-icon-maker .control-panel .control-section .toggle-container .grid-toggle.active{background-color:#4f46e5;color:#fff;border-color:#4f46e5}.mobile-app-icon-maker .control-panel .control-section .toggle-container .grid-toggle.active .icon{color:#fff}.mobile-app-icon-maker .control-panel .control-section .toggle-container .grid-toggle:hover:not(.active){background-color:#f1f5f9}.mobile-app-icon-maker .control-panel .control-section .toggle-container .grid-toggle .icon{width:1.25rem;height:1.25rem}.mobile-app-icon-maker .control-panel .control-section .hint{font-size:.875rem;color:#64748b;font-style:italic;margin-top:.5rem}.mobile-app-icon-maker .preview-section{background:#fff;border-radius:1rem;padding:1.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.mobile-app-icon-maker .preview-section .preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.mobile-app-icon-maker .preview-section .preview-header h2{font-size:1.25rem;font-weight:600;color:#1e293b}.mobile-app-icon-maker .preview-section .preview-header .device-selector{display:flex;gap:.75rem}.mobile-app-icon-maker .preview-section .preview-header .device-selector .device-btn{padding:.5rem 1rem;border-radius:.5rem;border:1px solid #e2e8f0;background:#fff;cursor:pointer;transition:all .2s;font-size:.875rem;font-weight:500}.mobile-app-icon-maker .preview-section .preview-header .device-selector .device-btn.active{background-color:#4f46e5;color:#fff;border-color:#4f46e5}.mobile-app-icon-maker .preview-section .preview-header .device-selector .device-btn:hover:not(.active){background-color:#f1f5f9}.mobile-app-icon-maker .preview-section .device-preview-wrapper{display:flex;justify-content:center;margin-bottom:2rem}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame{width:280px;height:500px;position:relative;overflow:hidden;box-shadow:0 20px 25px -5px rgba(0,0,0,.1);transition:background-color .2s}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.ios{background:#000;border-radius:3rem;border:12px solid #000}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.ios:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:35%;height:1.5rem;background:#000;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;z-index:10}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.ios .logo-container{position:absolute;top:12px;left:12px;right:12px;bottom:12px;border-radius:2.5rem;overflow:hidden;display:flex;align-items:center;justify-content:center}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.android{background:#fff;border-radius:2rem;border-color:#334155;border-style:solid;border-width:2.5rem 12px}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.android:before{content:"";position:absolute;bottom:-1.75rem;left:50%;transform:translateX(-50%);width:3rem;height:.5rem;background:#334155;border-radius:.25rem}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.android .logo-container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.show-grid .grid-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.show-grid .grid-overlay .grid-line{position:absolute;background:rgba(79,70,229,.2)}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.show-grid .grid-overlay .grid-line.vertical{top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%)}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.show-grid .grid-overlay .grid-line.horizontal{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame.show-grid .grid-overlay .grid-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:70%;border-radius:50%;border:1px dashed rgba(79,70,229,.3)}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame .loading-state{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:hsla(0,0%,100%,.8);color:#4f46e5;z-index:5}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame .loading-state .spinner{width:2rem;height:2rem;border-radius:50%;border:3px solid rgba(79,70,229,.3);border-top-color:#4f46e5;animation:spin 1s ease-in-out infinite;margin-bottom:1rem}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame .loading-state p{font-weight:500}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame .empty-state{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#64748b}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame .empty-state .icon{width:3rem;height:3rem;margin-bottom:1rem;opacity:.5}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame .empty-state p{font-size:.875rem}.mobile-app-icon-maker .preview-section .device-preview-wrapper .device-frame .logo-image{position:absolute;max-width:80%;max-height:80%;transform-origin:center;transition:transform .1s ease-out;will-change:transform;user-select:none;z-index:2}.mobile-app-icon-maker .preview-section .download-section h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem}.mobile-app-icon-maker .preview-section .download-section .download-buttons{display:grid;gap:1rem}@media(min-width:640px){.mobile-app-icon-maker .preview-section .download-section .download-buttons{grid-template-columns:1fr 1fr}}.mobile-app-icon-maker .preview-section .download-section .download-buttons .download-btn{display:flex;align-items:center;justify-content:center;padding:.75rem;border-radius:.5rem;font-weight:500;transition:all .2s;border:none;cursor:pointer;background-color:#4f46e5;color:#fff}.mobile-app-icon-maker .preview-section .download-section .download-buttons .download-btn .icon{margin-right:.5rem;width:1.25rem;height:1.25rem}.mobile-app-icon-maker .preview-section .download-section .download-buttons .download-btn:hover{background-color:#4338ca;transform:translateY(-1px)}@keyframes spin{to{transform:rotate(1turn)}}