﻿*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}body{background:linear-gradient(135deg,#1a2a6c,#2c3e50);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;color:#fff;}.container{max-width:1100px;width:100%;background:rgba(0,0,0,0.7);border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.5);overflow:hidden;}header{background:linear-gradient(to right,#c31432,#240b36);padding:25px;text-align:center;border-bottom:3px solid #ffcc00;}header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,0.5);}header p{font-size:1.1rem;opacity:0.9;}.content{padding:30px;display:flex;flex-direction:column;gap:25px;}.main-content{display:flex;gap:25px;flex-wrap:wrap;}.upload-section{flex:1;min-width:300px;background:rgba(30,30,40,0.8);border-radius:10px;padding:25px;text-align:center;border:2px dashed #4a5568;transition:all 0.3s;display:flex;flex-direction:column;position:relative;}.upload-section:hover{border-color:#ffcc00;background:rgba(40,40,55,0.9);}.preview-section{flex:1;min-width:300px;display:flex;flex-direction:column;gap:25px;}.preview-container{background:rgba(30,30,40,0.8);border-radius:10px;padding:25px;text-align:center;}.upload-area{margin:20px 0;padding:30px;background:rgba(0,0,0,0.4);border-radius:8px;cursor:pointer;transition:all 0.3s;}.upload-area:hover{background:rgba(0,0,0,0.6);}.upload-icon{font-size:4rem;color:#ffcc00;margin-bottom:15px;}.file-input{display:none;}.preview-box{background:rgba(0,0,0,0.4);padding:15px;border-radius:8px;margin-bottom:20px;}.preview-title{margin-bottom:10px;color:#ffcc00;font-weight:bold;text-align:center;}.preview-info{margin-top:10px;text-align:center;display:flex;justify-content:center;gap:15px;font-size:0.9rem;color:#ccc;}.preview-img{max-width:100%;border:1px solid #4a5568;background:repeating-conic-gradient(#1a1a1a 0% 25%,#2a2a2a 0% 50%) 50% / 20px 20px;}.details{margin-top:15px;font-size:0.9rem;color:#ccc;}.btn{background:linear-gradient(to right,#c31432,#240b36);color:white;border:none;padding:12px 30px;font-size:1.1rem;border-radius:50px;cursor:pointer;transition:all 0.3s;font-weight:bold;display:inline-block;margin:10px 5px;text-transform:uppercase;letter-spacing:1px;}.btn:hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(195,20,50,0.4);}.btn:disabled{background:#4a5568;cursor:not-allowed;transform:none;box-shadow:none;}.btn-download{background:linear-gradient(to right,#00b09b,#96c93d);}.btn-download:hover{box-shadow:0 5px 15px rgba(0,176,155,0.4);}.instructions-card{background:rgba(30,30,40,0.8);border-radius:10px;padding:25px;margin-top:15px;box-shadow:0 5px 15px rgba(0,0,0,0.3);}.instructions-card h3{color:#ffcc00;margin-bottom:20px;text-align:center;font-size:1.5rem;display:flex;align-items:center;justify-content:center;gap:10px;}.instructions-card ol{padding-left:25px;line-height:1.8;}.instructions-card li{margin-bottom:15px;text-align:left;position:relative;padding-left:35px;}.instructions-card li i{position:absolute;left:0;top:3px;color:#ffcc00;background:rgba(255,204,0,0.1);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.9rem;}.important-note{background:rgba(195,20,50,0.2);border-left:3px solid #c31432;padding:10px 15px;margin:15px 0;border-radius:0 5px 5px 0;color:#ffcc00;position:relative;padding-left:35px;}.important-note i{position:absolute;left:10px;top:12px;color:#ff5555;}.status{text-align:center;padding:15px;margin-top:15px;border-radius:8px;background:rgba(0,0,0,0.4);font-weight:bold;font-size:0.9rem;}.status.success{color:#00ff9d;border:1px solid #00ff9d;}.status.error{color:#ff5555;border:1px solid #ff5555;}.controls{display:flex;justify-content:center;gap:15px;margin:15px 0;flex-wrap:wrap;}.option{background:rgba(0,0,0,0.4);padding:10px 15px;border-radius:8px;cursor:pointer;transition:all 0.3s;border:1px solid #4a5568;font-size:0.9rem;}.option:hover,.option.active{border-color:#ffcc00;background:rgba(255,204,0,0.1);}.download-section{background:rgba(40,40,55,0.9);border-radius:10px;padding:20px;text-align:center;margin-top:20px;border:1px solid #4a5568;}.progress-container{background:rgba(0,0,0,0.4);height:10px;border-radius:5px;margin:15px 0;overflow:hidden;}.progress-bar{height:100%;background:linear-gradient(to right,#00b09b,#96c93d);width:0%;transition:width 0.3s;}footer{text-align:center;padding:20px;background:rgba(0,0,0,0.5);color:#aaa;font-size:0.9rem;}.instructions-card a.forum-link{text-decoration:none;position:relative;color:#fffff0;font-weight:bold;padding:0 2px;transition:all 0.3s ease;}.instructions-card a.forum-link::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#ffcc00,transparent);transform:scaleX(0);transition:transform 0.3s ease;}.instructions-card a.forum-link:hover{text-shadow:0 0 8px rgba(255,204,0,0.7);}.instructions-card a.forum-link:hover::after{transform:scaleX(1);}.spray-type-selector{display:flex;justify-content:center;gap:15px;margin:15px 0;flex-wrap:wrap;}.spray-type{background:rgba(0,0,0,0.4);padding:10px 20px;border-radius:8px;cursor:pointer;transition:all 0.3s;border:1px solid #4a5568;font-size:0.9rem;display:flex;align-items:center;gap:8px;}.spray-type:hover,.spray-type.active{border-color:#ffcc00;background:rgba(255,204,0,0.1);}.spray-type i{font-size:1.2rem;}.nav-cards-container{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;}.nav-card{flex:1;min-width:200px;background:rgba(40,40,55,0.8);border-radius:10px;padding:20px;display:flex;align-items:center;gap:15px;transition:all 0.3s;border:1px solid #4a5568;cursor:pointer;text-decoration:none;color:inherit;}.nav-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.3);border-color:#ffcc00;}.nav-card-icon{font-size:2.5rem;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:rgba(255,204,0,0.1);border-radius:50%;color:#ffcc00;}.nav-card-text{flex:1;}.nav-card h4{color:#ffcc00;margin-bottom:5px;font-size:1.2rem;}.nav-card p{color:#ccc;font-size:0.9rem;line-height:1.4;}@media (max-width:768px){.main-content{flex-direction:column;}header h1{font-size:2rem;}.content{padding:20px;}.upload-section{min-width:100%;}.preview-title{flex-direction:column;}.preview-info{flex-direction:column;gap:5px;}.nav-cards-container{flex-direction:column;}}