/* Mobile-first, minimalist, dramatic */
:root{
  --bg:#0b0b0e;
  --fg:#f2f2f7;
  --muted:#9aa0a6;
  --accent:#7cf;
  --primary:#7cf;
  --danger:#ff5d5d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--fg);
}
.container{width:100%; max-width:1100px; margin:0 auto; padding: 0 16px;}
.site-header{position:sticky; top:0; z-index:10; background: rgba(11,11,14,0.8); backdrop-filter: blur(6px); border-bottom: 1px solid #1b1b22;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding: 12px 0;}
.brand{font-weight:800; letter-spacing:1px}
.btn{padding:10px 14px; border:1px solid #2b2b33; background:#16161d; color:var(--fg); border-radius:10px; cursor:pointer}
.btn.primary{background: var(--primary); color:#071018; border-color: transparent; font-weight:700}
.btn:disabled{opacity:.6; cursor:not-allowed}

.board{display:flex; align-items:center; justify-content:center; padding: 36px 0 12px}
.board-inner{text-align:center}
.current-label{color:var(--muted); font-size:.9rem; margin-bottom:8px}
.current-name{font-size: clamp(32px, 8vw, 96px); font-weight:800; line-height:1.1; word-break:break-word; text-transform:uppercase; letter-spacing:1px}
.current-amount{margin-top:8px; font-size: clamp(20px, 5vw, 48px); font-weight:700; color:var(--accent)}
.timer-wrap{margin-top:18px}
.timer-label{color:var(--muted); font-size:.9rem}
.timer{font-variant-numeric: tabular-nums; font-size: clamp(22px, 6vw, 56px); margin-top:4px}
.charity{margin-top:10px; color:var(--muted)}

.panels{display:grid; grid-template-columns:1fr; gap:16px; padding: 24px 0 48px}
.panel{border:1px solid #1b1b22; border-radius:16px; padding:16px; background:#111117}
.panel h2{margin:0 0 12px 0; font-size:1.1rem}
.feed{list-style:none; padding:0; margin:0; max-height:280px; overflow:auto}
.feed li{padding:8px 4px; border-bottom:1px dashed #1e1e26}
.feed li:last-child{border-bottom:none}
.leaderboard{margin:0; padding-left:18px}
.leaderboard li{padding:6px 4px}

.site-footer{border-top:1px solid #1b1b22}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0; font-size:.9rem; color:var(--muted)}

.modal{border:none; border-radius:16px; padding:0; width:min(92vw, 460px); background:#0f0f15; color:var(--fg)}
.bid-form{padding:18px}
.bid-form h3{margin:0 0 12px 0}
.bid-form label{display:block; font-size:.95rem; margin-bottom:10px}
.bid-form input{width:100%; margin-top:6px; padding:10px; border-radius:12px; border:1px solid #272732; background:#12121a; color:var(--fg)}
.note{color:var(--muted); font-size:.85rem}
.actions{display:flex; gap:10px; justify-content:flex-end; margin-top:10px}
.form-msg{min-height:22px; margin-top:10px}

@media (min-width: 880px){
  .panels{grid-template-columns:1fr 1fr}
}