:root{
  --bg:#f1f5f9; --card:#fff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --green:#16a34a; --green-bg:#dcfce7; --red:#dc2626; --red-bg:#fee2e2;
  --amber:#d97706; --amber-bg:#fef3c7; --accent:#0f172a;
  --radius:14px; --tap:44px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);-webkit-text-size-adjust:100%}
main{max-width:640px;margin:0 auto;padding:12px 16px 90px}
a{color:#2563eb;text-decoration:none}

/* top bar */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;padding:10px 16px}
.brand{font-weight:800;letter-spacing:.3px}
.tabs{display:flex;gap:4px;margin-left:auto}
.tabs a{color:#cbd5e1;padding:8px 12px;border-radius:9px;font-weight:600;min-height:var(--tap);display:flex;align-items:center}
.tabs a.on{background:rgba(255,255,255,.14);color:#fff}
.who{color:#cbd5e1;font-size:13px;margin-left:8px}
.who a{color:#93c5fd}

.dryrun-bar{background:var(--amber-bg);color:#7c2d12;text-align:center;font-size:13px;font-weight:600;
  padding:7px 16px;border-bottom:1px solid #fde68a}
.dryrun-bar b{color:var(--red)}
.flash{max-width:640px;margin:8px auto 0;padding:0 16px}
.flash div{background:#ecfeff;border:1px solid #a5f3fc;color:#155e75;padding:8px 12px;border-radius:10px;margin-top:6px;font-size:14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04)}

/* login */
.login{max-width:360px;margin:8vh auto}
.login h1{text-align:center;font-size:30px;margin:0 0 16px}
.login label{display:block;margin:0 0 12px;font-weight:600;font-size:14px;color:var(--muted)}
.login select,.login input{width:100%;height:var(--tap);margin-top:6px;padding:0 12px;font-size:16px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.acct-email{margin:0 0 12px;font-weight:700;color:var(--muted)}
.login .btn-primary{width:100%;margin-top:4px}
.login .btn-ghost.wide{margin-top:10px}

/* appraise */
.statusline{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);margin-top:4px}
.remaining{font-weight:700;color:var(--ink)}
.badge-pass{display:inline-block;background:var(--amber-bg);color:var(--amber);font-weight:700;font-size:13px;
  padding:4px 10px;border-radius:999px;margin-bottom:10px}
.title{font-size:22px;margin:12px 0 4px}
.spec{color:var(--muted);font-size:14px}

.carousel{position:relative;border-radius:12px;overflow:hidden;background:#f0f0f0}
.carousel .frames{aspect-ratio:4/3;position:relative}
/* contain + matching f0f0f0 bg: the images are pre-padded to f0f0f0, so the pad
   blends into the frame and there are no visible grey bars */
.frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f0f0f0;opacity:0;transition:opacity .2s}
.frame.on{opacity:1}
.carousel.noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;color:#64748b;font-size:14px}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:999px;
  background:rgba(15,23,42,.55);color:#fff;font-size:24px;line-height:1}
.nav.prev{left:8px}.nav.next{right:8px}
.thumbs{display:flex;gap:6px;padding:8px;background:#e2e8f0;overflow-x:auto}
.thumb{width:54px;height:40px;object-fit:contain;background:#f0f0f0;border-radius:6px;opacity:.55;flex:0 0 auto}
.thumb.on{opacity:1;outline:2px solid #0f172a}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.tile{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.tile .v{font-size:18px;font-weight:800;margin-top:2px}
.tile .sub{font-size:11px;color:var(--muted)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:6px 0 0;font-size:14px}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.vinrow{display:flex;align-items:center;gap:8px}
.copyvin{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;flex:0 0 auto;
  border:1px solid var(--line);background:#f8fafc;color:var(--muted);border-radius:8px;cursor:pointer}
.copyvin svg{width:16px;height:16px}
.copyvin:hover{color:var(--ink);background:#eef2f7}
.copyvin.ok{background:var(--green-bg);color:var(--green);border-color:var(--green-bg)}

.links{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.pill-red{background:var(--red-bg);color:var(--red);font-weight:700;font-size:13px;padding:0 12px;height:var(--tap);
  display:inline-flex;align-items:center;border-radius:10px}

.cond{margin-top:14px}
.cond h3{font-size:14px;margin:0 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.cond ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cond li{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:8px;font-size:14px;
  border-bottom:1px solid var(--line);padding-bottom:6px}
.dot{width:10px;height:10px;border-radius:999px}
.dot.green{background:var(--green)}.dot.red{background:var(--red)}
.cl{color:var(--muted)}.cv{font-weight:600;text-align:right}

/* bid box */
.err{background:var(--red-bg);color:var(--red);border-radius:10px;padding:8px 12px;margin-top:14px;font-weight:600;font-size:14px}
.bidbox{margin-top:16px}
.moneyin{display:flex;align-items:center;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.moneyin .pfx{padding:0 12px;font-size:20px;color:var(--muted);background:#f8fafc;align-self:stretch;display:flex;align-items:center}
.moneyin input{flex:1;border:0;height:52px;font-size:22px;font-weight:700;padding:0 12px;width:100%}
/* no spinner arrows / wheel-changes-value on any numeric field */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.moneyin input:focus{outline:none}
.hint{font-size:13px;color:var(--muted);margin:6px 2px}
.hint.good{color:var(--green)}.hint.bad{color:var(--red)}
.btn-bid{width:100%;height:54px;margin-top:10px;border:0;border-radius:12px;background:var(--green);color:#fff;
  font-size:18px;font-weight:800;letter-spacing:.5px}
.btn-bid:disabled{background:#cbd5e1;color:#eef2f7}
.passform{margin-top:12px;text-align:center}
.btn-pass{width:100%;height:50px;border:2px solid var(--red);background:#fff;color:var(--red);
  font-size:17px;font-weight:800;border-radius:12px;letter-spacing:.5px}
.passnote{font-size:12px;color:var(--muted);margin-top:6px}

.empty{text-align:center;padding:36px 16px}
.empty h2{margin:0 0 6px}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;height:var(--tap);padding:0 18px;
  background:var(--accent);color:#fff;border:0;border-radius:10px;font-weight:700;font-size:16px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 14px;
  background:#f8fafc;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-weight:600;font-size:14px}
.btn-ghost.sm{min-height:38px;padding:0 10px;font-size:13px}

.lastbar{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:15;
  display:inline-flex;align-items:center;gap:10px;background:#0f172a;color:#e2e8f0;
  padding:7px 8px 7px 14px;border-radius:999px;font-size:13px;box-shadow:0 6px 18px rgba(15,23,42,.28)}
.lastbar span{opacity:.85;white-space:nowrap}
.btn-undo{background:#334155;color:#fff;border:0;border-radius:999px;height:34px;padding:0 16px;font-weight:700}

/* our bids */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;background:#eef2f7;color:var(--ink)}
.chip.green{background:var(--green-bg);color:var(--green)}
.chip.amber{background:var(--amber-bg);color:var(--amber)}
.chip.red{background:var(--red-bg);color:var(--red)}
.chip.lead{margin-left:auto;background:#e0e7ff;color:#3730a3}
.bidlist{display:grid;gap:10px}
.brow{display:grid;gap:10px}
.bname{font-weight:700}
.bmeta{font-size:13px;color:var(--muted)}
.bnums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bn{display:flex;flex-direction:column;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:8px}
.bn .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.bn .v{font-size:17px;font-weight:800}
.room.none{color:var(--red)}
.bstand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill-stand{font-weight:800;font-size:13px;padding:6px 12px;border-radius:999px}
.pill-stand.winning{background:var(--green-bg);color:var(--green)}
.pill-stand.losing{background:var(--amber-bg);color:var(--amber)}
.pill-stand.maxed{background:var(--red-bg);color:var(--red)}
.changemax{display:flex;gap:6px;margin-left:auto}
.changemax input{width:110px;height:38px;border:1px solid var(--line);border-radius:9px;padding:0 10px;font-size:15px;font-weight:700}
.footer{margin-top:16px;color:var(--muted);font-size:13px;text-align:center}

@media (min-width:560px){ .brow{grid-template-columns:1fr auto;align-items:center} .brow .bstand{grid-column:1/-1} }

/* desktop appraise: photos + info side-by-side, compact enough to fit one screen */
@media (min-width:860px){
  body.pg-appraise main{max-width:1180px;padding-top:8px;padding-bottom:64px}
  .appraise .statusline{margin-bottom:2px}
  .car{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:22px;align-items:start;padding:14px}
  .col-photos{position:sticky;top:58px}
  /* cap the photo so a tall screen doesn't stretch it and a short one still fits */
  .col-photos .carousel .frames{aspect-ratio:auto;height:min(52vh,420px)}
  .col-photos .thumb{width:48px;height:36px}

  .col-info .title{font-size:20px;margin:0 0 2px}
  .col-info .spec{font-size:13px}
  .col-info .tiles{margin:10px 0;gap:8px}
  .col-info .tile{padding:8px}
  .col-info .tile .v{font-size:16px}
  .col-info .kv{margin-top:8px;gap:2px 12px;font-size:13px}
  .col-info .links{margin:10px 0}
  .col-info .pill-red,.col-info .btn-ghost{min-height:38px;height:38px}
  .col-info .cond{margin-top:8px}
  .col-info .cond h3{margin-bottom:6px}
  .col-info .cond ul{grid-template-columns:1fr 1fr;column-gap:22px;gap:5px 22px}
  .col-info .cond li{padding-bottom:5px;font-size:13px}
  .col-info .bidbox{margin-top:12px}
  .col-info .moneyin input{height:46px;font-size:20px}
  .col-info .hint{margin:4px 2px}
  .col-info .btn-bid{height:48px;margin-top:8px}
  .col-info .passform{margin-top:8px}
  .col-info .btn-pass{height:44px}
}

/* confirm modal (bottom sheet on phones) */
.modal{position:fixed;inset:0;z-index:20;background:rgba(15,23,42,.5);display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal .sheet{background:#fff;width:100%;max-width:640px;border-radius:18px 18px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(15,23,42,.25);animation:rise .18s ease-out}
@keyframes rise{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.modal h3{margin:0 0 12px;font-size:19px}
.warns{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.warns li{background:var(--amber-bg);color:#7c2d12;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.4}
.warns li.w-cfx{background:#e0f2fe;color:#075985}
.confirm-amt{font-weight:800;font-size:17px;margin:4px 2px 14px}
.btn-ghost.wide{width:100%;margin-top:10px}
@media (min-width:560px){ .modal{align-items:center} .modal .sheet{border-radius:18px;margin:0 16px} }
.sheet .btn-primary.wide,.sheet .btn-ghost.wide{width:100%;margin-top:10px;text-align:center}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:40;background:rgba(2,6,23,.94);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lb-img{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:6px;background:#0f172a}
.lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:16px;width:44px;height:44px;border:0;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-count{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#e2e8f0;font-size:14px;font-weight:600}
@media (max-width:559px){ .lb-nav{width:40px;height:40px;font-size:24px} }