:root {
  --bg: #f4f0e8;
  --ink: #1d2520;
  --muted: #617066;
  --panel: #fffaf1;
  --line: #d8cdbb;
  --green: #1f7a4d;
  --amber: #a55d10;
  --red: #b42318;
  --blue: #225c7a;
  --shadow: 0 18px 45px rgba(69, 54, 34, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  background:
    linear-gradient(135deg, rgba(34, 92, 122, 0.12), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(31, 122, 77, 0.14), transparent 26%),
    var(--bg);
}

button, input, textarea { font: inherit; }

.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.side-nav {
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: rgba(255, 250, 241, 0.78);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--panel);
  font-weight: 700;
}

.brand span:last-child {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.nav-item {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin: 6px 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.nav-item.is-active,
.nav-item:hover {
  border-color: var(--line);
  background: #efe5d5;
}

.workspace { padding: 28px; }

.topbar {
  display: flex;
  gap: 20px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 24px;
}

h1, h2 { margin: 0; letter-spacing: 0; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
p { color: var(--muted); }

.session-box {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.icon-button, .secondary, .panel-form button, .login-form button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--panel);
  cursor: pointer;
}

.icon-button { width: 34px; height: 34px; }
.secondary { padding: 9px 12px; background: transparent; color: var(--ink); }
.panel-form button, .login-form button { padding: 11px 16px; }

.login-panel, .view {
  max-width: 1120px;
  padding: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 250, 241, 0.92);
  box-shadow: var(--shadow);
}

.login-form { max-width: 420px; }
.login-form label, .panel-form label { display: grid; gap: 7px; color: var(--muted); }
.login-form input, .panel-form input, .panel-form textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  background: #fffdf8;
  color: var(--ink);
}

.login-form { display: grid; gap: 14px; }
.error-text { color: var(--red); min-height: 20px; }
.views .view { display: none; }
.views .view.is-active { display: block; }

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.health-card, .summary-card {
  padding: 16px;
  border: 1px solid var(--line);
  background: #fffdf8;
}

.health-card strong { display: block; margin-bottom: 8px; }
.status-ok { color: var(--green); }
.status-bad { color: var(--red); }
.status-warn { color: var(--amber); }

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.table-shell { overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: #fffdf8; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 700; }

.panel-form { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.form-actions { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.checkbox { display: flex !important; grid-template-columns: auto 1fr; align-items: center; color: var(--ink) !important; }
.checkbox input { width: auto; }
.result-box {
  min-height: 120px;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  background: #1d2520;
  color: #f4f0e8;
}

.proof-list { max-width: 820px; line-height: 1.55; }

.link-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.run-detail { margin-top: 18px; }
.run-actions { display: flex; gap: 12px; align-items: center; }
.stream-status { color: var(--muted); font-size: 14px; }
.stream-status.is-live { color: var(--green); }
.stream-status.is-error { color: var(--red); }
.detail-grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr); gap: 16px; }
.event-list { display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.event-card { padding: 10px 12px; border: 1px solid var(--line); background: #fffdf8; }
.event-card span { display: block; color: var(--muted); font-size: 13px; }
.event-card p { margin: 6px 0 0; }

@media (max-width: 960px) {
  .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .shell { grid-template-columns: 1fr; }
  .side-nav { border-right: 0; border-bottom: 1px solid var(--line); }
  .topbar, .view-header, .form-actions, .run-actions { flex-direction: column; align-items: stretch; }
}