.page { position: relative; min-height: 100vh; overflow: hidden; } .glow-layer { position: absolute; inset: 0; pointer-events: none; } .glow { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.55; animation: float 22s ease-in-out infinite; } .glow-one { width: 320px; height: 320px; top: -140px; left: -80px; background: radial-gradient(circle, rgba(255, 212, 164, 0.9), rgba(255, 198, 134, 0.12)); } .glow-two { width: 260px; height: 260px; bottom: 160px; right: -100px; background: radial-gradient(circle, rgba(122, 154, 255, 0.85), rgba(22, 36, 82, 0.05)); animation-delay: 6s; } .glow-three { width: 280px; height: 280px; bottom: -160px; left: 40px; background: radial-gradient(circle, rgba(197, 134, 255, 0.85), rgba(52, 24, 80, 0.05)); animation-delay: 12s; } @keyframes float { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(42px, -30px, 0); } 100% { transform: translate3d(0, 0, 0); } } .content { position: relative; z-index: 2; height: 100vh; padding: 18px 12px 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; } .title-block { text-align: center; display: flex; flex-direction: column; gap: 6px; } .title { font-size: 34px; letter-spacing: 16px; text-indent: 16px; color: #fdf0dd; text-shadow: 0 10px 26px rgba(255, 196, 132, 0.45); } .subtitle { font-size: 14px; color: rgba(255, 244, 227, 0.76); line-height: 1.7; } .favorites-button { margin: 10px auto 0; padding: 0 28px; width: 50%; height: 30px; line-height: 30px; font-size: 12px; background: linear-gradient(90deg, rgba(255, 230, 188, 0.22), rgba(143, 169, 255, 0.18)); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 6px 14px rgba(16, 18, 40, 0.3); } .form-card { background: linear-gradient(180deg, rgba(25, 31, 58, 0.9) 0%, rgba(15, 21, 40, 0.74) 100%); border-radius: 24px; padding: 22px 22px; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 18px 36px rgba(8, 12, 24, 0.38); display: flex; flex-direction: column; gap: 20px; } .form-item { display: flex; flex-direction: column; gap: 12px; } .dual { flex-direction: row; gap: 14px; } .dual-item { flex: 1; display: flex; flex-direction: column; gap: 12px; } .label { font-size: 15px; color: rgba(255, 244, 227, 0.9); letter-spacing: 4px; } .input, .picker-value { background: rgba(9, 15, 33, 0.82); border-radius: 14px; padding: 14px 16px; font-size: 15px; color: #f8f2dd; border: 1px solid rgba(82, 110, 166, 0.34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: border 0.2s ease, box-shadow 0.2s ease; } .input:focus, .picker-value:active { border-color: rgba(255, 193, 135, 0.65); box-shadow: 0 0 18px rgba(255, 193, 135, 0.35); } .placeholder-text, .picker-value.placeholder { color: rgba(255, 244, 227, 0.46); } .radio-group { display: flex; gap: 14px; } .radio-option { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: rgba(16, 24, 46, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 244, 227, 0.82); transition: transform 0.2s ease, border 0.2s ease, background 0.2s ease; } .radio-option.selected { border-color: rgba(255, 124, 148, 0.65); background: rgba(255, 118, 148, 0.16); box-shadow: 0 12px 20px rgba(255, 118, 148, 0.2); color: #ffe9e9; } .radio-hover { transform: translateY(-2px); } .quota { text-align: center; font-size: 13px; color: rgba(255, 244, 227, 0.65); letter-spacing: 2px; } .quota-number { font-size: 18px; font-weight: 600; color: #ffcda9; margin-left: 8px; } .generate-button { align-self: stretch; height: 52px; line-height: 52px; font-size: 16px; border-radius: 26px; margin: 4px 6px 12px; background: linear-gradient(135deg, #c374ff 0%, #6ba9ff 52%, #ff7bd1 100%); box-shadow: 0 18px 32px rgba(120, 92, 255, 0.35); letter-spacing: 3px; } .action-container { padding-bottom: 8px; } .error-text { color: #ff9e9b; font-size: 12px; letter-spacing: 1px; }