/* box-sizing reset for the app shell only — the embedded receipt must keep content-box (browser default) because Uber's inline CSS sets `width: 32px; padding-right: 18px` etc. on icons and expects the total rendered width to be 50px (content-box behaviour). */ body, .app, .form-panel, .form-panel * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #f4f4f4; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: #000; } .app { display: grid; grid-template-columns: 380px 1fr; gap: 24px; padding: 24px; min-height: 100vh; } .form-panel { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); align-self: start; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; } .form-panel h2 { margin: 0 0 4px; font-size: 18px; } .form-panel .subtitle { font-size: 12px; color: #6b6b6b; margin-bottom: 16px; } .form-panel fieldset { border: none; padding: 0; margin: 0 0 16px; } .form-panel legend { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6b6b6b; padding: 0; margin-bottom: 8px; } .form-panel label { display: block; font-size: 12px; margin-bottom: 10px; } .form-panel label > span { display: block; color: #4b4b4b; margin-bottom: 4px; } .form-panel input, .form-panel textarea, .form-panel select { width: 100%; border: 1px solid #d6d6d6; border-radius: 4px; padding: 7px 9px; font-size: 13px; font-family: inherit; background: #fff; } .form-panel input:focus, .form-panel textarea:focus, .form-panel select:focus { outline: none; border-color: #000; } .form-panel textarea { resize: vertical; min-height: 56px; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .actions { position: sticky; bottom: 0; background: #fff; padding-top: 12px; border-top: 1px solid #eee; display: flex; gap: 8px; } .btn { flex: 1; background: #000; color: #fff; border: none; border-radius: 4px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .btn:hover { background: #222; } .btn.secondary { background: #fff; color: #000; border: 1px solid #d6d6d6; } .btn.secondary:hover { background: #f4f4f4; } .preview-panel { display: flex; justify-content: center; align-items: flex-start; } /* The receipt mount — let the original HTML's inline styles do all the work. */ #receipt-mount { width: 700px; max-width: 100%; } /* === Styles copied verbatim from the original Gmail HTML's . The original document had two