:root {
  --bg: #ffffff;          /* if you have a bg var */
  --text: #1f2937;        /* dark gray text */
  --ring: #e5e7eb;        /* light grid/borders */
  --card: #ffffff;        /* card background, if present */
  --muted: #6b7280;       /* secondary text, optional */
}
body { background: var(--bg); color: var(--text); }
.card { background: var(--card); }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background: var(--bg);
}

.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--ring);
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg), transparent 40%);
}
.topbar h1{margin:0;font-size:18px}

.btn{
  border:1px solid var(--ring);
  background: var(--card);
  color:var(--text);border-radius:10px;
  padding:8px 12px;font-size:13px;cursor:pointer;
}
.btn:hover{border-color:#405468}

.container{max-width:1200px;margin:0 auto;padding:16px}

.grid{
  display:grid;gap:16px;
  grid-template-columns: repeat(12, 1fr);
}

#mapGrid {
  display: grid;
  grid-template-columns: 1fr;
}

.card{
  grid-column: span 6;
  background: var(--card);
  border:1px solid var(--ring);
  border-radius:var(--radius);
  padding:12px;min-height:260px;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 10px 30px rgba(0,0,0,.25);
  display:flex;flex-direction:column;
}
.card.wide{grid-column: span 12}
.card h2{margin:0 0 8px 0;font-size:14px;opacity:.95}
.card .subtle{color:var(--muted);font-size:12px}

canvas{width:100% !important; height:100% !important}

@media (max-width: 1000px){
  .card{grid-column: span 12}
}

.text-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text-card__canvas { display: none; }

.text-card__main {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}

.text-card__footer {
  font-size: 1rem;
  color: #6b7280;
  text-align: center;
  padding: 50px;
}

.feedback-table {
  position: relative;
  max-height: 255px;
  overflow-y: scroll;
  display: block;
  border-collapse: collapse;
}

.feedback-table td:nth-child(2),
.feedback-table th:nth-child(2) {
  text-align: center;
}

.feedback-table th:nth-child(1) {
    text-align: left;
}

.feedback-table tr:hover {
  background-color: #e6f4ff;
  cursor: pointer;
}

.feedback-table tr {
  border-bottom: 1px solid var(--ring); /* or a hex like #e5e7eb */
}

.feedback-table tr:last-child {
  border-bottom: none; /* optional: remove line after last row */
}

.feedback-table td,
.feedback-table th {
  border-bottom: 1px solid var(--ring);
  padding: 4px 8px;
}