.page { height: fit-content; min-height: 100dvh; width: 100%; max-width: 460px; margin: 0 auto; padding-bottom: 86px; } .title { font-size: 27px; line-height: 125%; font-weight: 600; color: #000; margin-top: 70px; margin-bottom: 10px; } .not-share { font-size: 15px; line-height: 125%; text-align: center; max-width: 330px; margin-left: auto; margin-right: auto; margin-bottom: 32px; color: #000; } .button { width: 100%; max-width: 400px; } .policy { // margin-top: 20px; max-width: 400px; } .policy > p { font-size: 15px; line-height: 125%; } .link { font-size: 12px !important; color: #9974f6 !important; } .success-icon { height: 100%; width: auto; } .input-container { width: 100%; position: relative; text-align: center; margin-bottom: 20px; max-width: 400px; min-width: 250px; } .input-container > input { appearance: none; border-radius: 14px; color: #121620; font-size: 15px; height: 48px; line-height: 125%; outline: none; padding: 16px 24px 5px; transition: border-color 0.3s ease; width: 100%; } .input-container > input:focus { border-color: #000; transition-delay: 0.1s; } .input-container > input:focus + .input__placeholder, .input-container > input:not(:placeholder-shown) + .input__placeholder { font-size: 12px; top: 12px; width: auto; } .input__placeholder { color: #8e8e93; font-size: 16px; left: 24px; overflow: hidden; text-overflow: ellipsis; transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease; white-space: nowrap; position: absolute; top: 50%; transform: translateY(-50%); user-select: none; pointer-events: none; } .background-top-blob { position: absolute; top: 0; left: 0; scale: 1.4; } .header { z-index: 3; width: calc(100% + 36px) !important; } .toast-container { position: fixed; bottom: calc(0dvh + 16px); margin-top: 16px; max-width: 460px; padding: 0 24px; width: 100%; } .toast-text { text-align: center; font-size: 16px; }