body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); min-height: 100vh; }
.card { background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 1rem; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }
.card:hover { border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 12px 40px rgba(99, 102, 241, 0.1); }
.section-title { background: linear-gradient(135deg, #6366f1, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.section-title::before { content: ''; width: 4px; height: 1.5rem; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 2px; }
.input-field { background: rgba(30, 41, 59, 0.8); border: 2px solid rgba(99, 102, 241, 0.3); border-radius: 0.75rem; color: #e2e8f0; padding: 0.875rem; transition: all 0.3s ease; backdrop-filter: blur(5px); }
.input-field:focus { outline: none; border-color: rgba(99, 102, 241, 0.6); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); background: rgba(30, 41, 59, 0.9); }
.input-field::placeholder { color: #64748b; }
.dna-label { display: block; font-size: 0.875rem; font-weight: 600; color: #cbd5e1; margin-bottom: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.dna-textarea { width: 100% !important; min-height: 120px !important; padding: 0.875rem !important; background: rgba(30, 41, 59, 0.8) !important; border: 2px solid rgba(99, 102, 241, 0.3) !important; border-radius: 0.75rem !important; color: #e2e8f0 !important; font-size: 0.875rem !important; resize: vertical !important; transition: all 0.3s ease !important; backdrop-filter: blur(5px) !important; }
.dna-textarea:focus { border-color: rgba(99, 102, 241, 0.6) !important; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important; background: rgba(30, 41, 59, 0.9) !important; }
.btn { padding: 0.875rem 1.5rem; border-radius: 0.75rem; font-weight: 600; color: white; transition: all 0.3s ease; border: none; cursor: pointer; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
.btn:hover::before { left: 100%; }
.btn:disabled { background: #4b5563; cursor: not-allowed; opacity: 0.6; }
.btn:disabled::before { display: none; }
.btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }
.btn-primary:hover { background: linear-gradient(135deg, #5b21b6, #7c3aed); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); transform: translateY(-2px); }
.style-select { width: 100%; padding: 0.875rem; background: rgba(30, 41, 59, 0.8); border: 2px solid rgba(99, 102, 241, 0.4); border-radius: 0.75rem; color: #e2e8f0; font-size: 1rem; font-weight: 500; color-scheme: dark; background-image: linear-gradient(45deg, transparent 40%, rgba(99, 102, 241, 0.1) 50%, transparent 60%); transition: all 0.3s ease; backdrop-filter: blur(5px); }
.style-select:focus { outline: none; border-color: rgba(99, 102, 241, 0.7); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); background: rgba(30, 41, 59, 0.9); }
.style-select:hover { border-color: rgba(99, 102, 241, 0.6); }
.style-select option[disabled] { background-color: #1e293b; color: #a78bfa; font-weight: bold; font-style: italic; }
.style-section { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border: 2px solid rgba(99, 102, 241, 0.3); border-radius: 1rem; padding: 1.5rem; position: relative; overflow: hidden; }
.style-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1); animation: shimmer 2s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.loader { border: 3px solid rgba(99, 102, 241, 0.3); border-top: 3px solid #6366f1; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.5); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #5b21b6, #7c3aed); }