:root {
  --receipt-bg: #f5efdf;
  --receipt-paper: #fcf8ee;
  --receipt-ink: #29271f;
  --receipt-yellow: #f2d365;
  --receipt-muted: #746d5d;
}

body { background: var(--receipt-bg); color: var(--receipt-ink); }
.app-shell { background: var(--receipt-bg); }
.draw-page { max-width: 1180px; }
.draw-page-heading { align-items: center; gap: 28px; }
.draw-page-heading h2 { color: var(--receipt-ink); letter-spacing: -.05em; }
.draw-page-heading p { color: var(--receipt-muted); }
.receipt-header-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.receipt-pool-label { color: var(--receipt-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.receipt-pool-tabs { display: inline-flex; padding: 3px; border: 1px solid rgba(41,39,31,.25); border-radius: 999px; background: rgba(252,248,238,.72); }
.receipt-pool-tabs .pool-tab { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--receipt-muted); font-weight: 700; }
.receipt-pool-tabs .pool-tab.active { background: var(--receipt-ink); color: var(--receipt-paper); }
.receipt-settings-summary { font-size: 12px; color: var(--receipt-ink); white-space: nowrap; }

.receipt-stage { position: relative; min-height: min(650px, calc(100vh - 235px)); overflow: hidden; display: grid; place-items: center; padding: 46px 24px 56px; border: 1px solid rgba(41,39,31,.18); border-radius: 26px; background: var(--receipt-bg); color: var(--receipt-ink); box-shadow: 0 18px 44px rgba(83,68,36,.08); }
.receipt-stage::before, .receipt-stage::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; opacity: .38; }
.receipt-stage::before { width: 380px; height: 380px; top: -190px; right: -100px; background: var(--receipt-yellow); filter: blur(24px); }
.receipt-stage::after { width: 260px; height: 260px; bottom: -150px; left: -80px; background: rgba(255,255,255,.7); filter: blur(30px); }
.receipt-stamp { position: absolute; top: 42px; left: 50%; z-index: 2; display: grid; justify-items: center; gap: 3px; min-width: 220px; padding: 11px 22px 13px; border: 2px solid var(--receipt-ink); outline: 1px solid var(--receipt-ink); outline-offset: 5px; transform: translateX(-50%) rotate(-2deg); background: rgba(245,239,223,.88); }
.receipt-stamp-kicker { font-size: 9px; font-weight: 800; letter-spacing: .19em; }
.receipt-stamp h3 { margin: 0; font-size: clamp(23px, 3vw, 32px); letter-spacing: -.08em; }
.receipt-date-tag { position: absolute; right: -48px; top: -18px; padding: 7px 11px; background: var(--receipt-yellow); font-size: 13px; font-weight: 900; letter-spacing: .08em; transform: rotate(7deg); box-shadow: 3px 3px 0 rgba(41,39,31,.12); }

.receipt-printer { position: relative; z-index: 1; width: min(320px, 72vw); margin-top: 86px; }
.receipt-paper-window { position: relative; height: clamp(310px, 46vh, 410px); overflow: hidden; }
.receipt-paper-track { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; }
.receipt-paper { position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; color: var(--receipt-ink); background: var(--receipt-paper); border: 0; box-shadow: 0 12px 20px rgba(53,44,26,.14); }
.receipt-paper::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 12px; background: linear-gradient(135deg, transparent 5px, var(--receipt-paper) 0) 0 0/12px 12px repeat-x; }
.receipt-trigger { min-height: 126px; padding: 30px 20px 28px; cursor: pointer; transform: translateY(-24px); transition: transform .2s ease, box-shadow .2s ease; }
.receipt-trigger span { display: inline-grid; place-items: center; min-height: 48px; font-size: 21px; font-weight: 900; letter-spacing: .08em; }
.receipt-trigger:hover, .receipt-trigger:focus-visible { transform: translateY(-18px); box-shadow: 0 15px 25px rgba(53,44,26,.18); }
.receipt-trigger:focus-visible, .receipt-again:focus-visible { outline: 3px solid var(--receipt-yellow); outline-offset: 4px; }
.receipt-slot { position: absolute; top: -4px; left: -10px; z-index: 4; width: calc(100% + 20px); height: 14px; border-radius: 999px; background: var(--receipt-ink); box-shadow: 0 4px 0 rgba(41,39,31,.13); pointer-events: none; }
.receipt-paper-track.is-printing .receipt-paper { animation: receipt-print .86s cubic-bezier(.22,.8,.26,1) both; }
.receipt-paper-track.is-exiting .receipt-paper { animation: receipt-exit .22s ease both; }
.receipt-result { min-height: 286px; padding: 42px 28px 31px; text-align: center; }
.receipt-kicker { display: block; margin-bottom: 24px; color: var(--receipt-muted); font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.receipt-project-name { display: block; font-size: clamp(26px, 3vw, 36px); line-height: 1.18; letter-spacing: -.06em; overflow-wrap: anywhere; }
.receipt-rule { width: 72%; margin: 28px auto 18px; border-top: 1px dashed rgba(41,39,31,.38); }
.receipt-meta { display: block; color: var(--receipt-muted); font-size: 12px; letter-spacing: .05em; }
.receipt-again { display: inline-block; margin-top: 30px; padding: 4px 0; color: var(--receipt-ink); background: transparent; border: 0; border-bottom: 1px solid var(--receipt-ink); font: inherit; font-size: 13px; cursor: pointer; }
.receipt-empty { display: grid; align-content: center; gap: 9px; min-height: 126px; color: var(--receipt-ink); }
.receipt-empty strong { font-size: 18px; }
.receipt-empty small { color: var(--receipt-muted); font-size: 12px; }
.receipt-status { position: absolute; bottom: 28px; left: 0; width: 100%; text-align: center; color: var(--receipt-muted); font-size: 12px; }

@keyframes receipt-print { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes receipt-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); } }

@media (max-width: 700px) {
  .draw-page-heading { align-items: flex-start; gap: 16px; }
  .draw-page-heading h2 { font-size: 30px; }
  .receipt-header-tools { width: 100%; justify-content: flex-start; gap: 8px; }
  .receipt-pool-label { display: none; }
  .receipt-stage { min-height: calc(100vh - 260px); min-height: calc(100svh - 260px); padding: 35px 13px 52px; border-radius: 20px; }
  .receipt-stamp { top: 33px; min-width: 190px; padding: 9px 18px 11px; }
  .receipt-stamp h3 { font-size: 26px; }
  .receipt-date-tag { right: -38px; top: -16px; font-size: 12px; }
  .receipt-printer { width: min(274px, 78vw); margin-top: 71px; }
  .receipt-paper-window { height: 370px; }
  .receipt-result { min-height: 282px; padding: 38px 22px 28px; }
  .receipt-project-name { font-size: 27px; }
  .receipt-status { bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}