/* Approved Daily Outcome card demonstration. Other card styles are unchanged. */
.outcome-demo{--preview-gutter:40px;--demo-paper:#fffdf9;--demo-ink:#302e2a;--demo-muted:#77716a;--demo-rule:#e9e3d9;--demo-shadow:0 16px 36px #46372a12}
.outcome-demo{margin:10px var(--preview-gutter) 0;min-width:0}
.outcome-tabs{display:flex;width:100%;gap:4px;justify-content:space-between;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.outcome-tabs button{flex:1;border-radius:999px;background:transparent;min-height:44px;font-size:13px;color:var(--muted);transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.outcome-tabs button span{font-size:10px;margin-right:4px;opacity:.66;font-variant-numeric:tabular-nums}
.outcome-tabs button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 2px 8px #00000008}
.outcome-stage{display:grid;position:relative;min-height:410px;align-items:center;margin-top:16px}
.outcome-panel{grid-area:1/1;min-width:0;width:100%;animation:outcome-in .38s var(--ease-out) both}
.outcome-panel[hidden]{display:none}
.outcome-sheet{background:var(--demo-paper);color:var(--demo-ink);border:1px solid var(--demo-rule);box-shadow:var(--demo-shadow);width:min(100%,330px);margin:0 auto;border-radius:10px;padding:25px}
.sheet-kicker{font-size:11px;color:var(--demo-muted);letter-spacing:.06em}
.input-sheet h4{font-size:22px;letter-spacing:-.04em;line-height:1.4;margin:8px 0}
.sheet-hint{font-size:12px;color:var(--demo-muted);margin-bottom:18px}
.input-sheet label{display:flex;gap:11px;align-items:center;cursor:pointer;border-top:1px solid var(--demo-rule);padding:13px 0;line-height:1.55;font-size:13px}
.input-sheet label small{display:block;color:var(--demo-muted);font-size:10px;margin-bottom:2px}
.input-sheet input{appearance:auto;accent-color:var(--blue);width:17px;height:17px;flex-shrink:0;margin:0}
.input-sheet input:not(:checked)+span{opacity:.4}
.outcome-action{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--demo-ink);color:var(--demo-paper);border-radius:9px;min-height:44px;padding:10px 15px;margin-top:12px;font-size:12px;transition:opacity .2s ease,transform .2s ease}
.outcome-action:disabled{opacity:.3;cursor:not-allowed;transform:none}
.outcome-empty{font-size:11px;color:var(--demo-muted);margin-top:9px;text-align:center}
.result-sheet{width:min(100%,292px);border-radius:3px;transform:rotate(-2deg);padding:13px 20px 18px}
.result-sheet .receipt-mini{padding:4px 0 0;color:var(--demo-ink)}
.result-sheet .receipt-en{font-size:9px;letter-spacing:2px;margin:12px 0}
.result-sheet .receipt-title{font-size:24px}.result-sheet .receipt-sub{font-size:11px}
.result-sheet .receipt-date{font-size:10px;padding:13px 0;margin-top:14px;border-color:var(--demo-rule)}
.result-sheet .receipt-mini li{padding:12px 0;border-color:var(--demo-rule)}
.result-sheet .receipt-mini li span{font-size:10px}.result-sheet .receipt-mini li b{font-size:12px;line-height:1.6}
.result-sheet .receipt-sum{font-size:10px;padding:15px 0}.result-sheet .receipt-sum b{font-size:18px}
.result-sheet .receipt-pending{font-size:10px;padding-top:12px;border-color:var(--demo-rule)}
.result-sheet .outcome-action{margin-top:14px}
.outcome-saved{text-align:center;width:100%;padding:15px 0}
.saved-check{display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:color-mix(in srgb,var(--card) 65%,transparent);border-radius:50%;font-size:30px;font-weight:300;width:62px;height:62px;margin:0 auto 22px;color:var(--accent)}
.outcome-saved h4{font-size:25px;line-height:1.5;letter-spacing:-.04em}.outcome-saved>p{font-size:13px;color:var(--muted);margin-top:7px}
.saved-record{display:flex;align-items:center;gap:14px;text-align:left;width:min(100%,330px);background:var(--card);border:1px solid color-mix(in srgb,var(--line) 50%,transparent);padding:20px;border-radius:14px;margin:30px auto 18px;box-shadow:var(--demo-shadow)}
.saved-record img{flex-shrink:0}.saved-record strong{display:block;font-size:13px;font-weight:550}.saved-record small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.saved-record>b{margin-left:auto;font-size:17px;font-weight:400}
.outcome-restart{background:transparent;font-size:12px;color:var(--muted);min-height:44px;padding:8px 14px;border-radius:20px}
.outcome-caption{text-align:center;font-size:10px;color:var(--muted);letter-spacing:0;line-height:1.5;margin-top:15px;margin-bottom:14px}
:root[data-theme=dark] .outcome-demo{--demo-paper:#302d29;--demo-ink:#eee9e1;--demo-muted:#bdb5ac;--demo-rule:#4b443d;--demo-shadow:0 18px 38px #0002}
:root[data-theme=dark] .result-sheet .receipt-mini{color:var(--demo-ink)}
:root[data-theme=dark] .result-sheet .receipt-mini :is(.receipt-en,.receipt-sub,.receipt-date>span,.receipt-sum>span,.receipt-pending){color:var(--demo-muted)}
:root[data-theme=dark] .result-sheet .receipt-mini li span{color:var(--accent)}
@keyframes outcome-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

@media(hover:hover) and (pointer:fine){.outcome-tabs button:hover{color:var(--ink)}.outcome-action:hover{opacity:.88}.outcome-restart:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}.saved-record:hover{transform:translateY(-3px);transition:transform .2s ease}}
@media(max-width:1050px){.outcome-demo{--preview-gutter:30px}.outcome-sheet{padding:20px}.outcome-tabs button{font-size:12px}.outcome-tabs button span{font-size:9px;margin-right:2px}}
@media(max-width:760px){.outcome-demo{--preview-gutter:28px;margin-top:25px}.outcome-tabs button span{font-size:10px}.outcome-caption{margin-top:10px}.outcome-saved h4{font-size:23px}}
@media(max-width:359px){.outcome-demo{--preview-gutter:22px}.outcome-tabs button span{display:none}.outcome-sheet{padding:18px}.input-sheet h4{font-size:20px}}
@media(prefers-reduced-motion:reduce){.outcome-panel{animation:none}.result-sheet{transform:none}.saved-record{transition:none}}
/* Keep all three demonstration steps on one stable stage. */
.outcome-stage{min-height:444px}
.result-sheet{padding:10px 20px 14px}
.result-sheet .receipt-en{margin:8px 0;font-size:8px}
.result-sheet .receipt-title{font-size:22px}
.result-sheet .receipt-date{padding:9px 0;margin-top:8px}
.result-sheet .receipt-mini li{padding:8px 0}
.result-sheet .receipt-sum{padding:10px 0}
.result-sheet .receipt-pending{padding-top:8px}
.result-sheet .outcome-action{margin-top:10px}
@media(max-width:760px){.outcome-stage{min-height:444px}}