/* Buyer live-auction mockups: PAPH navy design language
   Source: paph-frontend DESIGN.md + its property-detail components; monorepo auction-blue #002A5E */
:root {
  --navy: #002a5e; --navy-deep: #0d2240; --navy-hover: #0e3a75;
  --ink: #191715; --muted: #5c6672; --faint: #8a94a0;
  --line: #dfe5ec; --line-blue: #cfdcea;
  --ground: #eef2f6; --card: #ffffff; --wash: #f5f8fb;
  --live: #d92d20; --success: #157f3d; --success-bg: #e7f4ea;
  --warn: #a05a14; --warn-bg: #fdf1de; --info: #18539a; --info-bg: #e8f0f9;
  --r-card: 12px; --r-ctl: 8px; --r-chip: 6px; --r-media: 14px;
  --sh-sm: 0 1px 2px rgba(13, 34, 64, .07);
  --sh-md: 0 6px 20px rgba(13, 34, 64, .12);
  --sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }
body { font-family: var(--sans); color: var(--ink); background: var(--ground); font-size: 15px; line-height: 1.5 }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }
.num, .amount, .price, .bid-amt { font-variant-numeric: tabular-nums; letter-spacing: -0.01em }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 4px }
::selection { background: rgba(0, 42, 94, .18) }
h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance }

/* ---------- demo chrome (not part of the design) ---------- */
.demo-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 7px 12px; background: #141a22; color: #cdd6e0; font-size: 12px }
.demo-bar b { color: #fff; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px }
.demo-bar .sep { opacity: .35 }
.demo-bar a { color: #9fc1ff; text-decoration: underline; text-underline-offset: 2px }
.demo-bar button { padding: 4px 10px; border-radius: 999px; border: 1px solid #3a4656; color: #cdd6e0; font-size: 12px }
.demo-bar button.on { background: #fff; color: #141a22; border-color: #fff; font-weight: 600 }

/* ---------- header ---------- */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); padding: 10px 16px }
.topbar-in { max-width: var(--shell, 1440px); margin: 0 auto; display: flex; align-items: center; gap: 12px }
.back-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 13.5px; font-weight: 500; color: var(--ink); flex: none }
.back-link:hover { background: var(--wash) }
.logo-mark { display: flex; align-items: center; gap: 8px; flex: none }
.logo-mark .mark { width: 34px; height: 34px; border-radius: 8px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: -0.02em }
.logo-mark .word { font-weight: 700; font-size: 14px; letter-spacing: -0.02em; line-height: 1.1 }
.logo-mark .word small { display: block; font-weight: 500; font-size: 10.5px; color: var(--muted); letter-spacing: 0 }
.vr { width: 1px; align-self: stretch; background: var(--line); flex: none }
.client-logo { height: 40px; min-width: 72px; padding: 0 10px; border: 1px dashed var(--line-blue); border-radius: var(--r-ctl);
  display: grid; place-items: center; font-weight: 600; font-size: 11px; color: var(--navy); letter-spacing: .08em; flex: none; background: var(--wash) }
.event-id { min-width: 0 }
.event-id h1 { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.event-id p { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none }
.conn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 999px }
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor }
.conn.ok { color: var(--success); background: var(--success-bg) }
.conn.bad { color: var(--warn); background: var(--warn-bg) }
.conn.off { color: var(--live); background: #fdeceb }
.conn .dot { animation: pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .35 } }
.conn .spin { width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: rot 1s linear infinite }
@keyframes rot { to { transform: rotate(360deg) } }
.bidder-badge { display: flex; align-items: baseline; gap: 7px; background: var(--navy); color: #fff;
  padding: 9px 14px; border-radius: var(--r-ctl); flex: none; box-shadow: var(--sh-sm) }
.bidder-badge span { font-size: 11px; opacity: .75; font-weight: 500 }
.bidder-badge b { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em }

