:root{--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:16px/145% var(--sans);color:#17191f;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f3f4f6}body{margin:0}#root{min-height:100svh}.app-shell{color:#17191f;background:#f3f4f6;grid-template-columns:minmax(320px,.92fr) minmax(360px,1.08fr);min-height:100svh;display:grid}.composer{border-right:1px solid #d7dbe2;flex-direction:column;justify-content:center;padding:52px clamp(24px,6vw,76px);display:flex}.panel-header{margin-bottom:30px}.eyebrow{color:#3962d1;text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:8px;margin:0 0 10px;font-size:12px;font-weight:800;display:flex}h1{letter-spacing:0;margin:0;font-size:42px;line-height:1.05}.receipt-form{gap:18px;display:grid}label{text-align:left;color:#4c5565;gap:8px;font-size:14px;font-weight:700;display:grid}input{box-sizing:border-box;color:#15171c;width:100%;font:inherit;background:#fff;border:1px solid #c8ced8;border-radius:8px;padding:14px 15px}input:focus{border-color:#3962d1;outline:3px solid #3962d12e}button{color:#fff;min-height:50px;font:inherit;cursor:pointer;background:#17191f;border:0;border-radius:8px;justify-content:center;align-items:center;gap:10px;margin-top:6px;font-weight:800;display:inline-flex}button:disabled{opacity:.65;cursor:not-allowed}.status{text-align:left;border-radius:8px;margin:18px 0 0;padding:12px 14px;font-size:14px;line-height:1.4}.status.success{color:#0d5f3f;background:#dcfce7}.status.error{color:#8a1f1f;background:#fee2e2}.status.loading{color:#334155;background:#e2e8f0}.preview-area{background-color:#25282e;background-image:linear-gradient(90deg,#ffffff8c 1px,#0000 1px),linear-gradient(#ffffff8c 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:36px 36px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;place-items:center;padding:34px 22px;display:grid}.phone-frame{background:#25272b;border:1px solid #3a3d45;width:min(420px,100%);box-shadow:0 28px 80px #0000005c}.email-preview{color:#f7f8fb;text-align:center;background:#25272b;margin:0;padding:0 26px 34px}.email-preview header{color:#a6abb6;background:#1d2026;border-bottom:1px solid #ffffff0a;margin:0 -26px;padding:22px 0;font-size:14px}.mark{color:#15171c;background:#f5f8ff;border-radius:50%;place-items:center;width:64px;height:64px;margin:28px auto 26px;font-size:24px;font-weight:900;display:grid}.mark img{object-fit:contain;width:42px;height:50px}.email-preview h2{color:#fff;letter-spacing:0;margin:0;font-size:38px;line-height:1.08}.preview-amount{color:#fff;margin:8px 0 28px;font-size:38px;font-weight:900;line-height:1.08}.details-card,.tip-card{text-align:left;background:#1d2026;border-radius:8px}.details-card{gap:24px;padding:30px 32px;display:grid}.details-card div{gap:7px;display:grid}.details-card strong,.tip-card strong{color:#fff;font-size:15px}.details-card span,.tip-card span{color:#e4e7ee;overflow-wrap:anywhere;font-size:15px}.tip-card{gap:18px;margin-top:28px;padding:26px 32px;line-height:1.6;display:grid}.tip-button{color:#111316;background:#fff;border-radius:999px;width:min(250px,100%);min-height:54px;margin:8px auto 0;font-weight:900}.footer-mark{color:#15171c;background:#f5f8ff;border-radius:50%;place-items:center;width:54px;height:54px;margin:70px auto 34px;display:grid}.footer-mark img{object-fit:contain;width:32px;height:39px}.email-divider{background:#d8dce5;height:1px;margin:0 0 30px}.email-footer{color:#d8dce5;text-align:left;font-size:13px;line-height:1.55}.email-footer nav{color:#8a8f9b;justify-content:center;align-items:center;gap:13px;margin-bottom:28px;display:flex}.email-footer a{color:#75a7ff;text-decoration:none}.email-footer p a{display:inline}.social-row{justify-content:center;gap:22px;margin-bottom:30px;display:flex}.social-row a{color:#f4f7fb;border:1px solid #8d929d;border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.social-row svg{width:20px;height:20px}.email-footer p{margin:0 0 15px}.email-footer p:last-child{margin-bottom:0}@media (width<=820px){.app-shell{grid-template-columns:1fr}.composer{border-bottom:1px solid #d7dbe2;border-right:0}h1{font-size:34px}.email-preview h2,.preview-amount{font-size:31px}}