.tip-page { --tp-bg:#fafbfe; --tp-accent:#326dde; --tp-button-ink:#fff; --tp-surface:#fff; --tp-ink:#222b3b; --tp-muted:#667286; --tp-line:#e6eaf1; --tp-radius:16px; --tp-font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--tp-bg); color:var(--tp-ink); font-family:var(--tp-font); min-height:calc(100dvh - 180px); max-width:none; width:100%; padding:40px 20px; display:flex; flex-direction:column; align-items:center; }
.tip-page.background-gradient { background:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--tp-accent) 18%,transparent),transparent 65%),var(--tp-bg); }
.tip-page .tipping-card { position:relative; width:100%; max-width:460px; background:var(--tp-surface); border-color:var(--tp-line); color:var(--tp-ink); border-radius:var(--tp-radius); overflow:hidden; padding:32px; box-shadow:0 12px 48px #1420390c; }
.tip-page :is(h1,h2,h3,strong,label) { color:var(--tp-ink); }
.tip-page :is(p,small,.eyebrow,.optional) { color:var(--tp-muted); }
.tip-page h1 { margin:0 0 8px; font-size:30px; }
.tip-page h2 { margin:20px 0 6px; font-size:22px; }
.tip-page .tip-identity { text-align:center; }
.tip-page .tip-introduction { text-align:center; }
.tip-page .worker-intro { margin:16px auto; max-width:36ch; }
.tip-page .tip-welcome { text-align:center; }
.tip-page .tip-cover { margin:-32px -32px 24px; aspect-ratio:8/3; background:var(--tp-line); }
.tip-page .tip-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.tip-page.layout-cover .tipping-card { border:0; box-shadow:0 8px 40px #14203909; }
.tip-page.layout-cover .tip-cover { margin-bottom:0; }
.tip-page.layout-cover .tip-cover:not([hidden])~.eyebrow { margin-top:22px; }
.tip-page .tip-avatar { overflow:hidden; background:color-mix(in srgb,var(--tp-accent) 12%,var(--tp-surface)); color:var(--tp-ink); border-color:var(--tp-surface); }
.tip-page .tip-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.tip-page.avatar-square .tip-avatar { border-radius:20px; }
.tip-page .card-divider { background:var(--tp-line); margin:20px 0; }
.tip-page .amount-options { display:block; margin:0; }
.tip-page [data-tip-amounts] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; background:transparent; padding:0; border:0; box-shadow:none; }
.tip-page .amount-options label { margin:0 0 10px; }
.tip-page .amount-options label span { display:block; color:var(--tp-ink); background:var(--tp-surface); border-color:var(--tp-line); min-height:52px; padding:12px 6px; }
.tip-page .amount-options input:checked+span { background:color-mix(in srgb,var(--tp-accent) 12%,var(--tp-surface)); color:var(--tp-ink); border-color:var(--tp-accent); box-shadow:0 0 0 1px var(--tp-accent); }
.tip-page .amount-options input:focus-visible+span { outline:3px solid var(--tp-accent); outline-offset:3px; }
.tip-page .custom-choice { display:block; }
.tip-page :is(input[type=number],textarea) { background:var(--tp-surface); color:var(--tp-ink); border-color:var(--tp-line); }
.tip-page :is(input,textarea)::placeholder { color:var(--tp-muted); }
.tip-page .button { background:var(--tp-accent); border-color:var(--tp-accent); color:var(--tp-button-ink); }
.tip-page .button:hover { filter:brightness(.94); }
.tip-page .button:focus-visible { outline-color:var(--tp-accent); }
.tip-page a { color:var(--tp-ink); }
.tip-page .field-error,.tip-page .notice.error { color:#ad3b3b; }
.tip-page .notice { text-align:left; }
.tip-page .under-card { margin:24px 0 0; font-size:12px; text-align:center; color:var(--tp-ink); }
@media(max-width:480px) { .tip-page { padding:24px 16px; }.tip-page .tipping-card { padding:24px 20px; }.tip-page .tip-cover { margin:-24px -20px 22px; }.tip-page h1 { font-size:28px; } }