body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            background-color: #f4f7f6; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0; 
        }

        .converter-box { 
            background: white; 
            padding: 30px; 
            border-radius: 12px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
            width: 350px; 
        }

        h2 { 
            text-align: center;
            color: #333; 
            margin-top: 0; 
        }

        .input-group { 
            margin-bottom: 15px; 
        }

        label { 
            display: block; 
            margin-bottom: 5px; 
            color: #666; 
            font-size: 14px; 
        }
        
        input, select { 
            width: 100%; 
            padding: 10px; 
            border: 1px solid #ccc; 
            border-radius: 6px; 
            box-sizing: border-box; 
            font-size: 16px; 
        }
        
        button { 
            width: 100%; 
            padding: 12px; 
            background-color: #007bff; 
            color: white; 
            border: none; 
            border-radius: 6px; 
            font-size: 16px; 
            cursor: pointer; 
            transition: 0.3s; 
        }

        button:hover { 
            background-color: #0056b3; 
        }

        #result-box { 
            margin-top: 20px; 
            padding: 15px; 
            border-radius: 6px; 
            text-align: center; 
            font-size: 18px; 
            font-weight: bold; 
            display: none; 
        }

        .success { 
            background-color: #d4edda; 
            color: #155724; 
            border: 1px solid #c3e6cb; 
        }

        .error { 
            background-color: #f8d7da; 
            color: #721c24; 
            border: 1px solid #f5c6cb; 
        }