body {font-family:'Arial',sans-serif;color:#333;background:linear-gradient(135deg,#9be4cd 0%,#185a9d 100%);min-height:100vh;} .container-logo {max-width:1200px;margin:0 auto;padding:20px;} header {text-align:center;margin-bottom:30px;color:white;} header h1 {font-size:2.5em;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,0.3);} header p {font-size:1.2em;opacity:0.9;} .main-content {display:grid;grid-template-columns:1fr 1fr;gap:30px;background:white;border-radius:15px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,0.2);} .editor-panel {background:#f8f9fa;padding:25px;border-radius:10px;} .editor-panel h2 {margin-bottom:20px;color:#333;border-bottom:2px solid #185a9d;padding-bottom:10px;} .form-group {margin-bottom:20px;} .form-group label {display:block;margin-bottom:5px;font-weight:bold;color:#555;} .form-group input[type="text"],.form-group input[type="number"],.form-group input[type="color"],.form-group select {width:100%;padding:10px;border:2px solid #ddd;border-radius:5px;font-size:14px;transition:border-color 0.3s;} .form-group input:focus,.form-group select:focus {outline:none;border-color:#185a9d;} .form-group input[type="range"] {width:70%;vertical-align:middle;} .form-group span {display:inline-block;width:25%;text-align:center;font-weight:bold;} .button-logo {background:linear-gradient(135deg,#9be4cd 0%,#185a9d 100%);color:white;padding:12px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;margin-right:10px;margin-bottom:10px;transition:transform 0.2s,box-shadow 0.2s;} button:hover {transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,0.2);} button:active {transform:translateY(0);} .preview-panel {text-align:center;} .preview-panel h2 {margin-bottom:20px;color:#333;padding-bottom:10px;} .logo-footer{margin-top:20px;text-align:center;margin-bottom:0px;color:white;} .logo-preview {background:white;border:2px dashed #ddd;border-radius:10px;padding:20px;min-height:300px;display:flex;align-items:center;justify-content:center;transition:border-color 0.3s;aspect-ratio:1 / 1;} .logo-preview:hover {border-color:#667eea;} .logo-preview svg {max-width:100%;max-height:250px;} @media (max-width:768px) {.main-content {grid-template-columns:1fr;} header h1 {font-size:2em;}} .loading {display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;} @keyframes spin {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}} .success {color:#28a745;background-color:#d4edda;padding:10px;border-radius:5px;margin-top:10px;} .error {color:#dc3545;background-color:#f8d7da;padding:10px;border-radius:5px;margin-top:10px;} .logo-preview {background:white;border:2px dashed #ddd;border-radius:10px;padding:20px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;width:100%;max-width:min(400px,90vw);margin:0 auto;box-sizing:border-box;overflow:hidden;} .logo-preview svg {display:block;max-width:100%;max-height:100%;width:auto;height:auto;} .logo-preview svg rect,.logo-preview svg circle,.logo-preview svg polygon {vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision;} @media (max-width:768px) {.logo-preview {padding:15px;max-width:min(300px,85vw);}}