* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: #1a1a1a;
}

.login-page {
  max-width: 24rem;
  margin: 4rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.login-page form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.error { color: #b00020; }

.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ddd;
}
.topbar h1 {
  font-size: 1rem;
  margin: 0;
  margin-right: 1rem;
}
.logout-form { margin-left: auto; }
#status { color: #555; font-size: 0.9rem; }

.warning-banner {
  background: #fff3cd;
  color: #664d03;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ffe69c;
}

.split-pane {
  display: flex;
  height: calc(100vh - 3rem);
}
#editor {
  width: 50%;
  border: none;
  border-right: 1px solid #ddd;
  resize: none;
  font-family: ui-monospace, monospace;
  font-size: 0.95rem;
  padding: 1rem;
}
#preview {
  width: 50%;
  border: none;
}