:root {
  --bg: #18181b; --fg: #e5e5e5; --card: #27272a;
  --accent: #3b82f6; --success: #16a34a; --border: #3f3f46;
}
body, html { margin:0; padding:0; height:100%; font-family:sans-serif; background:var(--bg); color:var(--fg); }
.app { display:flex; height:100%; }
.sidebar { width:280px; background:var(--card); padding:1rem; display:flex; flex-direction:column; gap:1rem; }
.sidebar .logo { font-size:1.5rem; }
.sidebar nav a, .sidebar nav button { color:var(--fg); text-decoration:none; padding:.5rem; border:none; background:none; text-align:left; }
.sidebar nav a:hover, .sidebar nav button:hover { background:var(--border); }
.card { background:var(--card); padding:1rem; border-radius:.5rem; box-shadow:0 2px 6px rgba(0,0,0,0.5); margin-bottom:1rem; }
.card h3 { margin-top:0; }
.main { flex:1; padding:1.5rem; overflow:auto; display:flex; flex-direction:column; gap:1.5rem; }
.stats { width:100%; }
.grid-container { position:relative; padding-top:2rem; }
.axis-label { position:absolute; font-weight:600; color:var(--fg); }
.x-label { top:0; left:50%; transform:translate(-50%, -100%); }
.y-label { left:0; top:50%; transform:translate(-100%, -50%) rotate(-90deg); }
.col-numbers { display:grid; grid-template-columns:40px repeat(10,1fr); margin-bottom:4px; }
.col-numbers div { height:24px; display:flex; align-items:center; justify-content:center; color:var(--fg); }
.grid-with-rows { display:grid; grid-template-columns:40px repeat(10,1fr); grid-gap:4px; }
.grid-with-rows .row-label { display:flex; align-items:center; justify-content:center; color:var(--fg); }
.grid-with-rows .cell { width:100%; aspect-ratio:1; background:#3f3f46; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:.25rem; cursor:pointer; font-size:.875rem; }
.grid-with-rows .cell:hover { background:#52525b; }
.grid-with-rows .cell.sold { background:var(--success); color:#111; cursor:not-allowed; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; }
.modal.hidden { display:none; }
.modal-inner { background:var(--card); padding:2rem; border-radius:.5rem; width:320px; text-align:center; }
.btn { padding:.5rem 1rem; margin:.25rem; border:none; border-radius:.375rem; cursor:pointer; font-weight:600; }
.btn.green { background:var(--success); color:#111; text-decoration:none; }
.btn.green:hover { background:#15803d; }
.modal-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }