/* Every size below is measured from the original 1080px-wide screenshot and scaled with --u,
   so the layout keeps exactly the same proportions on every phone width. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --u:calc(min(100vw, 430px) / 1080);
  --text:#1D212F;
  --bg:#F5F6FD;
  --btn-grad:linear-gradient(90deg,#FA5E5C 0%,#FF9D90 100%);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html,body{background:#E6E9F0;font-family:var(--font);color:var(--text);-webkit-text-size-adjust:100%}
body{display:flex;justify-content:center;min-height:100vh;overflow-x:hidden}
.screen{position:relative;width:100%;max-width:430px;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;overflow-x:hidden}
button,textarea{font-family:inherit;border:none;background:none;outline:none}
button{cursor:pointer}

/* header: 130 high, title 52, back arrow at x=48 */
.topbar{position:sticky;top:0;z-index:5;flex-shrink:0;height:calc(130 * var(--u) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:#fff;display:flex;align-items:center;justify-content:center}
.topbar h1{font-size:calc(52 * var(--u));font-weight:400;color:var(--text);line-height:1}
.back-btn{position:absolute;left:calc(20 * var(--u));bottom:0;width:calc(110 * var(--u));height:calc(130 * var(--u));display:flex;align-items:center;justify-content:center}
.back-btn svg{width:calc(56 * var(--u));height:calc(56 * var(--u));stroke:var(--text);stroke-width:2}

.content{flex:1;display:flex;flex-direction:column;align-items:center;padding:calc(35 * var(--u)) calc(35 * var(--u)) calc(198 * var(--u))}

/* card: x 35..1045, 986 high, radius 40; text starts 63 from the left, first line centre 82 from the top */
.fb-card{width:100%;height:calc(986 * var(--u));background:#fff;border-radius:calc(40 * var(--u));padding:calc(62 * var(--u)) calc(63 * var(--u)) calc(40 * var(--u))}
.fb-card textarea{display:block;width:100%;height:100%;resize:none;font-size:calc(38 * var(--u));line-height:calc(40 * var(--u));color:var(--text);overflow-y:auto}
.fb-card textarea::placeholder{color:#C1C4D3;opacity:1}

/* two centred lines, 44 text / 68 line height, 95 below the card */
.fb-tip{margin-top:calc(95 * var(--u));text-align:center;font-size:calc(44 * var(--u));line-height:calc(68 * var(--u));color:var(--text)}

/* picture 635 wide, 63 below the text */
.fb-art{display:block;width:calc(635 * var(--u));height:auto;margin-top:calc(63 * var(--u));pointer-events:none;-webkit-user-select:none;user-select:none}

/* button: 970 x 115, 133 below the picture, fully rounded, 46 text */
.btn-submit{width:calc(970 * var(--u));height:calc(115 * var(--u));margin-top:calc(133 * var(--u));border-radius:calc(58 * var(--u));background:var(--btn-grad);color:#fff;font-size:calc(46 * var(--u));font-weight:400;line-height:1}
.btn-submit:active{opacity:.9}
.btn-submit[disabled]{opacity:.6}

/* toast (same as the other pages) */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99999;width:calc(330 * var(--u));min-height:calc(330 * var(--u));background:rgba(74,74,76,.96);border-radius:calc(40 * var(--u));padding:calc(30 * var(--u)) calc(24 * var(--u));display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.toast.show{display:flex}
.toast-ico{height:calc(110 * var(--u));display:flex;align-items:center;justify-content:center;margin-bottom:calc(10 * var(--u))}
.toast-ico svg{height:100%;width:auto}
.toast-text{color:#fff;font-size:calc(40 * var(--u));line-height:1.35;white-space:pre-line}