/* Uspica Trade Wizard: listing and offer flows. One question per screen, tap to choose.
   Uses the --us-glass-* tokens from uspica-chrome.css, with fallbacks. */
.usw-page, .usw-overlay {
  --usw-em: #047857; --usw-em-h: #065f46; --usw-em-soft: #ecfdf5;
  --usw-am: #f28500; --usw-am-h: #c2410c; --usw-am-soft: #fff7ed;
  --usw-ink: #1e293b; --usw-muted: #64748b; --usw-line: #e2e8f0; --usw-soft: #f8fafc;
  --usw-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --usw-ease: cubic-bezier(.16,1,.3,1);
  font-family: var(--usw-font); color: var(--usw-ink); -webkit-font-smoothing: antialiased; line-height: 1.5;
}
.usw-page *, .usw-overlay * { box-sizing: border-box; }
:is(.usw-page, .usw-overlay) .usw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.usw-page [hidden], .usw-overlay[hidden], .usw-overlay [hidden] { display: none !important; }

/* Page card (listing wizard) */
.usw-page { padding: 24px 16px 56px; }
:is(.usw-page, .usw-overlay) .usw-card {
  max-width: 600px; margin: 0 auto; padding: 20px 20px 24px;
  background: var(--us-glass-bg-strong, rgba(255,255,255,.92));
  -webkit-backdrop-filter: var(--us-glass-blur, saturate(180%) blur(30px)); backdrop-filter: var(--us-glass-blur, saturate(180%) blur(30px));
  border: 1px solid var(--us-glass-line, rgba(15,23,42,.08)); border-radius: 24px;
  box-shadow: var(--us-glass-shadow, 0 12px 40px rgba(15,23,42,.10));
}
:is(.usw-page, .usw-overlay) .usw-h1 { font-size: clamp(26px, 6vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; margin: 8px 0 4px; }
:is(.usw-page, .usw-overlay) .usw-sub { margin: 0 0 20px; }

/* Top bar: back, progress, counter/close */
:is(.usw-page, .usw-overlay) .usw-top { display: flex; align-items: center; gap: 12px; }
:is(.usw-page, .usw-overlay) .usw-icon-btn { padding: 0; line-height: 1;
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.05); color: var(--usw-ink); transition: background .2s;
}
:is(.usw-page, .usw-overlay) .usw-icon-btn:hover { background: rgba(15,23,42,.09); }
:is(.usw-page, .usw-overlay) .usw-icon-btn[disabled] { visibility: hidden; }
:is(.usw-page, .usw-overlay) .usw-progress { flex: 1; height: 6px; border-radius: 6px; background: rgba(15,23,42,.08); overflow: hidden; }
:is(.usw-page, .usw-overlay) .usw-progress span { display: block; height: 100%; width: 0; background: var(--usw-em); border-radius: 6px; transition: width .4s var(--usw-ease); }
:is(.usw-page, .usw-overlay) .usw-count { flex: 0 0 auto; min-width: 44px; text-align: right; font-size: 13px; font-weight: 600; color: var(--usw-muted); }

