/* A compact view of the actual Billing journey, with a decorative demo pointer. */
.sai-budget{margin:0;padding:20px;background:radial-gradient(ellipse at 100% 0,light-dark(#ffe6cd77,#70432344),transparent 65%),var(--wallet-paper);isolation:isolate}
.sai-budget [hidden]{display:none!important}
.sai-budget-caption{display:grid;gap:3px;margin-bottom:12px}
.sai-budget-caption>strong{font-size:18px;font-weight:600;line-height:1.4;letter-spacing:-.025em}
.sai-budget-caption>span{font-size:11px;color:var(--wallet-muted)}
.sai-budget-window{position:relative;border:1px solid light-dark(#e4d5c6,#514538);border-radius:15px;background:var(--wallet-paper);box-shadow:0 14px 30px light-dark(#59310f0b,#0002);overflow:clip;pointer-events:none;user-select:none}
.sai-budget-chrome{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--wallet-line);font-size:12px;background:var(--wallet-soft)}
.sai-budget-chrome>svg{width:18px;height:18px;color:var(--wallet-accent)}
.sai-budget-chrome>strong{font-weight:650;letter-spacing:-.025em}
.sai-budget-chrome>span{margin-inline-start:auto;color:var(--wallet-muted);font-size:11px}
.sai-budget-pages{display:grid;padding:14px;position:relative}
.sai-budget-pages>[data-budget-screen]{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transition:opacity .25s}
.sai-budget-ui-heading{display:grid;gap:4px;margin-bottom:12px}
.sai-budget-ui-heading>span{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--wallet-accent)}
.sai-budget-ui-heading>strong{font-size:20px;font-weight:600;letter-spacing:-.035em;line-height:1.35}
.sai-budget-tabs{display:flex;gap:16px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--wallet-line);font-size:10px;color:var(--wallet-muted)}
.sai-budget-tabs>span:first-child{color:var(--wallet-accent);font-weight:600}
.sai-budget-app-row{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px;border:1px solid var(--wallet-line);border-radius:12px;background:var(--wallet-soft)}
.sai-budget-app-row>span:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}
.sai-budget-app-row strong{font-size:13px;font-weight:600;line-height:1.4}
.sai-budget-app-row small{font-size:10px;color:var(--wallet-muted);line-height:1.5}
.sai-budget-app-row>svg{width:16px;height:16px;color:var(--wallet-accent)}
.sai-budget-app-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid light-dark(#dfd6ee,#5e4e73);border-radius:10px;color:light-dark(#73529a,#d9c2f3);background:light-dark(#f4eefc,#342b42)}
.sai-budget-app-icon>svg{width:19px;height:19px}
.sai-budget-app-row .sai-wallet-status{font-size:9px;padding:4px 7px;flex:none}
.sai-budget-back{display:flex;gap:5px;margin-bottom:6px;font-size:10px;color:var(--wallet-muted)}
.sai-budget-app-row--identity{padding:0 0 10px;border:0;background:none;border-radius:0;min-height:0}
.sai-budget-app-row--identity strong{font-size:20px;letter-spacing:-.035em}
.sai-budget-spending{padding:14px;border:1px solid var(--wallet-line);border-radius:12px;background:var(--wallet-soft)}
.sai-budget-spending-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sai-budget-spending-top>strong{font-size:14px;font-weight:600}
.sai-budget-ui-button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 11px;border:1px solid light-dark(#e5b88f,#785334);border-radius:7px;background:var(--wallet-paper);color:var(--wallet-accent);font-size:11px;font-weight:600;line-height:1.5}
.sai-budget-metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.sai-budget-metrics>div{display:grid;gap:5px;align-content:start;min-width:0}
.sai-budget-metrics>div>span{font-size:11px;color:var(--wallet-muted)}
.sai-budget-metrics strong{font-size:23px;letter-spacing:-.035em;line-height:1.3;font-weight:600;font-variant-numeric:tabular-nums}
.sai-budget-confirmation{align-items:center;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--wallet-line);font-size:11px;color:light-dark(#37632a,#c2dbad)}
.sai-budget-confirmation>svg{width:16px;height:16px}
.sai-budget-pages>.sai-budget-editor{position:relative;align-self:start;z-index:2;max-width:360px;width:100%;margin-inline:auto;padding:14px;border:1px solid light-dark(#cfb194,#806344);border-radius:13px;background:var(--wallet-paper);box-shadow:0 14px 40px light-dark(#54311529,#0007)}
.sai-budget-editor-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:600}
.sai-budget-editor-title>span{font-size:19px;color:var(--wallet-muted);font-weight:400}
.sai-budget-editor>p{font-size:11px;line-height:1.65;margin:8px 0 10px;color:var(--wallet-muted)}
.sai-budget-input-label{font-size:12px;margin-bottom:6px;font-weight:550}
.sai-budget-input{display:flex;align-items:center;min-height:43px;padding:10px 12px;border:1px solid var(--wallet-accent);border-radius:7px;background:var(--wallet-soft);font-size:17px;line-height:1.3;font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px light-dark(#f9dfc6,#67452955);direction:ltr}
.sai-budget-input>i{width:1px;height:19px;margin-inline-start:2px;background:var(--wallet-accent);opacity:0}
.sai-budget-checkbox{display:flex;align-items:center;gap:7px;font-size:11px;margin:10px 0}
.sai-budget-checkbox>i{width:13px;height:13px;flex:none;border:1px solid var(--wallet-line);border-radius:3px}
.sai-budget-editor>.sai-budget-exclusions{font-size:10px;margin-block:8px}
.sai-budget-editor-actions{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--wallet-muted)}
.sai-budget-ui-button--primary{color:light-dark(#fff,#2a1b10);background:var(--wallet-accent);border-color:var(--wallet-accent)}
.sai-budget [data-budget-after-save]{display:none}
.sai-budget[data-budget-state="saved"] [data-budget-before-save]{display:none}
.sai-budget[data-budget-state="saved"] [data-budget-after-save]{display:block}
.sai-budget[data-budget-state="saved"] .sai-budget-confirmation{display:flex}
.sai-budget[data-budget-state="apps"] [data-budget-screen="apps"],.sai-budget:is([data-budget-state="detail"],[data-budget-state="type"],[data-budget-state="save"],[data-budget-state="saved"]) [data-budget-screen="detail"],.sai-budget:is([data-budget-state="type"],[data-budget-state="save"]) [data-budget-screen="editor"]{opacity:1;visibility:visible}
.sai-budget:is([data-budget-state="type"],[data-budget-state="save"]) [data-budget-screen="detail"]{opacity:.2;filter:blur(1px)}
.sai-budget-pointer{position:absolute;inset:0 auto auto 0;z-index:3;width:28px;height:32px;color:light-dark(#28201a,#ffb07a);opacity:0;transform:translate(var(--pointer-x,0px),var(--pointer-y,0px));transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .15s;filter:drop-shadow(0 2px 3px #0005);pointer-events:none}
.sai-budget-pointer>svg{width:28px;height:32px}
.sai-budget-pointer>i{position:absolute;inset:-11px auto auto -11px;width:26px;height:26px;border:2px solid var(--wallet-accent);border-radius:50%;opacity:0}
.sai-budget[data-budget-playing="true"]:not([data-budget-state="saved"]) .sai-budget-pointer{opacity:1}
.sai-budget.is-clicking .sai-budget-pointer>i{animation:sai-budget-click .4s ease-out}
.sai-budget[data-budget-state="type"][data-budget-playing="true"] .sai-budget-input>i{opacity:1;animation:sai-budget-caret .9s step-end infinite}
@keyframes sai-budget-click{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.5)}}
@keyframes sai-budget-caret{50%{opacity:0}}
.sai-budget-story{display:grid;margin-top:12px}
.sai-budget-story>p{grid-area:1/1;opacity:0;visibility:hidden;font-size:13px;line-height:1.65;color:var(--wallet-ink);font-weight:550;margin:0}
.sai-budget[data-budget-state="apps"] [data-budget-for="apps"],.sai-budget[data-budget-state="detail"] [data-budget-for="detail"],.sai-budget[data-budget-state="type"] [data-budget-for="type"],.sai-budget[data-budget-state="save"] [data-budget-for="save"],.sai-budget[data-budget-state="saved"] [data-budget-for="saved"]{opacity:1;visibility:visible}
.sai-budget-static{font-size:12px;line-height:1.8;color:var(--wallet-muted)}
.sai-budget-controls{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px}
.sai-budget-steps{flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sai-budget-steps>button{display:flex;align-items:center;gap:6px;min-width:0;min-height:44px;padding:8px 0;border:0;border-top:2px solid var(--wallet-line);background:transparent;color:var(--wallet-muted);text-align:start;font-size:11px;line-height:1.5;cursor:pointer}
.sai-budget-steps>button>span:first-child{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1px solid var(--wallet-line);border-radius:50%;font-size:10px}
.sai-budget-steps>button[aria-pressed="true"]{border-color:var(--wallet-accent);color:var(--wallet-accent)}
.sai-budget-steps>button[aria-pressed="true"]>span:first-child{border-color:var(--wallet-accent)}
.sai-wallet-page .sai-budget-play{display:flex;flex-shrink:0;justify-content:center;align-items:center;min-height:44px;max-width:100%;margin:0;padding:6px;border:0;border-radius:5px;background:transparent;color:var(--wallet-muted);font-size:11px;line-height:1.5;cursor:pointer}
.sai-budget-play>span{display:flex;align-items:center;gap:7px}
.sai-budget-play svg{width:14px;height:14px}
.sai-budget-play:hover,.sai-budget-steps>button:hover{color:var(--wallet-accent)}
.sai-budget-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sai-budget.is-still *{animation:none!important;transition:none!important}
.sai-budget.is-paused *{animation-play-state:paused!important}
.sai-budget.is-paused .sai-budget-pointer{transition:none}
.sai-disconnect-card{padding:14px;border:1px solid var(--wallet-line);border-radius:12px;background:var(--wallet-soft)}
.sai-disconnect-card>strong{font-size:15px;font-weight:600}
.sai-disconnect-card>p{margin:8px 0 0;font-size:11px;line-height:1.75;color:var(--wallet-muted)}
.sai-disconnect-options{display:grid;margin-top:12px;align-items:start;justify-items:start}
.sai-disconnect-options>[data-disconnect-target="disconnect"],.sai-disconnect-form{grid-area:1/1}
.sai-disconnect-options>[data-disconnect-target="disconnect"]{opacity:1;visibility:visible}
.sai-disconnect-form{opacity:0;visibility:hidden;min-width:0}
.sai-disconnect-ack{display:flex;align-items:start;gap:9px;font-size:11px;line-height:1.8}
.sai-disconnect-box{display:grid;place-items:center;width:18px;height:18px;margin-top:2px;flex:none;border:1px solid light-dark(#b9a995,#8c7961);border-radius:4px;background:var(--wallet-paper)}
.sai-disconnect-box>svg{width:14px;height:14px;opacity:0}
.sai-disconnect-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:12px;font-size:11px;color:var(--wallet-muted)}
.sai-disconnect-actions>.sai-budget-ui-button{background:light-dark(#e9e4de,#3b3731);border-color:var(--wallet-line);color:var(--wallet-muted)}
.sai-disconnect-clickthrough.is-acknowledged .sai-disconnect-box{background:var(--wallet-accent);border-color:var(--wallet-accent);color:light-dark(#fff,#2a1b10)}
.sai-disconnect-clickthrough.is-acknowledged .sai-disconnect-box>svg{opacity:1}
.sai-disconnect-clickthrough.is-acknowledged .sai-disconnect-actions>.sai-budget-ui-button{background:var(--wallet-accent);border-color:var(--wallet-accent);color:light-dark(#fff,#2a1b10)}
.sai-disconnect-clickthrough:is([data-budget-state="ack"],[data-budget-state="confirm"]) [data-budget-screen="detail"],.sai-disconnect-clickthrough[data-budget-state="disconnected"] [data-budget-screen="disconnected"]{visibility:visible;opacity:1}
.sai-disconnect-clickthrough:is([data-budget-state="ack"],[data-budget-state="confirm"]) .sai-disconnect-form{visibility:visible;opacity:1}
.sai-disconnect-clickthrough:is([data-budget-state="ack"],[data-budget-state="confirm"]) .sai-disconnect-options>[data-disconnect-target="disconnect"]{visibility:hidden;opacity:0}
.sai-disconnect-clickthrough[data-budget-state="disconnected"] .sai-budget-pointer{opacity:0}
.sai-disconnect-clickthrough[data-budget-state="apps"] [data-disconnect-for="apps"],.sai-disconnect-clickthrough[data-budget-state="detail"] [data-disconnect-for="detail"],.sai-disconnect-clickthrough[data-budget-state="ack"] [data-disconnect-for="ack"],.sai-disconnect-clickthrough[data-budget-state="confirm"] [data-disconnect-for="confirm"],.sai-disconnect-clickthrough[data-budget-state="disconnected"] [data-disconnect-for="disconnected"]{visibility:visible;opacity:1}
.sai-disconnect-status{padding:4px 7px;border:1px solid var(--wallet-line);border-radius:999px;background:var(--wallet-soft);font-size:9px;color:var(--wallet-muted)}
.sai-disconnect-result{display:grid;grid-template-columns:22px 1fr;column-gap:10px;padding:14px;border:1px solid light-dark(#c7d9bd,#4c5f41);border-radius:12px;background:light-dark(#f3f8ed,#2b3425)}
.sai-disconnect-result>svg{grid-row:1/3;width:20px;height:20px;color:light-dark(#37632a,#c2dbad)}
.sai-disconnect-result>strong{font-size:15px;font-weight:600;line-height:1.5}
.sai-disconnect-result>p{margin:6px 0 0;font-size:11px;line-height:1.8;color:var(--wallet-muted)}
.sai-disconnect-history{display:flex;align-items:start;gap:9px;padding-top:12px;font-size:11px;line-height:1.8;color:var(--wallet-muted)}
.sai-disconnect-history>svg{width:18px;height:18px;margin-top:1px;color:var(--wallet-accent)}
@media(max-width:1080px) and (min-width:801px),(max-width:430px){.sai-budget{padding:16px}.sai-budget-pages{padding:10px}.sai-budget-pages>.sai-budget-editor{padding:12px}.sai-budget-caption>strong{font-size:17px}.sai-budget-app-row{padding:10px;gap:8px}.sai-budget-app-row>.sai-wallet-status{display:none}.sai-budget-tabs{gap:10px}.sai-budget-ui-heading>strong{font-size:19px}.sai-budget-spending{padding:12px}.sai-budget-steps{gap:8px 12px}}
@media(prefers-reduced-motion:reduce){.sai-budget *{animation:none!important;transition:none!important}.sai-budget .sai-budget-pointer{display:none}}
@media(forced-colors:active){.sai-budget-pointer{color:CanvasText}.sai-budget-ui-button,.sai-budget-input,.sai-budget-app-icon{border-color:CanvasText}.sai-budget-steps>button[aria-pressed="true"]{border-color:Highlight}}

/* The same sample UI can be used directly; actions stay in browser memory. */
.sai-wallet-sample[data-sample-ready] .sai-budget-window{pointer-events:auto;user-select:text}
.sai-wallet-sample .sai-budget-window button{color:var(--wallet-ink);font:inherit;text-align:start;cursor:pointer}
.sai-wallet-sample button.sai-budget-app-row{width:100%}
.sai-wallet-sample button.sai-budget-back{padding:0;border:0;background:none;font-size:11px;min-height:28px;color:var(--wallet-muted)}
.sai-wallet-sample .sai-budget-window button.sai-budget-ui-button{font-size:12px;text-align:center;min-height:40px;color:var(--wallet-accent)}
.sai-wallet-sample .sai-budget-window button.sai-budget-ui-button--primary{color:light-dark(#fff,#2a1b10)}
.sai-wallet-sample .sai-budget-window button:disabled{cursor:not-allowed;background:var(--wallet-line);border-color:var(--wallet-line);color:var(--wallet-muted)}
.sai-wallet-sample .sai-budget-editor-title>button{padding:0;min-width:28px;min-height:28px;border:0;background:none;font-size:22px;color:var(--wallet-muted);text-align:center}
.sai-wallet-sample .sai-budget-input-label{display:block}
.sai-wallet-sample .sai-budget-input{position:relative}
.sai-wallet-sample .sai-budget-input>input{width:100%;min-width:0;padding:0;border:0;background:none;color:var(--wallet-ink);font-size:17px;line-height:1.4;appearance:textfield;outline-offset:6px;box-shadow:none}
.sai-wallet-sample .sai-budget-input>input::-webkit-inner-spin-button{appearance:none}
.sai-wallet-sample .sai-budget-input:has(input:disabled){opacity:.5}
.sai-wallet-sample .sai-budget-checkbox>input,.sai-wallet-sample input.sai-disconnect-box{appearance:auto;accent-color:var(--wallet-accent);margin:2px 0 0;width:18px;height:18px;flex:none;padding:0;box-shadow:none}
.sai-wallet-sample .sai-budget-editor-actions>button[data-sample-action],.sai-wallet-sample .sai-disconnect-actions>button[data-sample-action]{min-height:40px;padding:7px 10px;border:1px solid var(--wallet-line);border-radius:7px;background:var(--wallet-paper);font-size:12px;color:var(--wallet-muted)}
.sai-wallet-sample .sai-disconnect-form{margin:0}
.sai-wallet-sample .sai-disconnect-form .sai-disconnect-ack{font-weight:400}
.sai-wallet-sample .sai-sample-feedback{font-size:11px;color:var(--wallet-accent);margin:0 0 12px}
.sai-wallet-sample .sai-sample-feedback:empty{display:none}
.sai-wallet-sample .sai-ohoz-mark{background:var(--wallet-soft);border-color:var(--wallet-line);color:var(--wallet-ink);overflow:hidden}
.sai-ohoz-mark>img{display:block;width:34px;height:34px;max-width:none;object-fit:contain}
.sai-ohoz-mark>.sai-ohoz-on-dark{display:none}
html[data-sai-theme=dark] .sai-ohoz-mark>.sai-ohoz-on-light{display:none}
html[data-sai-theme=dark] .sai-ohoz-mark>.sai-ohoz-on-dark{display:block}
@media(prefers-color-scheme:dark){html:not([data-sai-theme=light]) .sai-ohoz-mark>.sai-ohoz-on-light{display:none}html:not([data-sai-theme=light]) .sai-ohoz-mark>.sai-ohoz-on-dark{display:block}}
.sai-sample-conversion{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding-top:10px;border-top:1px solid var(--wallet-line)}
.sai-sample-conversion>p{font-size:12px;line-height:1.6;color:var(--wallet-muted);margin:0}
.sai-sample-conversion>.sai-wallet-button{font-size:12px;min-height:44px;flex-shrink:0;padding:10px 13px;gap:12px}
.sai-sample-restart,.sai-sample-manual{flex:1 1 200px;font-size:11px;color:var(--wallet-muted);line-height:1.5;text-align:end;margin:0}
.sai-budget[data-sample-mode=manual] .sai-budget-pointer{display:none}
.sai-wallet-sample.has-sample-limit [data-budget-before-save]{display:none}
.sai-wallet-sample.has-sample-limit [data-budget-after-save]{display:block}
.sai-wallet-sample.has-sample-limit .sai-budget-confirmation{display:flex}
.sai-wallet-sample.is-sample-disconnected .sai-budget-tabs>span:first-child{color:var(--wallet-muted);font-weight:400}
.sai-wallet-sample.is-sample-disconnected .sai-budget-tabs>span:last-child{color:var(--wallet-accent);font-weight:600}
@media(max-width:430px){.sai-sample-conversion{flex-wrap:wrap;gap:10px}.sai-sample-conversion>.sai-wallet-button{width:100%}.sai-wallet-sample .sai-budget-steps{gap:7px}.sai-wallet-sample .sai-budget-steps>button{flex-direction:column;align-items:flex-start;gap:4px;font-size:10px;line-height:1.6}}

/* Cancel the LP-wide CTA offset inside the compact sample toolbar. */
.sai-wallet-consumer #control .sai-sample-conversion>.sai-wallet-button{margin:0}