:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --primary: #111827;
  --accent: #2563eb;
  --success: #065f46;
  --success-bg: #d1fae5;
  --error: #991b1b;
  --error-bg: #fee2e2;
  --warning: #92400e;
  --warning-bg: #fef3c7;
  --bid-green: #1aff00;
  --bid-yellow: #f3b300;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.app-shell { max-width: 1200px; margin: 0 auto; padding: 20px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding: 20px 0; }
.brand { font-size: 28px; font-weight: 700; color: var(--text); text-decoration:none; }
.subbrand { color: var(--muted); margin-top: 6px; }
.nav-links { display:flex; gap: 14px; align-items:center; flex-wrap: wrap; }
.nav-user { color: var(--muted); }
.flash { padding: 14px 16px; border-radius: 14px; margin-bottom: 16px; }
.flash.success { background: var(--success-bg); color: var(--success); }
.flash.error { background: var(--error-bg); color: var(--error); }
.flash.warning { background: var(--warning-bg); color: var(--warning); }
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: 0 8px 22px rgba(17,24,39,.05); }
.card h1, .card h2, .card h3 { margin-top: 0; }
.stats { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.stat { background: var(--card); border:1px solid var(--line); border-radius:20px; padding:16px; }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { font-size: 24px; font-weight:700; margin-top:6px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align: top; }
.badge { display:inline-block; padding: 6px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.badge.live { background:#dbeafe; color:#1d4ed8; }
.badge.closed { background:#f3f4f6; color:#374151; }
.badge.pending { background:#fef3c7; color:#92400e; }
label { display:block; font-weight:700; margin-bottom:8px; }
input, textarea, select { width:100%; padding:12px 14px; border-radius:14px; border:1px solid #d1d5db; font: inherit; background:#fff; }
textarea { min-height: 110px; resize: vertical; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.button, button { display:inline-block; background: var(--primary); color:#fff; border:none; padding: 12px 18px; border-radius:14px; cursor:pointer; font-weight:700; }
.button.secondary { background:#fff; color:var(--text); border:1px solid var(--line); }
.button.danger { background:#b91c1c; }
.muted { color: var(--muted); }
.copy-box { padding: 14px; background:#f9fafb; border:1px dashed #d1d5db; border-radius:16px; word-break:break-all; }
.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:start; }
.listing-title { font-size: 30px; margin-bottom: 8px; }
.key-value { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin: 16px 0; }
.key-value .kv { background:#f9fafb; border:1px solid var(--line); border-radius:16px; padding:12px; }
.kv .k { font-size:12px; color: var(--muted); }
.kv .v { font-weight:700; margin-top:4px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.small { font-size: 13px; }
.center { text-align:center; }
button[disabled], .button[disabled] { opacity:.6; cursor:not-allowed; }

.bid-panel { background:#f2f2f2; border-radius:18px; padding:0; overflow:hidden; }
.bid-header-bar { background:var(--bid-green); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; font-weight:800; font-size:14px; color:#111; }
.bid-header-copy { letter-spacing:.2px; }
.session-pill { background:#ffb000; border-radius:10px; padding:8px 12px; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; white-space:nowrap; }
.status-dot { width:12px; height:12px; border-radius:50%; border:2px solid #111; border-top-color:transparent; display:inline-block; }
.bid-stats-row { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; padding:18px 16px 12px; text-align:center; }
.bid-stat-label { color:#6f6f6f; font-size:13px; font-weight:700; margin-bottom:6px; }
.bid-stat-value { font-size:26px; font-weight:800; }
.bid-timer { font-size:18px; font-weight:900; color:#ff2b2b; }
.leaderboard-card { background:#eaeaea; border-radius:12px; margin:0 16px 18px; padding:12px 12px 6px; }
.leaderboard-head { display:grid; grid-template-columns: 1fr 1fr; font-size:14px; font-weight:800; color:#555; text-align:center; padding:6px 6px 12px; }
.leaderboard-body { display:flex; flex-direction:column; }
.leader-row { display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap:8px; background:transparent; padding:10px 12px; border-bottom:2px solid #bcbcbc; }
.leader-row:last-child { border-bottom:none; }
.leader-row.top { background:#c8efbc; border-radius:10px; border-bottom:none; margin-bottom:6px; }
.leader-price { text-align:center; font-size:21px; font-weight:800; color:#1d1d1d; }
.leader-price.top { color:#ef2525; font-size:24px; }
.leader-bidder-wrap { display:flex; align-items:center; gap:10px; }
.avatar-circle { width:42px; height:42px; min-width:42px; border-radius:50%; background:#d9d9d9; display:flex; align-items:center; justify-content:center; font-weight:800; color:#222; }
.avatar-circle.gold { background:#f1bc12; }
.leader-name { font-size:14px; font-weight:700; color:#4d4d4d; }
.leader-increment { font-size:14px; font-weight:800; color:#2d4d89; margin-top:2px; }
.leader-empty { text-align:center; color:#777; padding:20px 0; font-weight:700; }
.place-bid-form { padding:0 16px 18px; }
.quick-bid-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-bottom:18px; }
.quick-bid-tile { background:var(--bid-yellow); color:#111; border:none; border-radius:6px; font-size:18px; font-weight:900; min-height:72px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.max-bid-row { display:grid; grid-template-columns: 95px 1fr; gap:14px; align-items:center; }
.max-bid-label { font-size:18px; font-weight:700; color:#555; }
.max-bid-input-wrap { display:grid; grid-template-columns: 56px 1fr 80px; border:3px solid #262626; border-radius:4px; overflow:hidden; background:#fff; }
.max-bid-prefix { display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; color:#2e2e2e; background:#fff; }
.max-bid-input-wrap input { border:none; border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-radius:0; padding:14px 12px; font-size:18px; min-width:0; }
.max-bid-input-wrap input::placeholder { color:#c5c5c5; }
.max-bid-submit { border:none; border-radius:0; background:#111; color:#fff; font-size:18px; font-weight:800; }
.bid-note { margin-top:10px; line-height:1.4; }
.closed-box { padding:0 16px 18px; }

@media (max-width: 900px) {
  .grid-2, .grid-3, .stats, .hero, .form-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction:column; }
}

@media (max-width: 640px) {
  .bid-header-bar { flex-direction:column; align-items:flex-start; }
  .bid-stats-row, .max-bid-row, .quick-bid-grid { grid-template-columns: 1fr; }
  .leader-row, .leaderboard-head { grid-template-columns: 1fr; text-align:left; }
  .max-bid-input-wrap { grid-template-columns: 56px 1fr; }
  .max-bid-submit { grid-column: 1 / -1; min-height:52px; }
}

.bid-confirm-modal[hidden] { display:none; }
.bid-confirm-modal { position:fixed; inset:0; z-index:1200; }
.bid-confirm-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.bid-confirm-card { position:relative; z-index:2; width:min(420px, calc(100% - 32px)); margin:18vh auto 0; background:#fff; border-radius:16px; padding:22px; box-shadow:0 18px 48px rgba(0,0,0,.25); }
.bid-confirm-card h3 { margin:0 0 10px; }
.bid-confirm-card p { margin:0 0 18px; color:#444; }
.bid-confirm-actions { display:flex; justify-content:flex-end; gap:12px; }
.modal-cancel-btn, .modal-confirm-btn { border:none; border-radius:10px; padding:12px 18px; font-weight:800; cursor:pointer; }
.modal-cancel-btn { background:#ececec; color:#222; }
.modal-confirm-btn { background:#111; color:#fff; }