.overlay { position: fixed; inset: 0; z-index: 60; background: var(--color-modal-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; animation: overlayIn 0.3s ease-out; } @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } } .panel { position: relative; width: 100%; max-width: 420px; margin: 0 20px; background: var(--color-bg-modal-glass); backdrop-filter: var(--bf-glass-xl); -webkit-backdrop-filter: var(--bf-glass-xl); border: 1px solid var(--color-border-card); border-radius: 16px; padding: 36px 32px 32px; box-shadow: var(--shadow-glass-light); animation: panelIn 0.3s ease-out; } @keyframes panelIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } .headerLogo { width: 28px; height: 28px; } .headerTitle { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 400; color: var(--color-text-primary); letter-spacing: 0.05em; } .notice { text-align: center; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 24px; line-height: 1.5; } .form { display: flex; flex-direction: column; gap: 18px; } .field { display: flex; flex-direction: column; gap: 6px; } .label { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; } .input { height: 44px; padding: 0 14px; background: var(--color-bg-upload); border: 1px solid var(--color-border-card); border-radius: 10px; color: var(--color-text-primary); font-size: 14px; outline: none; transition: border-color 0.2s; } .input::placeholder { color: var(--color-text-disabled); } .input:focus { border-color: var(--color-mint-accent); } .error { color: var(--color-danger-text); font-size: 13px; text-align: center; padding: 8px; background: var(--color-danger-bg-soft); border-radius: 8px; } .submitBtn { height: 44px; width: 55%; align-self: center; margin-top: 18px; background: var(--color-mint-accent-bg); border: 1px solid var(--color-mint-accent-border); color: var(--color-mint-accent); border-radius: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: all 0.2s; backdrop-filter: var(--bf-glass-sm); -webkit-backdrop-filter: var(--bf-glass-sm); box-shadow: inset 0 1px 0 var(--color-inset-highlight); } .submitBtn:hover { background: var(--color-mint-accent-bg-hover); box-shadow: inset 0 1px 0 var(--color-inset-highlight), 0 0 24px var(--color-mint-accent-glow); } .submitBtn:disabled { opacity: 0.5; cursor: not-allowed; }