/* ---------- shared atoms ---------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-sm) }
.panel-hd { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink) }
.panel-hd .hint { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--muted) }
.panel-bd { padding: 16px }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-chip); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase }
.tag svg { width: 11px; height: 11px }
.tag.live { background: var(--live); color: #fff }
.tag.sold { background: var(--ink); color: #fff }
.tag.upcoming { background: var(--info-bg); color: var(--info) }
.tag.next { background: var(--warn-bg); color: var(--warn) }
.live-dot { position: relative; width: 7px; height: 7px }
.live-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: ping 1.5s ease-out infinite }
.live-dot::after { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: #fff }
@keyframes ping { to { transform: scale(2.6); opacity: 0 } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px;
  border-radius: var(--r-ctl); font-weight: 600; font-size: 15px; transition: background .15s, transform .08s }
.btn:active { transform: scale(.985) }
.btn-navy { background: var(--navy); color: #fff }
.btn-navy:hover { background: var(--navy-hover) }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: var(--card) }
.btn-ghost:hover { background: var(--wash) }
.btn[disabled] { opacity: .55; pointer-events: none }

/* ---------- stream ---------- */
.stream { position: relative; border-radius: var(--r-media); overflow: hidden; background: #0f1620; aspect-ratio: 16/9 }
.stream .stage-fill { position: absolute; inset: 0; display: grid; place-items: center; color: #93a4bb; text-align: center; padding: 20px }
.stream .stage-fill svg { width: 44px; height: 44px; margin: 0 auto 10px; opacity: .8 }
.stream .stage-fill p { font-size: 13.5px; max-width: 34ch }
.stream .stage-fill small { display: block; margin-top: 4px; font-size: 11.5px; color: #8a97ab }
.stream .live-flag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--live); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; border-radius: 999px }
.stream .cam { position: absolute; right: 12px; bottom: 12px; color: #c7d3e3; font-size: 11.5px; background: rgba(15,22,32,.7); padding: 4px 9px; border-radius: 6px }
.stream.off .stage-fill { color: #7f8ca0 }

/* ---------- active property ---------- */
.prop-card { overflow: hidden }
.prop-media { position: relative; aspect-ratio: 16/10; background: #e8ecf1; display: grid; place-items: center; color: #97a3b2 }
.prop-media svg { width: 42px; height: 42px }
.prop-media .ph-label { position: absolute; bottom: 10px; left: 12px; font-size: 11px; color: var(--muted); background: rgba(255,255,255,.8); padding: 2px 8px; border-radius: 5px }
.prop-thumbs { display: flex; gap: 8px; padding: 10px 16px 0 }
.prop-thumbs .th { width: 64px; height: 44px; border-radius: 6px; background: #e8ecf1; border: 2px solid transparent; display: grid; place-items: center; color: #97a3b2 }
.prop-thumbs .th.on { border-color: var(--navy) }
.prop-body { padding: 14px 16px 16px }
.prop-body h2 { font-size: 19px; font-weight: 600 }
.prop-body .addr { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45 }
.prop-body .addr svg { flex: none; width: 15px; height: 15px; margin-top: 2px }
.prop-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.fact { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-chip); font-size: 12.5px; font-weight: 500; color: #3d4652 }
.fact svg { width: 14px; height: 14px; color: var(--muted) }
.prop-desc { margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }

/* ---------- asking price / status / bid action ---------- */
.ask { text-align: left }
.ask .lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.ask .amt { margin-top: 6px; font-size: clamp(30px, 2.6vw, 40px); font-weight: 700; letter-spacing: -0.03em; color: var(--navy-deep); line-height: 1 }
.ask .sub { margin-top: 7px; font-size: 12.5px; color: var(--muted) }
.ask .sub b { color: var(--ink); font-weight: 600 }
.status-chip { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-card); border: 1px solid var(--line) }
.status-chip svg { width: 22px; height: 22px; flex: none }
.status-chip .t1 { font-weight: 600; font-size: 14px }
.status-chip .t2 { font-size: 12.5px; color: var(--muted); margin-top: 1px }
.status-chip.win { background: var(--success-bg); border-color: #bfe3c9 }
.status-chip.win svg, .status-chip.win .t1 { color: var(--success) }
.status-chip.out { background: var(--warn-bg); border-color: #f0d9b5 }
.status-chip.out svg, .status-chip.out .t1 { color: var(--warn) }
.status-chip.tie { background: var(--info-bg); border-color: #c3d7ee }
.status-chip.tie svg, .status-chip.tie .t1 { color: var(--info) }
.status-chip.open { background: var(--wash) }
.status-chip.open svg, .status-chip.open .t1 { color: var(--muted) }
.bid-btn { width: 100%; height: 58px; font-size: 17px; border-radius: var(--r-ctl) }
.bid-note { margin-top: 8px; text-align: center; font-size: 12px; color: var(--muted) }
.bid-note.err { color: var(--live); font-weight: 500 }

/* ---------- bid history ---------- */
.hist { list-style: none }
.hist li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line) }
.hist li:last-child { border-bottom: 0 }
.hist li.you { background: var(--wash) }
.hist .rk { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--ground); color: var(--muted) }
.hist li:first-child .rk { background: var(--success-bg); color: var(--success) }
.hist .who { font-weight: 600; font-size: 13.5px }
.hist .who em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--info); margin-left: 6px }
.hist .meta { font-size: 11.5px; color: var(--muted); margin-top: 1px }
.hist .bid-amt { margin-left: auto; font-weight: 700; font-size: 14px }
.hist .empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px }

/* ---------- pre-bid ---------- */
.prebid { border: 1px solid var(--line-blue); border-radius: 10px; background: var(--wash) }
.prebid .row { display: flex; gap: 10px; align-items: center }
.prebid input { flex: 1; min-width: 0; width: 0; height: 44px; padding: 0 12px 0 34px; border: 1px solid var(--line); border-radius: var(--r-ctl); font: inherit; font-weight: 600; background: var(--card) }
.prebid .in-wrap { position: relative; flex: 1; min-width: 0; display: flex }
.prebid .in-wrap span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; font-size: 14px }
.prebid .btn { height: 44px; padding: 0 16px; font-size: 14px }
.prebid .note { margin-top: 9px; font-size: 12px; color: var(--muted) }
.prebid .cur { margin: 10px 0; padding: 9px 12px; border-radius: var(--r-chip); background: var(--wash); border: 1px solid var(--line); font-size: 12.5px; display: flex; justify-content: space-between }
.prebid .cur b { font-size: 14px }

