* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Arial, sans-serif;
  background: #f5f3ef;
  color: #231f20;
  margin: 0;
}
.page {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}
h1 { margin-bottom: 4px; }
h2 { margin-top: 32px; border-bottom: 1px solid #ddd6cc; padding-bottom: 6px; }
h3 { margin: 16px 0 8px; font-size: 0.95em; text-transform: uppercase; letter-spacing: .04em; color: #6b6560; }
.muted { color: #857f78; }
.back-link { display: inline-block; margin-bottom: 12px; color: #c5923b; text-decoration: none; }

.button {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #c5923b;
  background: #fff;
  color: #231f20;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9em;
}
.button.primary { background: #c5923b; color: #fff; border-color: #c5923b; }
.button.small { padding: 4px 8px; font-size: 0.8em; }
.button.danger { border-color: #b3413a; color: #b3413a; }

.file-list { list-style: none; padding: 0; }
.file-list li { padding: 6px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; }
.file-list li .button { margin-left: auto; }
.file-list a { color: #231f20; text-decoration: none; }
.file-list a:hover { color: #c5923b; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; color: #4a4640; }
input[type="text"], select, textarea {
  padding: 6px 8px;
  border: 1px solid #d8d2c8;
  border-radius: 4px;
  font-size: 0.95em;
  width: 100%;
}

.list-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.list-row input { flex: 1; }

.page-card {
  background: #fff;
  border: 1px solid #e4ded2;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.page-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.page-card-controls { display: flex; gap: 6px; }

.field-row { margin-bottom: 10px; }
.field-row label { margin-bottom: 3px; }
.char-count { font-size: 0.75em; color: #a39c92; }
.image-field input[type="file"] { margin-top: 4px; }
.thumb { max-width: 160px; max-height: 100px; margin-top: 6px; border-radius: 4px; display: block; }

.add-page-row { display: flex; gap: 8px; align-items: center; margin: 12px 0 28px; }

.actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 24px 0;
  padding-top: 16px;
  border-top: 1px solid #ddd6cc;
}

#messages { margin: 12px 0; }
#messages .error { color: #b3413a; white-space: pre-wrap; }
#messages .success { color: #2f6b3a; }
.log { background: #1f1c19; color: #e9e4da; padding: 10px; border-radius: 4px; font-size: 0.8em; max-height: 260px; overflow: auto; white-space: pre-wrap; }

.check-ok { margin: 8px 0; padding: 8px 12px; border-radius: 4px; background: #e6f0e6; color: #2f6b3a; }
.check-issues { margin: 8px 0; padding: 8px 12px; border-radius: 4px; background: #fbeee9; color: #b3413a; }
.check-issues ul { margin: 6px 0 0; padding-left: 20px; }
.check-issues li { margin: 2px 0; }

.slide-preview:empty { display: none; }
.slide-preview { margin-top: 10px; }
.preview-box { position: relative; padding-top: 4px; }
.preview-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(31, 28, 25, 0.75); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.preview-close:hover { background: #b3413a; }
.slide-preview-img { max-width: 100%; border: 1px solid #ddd6cc; border-radius: 4px; display: block; }

.json-preview { margin-top: 32px; }
.json-preview pre { background: #1f1c19; color: #e9e4da; padding: 12px; border-radius: 4px; overflow: auto; max-height: 400px; font-size: 0.8em; }

.lang-switch { float: right; display: flex; gap: 4px; }
.lang-switch button { padding: 4px 10px; border: 1px solid #c5923b; background: #fff; color: #231f20; border-radius: 4px; cursor: pointer; font-size: 0.8em; font-weight: 600; }
.lang-switch button.active { background: #c5923b; color: #fff; }

.hint { display: block; font-size: 0.78em; color: #857f78; font-weight: normal; }
.field-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.field-label strong { font-size: 1.05em; color: #231f20; }
.req { color: #b3413a; font-weight: 700; }
.opt { font-size: 0.75em; color: #a39c92; }
.tech-name { font-size: 0.7em; color: #a39c92; background: #f5f3ef; padding: 1px 5px; border-radius: 3px; }

/* Login and the logged-in user */
.user-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.9em; }
.user-bar form { margin: 0; }
.login-page { max-width: 420px; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; }
.login-form input { padding: 8px; font: inherit; border: 1px solid #ccc5bb; border-radius: 4px; }
.file-list .owner { font-size: 0.85em; margin: 0 10px; }
.login-page .error { color: #b3413a; background: #fbeceb; padding: 8px 10px; border-radius: 4px; }