body { background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); color: #111827; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .card { border: none; border-radius: 1rem; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.2); } .form-control, .form-select { border-radius: 0.5rem; padding: 1rem; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #D1D5DB; /* Gray-300 */ } .form-control:focus, .form-select:focus { border-color: #4f46e5; /* Indigo-600 */ box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2); background-color: rgba(255, 255, 255, 0.8); } .btn-primary { background-image: linear-gradient(to right, #4f46e5, #818cf8); border: none; border-radius: 0.5rem; padding: 1rem 2rem; font-weight: 700; color: white; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3); } .logo { font-weight: 900; font-size: 3rem; color: #1a202c; } .toast-container { z-index: 1090; } /* Result Page Styles */ .result-textarea { background-color: #0d1117; color: #c9d1d9; border: 1px solid #30363d; font-family: 'Fira Code', monospace; font-size: 14px; border-radius: 0.5rem; padding: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); height: 60vh; } .result-textarea:focus { outline: 2px solid #4f46e5; }