/* ---------- receipts ---------- */
.receipts summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 13px 16px; font-size: 13px; font-weight: 600 }
.receipts summary::-webkit-details-marker { display: none }
.receipts summary .chev { margin-left: auto; transition: transform .2s; color: var(--faint) }
.receipts[open] summary .chev { transform: rotate(180deg) }
.receipts .list { border-top: 1px solid var(--line); padding: 12px 16px; font-size: 12.5px; color: var(--muted) }
.receipts .list .r { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line) }
.receipts .list .r:last-child { border: 0 }
.receipts .list b { color: var(--ink) }

/* ---------- lots (rail / carousel / filmstrip) ---------- */
.lots-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin }
.lot-card { flex: none; width: 176px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; text-align: left; transition: border-color .15s, box-shadow .15s }
.lot-card:hover { border-color: #b6c7da; box-shadow: var(--sh-sm) }
.lot-card .im { position: relative; height: 92px; background: #e8ecf1; display: grid; place-items: center; color: #97a3b2 }
.lot-card .im svg { width: 24px: 24px; width: 24px; height: 24px }
.lot-card .im .tag { position: absolute; top: 7px; left: 7px }
.lot-card .bd { padding: 9px 11px 11px }
.lot-card .nm { font-size: 13px; font-weight: 600 }
.lot-card .ad { font-size: 11px; color: var(--muted); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35 }
.lot-card .pr { margin-top: 7px; font-size: 13.5px; font-weight: 700; color: var(--navy-deep) }
.lot-card .st { font-size: 10.5px; font-weight: 600; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em }
.lot-card.live { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,42,94,.14) }
.lot-card.live .st { color: var(--navy) }
.lot-card.sold { opacity: .65 }
.lot-card.sold .st { color: var(--success) }
.lot-card.next { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(181,103,29,.12) }
.lot-card.next .st { color: var(--warn) }
.lot-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-ctl); text-align: left; width: 100% }
.lot-row:hover { background: var(--wash) }
.lot-row.on { background: var(--info-bg); outline: 1px solid #c3d7ee }
.lot-row .thumb { width: 46px; height: 34px; flex: none; border-radius: 5px; background: #e8ecf1; display: grid; place-items: center; color: #97a3b2 }
.lot-row .thumb svg { width: 16px; height: 16px }
.lot-row .nm { font-size: 12.5px; font-weight: 600 }
.lot-row .pr { font-size: 12px; color: var(--muted) }
.lot-row .st { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; flex: none }
.lot-row .st.live { color: var(--live) }
.lot-row .st.sold { color: var(--success) }
.lot-row .st.upcoming { color: var(--muted) }

/* ---------- waiting / preview / denied ---------- */
.wait-card { text-align: center; padding: 34px 22px }
.wait-card .ic { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--wash); display: grid; place-items: center; color: var(--faint) }
.wait-card .ic svg { width: 24px; height: 24px }
.wait-card h2 { font-size: 17px; font-weight: 600 }
.wait-card p { margin-top: 6px; font-size: 13px; color: var(--muted); max-width: 40ch; margin-inline: auto }
.preview-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-card); background: var(--success-bg); border: 1px solid #bfe3c9; color: var(--success) }
.preview-note svg { width: 19px; height: 19px; flex: none; margin-top: 1px }
.preview-note .t1 { font-weight: 600; font-size: 13.5px }
.preview-note .t2 { font-size: 12.5px; color: #2e6b44; margin-top: 2px }
.err-band { display: flex; align-items: center; gap: 9px; max-width: var(--shell, 1440px); width: calc(100% - 32px); margin: 12px auto 0; padding: 11px 16px;
  background: #fdeceb; border: 1px solid #f4c8c3; border-radius: var(--r-ctl); color: var(--live); font-size: 13px }
.err-band button { margin-left: auto; font-weight: 600; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px }

/* ---------- winner toast (non-blocking, auto-dismiss) ---------- */
.win-toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 90; width: min(430px, calc(100vw - 24px));
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh-md);
  padding: 14px 16px 0; animation: toast-in .35s cubic-bezier(.2, 1, .3, 1); pointer-events: auto }
.win-toast .hd { display: flex; gap: 11px; align-items: center }
.win-toast .trophy { width: 40px; height: 40px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #f2b93b, #d9962b); display: grid; place-items: center; color: #fff }
.win-toast .trophy svg { width: 20px; height: 20px }
.win-toast .t1 { font-size: 15px; font-weight: 700 }
.win-toast .t2 { font-size: 12.5px; color: var(--muted); margin-top: 1px }
.win-toast .amt { margin-top: 10px; padding: 9px 12px; border-radius: var(--r-chip); background: var(--success-bg); display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--success) }
.win-toast .amt b { font-size: 17px; font-weight: 700 }
.win-toast .close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--faint) }
.win-toast .close:hover { background: var(--wash); color: var(--ink) }
.win-toast .bar { height: 3px; margin: 12px -16px 0; background: var(--ground); border-radius: 0 0 12px 12px; overflow: hidden }
.win-toast .bar i { display: block; height: 100%; background: var(--navy); width: 100%; animation: drain var(--toast-ms, 8000ms) linear forwards }
@keyframes drain { to { width: 0 } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.97) } }
.win-toast.lost .trophy { background: var(--info-bg); color: var(--info) }
.win-toast.lost .amt { background: var(--wash); color: var(--muted) }

/* ---------- mobile sticky action ---------- */
.m-action { display: none }
@media (max-width: 1023px) {
  .m-action { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 12px; align-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line) }
  .m-action .a-amt { min-width: 0 }
  .m-action .a-amt .l { font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em }
  .m-action .a-amt .v { font-size: 17px; font-weight: 700; color: var(--navy-deep); white-space: nowrap }
  .m-action .btn { margin-left: auto; height: 48px; padding: 0 18px; font-size: 15px; flex: none }
  .m-action .a-pre { margin-left: auto; flex: none; min-width: 66px; height: 48px; padding: 0 13px; display: grid; place-content: center;
    text-align: center; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card);
    font-weight: 600; font-size: 13.5px; color: var(--navy); line-height: 1.15 }
  .m-action .a-pre .pv { font-size: 12px; font-weight: 700 }
  .m-action .a-pre.set { background: var(--info-bg); border-color: #c3d7ee; color: var(--info);
    font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase }
  .m-action .a-pre.set .pv { font-size: 12.5px; letter-spacing: 0; text-transform: none }
  .m-action .a-pre + .btn { margin-left: 0 }
  [data-state="offline"] .m-action .a-pre { opacity: .55; pointer-events: none }
  body { padding-bottom: 76px }
}

/* ---------- pre-bid bottom sheet (phones; tablet/desktop use the inline panel) ---------- */
.sheet-backdrop, .prebid-sheet { display: none }
@media (max-width: 767px) {
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(10,18,28,.45);
    opacity: 0; pointer-events: none; transition: opacity .25s }
  .prebid-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--card);
    border-radius: 16px 16px 0 0; padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 34px rgba(13,34,64,.22); transform: translateY(110%); transition: transform .3s cubic-bezier(.2,1,.3,1) }
  body.sheet-open { overflow: hidden }
  body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto }
  body.sheet-open .prebid-sheet { transform: none }
  .prebid-sheet .grab { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 2px auto 12px }
  .prebid-sheet .sheet-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--faint) }
  .prebid-sheet .sheet-x:hover { background: var(--wash); color: var(--ink) }
  .prebid-sheet h3 { font-size: 16.5px; font-weight: 700 }
  .prebid-sheet .sheet-sub { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.45 }
  .prebid-sheet .sheet-ctx { margin: 13px 0 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em }
  .prebid-sheet .sheet-ctx b { color: var(--ink); font-size: 14px }
  .prebid-sheet .in-wrap { position: relative; display: flex }
  .prebid-sheet .in-wrap span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600 }
  .prebid-sheet input { flex: 1; min-width: 0; height: 50px; padding: 0 14px 0 36px; border: 1px solid var(--line); border-radius: var(--r-ctl); font: inherit; font-weight: 600; font-size: 17px }
  .prebid-sheet input:focus { border-color: var(--navy) }
  .prebid-sheet input[disabled] { opacity: .5 }
  .prebid-sheet .sheet-err { margin-top: 7px; font-size: 12px; color: var(--live); font-weight: 500 }
  .prebid-sheet .sheet-err[hidden] { display: none }
  .prebid-sheet .btn { width: 100%; height: 50px; margin-top: 12px }
  .prebid-sheet .sheet-remove { display: block; margin: 11px auto 0; font-size: 13px; font-weight: 600; color: var(--live); text-decoration: underline; text-underline-offset: 2px }
  .prebid-sheet .sheet-remove[hidden] { display: none }
}

/* ---------- state visibility ---------- */
[data-state] [data-show] { display: none }
[data-state="bidding"] [data-show~="bidding"], [data-state="outbid"] [data-show~="outbid"],
[data-state="preview"] [data-show~="preview"], [data-state="waiting"] [data-show~="waiting"],
[data-state="sold"] [data-show~="sold"], [data-state="offline"] [data-show~="offline"] { display: revert }
[data-state="bidding"] .stage-shell > [data-show~="bidding"],
[data-state="outbid"] .stage-shell > [data-show~="outbid"],
[data-state="preview"] .stage-shell > [data-show~="preview"],
[data-state="waiting"] .stage-shell > [data-show~="waiting"],
[data-state="sold"] .stage-shell > [data-show~="sold"],
[data-state="offline"] .stage-shell > [data-show~="offline"] { display: grid }
[data-state] .chipset { display: none }
[data-state="bidding"] .chipset.win, [data-state="outbid"] .chipset.out,
[data-state="preview"] .chipset.open, [data-state="waiting"] .chipset.open, [data-state="sold"] .chipset.open { display: flex }
[data-state="offline"] .conn-live, [data-state="offline"] .conn-join { display: none }
[data-state]:not([data-state="offline"]) .conn-off { display: none }
[data-state="offline"] .conn-off { display: inline-flex }
[data-state="waiting"] .conn-live, [data-state="waiting"] .conn-off { display: none }
[data-state="waiting"] .conn-join { display: inline-flex }
[data-state]:not([data-state="waiting"]):not([data-state="offline"]) .conn-join { display: none }
[data-state]:not([data-state="offline"]) .err-band { display: none }

/* ---------- LAYOUT: stage-first ---------- */
.stage-shell { max-width: var(--shell, 1440px); margin: 0 auto; padding: 16px }
.v-stage .stage-band { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; align-items: start }
.v-stage .deck { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 0; margin-top: 16px; background: var(--card); border: 1px solid var(--line-blue); border-radius: var(--r-card); box-shadow: var(--sh-sm); overflow: hidden }
.v-stage .deck > section { padding: 18px; min-width: 0 }
.v-stage .deck > section + section { border-left: 1px solid var(--line) }
.v-stage .deck .bid-wrap { display: flex; flex-direction: column; justify-content: center; gap: 12px }
.v-stage .deck .rec-wrap { background: var(--wash); padding: 0 }
.v-stage .deck .rec-wrap .panel-hd { border-bottom: 1px solid var(--line) }
.v-stage .sub-deck { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; margin-top: 16px }
.v-stage .filmwrap { margin-top: 16px }
.v-stage .filmwrap .strip-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px }
.v-stage .filmwrap .strip-hd h2 { font-size: 14px; font-weight: 600 }
.v-stage .filmwrap .strip-hd span { font-size: 12px; color: var(--muted) }
@media (max-width: 1279px) {
  .v-stage .deck { grid-template-columns: 1fr 1fr }
  .v-stage .deck .rec-wrap { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line) }
}
@media (max-width: 1023px) {
  .v-stage .stage-band { grid-template-columns: 1fr }
  .v-stage .deck { grid-template-columns: 1fr }
  .v-stage .deck > section + section { border-left: 0; border-top: 1px solid var(--line) }
  .v-stage .sub-deck { grid-template-columns: 1fr }
  .v-stage .stage-band > *, .v-stage .deck > *, .v-stage .sub-deck > * { min-width: 0 }
  .v-stage .deck .bid-wrap .btn { display: none } /* mobile uses sticky bar */
}
@media (min-width: 1920px) { .v-stage { --shell: 1760px } }
@media (min-width: 2560px) { .v-stage { --shell: 2000px; font-size: 16px } }

