/* * GX INPUT — Premium Minimal Neon * Dark-only, Flamingo Pink subtle glow */ .gx-input { width: 100%; display: flex; flex-direction: column; gap: 0.4rem; } /* Label */ .gx-input label { font-size: 0.9rem; font-weight: 500; color: var(--color-text-secondary); } /* Field wrapper */ .gx-input-field { position: relative; width: 100%; } /* Input element */ .gx-input-field input, .gx-input-field textarea { width: 100%; padding: 0.85rem 1rem; border-radius: var(--radius); background: var(--color-bg-card); border: 1px solid var(--color-border-soft); font-size: 1rem; color: var(--color-text-primary); outline: none; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } /* Placeholder */ .gx-input-field input::placeholder, .gx-input-field textarea::placeholder { color: var(--color-text-secondary); opacity: 0.55; } /* Hover */ .gx-input-field input:hover, .gx-input-field textarea:hover { border-color: var(--color-brand); box-shadow: var(--shadow-glow-pink-soft); } /* Focus — premium neon glow */ .gx-input-field input:focus, .gx-input-field textarea:focus { border-color: var(--color-brand); box-shadow: var(--shadow-glow-pink), 0 0 0 2px rgba(255, 79, 163, 0.18); background: rgba(255, 79, 163, 0.06); transform: translateY(-1px); } /* Disabled */ .gx-input-field input:disabled, .gx-input-field textarea:disabled { opacity: 0.45; cursor: not-allowed; } /* Error state */ .gx-input.error input, .gx-input.error textarea { border-color: var(--color-warning); box-shadow: 0 0 10px rgba(255, 170, 136, 0.2); } .gx-input.error label { color: var(--color-warning); } /* Small hint text */ .gx-input-hint { font-size: 0.8rem; color: var(--color-text-secondary); opacity: 0.7; }