:root {
  color: #292a27;
  background: #f4f5f1;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d9dcd3;
  background: #ffffff;
  padding: 0 28px;
}

.brand { display: flex; align-items: center; gap: 10px; color: inherit; font-weight: 700; text-decoration: none; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; background: #c9d9a3; font-family: Georgia, serif; font-size: 20px; }
.brand-mark sup { font-size: 9px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.user-email { color: #64675f; font-size: 14px; }

.button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 16px;
  font-weight: 650;
}
.button:disabled { cursor: wait; opacity: 0.55; }
.button-primary { background: #29322b; color: #ffffff; }
.button-primary:hover { background: #151b17; }
.button-secondary { border-color: #bec3b8; background: #ffffff; color: #292a27; }
.button-secondary:hover, .button-quiet:hover { background: #eef0ea; }
.button-quiet { border-color: transparent; background: transparent; color: #4f534c; }

.login-view { min-height: calc(100vh - 64px); place-items: center; padding: 32px; }
.login-panel { width: min(420px, 100%); border: 1px solid #d9dcd3; background: #ffffff; padding: 42px; }
.login-panel h1 { margin: 4px 0 28px; font-family: Georgia, serif; font-size: 32px; letter-spacing: 0; }
.login-panel .button { width: 100%; }
.eyebrow { margin: 0; color: #71766c; font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }

.workspace { display: grid; min-height: calc(100vh - 64px); grid-template-columns: 220px minmax(0, 1fr); }
.sidebar { border-right: 1px solid #d9dcd3; background: #eef0ea; padding: 28px 18px; }
.sidebar-label { margin: 0 10px 12px; color: #757970; font-size: 12px; font-weight: 750; text-transform: uppercase; }
.page-link { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; border: 0; border-radius: 5px; background: transparent; padding: 0 12px; color: #30332e; text-align: left; }
.page-link.is-active { background: #ffffff; font-weight: 700; box-shadow: 0 1px 2px rgb(25 31 25 / 8%); }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: #a8aca4; }
.state-dot.is-draft { background: #d79042; }
.state-dot.is-published { background: #5f8b64; }

.editor-shell { width: 100%; max-width: 1120px; padding: 38px 48px 80px; }
.editor-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.editor-heading h1 { margin: 4px 0 6px; font-family: Georgia, serif; font-size: 34px; letter-spacing: 0; }
.version-label { margin: 0; color: #73776e; font-size: 14px; }
.editor-actions { display: flex; align-items: center; gap: 10px; }
.save-status { min-width: 80px; color: #676b63; font-size: 13px; text-align: right; }

.editor-form { display: grid; gap: 18px; }
.form-section { border: 1px solid #d9dcd3; border-radius: 6px; background: #ffffff; padding: 26px; }
.form-section h2 { margin: 0 0 22px; font-family: Georgia, serif; font-size: 21px; letter-spacing: 0; }
label { display: grid; gap: 7px; margin-top: 18px; }
label:first-of-type { margin-top: 0; }
label > span, .field-label { color: #555a52; font-size: 13px; font-weight: 700; }
input, textarea, .rich-field { width: 100%; border: 1px solid #c9cdc4; border-radius: 5px; background: #ffffff; color: #292a27; padding: 10px 12px; line-height: 1.5; outline: none; }
input { min-height: 42px; }
textarea { resize: vertical; }
.rich-field { min-height: 76px; }
input:focus, textarea:focus, .rich-field:focus { border-color: #506b57; box-shadow: 0 0 0 3px rgb(80 107 87 / 14%); }
.field-grid { display: grid; gap: 16px; }
.field-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
fieldset { min-width: 0; margin: 0; border: 1px solid #e0e2dc; padding: 18px; }
legend { padding: 0 6px; color: #555a52; font-size: 13px; font-weight: 750; }
.media-field { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.image-preview { display: grid; aspect-ratio: 4 / 3; margin-top: 7px; place-items: center; overflow: hidden; border: 1px solid #d9dcd3; background: #eef0ea; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-controls { align-self: end; }
.file-button { display: inline-flex; width: fit-content; align-items: center; margin: 0 0 10px; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: min(420px, calc(100vw - 48px)); border-radius: 5px; background: #29322b; color: #ffffff; padding: 13px 16px; box-shadow: 0 8px 28px rgb(20 25 20 / 20%); }
.toast.is-error { background: #8c3030; }

@media (max-width: 820px) {
  .topbar { padding: 0 16px; }
  .user-email { display: none; }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .editor-shell { padding: 26px 16px 60px; }
  .editor-heading { align-items: stretch; flex-direction: column; }
  .editor-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .save-status { grid-column: 1 / -1; text-align: left; }
  .field-grid-three, .testimonial-grid, .media-field { grid-template-columns: 1fr; }
  .form-section { padding: 20px 16px; }
}