/* ---------- LAYOUT: compact workspace ---------- */
.v-compact .ws { max-width: var(--shell, 1520px); margin: 0 auto; padding: 14px; display: grid; grid-template-columns: 230px 1fr 360px; gap: 14px; align-items: start }
.v-compact .rail, .v-compact .bidcol { position: sticky; top: calc(var(--demo-h, 0px) + 14px) }
.v-compact .rail .panel-bd, .v-compact .bidcol .panel-bd { padding: 8px }
.v-compact .rail-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100dvh - 190px); overflow-y: auto }
.v-compact .center-stack { display: grid; gap: 14px; min-width: 0 }
.v-compact .bidcol .panel-bd { display: grid; gap: 12px; padding: 14px; max-height: calc(100dvh - 190px); overflow-y: auto }
.v-compact .facts-line { display: flex; flex-wrap: wrap; gap: 8px }
.v-compact .mobile-lots { display: none }
/* The media keeps its 16:9 ratio. On short viewports the stream's width is
   capped so the stream and Place bid fit above the fold without page scroll
   (--stream-room reserves the chrome sitting above the stream). */
@media (min-width: 768px) {
  .v-compact .stream { width: min(100%, max(260px, calc((100dvh - var(--stream-room, 130px)) * 16 / 9))); margin-inline: auto }
}
@media (min-width: 1920px) { .v-compact { --shell: 1840px } .v-compact .ws { grid-template-columns: 260px 1fr 400px } }
@media (min-width: 2560px) { .v-compact { --shell: 2160px; font-size: 16px } }
/* ---------- lot preview mode ---------- */
.live-ui { display: contents }
.preview-ui { display: none }
body.previewing .live-ui { display: none !important }
body.previewing .preview-ui { display: revert }
body.previewing .preview-ui.pv-contents { display: contents }
body.previewing .preview-ui.pv-col { display: grid; gap: 12px }
.pv-banner { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--info-bg);
  color: var(--info); border-radius: var(--r-ctl); font-size: 12.5px; font-weight: 600 }
.pv-banner button { margin-left: auto; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; color: var(--info) }
.pv-note { font-size: 12px; color: var(--muted) }
.lot-card.preview-on { outline: 2px solid var(--info); outline-offset: -2px }
.lot-row.preview-on { background: var(--info-bg); outline: 1px solid #c3d7ee }

/* Below 1200px the vertical lot rail gives way to the horizontal queue strip
   on top of the workspace, shared by both smaller layouts. */
@media (max-width: 1199px) {
  .v-compact .rail { display: none }
  .v-compact .mobile-lots.lots-strip { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch }
  .v-compact .mobile-lots .lot-card { width: 148px }
  .v-compact .mobile-lots .lot-card .im { height: 76px }
}
/* Small desktop / tablet (768–1199px): stream and bidding stay side by side.
   The queue strip spans the top; the bid column keeps its live controls and
   the mobile bottom bar stays off. */
@media (min-width: 768px) and (max-width: 1199px) {
  .v-compact { --stream-room: 320px }
  .v-compact .ws { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); padding: 12px 14px; align-items: stretch }
  /* Stream pins below the demo bar while its column scrolls — YouTube-style.
     center-stack stretches to the row height so the sticky range lasts. */
  .v-compact .stream { position: sticky; top: var(--demo-h, 0px); z-index: 40 }
  .v-compact .mobile-lots { grid-column: 1 / -1 }
  .v-compact .mobile-lots .lot-card .im { height: 64px }
  .v-compact .mobile-lots .lot-card .ad { display: none }
  .v-compact .bidcol .live-ui .ask { order: -2 }
  .v-compact .bidcol .live-ui .bid-btn { order: -1 }
  .v-compact .m-action { display: none }
  body.v-compact { padding-bottom: 0 }
}
/* Extremely short landscape windows: shed the queue strip so the stream and
   bid action still fit above the fold. */
@media (min-width: 768px) and (max-width: 1199px) and (max-height: 480px) {
  .v-compact { --stream-room: 130px }
  .v-compact .mobile-lots.lots-strip { display: none }
}
/* Phones (<768px): flat single column. Queue strip, pinned stream, price
   band, sections; Place bid lives on the sticky bottom bar. */
@media (max-width: 767px) {
  .v-compact .ws { display: block; padding: 0; max-width: none }
  .v-compact .mobile-lots.lots-strip { padding: 10px 16px 6px }
  /* display:contents lifts the stream to the full-height .ws so it stays
     pinned under the demo bar for the whole scroll, not just its own block */
  .v-compact .center-stack { display: contents }
  .v-compact .stream { position: sticky; top: var(--demo-h, 0px); z-index: 40; height: 32dvh; min-height: 190px; aspect-ratio: auto; border-radius: 0 }
  .v-compact .facts-panel { border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line) }
  .v-compact .bidcol { position: static; border: 0; box-shadow: none; background: transparent; border-radius: 0 }
  .v-compact .bidcol .panel-bd { display: block; max-height: none; padding: 0 }
  .v-compact .ask { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--card) }
  .v-compact .status-chip { margin: 10px 16px 0 }
  .v-compact .preview-ui.pv-col { padding: 12px 16px 16px }
  .v-compact .hist-wrap { padding-bottom: 12px; border-bottom: 1px solid var(--line) }
  .v-compact .hist-wrap .panel-hd { padding: 10px 16px 6px !important }
  .v-compact .hist-wrap ol.hist { border: 0 !important; border-radius: 0 !important }
  .v-compact .prebid { border: 0; border-bottom: 1px solid var(--line); border-radius: 0 !important; box-shadow: none; background: transparent }
  .v-compact .bidcol .panel-hd, .v-compact .bid-btn, .v-compact .bid-note { display: none }
}
/* Slim the topbar once space gets tight (small desktop band and phones).
   Applies to every mockup variant — all share the same header markup. */
@media (max-width: 900px) {
  .client-logo, .logo-mark .word, .event-id p, .back-link span, .vr { display: none }
}
@media (max-width: 640px) {
  .topbar { padding: 8px 10px }
  .topbar-in { gap: 8px }
  .back-link { padding: 0 10px }
  .event-id h1 { font-size: 13.5px }
  .conn { font-size: 11.5px; padding: 5px 8px }
  .bidder-badge { padding: 7px 10px }
  .bidder-badge span { display: none }
  .bidder-badge b { font-size: 14px }
}

/* ---------- LAYOUT: faithful restyle ---------- */
.v-faithful .shell { max-width: var(--shell, 1440px); margin: 0 auto; padding: 16px }
.v-faithful .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; align-items: start }
.v-faithful .col { display: grid; gap: 14px; min-width: 0 }
@media (max-width: 1023px) { .v-faithful .grid2 { grid-template-columns: 1fr } .v-faithful .bid-btn { display: none } }
@media (min-width: 1920px) { .v-faithful { --shell: 1680px } }
@media (min-width: 2560px) { .v-faithful { --shell: 1900px; font-size: 16px } }

/* ---------- index page ---------- */
.idx { max-width: 1080px; margin: 0 auto; padding: 52px 20px 64px }
.idx-hd { max-width: 660px }
.idx h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em }
.idx-hd p { margin-top: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 66ch }
.idx .cards { display: grid; gap: 14px; margin-top: 32px }
.vcard { display: grid; grid-template-columns: 152px 1fr; gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s }
.vcard:hover { border-color: var(--navy); box-shadow: var(--sh-md); transform: translateY(-1px) }
.vcard .thumb { height: 92px; border-radius: 8px; background: var(--wash); border: 1px solid var(--line); padding: 8px; display: grid; gap: 5px }
.vcard .thumb i { display: block; border-radius: 3px; background: #c8d6e8 }
.vcard .thumb .acc { background: var(--navy) }
.vcard .thumb b { display: grid; gap: 5px; min-height: 0 }
.thumb.t-compact { grid-template-columns: .7fr 2.4fr 1.2fr }
.thumb.t-one { grid-template-columns: 3fr 2fr }
.thumb.t-one b { grid-template-rows: repeat(3, 1fr) }
.thumb.t-stage { grid-template-rows: 2.2fr 1.1fr .7fr }
.thumb.t-faith { grid-template-rows: .55fr 2fr }
.thumb.t-faith b { grid-template-columns: 1fr 1fr }
.vcard h2 { font-size: 16.5px; font-weight: 650; display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
.vcard h2 .pick { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--navy); background: var(--info-bg); padding: 3px 9px; border-radius: 999px }
.vcard h2 .pick.hot { background: var(--navy); color: #fff }
.vcard p { margin-top: 6px; font-size: 13px; color: var(--muted); max-width: 68ch; line-height: 1.55 }
.vcard .meta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap }
.vcard .meta span { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--wash); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px }
.idx .notes { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 13px; color: var(--muted); display: grid; gap: 9px }
.idx code { background: var(--ground); padding: 1px 5px; border-radius: 4px; font-size: 12px }
@media (max-width: 640px) {
  .idx { padding: 30px 14px 48px }
  .idx h1 { font-size: 22px }
  .vcard { grid-template-columns: 92px 1fr; gap: 12px; padding: 12px; align-items: start }
  .vcard .thumb { height: 68px; padding: 6px; gap: 4px }
  .vcard .thumb b { gap: 4px }
}

