.demo-photo-launch { margin-bottom: 1.1rem; }
.demo-photo-button { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 54px; padding: .9rem; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.demo-photo-button:hover { background: #4338ca; }
.demo-photo-button:disabled { opacity: .6; cursor: default; }
.demo-photo-button svg { flex-shrink: 0; }
.demo-photo-try { padding: .15rem .4rem; border-radius: 5px; background: rgba(255,255,255,.18); font-size: .625rem; white-space: nowrap; }
.demo-photo-launch > p { margin: .55rem 0 0; color: #64748b; text-align: center; font-size: .75rem; line-height: 1.5; }
.demo-photo-launch > .demo-photo-added { padding: .65rem; border-radius: 8px; background: #ecfdf5; color: #166534; font-weight: 600; }
.demo-photo-dialog { width: min(900px, calc(100% - 2rem)); max-width: 900px; max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; margin: auto; padding: 0; border: 1px solid #e2e8f0; border-radius: 20px; color: #1e293b; background: #fff; box-shadow: 0 28px 90px rgba(15,23,42,.25); }
.demo-photo-dialog::backdrop { background: rgba(15,23,42,.6); backdrop-filter: blur(4px); }
.demo-photo-dialog [hidden] { display: none !important; }
.demo-photo-heading { position: sticky; top: 0; z-index: 1; display: flex; gap: 1rem; align-items: start; justify-content: space-between; padding: 1.5rem 1.6rem 1.25rem; border-bottom: 1px solid #e2e8f0; background: #fff; }
.demo-photo-eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4f46e5; }
.demo-photo-heading h2 { margin: .35rem 0 .4rem; font-size: clamp(1.15rem, 3.5vw, 1.65rem); line-height: 1.25; letter-spacing: -.025em; }
.demo-photo-heading p { max-width: 530px; margin: 0; color: #64748b; font-size: .8125rem; line-height: 1.5; }
.demo-photo-close { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: 50%; background: #f8fafc; color: #475569; cursor: pointer; }
.demo-photo-workspace { display: grid; grid-template-columns: .85fr 1.15fr; }
.demo-photo-preview { padding: 1.5rem 1.6rem; background: #f1f5f9; border-radius: 0 0 0 20px; }
.demo-photo-workspace h3 { margin: 0; font-size: .875rem; font-weight: 700; }
.demo-photo-paper { position: relative; margin: 1.2rem auto; padding: 1.4rem 1rem 1rem; max-width: 290px; background: #fffdf7; border: 1px solid #e8e5dc; border-radius: 4px; box-shadow: 0 10px 25px rgba(15,23,42,.07); transform: rotate(-1.5deg); overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.demo-photo-supplier { text-align: center; font-size: 1rem; font-weight: 800; letter-spacing: .08em; line-height: 1.4; }
.demo-photo-receipt-meta { margin: .65rem 0 1rem; color: #78716c; text-align: center; font-size: .5625rem; }
.demo-photo-receipt-item { display: flex; justify-content: space-between; gap: .5rem; padding: .8rem 0; border-top: 1px dashed #d6d3d1; }
.demo-photo-receipt-item small { display: block; margin-top: .25rem; font-size: .625rem; color: #78716c; }
.demo-photo-receipt-item strong { white-space: nowrap; }
.demo-photo-receipt-total { display: flex; justify-content: space-between; gap: .5rem; margin-top: .3rem; padding-top: .8rem; border-top: 2px solid #d6d3d1; font-weight: 700; }
.demo-photo-receipt-footer { margin: 1rem 0 0; font-size: .5625rem; color: #78716c; text-align: center; }
.demo-photo-caption { max-width: 270px; margin: 1rem auto 0; text-align: center; color: #64748b; font-size: .75rem; line-height: 1.5; }
.demo-photo-scan { display: none; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #6366f1; box-shadow: 0 0 18px #818cf8; }
.demo-photo-dialog.is-reading .demo-photo-scan { display: block; animation: demoPhotoRead .8s ease-in-out infinite; }
.demo-photo-dialog.is-reading .demo-photo-table-wrap { opacity: .35; }
.demo-photo-review { padding: 1.5rem 1.6rem; }
.demo-photo-review-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.demo-photo-badge { color: #166534; background: #dcfce7; border-radius: 999px; padding: .25rem .5rem; font-size: .625rem; font-weight: 700; white-space: nowrap; }
.demo-photo-status { min-height: 2.5em; margin: .65rem 0 1rem; color: #64748b; font-size: .75rem; line-height: 1.5; }
.demo-photo-markup { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .8rem 1rem; border: 1px solid #c7d2fe; border-radius: 10px; background: #eef2ff; }
.demo-photo-markup label { font-size: .8125rem; font-weight: 700; }
.demo-photo-markup > div { display: flex; align-items: center; gap: .35rem; }
.demo-photo-markup input { width: 80px; padding: .4rem; border: 1px solid #a5b4fc; border-radius: 6px; font: inherit; font-size: 1rem; text-align: right; background: #fff; color: #1e293b; }
.demo-photo-table-wrap { margin-top: 1rem; transition: opacity .2s; }
.demo-photo-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.demo-photo-table th { color: #64748b; font-size: .625rem; font-weight: 600; text-align: right; vertical-align: top; padding: 0 0 .65rem .4rem; }
.demo-photo-table th:first-child { text-align: left; padding-left: 0; }
.demo-photo-table th small { font-weight: 400; }
.demo-photo-table td { padding: .85rem 0 .85rem .4rem; border-top: 1px solid #e2e8f0; text-align: right; white-space: nowrap; }
.demo-photo-table td:first-child { text-align: left; white-space: normal; padding-left: 0; }
.demo-photo-table label { display: flex; align-items: start; gap: .45rem; font-weight: 600; line-height: 1.35; cursor: pointer; }
.demo-photo-table label input { margin-top: .1rem; accent-color: #4f46e5; flex-shrink: 0; }
.demo-photo-table label small { display: block; margin-top: .25rem; color: #64748b; font-size: .625rem; font-weight: 400; }
.demo-photo-table td:last-child { color: #4338ca; font-weight: 700; }
.demo-photo-totals { display: grid; gap: .65rem; margin-top: .8rem; padding: 1rem; border-radius: 10px; background: #f8fafc; }
.demo-photo-totals > div { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; }
.demo-photo-totals span { color: #64748b; }
.demo-photo-totals > .demo-photo-customer-total { font-size: .9375rem; }
.demo-photo-customer-total span, .demo-photo-customer-total strong { color: #4338ca; font-weight: 700; }
.demo-photo-private { display: flex; align-items: start; gap: .4rem; margin: 1rem 0; color: #64748b; font-size: .6875rem; line-height: 1.5; }
.demo-photo-private svg { flex-shrink: 0; margin-top: .1rem; }
.demo-photo-dialog button:focus-visible, .demo-photo-launch button:focus-visible, .demo-photo-dialog input:focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; }
body.demo-photo-open { overflow: hidden; }
@keyframes demoPhotoRead { from { top: 5%; } to { top: 90%; } }
@media (max-width: 680px) {
  .demo-photo-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); border-radius: 14px; }
  .demo-photo-heading { padding: 1.1rem; }
  .demo-photo-workspace { grid-template-columns: minmax(0, 1fr); }
  .demo-photo-preview { padding: 1rem; border-radius: 0; }
  .demo-photo-paper { margin: .85rem auto .5rem; padding-top: 1rem; }
  .demo-photo-caption { margin-top: .6rem; }
  .demo-photo-review { padding: 1.1rem; }
  .demo-photo-review-heading { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .demo-photo-scan { animation: none !important; } .demo-photo-table-wrap { transition: none; } }
@media print { .demo-photo-dialog, .demo-photo-launch { display: none !important; } }