:root { font-family: system-ui, Arial, sans-serif; }
body { margin: 0; background: #fafafa; color: #111; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: #111; color: #fff;
}
.topbar a { color: #fff; text-decoration: none; margin-left: 12px; }
.container { padding: 16px; max-width: 1200px; margin: 0 auto; }

h1 { margin-top: 0; }
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.grid label { display: flex; flex-direction: column; gap: 6px; }
input { padding: 8px; border: 1px solid #bbb; border-radius: 6px; }

.actions { display: flex; gap: 8px; align-items: end; }
button, .btn-secondary {
  padding: 8px 12px; border-radius: 6px; border: 1px solid #111;
  background: #111; color: #fff; cursor: pointer; text-decoration: none;
}
.btn-secondary { background: #fff; color: #111; border-color: #bbb; }

.card {
  background: #fff; border: 1px solid #ddd; border-radius: 8px;
  padding: 12px; margin-top: 16px;
}
.meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.textcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.textblock { white-space: pre-wrap; border: 1px solid #eee; padding: 10px; border-radius: 6px; background: #fcfcfc; min-height: 80px; }

.graph { height: 420px; border: 1px solid #eee; border-radius: 8px; }

table { width: 100%; border-collapse: collapse; margin-top: 12px; background: #fff; }
th, td { border: 1px solid #eee; padding: 8px; vertical-align: top; }
th { background: #f3f3f3; text-align: left; }
.smallcell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: #666; }

.inline { display: flex; gap: 8px; align-items: end; margin-top: 8px; }