/* ---------- LAYOUT: one-screen (zero-scroll) ---------- */
/* Desktop ≥1100px: whole page is one viewport; internal scroll only inside lists. */
.v-one { --shell: 1520px }
.v-one .ws { max-width: var(--shell); margin: 0 auto; padding: 14px; display: grid; grid-template-columns: 1fr 390px; gap: 14px }
.v-one .stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0 }
.v-one .stream { aspect-ratio: auto; flex: 1; min-height: 200px }
.v-one .facts { flex: none; padding: 12px 16px; display: flex; align-items: flex-start; gap: 14px }
.v-one .facts .who { min-width: 0; flex: 1 }
.v-one .facts h2 { font-size: 16.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.v-one .facts .addr { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px }
.v-one .facts .prop-facts { margin-top: 0; flex: none }
/* The bid column grows to its content; when it exceeds the fold the page
   scrolls and the header + live controls pin under the demo bar. */
.v-one .bidcol { min-height: 0 }
.v-one .bidcol .stick { position: sticky; top: var(--demo-h, 0px); z-index: 2; background: var(--card); border-radius: var(--r-card) var(--r-card) 0 0 }
.v-one .pinch { padding: 14px 16px; display: grid; gap: 12px; border-bottom: 1px solid var(--line) }
.v-one .bidcol .scroll { padding: 12px 16px; display: grid; gap: 12px; align-content: start }
.v-one .film { max-width: var(--shell); margin: 0 auto; padding: 0 14px 12px }
.v-one .film .strip-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px }
.v-one .film .strip-hd h2 { font-size: 13px; font-weight: 600 }
.v-one .film .strip-hd span { font-size: 11.5px; color: var(--muted) }
@media (min-width: 1100px) {
  .v-one { min-height: 100dvh; display: flex; flex-direction: column }
  .v-one .topbar { flex: none }
  .v-one .err-band { flex: none; margin: 10px auto 0 }
  .v-one .ws { flex: 1; width: 100% }
  .v-one .film { flex: none; width: 100% }
  .v-one .film .lots-strip { padding-bottom: 2px }
  .v-one .film .lot-card { width: 160px }
  .v-one .film .lot-card .im { height: 64px }
}
@media (min-width: 1600px) { .v-one .ws { grid-template-columns: 1fr 430px } }
@media (min-width: 1920px) { .v-one { --shell: 1900px } .v-one .ws { grid-template-columns: 1fr 460px } }
@media (min-width: 2560px) { .v-one { --shell: 2280px; font-size: 16px } .v-one .ws { grid-template-columns: 1fr 500px } }
/* Mobile <1100px: stream pins to the top, Place Bid pins to the bottom; the middle scrolls. */
@media (max-width: 1099px) {
  .v-one .ws { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px }
  .v-one .stage, .v-one .bidcol, .v-one .bidcol .stick { display: contents }
  .v-one .stream { position: sticky; top: var(--demo-h, 0px); z-index: 40; flex: none; height: 30dvh; min-height: 180px; order: 1;
    margin: 0 -12px; border-radius: 0 }
  .v-one .pinch { order: 2; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; gap: 10px }
  .v-one .pinch .bid-btn { display: none } /* bottom bar carries the action */
  .v-one .facts { order: 3; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); flex-direction: column; gap: 8px; align-items: stretch }
  .v-one .facts .prop-facts { margin-top: 2px }
  .v-one .bidcol .panel-hd { display: none }
  .v-one .bidcol .scroll { order: 4; padding: 0; overflow: visible }
  .v-one .film { order: 5; padding: 0 }
  .v-one .m-action { display: flex }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important }
  .conn .dot, .live-dot::before { animation: none }
}