.verification-content { width: 100%; min-height: 100%; display: flex; align-items: center; box-sizing: border-box; padding: clamp(32px, 6vw, 64px); } .verification-card { width: 100%; max-width: 460px; margin: 0 auto; } .verification-heading { margin-bottom: 24px; } .verification-eyebrow { display: inline-block; margin-bottom: 12px; color: var(--pm-primary-color); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; } .verification-heading h2 { margin: 0 0 10px; color: var(--pm-text-primary); font-size: 34px; font-weight: 600; } .verification-heading p { margin: 0; color: var(--pm-text-secondary); line-height: 1.7; } .verification-heading strong { color: var(--pm-text-primary); overflow-wrap: anywhere; } .verification-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; } .verification-method { display: block; min-width: 0; border-radius: 10px; } .verification-method:has(.is-disabled) { cursor: not-allowed; } .verification-method:focus-visible { outline: 2px solid var(--pm-primary-color); outline-offset: 3px; } .verification-methods .el-button { width: 100%; min-height: 48px; margin: 0; padding: 10px 8px; border-radius: 10px; } .verification-methods .el-button.is-disabled { pointer-events: none; } :global(.verification-method-tooltip) { max-width: 280px; line-height: 1.7; } .verification-hint { color: var(--pm-text-secondary); font-size: 14px; line-height: 1.7; margin: 0 0 20px; } .verification-placeholder { text-align: center; } .verification-delivery { padding: 16px; margin-bottom: 20px; border: 1px solid var(--pm-border-color); border-radius: 12px; } .verification-delivery-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .verification-email { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .verification-email span { color: var(--pm-text-secondary); font-size: 13px; } .verification-email strong { color: var(--pm-text-primary); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; } .verification-send { min-height: 36px; margin: 0; border-radius: 8px; } .verification-delivery-status { margin: 12px 0 0; color: var(--pm-text-secondary); font-size: 13px; line-height: 1.6; } .verification-form :deep(.el-form-item) { margin-bottom: 18px; } .verification-form :deep(.el-form-item__label) { margin-bottom: 8px; line-height: 1.5; } .verification-form :deep(.el-alert) { margin-bottom: 16px; } .verification-input :deep(.el-input__wrapper) { min-height: 48px; border-radius: 12px; box-shadow: 0 0 0 1px var(--pm-border-color) inset !important; } .verification-expiry { margin: 14px 0 0; color: var(--pm-text-secondary); font-size: 13px; text-align: center; } .verification-submit { width: 100%; min-height: 48px; border-radius: 12px; font-weight: 600; } .verification-actions { display: flex; justify-content: center; gap: 12px; margin-top: 14px; } @media (max-width: 760px) { .verification-content { min-height: 0; padding: 32px 24px 36px; } } @media (max-width: 380px) { .verification-content { padding: 24px 14px 28px; } .verification-heading h2 { font-size: 28px; } .verification-actions { flex-direction: column; align-items: center; } }