/* A compact, image-first offer flow. Application and pairing views are separate. */
.offers-dialog {
  width: min(100% - 48px, 490px);
  height: min(800px, 100dvh - 48px);
  padding: 22px 26px 18px;
  background: url("./paper-grain.svg") 0 0 / 512px 512px,
    radial-gradient(ellipse at 100% 0, #eaddf780, transparent 60%), #faf7fc;
}
.offers-dialog[open] { gap: 22px; }
.offers-dialog .offer-toolbar { background: transparent; }
.offers-dialog .offer-brand { font-size: 13px; }
.offers-dialog .offer-brand::before { width: 27px; height: 27px; border-radius: 8px; }
.offers-dialog .offer-close { width: 44px; height: 44px; color: #8b7d94; background: #ffffff70; }
.offers-dialog .offer-intro { padding: 0 2px; }
.offers-dialog .offer-intro h2 { margin: 0; max-width: none; font-size: 34px; line-height: 1.12; letter-spacing: -1.1px; }
.offer-subtitle { margin: 10px 0 0; color: #7b6e86; font-size: 13px; line-height: 1.5; }
.offers-body { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px 1px 6px; }
.offer-progress-summary { margin: 22px 0 0; }
.offer-progress-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offer-count { margin: 0; color: #695078; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.offer-progress-caption { color: #96869f; font-size: 11px; }
.offer-progress-steps { display: flex; gap: 5px; margin-top: 9px; }
.offer-progress-step { flex: 1; height: 5px; border-radius: 8px; background: #e7dfed; }
.offer-progress-step.is-active { background: #bca3cf; }
.offer-progress-step.is-complete { background: #52916d; }
.offer-progress-meter, .offer-live-status { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); white-space: nowrap; }
.offer-list { display: grid; align-content: start; gap: 12px; }
.offer-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  grid-template-areas: "art title title" "copy copy action";
  align-items: center;
  column-gap: 14px;
  row-gap: 14px;
  padding: 16px;
  border: 1px solid #e5deea;
  border-radius: 20px;
  background: #ffffffd9;
  box-shadow: 0 2px 3px #37214003, 0 5px 18px #37214003;
}
.offer-card.is-active { border-color: #c7b1d8; }
.offer-card.is-complete { border-color: #d0e1d6; background: #fbfefbdd; }
.offer-artwork { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 68px; height: 68px; overflow: hidden; border-radius: 17px; background: linear-gradient(145deg, #f2e9f7, #ddd0e9); box-shadow: 0 0 0 1px #3824490b, 0 3px 9px #3824490b; isolation: isolate; }
.offer-card > .offer-artwork { grid-area: art; }
.offer-artwork-fallback { color: #8b6ba3; font-family: var(--display); font-size: 25px; letter-spacing: -1px; }
.offer-artwork-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.offer-card-details { grid-area: title; min-width: 0; }
.offer-card-eyebrow { display: block; margin-bottom: 5px; color: #9b8ba5; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.offer-card h3 { margin: 0; color: #35273f; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.35px; overflow-wrap: anywhere; }
.offer-instructions { grid-area: copy; margin: 0; color: #7c7085; font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
.offer-card-action { grid-area: action; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; min-width: 66px; }
.offer-card-action .button { min-height: 42px; min-width: 72px; width: auto; padding: 10px 15px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.offer-card-action .button.primary { background: #eee4f5; border-color: #e4d6ee; color: #65477a; box-shadow: inset 0 1px 0 #fff9; }
.offer-card-action .button.primary:hover:not(:disabled) { background: #e3d3ed; border-color: #d6c0e4; }
.offer-in-progress { display: inline-flex; align-items: center; gap: 4px; color: #977aac; font-size: 9px; }
.offer-in-progress .offer-spinner { width: 9px; height: 9px; border-width: 1px; }
.offer-completed-label { color: #4b8663; font-size: 10px; font-weight: 600; }
.offer-check { position: relative; display: inline-block; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #e1eee5; color: #45815d; }
.offer-check::after { content: ""; position: absolute; width: 10px; height: 6px; left: 9px; top: 9px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(-45deg); }
.offer-spinner { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; border: 2px solid #e5d9ee; border-top-color: #9673b1; border-radius: 50%; animation: offer-spin 1.4s linear infinite; }
.offers-dialog .offer-footer { min-height: 40px; padding: 0 2px; gap: 8px; }
.offers-dialog .offer-footer .offer-back { padding: 10px 2px; min-height: 44px; border: 0; box-shadow: none; background: transparent; color: #8e7b9d; font-size: 12px; }
.offer-footer-note { color: #a292ad; font-size: 10px; }
.offer-waiting, .offer-result { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 24px 8px; text-align: center; }
.offer-waiting { padding-block: 12px; }
.offer-wait-art { position: relative; margin: 10px 0 4px; padding: 16px; }
.offer-wait-art::before, .offer-wait-art::after { content: ""; position: absolute; border: 1px solid #d9c8e58c; border-radius: 50%; inset: -4px; }
.offer-wait-art::after { inset: -20px; opacity: .5; }
.offer-artwork-large { width: 100px; height: 100px; border-radius: 25px; box-shadow: 0 6px 20px #41234e13; }
.offer-wait-art > .offer-spinner { position: absolute; right: 5px; bottom: 10px; z-index: 2; width: 30px; height: 30px; border-width: 3px; background: #fcf9fe; outline: 6px solid #fcf9fe; }
.offer-wait-label { margin: 22px 0 16px; color: #9275a5; font-size: 11px; }
.offer-wait-details { width: 100%; padding: 0 14px; }
.offer-wait-details h3 { margin: 0 0 10px; color: #3e2d49; font-size: 20px; font-weight: 600; letter-spacing: -.5px; line-height: 1.3; overflow-wrap: anywhere; }
.offer-wait-details p { margin: 0 auto; max-width: 290px; color: #7e6d89; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.offer-open-link { display: inline-block; margin-top: 20px; padding: 10px; color: #715285; font-size: 12px; text-underline-offset: 4px; }
.offer-waiting > .button { margin-top: 20px; max-width: 260px; }
.offer-open-hint { margin: 20px 0 -8px; color: var(--muted); font-size: 12px; }
.offer-confirm-hint { max-width: 250px; margin: 12px 0 0; color: #a190ad; font-size: 10px; line-height: 1.6; }
.offer-mode-waiting .offer-footer .button, .offer-mode-done .offer-footer .button { width: 100%; min-height: 48px; border-radius: 14px; font-size: 13px; }
.offer-completion-art { display: flex; justify-content: center; margin: 0 0 34px; }
.offer-completion-art .offer-artwork { width: 80px; height: 80px; border: 4px solid #fcf9fe; border-radius: 21px; transform: rotate(-10deg) translateY(8px); }
.offer-completion-art .offer-artwork + .offer-artwork { margin-left: -12px; }
.offer-completion-art .offer-artwork:nth-child(2) { z-index: 2; transform: rotate(0deg); }
.offer-completion-art .offer-artwork:nth-child(3) { transform: rotate(10deg) translateY(8px); }
.offer-result > .offer-check { width: 52px; height: 52px; margin-bottom: 18px; box-shadow: 0 0 0 8px #e7f1e97a; }
.offer-result > .offer-check::after { width: 19px; height: 11px; left: 17px; top: 17px; border-width: 2px; }
.offer-result-title { margin: 8px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -.5px; }
.offer-result-copy { max-width: 280px; margin: 12px 0; color: #94809f; font-size: 12px; line-height: 1.65; }
.offer-empty-icon { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 10px 35px #3e294a12; margin-bottom: 20px; transform: rotate(-6deg); }
.offer-checking-note { margin: 12px 0 0; padding: 13px 15px; border-radius: 12px; color: #8b729a; background: #efe6f5; font-size: 12px; line-height: 1.6; }
.offer-skeleton-list { display: grid; gap: 12px; width: 100%; }
.offer-skeleton { display: grid; grid-template-columns: 68px 1fr; align-content: center; gap: 12px 16px; padding: 20px 16px; min-height: 136px; border-radius: 20px; border: 1px solid #e5deea; background: #ffffff90; }
.offer-skeleton-image { grid-row: span 2; width: 68px; height: 68px; border-radius: 17px; background: #ece3f2; }
.offer-skeleton-line { align-self: end; height: 11px; width: 80%; border-radius: 5px; background: #ece3f2; }
.offer-skeleton-line.short { align-self: start; width: 55%; background: #f0eaf5; }
.offer-mode-loading .offer-result { justify-content: flex-start; padding: 0; }
@keyframes offer-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .offers-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; padding: calc(14px + env(safe-area-inset-top)) 20px calc(10px + env(safe-area-inset-bottom)); }
  .offers-dialog[open] { gap: 20px; }
  .offers-dialog .offer-intro h2 { font-size: 32px; }
  .offer-card { padding: 14px; column-gap: 13px; row-gap: 12px; }
}
@media (max-width: 360px) {
  .offers-dialog { padding-inline: 14px; }
  .offer-card { grid-template-columns: 60px minmax(0, 1fr) auto; padding: 12px; column-gap: 11px; }
  .offer-card > .offer-artwork { width: 60px; height: 60px; border-radius: 15px; }
  .offer-card h3 { font-size: 15px; }
}
@media (max-height: 740px) and (min-height: 601px) {
  .offers-dialog[open] { gap: 14px; }
  .offer-progress-summary { margin-top: 14px; }
  .offer-card { padding: 12px; row-gap: 10px; }
  .offer-card > .offer-artwork { width: 60px; height: 60px; border-radius: 15px; }
  .offer-list { gap: 9px; }
}
@media (max-height: 650px) and (min-height: 601px) {
  .offers-dialog[open] { gap: 12px; }
  .offers-dialog .offer-intro h2 { font-size: 29px; }
  .offer-progress-summary { margin-top: 12px; }
  .offer-card { padding: 10px; row-gap: 7px; }
  .offer-card > .offer-artwork { width: 52px; height: 52px; border-radius: 13px; }
}
@media (max-height: 600px) {
  .offers-dialog[open] { display: flex; gap: 14px; }
  .offers-dialog .offer-toolbar { position: static; }
  .offers-dialog .offer-footer { flex-shrink: 0; }
  .offer-waiting, .offer-result { min-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .offer-spinner { animation-duration: 3s; } }