.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: stretch; }
@media (max-width: 800px) { .meta-grid { grid-template-columns: 1fr; } }
.input-col { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.9rem; font-weight: 600; color: var(--text-main); }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-main); font-family: inherit; font-size: 0.95rem; line-height: 1.5; outline: none; transition: all 0.2s; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--icon-green-text); box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15); }
.form-group textarea { resize: vertical; }

.output-col { display: flex; flex-direction: column; }
.output-header { margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center; }
.code-output { flex-grow: 1; width: 100%; resize: none; background: #0f172a; color: #38bdf8; border: none; border-radius: 8px; padding: 1.5rem; font-family: 'Courier New', Courier, monospace; font-size: 0.9rem; line-height: 1.6; min-height: 350px; outline: none; }