/* Steps */
:is(.usw-page, .usw-overlay) .usw-step { animation: usw-in .35s var(--usw-ease); }
@keyframes usw-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { :is(.usw-page, .usw-overlay) .usw-step { animation: none; } :is(.usw-page, .usw-overlay) .usw-progress span { transition: none; } }
:is(.usw-page, .usw-overlay) .usw-q { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; margin: 20px 0 8px; }
:is(.usw-page, .usw-overlay) .usw-hint, :is(.usw-page, .usw-overlay) .usw-muted { color: var(--usw-muted); font-size: 15px; margin: 0 0 12px; }
:is(.usw-page, .usw-overlay) .usw-fine { color: var(--usw-muted); font-size: 13px; margin: 10px 0 0; }
:is(.usw-page, .usw-overlay) .usw-label { line-height: 1.4; display: block; font-size: 14px; font-weight: 600; color: #475569; margin: 18px 0 8px; }
:is(.usw-page, .usw-overlay) .usw-eyebrow { font-size: 13px; font-weight: 700; color: var(--usw-em); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inputs (16px+ so iOS does not zoom) */
:is(.usw-page, .usw-overlay) .usw-input { margin: 0; box-shadow: none;
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--usw-ink);
  background: #fff; border: 1px solid var(--usw-line); border-radius: 14px; transition: border-color .2s, box-shadow .2s;
}
textarea.usw-input { resize: vertical; }
:is(.usw-page, .usw-overlay) .usw-input:focus { outline: none; border-color: var(--usw-em); box-shadow: 0 0 0 4px rgba(4,120,87,.12); }
:is(.usw-page, .usw-overlay) .usw-input-xl { font-size: 24px; font-weight: 700; min-height: 60px; }
:is(.usw-page, .usw-overlay) .usw-input.usw-bad { border-color: #dc2626; }
:is(.usw-page, .usw-overlay) .usw-money { display: flex; align-items: center; gap: 8px; }
:is(.usw-page, .usw-overlay) .usw-money > span:first-child { font-size: 24px; font-weight: 700; color: var(--usw-muted); }
:is(.usw-page, .usw-overlay) .usw-money .usw-input { flex: 1; min-width: 0; }
:is(.usw-page, .usw-overlay) .usw-money-unit { font-size: 16px; font-weight: 600; color: var(--usw-muted); white-space: nowrap; }

/* Chips: big tap targets */
:is(.usw-page, .usw-overlay) .usw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.usw-page, .usw-overlay) .usw-chips-col { flex-direction: column; }
:is(.usw-page, .usw-overlay) .usw-chip { display: inline-block; line-height: 1.3; margin: 0; position: relative; cursor: pointer; }
:is(.usw-page, .usw-overlay) .usw-chip input { position: absolute; opacity: 0; pointer-events: none; }
:is(.usw-page, .usw-overlay) .usw-chip span {
  display: flex; align-items: center; min-height: 44px; padding: 10px 16px; font-size: 15px; font-weight: 600;
  background: #fff; border: 1.5px solid var(--usw-line); border-radius: 999px; color: #334155;
  transition: border-color .15s, background .15s, color .15s;
}
:is(.usw-page, .usw-overlay) .usw-chips-col .usw-chip span { border-radius: 14px; }
:is(.usw-page, .usw-overlay) .usw-chip:hover span { border-color: #cbd5e1; }
:is(.usw-page, .usw-overlay) .usw-chip input:checked + span { border-color: var(--usw-em); background: var(--usw-em-soft); color: var(--usw-em-h); }
:is(.usw-page, .usw-overlay) .usw-chip input:focus-visible + span { outline: 2px solid var(--usw-em); outline-offset: 2px; }

/* Sell / buy tiles */
:is(.usw-page, .usw-overlay) .usw-tiles { display: grid; gap: 12px; }
:is(.usw-page, .usw-overlay) .usw-tile { display: block; line-height: 1.3; margin: 0; position: relative; cursor: pointer; }
:is(.usw-page, .usw-overlay) .usw-tile input { position: absolute; opacity: 0; pointer-events: none; }
:is(.usw-page, .usw-overlay) .usw-tile > span {
  display: flex; flex-direction: column; gap: 2px; padding: 20px; min-height: 88px; justify-content: center;
  background: #fff; border: 2px solid var(--usw-line); border-radius: 18px; transition: border-color .15s, background .15s;
}
:is(.usw-page, .usw-overlay) .usw-tile strong { font-size: 19px; }
:is(.usw-page, .usw-overlay) .usw-tile small { font-size: 14px; color: var(--usw-muted); }
:is(.usw-page, .usw-overlay) .usw-tile-sell input:checked + span { border-color: var(--usw-am); background: var(--usw-am-soft); }
:is(.usw-page, .usw-overlay) .usw-tile-buy input:checked + span { border-color: var(--usw-em); background: var(--usw-em-soft); }
:is(.usw-page, .usw-overlay) .usw-tile input:focus-visible + span { outline: 2px solid var(--usw-em); outline-offset: 2px; }
@media (min-width: 560px) { :is(.usw-page, .usw-overlay) .usw-tiles { grid-template-columns: 1fr 1fr; } }

/* Product autocomplete */
:is(.usw-page, .usw-overlay) .usw-combo { position: relative; }
:is(.usw-page, .usw-overlay) .usw-list {
  list-style: none; margin: 6px 0 0; padding: 6px; max-height: 280px; overflow-y: auto;
  background: var(--us-glass-bg-strong, rgba(255,255,255,.96)); border: 1px solid var(--usw-line); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(15,23,42,.12);
}
:is(.usw-page, .usw-overlay) .usw-list li { min-height: 44px; padding: 10px 12px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; }
:is(.usw-page, .usw-overlay) .usw-list li small { color: var(--usw-muted); font-size: 13px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
:is(.usw-page, .usw-overlay) .usw-list li[aria-selected="true"], :is(.usw-page, .usw-overlay) .usw-list li:hover { background: var(--usw-em-soft); }
:is(.usw-page, .usw-overlay) .usw-list mark { background: none; color: var(--usw-em); font-weight: 700; }

/* Checkbox row */
:is(.usw-page, .usw-overlay) .usw-check { line-height: 1.4; display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; cursor: pointer; font-size: 15px; color: #334155; }
:is(.usw-page, .usw-overlay) .usw-check input { width: 20px; height: 20px; accent-color: var(--usw-em); flex-shrink: 0; }
:is(.usw-page, .usw-overlay) .usw-check a { color: var(--usw-em); }

/* File pickers */
:is(.usw-page, .usw-overlay) .usw-file { line-height: 1.4; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; margin-top: 12px; padding: 14px; border: 1.5px dashed #cbd5e1; border-radius: 16px; background: var(--usw-soft); color: #475569; font-size: 15px; font-weight: 600; cursor: pointer; }
:is(.usw-page, .usw-overlay) .usw-file:hover { border-color: var(--usw-em); }
:is(.usw-page, .usw-overlay) .usw-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
:is(.usw-page, .usw-overlay) .usw-file.usw-has { border-style: solid; border-color: var(--usw-em); background: var(--usw-em-soft); color: var(--usw-em-h); }

/* Totals, review, fee */
:is(.usw-page, .usw-overlay) .usw-total, :is(.usw-page, .usw-overlay) .usw-fee { margin-top: 18px; border-radius: 16px; background: var(--usw-soft); border: 1px solid var(--usw-line); padding: 4px 16px; }
:is(.usw-page, .usw-overlay) .usw-total > div, :is(.usw-page, .usw-overlay) .usw-fee > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
:is(.usw-page, .usw-overlay) .usw-total > div + div, :is(.usw-page, .usw-overlay) .usw-fee > div + div { border-top: 1px solid var(--usw-line); }
:is(.usw-page, .usw-overlay) .usw-total strong, :is(.usw-page, .usw-overlay) .usw-fee strong { font-size: 17px; }
:is(.usw-page, .usw-overlay) .usw-summary { margin: 12px 0 0; display: grid; grid-template-columns: auto 1fr; }
:is(.usw-page, .usw-overlay) .usw-summary dt, :is(.usw-page, .usw-overlay) .usw-summary dd { padding: 10px 0; border-bottom: 1px solid var(--usw-line); margin: 0; font-size: 15px; }
:is(.usw-page, .usw-overlay) .usw-summary dt { color: var(--usw-muted); padding-right: 12px; }
:is(.usw-page, .usw-overlay) .usw-summary dd { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
:is(.usw-page, .usw-overlay) .usw-alert { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--usw-am-soft); color: var(--usw-am-h); font-weight: 600; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
:is(.usw-page, .usw-overlay) .usw-alert a { color: var(--usw-am-h); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
:is(.usw-page, .usw-overlay) .usw-note { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--usw-em-soft, #ecfdf5); color: var(--usw-em-h, #065f46); font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; }
:is(.usw-page, .usw-overlay) .usw-note .usw-link { background: none; border: 0; padding: 0 2px; margin: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
:is(.usw-page, .usw-overlay) .usw-note .usw-link:disabled { opacity: .6; cursor: default; text-decoration: none; }
:is(.usw-page, .usw-overlay) .usw-error { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: #fef2f2; color: #b91c1c; font-size: 15px; font-weight: 600; }

/* Actions */
:is(.usw-page, .usw-overlay) .usw-actions { display: flex; gap: 10px; margin-top: 24px; }
:is(.usw-page, .usw-overlay) .usw-btn { line-height: 1.2; white-space: normal; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; flex: 1;
  border: 0; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background .2s, transform .1s;
}
:is(.usw-page, .usw-overlay) .usw-btn:active { transform: scale(.98); }
:is(.usw-page, .usw-overlay) .usw-btn-primary { background: var(--usw-em); color: #fff !important; }
:is(.usw-page, .usw-overlay) .usw-btn-primary:hover { background: var(--usw-em-h); }
:is(.usw-page, .usw-overlay) .usw-btn-primary[disabled] { opacity: .55; cursor: not-allowed; }
:is(.usw-page, .usw-overlay) .usw-btn-ghost { background: rgba(15,23,42,.05); color: var(--usw-ink); flex: 0 0 auto; }
:is(.usw-page, .usw-overlay) .usw-state .usw-btn { width: 100%; margin-top: 12px; }

/* Offer modal: bottom sheet on phones, centered card on larger screens */
.usw-overlay {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15,23,42,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:is(.usw-page, .usw-overlay) .usw-sheet {
  width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: var(--us-glass-blur, saturate(180%) blur(30px)); backdrop-filter: var(--us-glass-blur, saturate(180%) blur(30px));
  border: 1px solid var(--us-glass-edge, rgba(255,255,255,.65)); border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px rgba(15,23,42,.18);
  animation: usw-up .35s var(--usw-ease);
}
@keyframes usw-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .usw-overlay { align-items: center; padding: 24px; }
  :is(.usw-page, .usw-overlay) .usw-sheet { border-radius: 24px; padding: 20px 24px 24px; box-shadow: var(--us-glass-shadow, 0 12px 40px rgba(15,23,42,.18)); }
  :is(.usw-page, .usw-overlay) .usw-card { padding: 28px 32px 32px; }
}
body.usw-lock { overflow: hidden; }
:is(.usw-page, .usw-overlay) .usw-done-icon { width: 56px; height: 56px; border-radius: 50%; margin: 16px 0 0; display: flex; align-items: center; justify-content: center; background: var(--usw-em-soft); color: var(--usw-em); font-size: 28px; font-weight: 800; }

/* Proposal buttons drawn by [uspica_proposal_button] */
body .uspica-proposal-trigger-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  background: var(--usw-am, #f28500); color: #fff !important; border: 0; border-radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background .2s;
}
body .uspica-proposal-trigger-btn:hover { background: #c2410c; }
body .uspica-proposal-trigger-btn.uspica-btn-locked { background: #64748b; }
body .uspica-token-pill { background: rgba(0,0,0,.18); padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }

/* "Listing is live" note */
body .usw-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100001;
  padding: 12px 20px; border-radius: 999px; background: var(--usw-em, #047857); color: #fff; font-weight: 700; font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 12px 30px rgba(4,120,87,.3);
  animation: usw-toast 4.5s forwards; max-width: calc(100vw - 32px); text-align: center;
}
@keyframes usw-toast { 0% { opacity: 0; transform: translate(-50%, 12px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; visibility: hidden; } }

/* Photo previews in the upload step */
:is(.usw-page, .usw-overlay) .usw-previews { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
:is(.usw-page, .usw-overlay) .usw-previews:empty { display: none; }
:is(.usw-page, .usw-overlay) .usw-previews img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--usw-line); }