:root{--primary-gradient:linear-gradient(135deg,#4361ee 0%,#3a0ca3 100%);--secondary-gradient:linear-gradient(135deg,#7209b7 0%,#3f37c9 100%);--light-bg:#f8f9fa;--dark-bg:#121826;--light-text:#f8f9fa;--dark-text:#212529;--card-bg:#ffffff;--card-shadow:0 6px 20px rgba(0,0,0,0.08);--transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1);--accent-color:#4361ee;--border-radius:16px}.dark-mode{--light-bg:#0f172a;--dark-text:#e0e0e0;--card-bg:#1e293b;--card-shadow:0 6px 20px rgba(0,0,0,0.3);--light-text:#f0f9ff}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:var(--light-bg);color:var(--dark-text);line-height:1.6;transition:var(--transition);min-height:100vh;padding:30px;background-image:radial-gradient(circle at 10% 20%,rgba(67,97,238,0.05) 0%,transparent 20%),radial-gradient(circle at 90% 80%,rgba(58,12,163,0.05) 0%,transparent 20%);overflow-x:hidden}.modal-container{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:30px;transform-origin:top center;transform:scale(1);transition:transform 0.3s ease}.scale-to-fit{transform:scale(0.95)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:25px 30px;border-radius:var(--border-radius);background:var(--card-bg);box-shadow:var(--card-shadow);position:relative;overflow:hidden}.modal-header::before{content:'';position:absolute;top:0;left:0;width:8px;height:100%;background:var(--primary-gradient)}.modal-header h2{font-size:2rem;font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.close-btn{background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--accent-color);width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.close-btn:hover{background-color:rgba(67,97,238,0.1);transform:rotate(90deg)}.controls-container{display:flex;flex-wrap:wrap;gap:25px;margin-bottom:20px}.control-card{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--card-shadow);padding:25px;flex:1;min-width:300px}.control-card h3{font-size:1.3rem;margin-bottom:20px;color:var(--accent-color);display:flex;align-items:center;gap:10px}.control-card h3 i{background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.device-selector{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.device-selector label{font-weight:600;color:var(--dark-text);min-width:90px}.device-selector select{padding:12px 20px;border-radius:12px;border:2px solid #e2e8f0;background:var(--card-bg);color:var(--dark-text);font-weight:500;flex:1;max-width:200px;transition:var(--transition);appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em}.device-selector select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(67,97,238,0.2)}.preview-wrapper{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--card-shadow);padding:30px;display:flex;justify-content:center;position:relative;overflow:hidden;min-height:600px;height:auto}.preview-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:auto;min-height:550px}.template-details{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--card-shadow);padding:30px}.template-details h3{color:var(--accent-color);margin-bottom:15px;font-size:1.6rem;font-weight:700;display:flex;align-items:center;gap:12px}.template-details h3 i{background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.template-details p{margin-bottom:15px;line-height:1.8;color:var(--dark-text)}.template-features{margin-top:20px;padding-left:25px}.template-features li{margin-bottom:12px;position:relative;padding-left:30px}.template-features li:before{content:'';position:absolute;left:0;top:8px;width:18px;height:18px;border-radius:50%;background:var(--primary-gradient);display:flex;align-items:center;justify-content:center;color:white;font-size:10px;font-weight:bold}.action-buttons{display:flex;gap:15px;margin-top:30px;flex-wrap:wrap}.btn{background:var(--primary-gradient);color:white;border:none;border-radius:12px;padding:15px 30px;font-size:1.05rem;cursor:pointer;display:inline-flex;align-items:center;gap:12px;transition:var(--transition);font-weight:600;box-shadow:0 4px 12px rgba(67,97,238,0.25)}.btn:hover{background:var(--secondary-gradient);transform:translateY(-3px);box-shadow:0 6px 16px rgba(114,9,183,0.35)}.btn-outline{background:transparent;border:2px solid var(--accent-color);color:var(--accent-color);box-shadow:none}.btn-outline:hover{background:rgba(67,97,238,0.1);transform:translateY(-3px)}.device-simulator{position:relative;overflow:hidden;background:white;transform-origin:center center;transition:transform 0.5s ease;box-shadow:0 15px 40px rgba(0,0,0,0.12);border-radius:12px;border:1px solid #e2e8f0;max-height:90vh}.device-simulator.mobile{width:375px;height:667px}.device-simulator.mobile.landscape{width:667px;height:375px}.device-simulator.tablet{width:768px;height:1024px}.device-simulator.tablet.landscape{width:1024px;height:768px}.device-simulator.desktop{width:100%;max-width:1200px;height:600px}.device-header{height:30px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:12px;position:relative;font-weight:500;letter-spacing:0.5px;border-top-left-radius:12px;border-top-right-radius:12px}.device-content{width:100%;height:calc(100% - 30px);border:none;background:white}.template-selector{display:flex;align-items:center;gap:15px;margin-top:15px}.template-selector label{font-weight:600;color:var(--dark-text);min-width:70px}.template-selector select{padding:12px 20px;border-radius:12px;border:2px solid #e2e8f0;background:var(--card-bg);color:var(--dark-text);font-weight:500;flex:1;transition:var(--transition);appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em}.template-selector select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(67,97,238,0.2)}.rotate-btn{background:var(--primary-gradient);color:white;border:none;border-radius:12px;padding:12px 25px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:var(--transition);font-weight:600;box-shadow:0 4px 12px rgba(67,97,238,0.25)}.rotate-btn:hover{background:var(--secondary-gradient);transform:translateY(-3px);box-shadow:0 6px 16px rgba(114,9,183,0.35)}.rotate-btn:disabled{opacity:0.5;cursor:not-allowed;background:#cbd5e1;box-shadow:none}.rotate-btn:disabled:hover{transform:none}.rotate-animation{animation:rotateDevice 0.6s cubic-bezier(0.68,-0.55,0.27,1.55) forwards}@keyframes rotateDevice{0%{transform:rotate(0deg);height:var(--original-height);width:var(--original-width)}50%{transform:rotate(45deg);height:calc(var(--original-height) + var(--original-width));width:calc(var(--original-height) + var(--original-width))}100%{transform:rotate(90deg);height:var(--original-width);width:var(--original-height)}}.theme-switch{display:flex;align-items:center;gap:15px;margin-top:15px}.theme-switch label{font-weight:600;color:var(--dark-text)}.switch{position:relative;display:inline-block;width:60px;height:30px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#cbd5e1;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:22px;width:22px;left:4px;bottom:4px;background-color:white;transition:.4s;border-radius:50%}input:checked+.slider{background:var(--primary-gradient)}input:checked+.slider:before{transform:translateX(30px)}.device-simulator.fullscreen{position:fixed;top:0;left:0;width:100% !important;height:100% !important;z-index:1000;border-radius:0;transform:none !important;animation:none !important}.device-simulator.fullscreen .device-header{display:none}.device-simulator.fullscreen .device-content{height:100%;border-radius:0}.fullscreen-close{position:fixed;top:20px;right:20px;z-index:1001;background:rgba(0,0,0,0.7);color:white;border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;transition:all 0.3s ease}.fullscreen-close:hover{background:rgba(0,0,0,0.9);transform:scale(1.1)}.fullscreen-btn{background:var(--primary-gradient);color:white;border:none;border-radius:12px;padding:12px 25px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:var(--transition);font-weight:600;box-shadow:0 4px 12px rgba(67,97,238,0.25)}.fullscreen-btn:hover{background:var(--secondary-gradient);transform:translateY(-3px);box-shadow:0 6px 16px rgba(114,9,183,0.35)}.button-group{display:flex;gap:15px;flex-wrap:wrap;margin-top:15px}.status-indicator{display:flex;align-items:center;gap:10px;margin-top:20px;padding:10px 15px;background:rgba(67,97,238,0.08);border-radius:10px;border-left:4px solid var(--accent-color)}.status-dot{width:12px;height:12px;border-radius:50%;background:#10b981}.zoom-controls{position:fixed;bottom:20px;right:20px;display:flex;gap:10px;z-index:100}.zoom-btn{width:40px;height:40px;border-radius:50%;background:var(--primary-gradient);color:white;border:none;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 12px rgba(67,97,238,0.3);transition:all 0.3s ease}.zoom-btn:hover{transform:scale(1.1);box-shadow:0 6px 16px rgba(114,9,183,0.4)}.zoom-indicator{position:fixed;bottom:70px;right:20px;background:rgba(255,255,255,0.9);border-radius:20px;padding:8px 15px;font-size:14px;font-weight:600;color:#4361ee;box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:100;display:none}.view-mode-btn{background:var(--primary-gradient);color:white;border:none;border-radius:12px;padding:12px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:var(--transition);font-weight:600;box-shadow:0 4px 12px rgba(67,97,238,0.25);margin-top:15px;width:100%}.view-mode-btn:hover{background:var(--secondary-gradient);transform:translateY(-3px);box-shadow:0 6px 16px rgba(114,9,183,0.35)}.mobile-warning{background:rgba(239,68,68,0.1);border-left:4px solid #ef4444;padding:12px;border-radius:8px;margin-top:15px;color:var(--dark-text);display:none}.mobile-warning i{color:#ef4444;margin-right:8px}@media (max-width:1500px){.modal-container{transform:scale(0.95)}}@media (max-width:1400px){.modal-container{transform:scale(0.9)}}@media (max-width:1300px){.modal-container{transform:scale(0.85)}.device-simulator.desktop{width:100%;max-width:100%}}@media (max-width:1200px){.modal-container{transform:scale(0.8)}}@media (max-width:1100px){.modal-container{transform:scale(0.75)}}@media (max-width:1000px){.modal-container{transform:scale(0.7)}}@media (max-width:900px){.modal-container{transform:scale(1)}.preview-wrapper{min-height:500px;padding:20px}.device-simulator.mobile{width:100%;max-width:375px;height:667px}.device-simulator.mobile.landscape{width:100%;max-width:667px;height:375px}.device-simulator.tablet{width:100%;max-width:700px;height:900px}.device-simulator.tablet.landscape{width:100%;max-width:900px;height:700px}.controls-container{flex-direction:column}}@media (max-width:600px){body{padding:15px}.device-simulator.mobile{height:568px}.device-simulator.mobile.landscape{height:320px}.device-simulator.tablet{height:700px}.device-simulator.tablet.landscape{height:600px}.modal-header{padding:20px}.control-card{padding:20px}.btn{padding:12px 20px;font-size:0.9rem}.button-group{flex-direction:column;width:100%}.button-group button{width:100%}.view-mode-btn{padding:10px 15px;font-size:0.9rem}}@media (max-width:768px){.desktop-only{display:none !important}.mobile-warning{display:block}}