:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  background: #0d1218;
  color: #e8eef3;
}

* { box-sizing: border-box; }
body { margin: 0; }
header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  background: #17212b;
  border-bottom: 1px solid #2f3e4c;
}
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: 21px; }
h2 { margin-bottom: 12px; font-size: 16px; }
header p { margin-bottom: 0; color: #9fb2c3; font-size: 13px; }
main { padding: 18px; }
.header-actions { display: flex; align-items: center; flex: 1; justify-content: flex-end; gap: 9px; }
.dashboard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.panel {
  padding: 16px;
  background: #17212b;
  border: 1px solid #2f3e4c;
  border-radius: 10px;
}
.wide { grid-column: 1 / -1; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-heading p, .muted { color: #9fb2c3; font-size: 13px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 7px; text-align: left; vertical-align: top; border-bottom: 1px solid #2a3845; }
th { color: #9fb2c3; }
button {
  border: 0;
  border-radius: 6px;
  padding: 8px 11px;
  background: #287fc2;
  color: white;
  cursor: pointer;
}
button.secondary { background: #344656; }
button.warn { background: #a34f40; }
button:disabled { cursor: wait; opacity: .55; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 190px; }
.stack { display: grid; gap: 10px; }
.channel { display: flex; justify-content: space-between; gap: 8px; padding: 10px; border-radius: 7px; background: #101820; }
.enabled { color: #74d499; }
.disabled { color: #f29c7e; }
.spaced-heading { margin-top: 24px; }
.empty-state { max-width: 620px; margin: 50px auto; text-align: center; }
dialog {
  width: min(520px, calc(100vw - 30px));
  padding: 18px;
  color: #e8eef3;
  background: #17212b;
  border: 1px solid #425466;
  border-radius: 10px;
}
dialog::backdrop { background: rgba(0, 0, 0, .65); }
label { display: grid; gap: 5px; color: #b8c8d5; font-size: 13px; }
label.inline { display: flex; align-items: center; }
label.inline input { width: auto; }
input, textarea {
  width: 100%;
  padding: 8px;
  color: #eef4f8;
  background: #101820;
  border: 1px solid #415364;
  border-radius: 6px;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
#status {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 500px;
  padding: 10px 14px;
  border-radius: 7px;
  background: #27394a;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .3);
  opacity: 0;
  transition: opacity .2s;
}
#status.visible { opacity: 1; }
.authenticated { display: none; }
body.signed-in .authenticated { display: initial; }
body.signed-in #dashboard { display: grid; }
body.signed-in #signed-out, body.signed-in #sign-in { display: none; }
@media (max-width: 900px) {
  header { align-items: flex-start; flex-direction: column; }
  .header-actions { justify-content: flex-start; flex-wrap: wrap; }
  .dashboard { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
}