:root { --bg:#0b1220; --card:#121a2a; --muted:#7b86a1; --accent:#4aa3ff; --good:#43d675; --warn:#ffd35a; --bad:#ff647c; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial; background: var(--bg); color: #fff; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.card { background: var(--card); border-radius: 16px; padding: 20px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.input, select, button { padding: 10px 12px; border-radius: 12px; border: 1px solid #2a3550; background:#0d1424; color:#fff; }
button { background: var(--accent); border: none; cursor: pointer; font-weight: 600; }
button.secondary { background: #233150; }
button.ghost { background: transparent; border:1px dashed #2a3550; }
label { font-size: 12px; color: var(--muted); display:block; margin-bottom: 6px; }
h1,h2 { margin: 0 0 12px 0; }
small { color: var(--muted); }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#1a2336; color:#cde1ff; font-size:12px; }
.list { display:flex; flex-wrap:wrap; gap:8px; }
.card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap:8px; }
.pill { padding:10px 14px; border-radius: 12px; background:#0e172a; border:1px solid #223052; text-align:center; }
.pill.voted { outline: 2px solid var(--accent); }
.pill.revealed { background:#142238; }
.kpis { display:flex; gap:12px; }
.kpi { background:#101a2e; padding:12px 14px; border-radius:12px; }
hr { border:0; border-top:1px solid #203055; margin:16px 0; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding: 8px 10px; border-bottom:1px solid #1e2b49; text-align:left; }
.table th { color: var(--muted); font-weight:500; }
.vote-dot { width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px; background:#2a3858; }
.vote-dot.on { background: var(--good); }
.flex { display:flex; gap:10px; align-items:center; }
.right { text-align:right; }
.hidden { display:none; }

.pill.selected{ outline:2px solid var(--accent); background:#142238; box-shadow:0 0 0 2px rgba(74,163,255,.2) inset; }


html, body { height: 100%; }
body { overflow: hidden; }
.container { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; overflow: hidden; }
.row { height: 100%; grid-template-rows: 1fr; align-items: stretch; }
.row > .card { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.card .scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }


/* --- Fixed layout & Stories internal scroll (refined) --- */
html, body { height: 100%; }
body { overflow: hidden; }
.container {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}
/* Ensure the middle row can shrink, otherwise .scroll won't get height */
.container > .row { min-height: 0; }
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-height: 0;
}
/* Make all cards flex columns that can shrink */
.card { display: flex; flex-direction: column; min-height: 0; }
.row > .card { height: 100%; }
/* Scrolling region inside cards */
.card .scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }