.public-profile-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
  gap: 22px;
  align-items: start;
}

.public-profile-form,
.public-editor-preview {
  min-width: 0;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
}

.public-profile-form { padding: 24px; }
.public-editor-note {
  margin: 0 0 22px;
  border-left: 4px solid #0f766e;
  background: #f0fdfa;
  padding: 12px 14px;
  color: #35534f;
  font-size: 13px;
  line-height: 1.65;
}

.public-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.public-field { min-width: 0; display: grid; gap: 7px; }
.public-field.wide { grid-column: 1 / -1; }
.public-field > span { color: #3c4043; font-size: 13px; font-weight: 700; }
.public-field input,
.public-field textarea,
.public-field select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #c7cbd1;
  border-radius: 5px;
  background: #fff;
  padding: 9px 11px;
  color: #202124;
  font: inherit;
}
.public-field textarea { min-height: 126px; resize: vertical; line-height: 1.6; }
.public-field input:focus,
.public-field textarea:focus,
.public-field select:focus { outline: 3px solid rgba(15, 118, 110, .18); border-color: #0f766e; }
.public-field small { color: #6b7280; font-size: 11px; line-height: 1.5; }

.public-editor-switches {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  border-top: 1px solid #e5e7eb;
  padding-top: 18px;
}
.public-editor-switch {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: #3c4043;
  font-size: 13px;
  line-height: 1.55;
}
.public-editor-switch input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0f766e; }

.public-editor-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid #e5e7eb;
  padding-top: 18px;
}
.public-editor-actions button,
.public-editor-actions a,
.public-editor-heading-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7cbd1;
  border-radius: 5px;
  background: #fff;
  padding: 0 15px;
  color: #17443a;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.public-editor-actions .primary { border-color: #0f766e; background: #0f766e; color: #fff; }
.public-editor-status { flex: 1 1 180px; color: #51605d; font-size: 12px; text-align: right; }
.public-editor-status.error { color: #b42318; }
.public-editor-status.success { color: #067647; }

.public-editor-preview { position: sticky; top: 88px; overflow: hidden; }
.public-preview-cover { position: relative; min-height: 190px; overflow: hidden; background: #143d33; }
.public-preview-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.public-preview-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,29,24,.88), rgba(6,29,24,.22)); }
.public-preview-identity { position: absolute; z-index: 1; right: 17px; bottom: 17px; left: 17px; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; align-items: center; color: #fff; }
.public-preview-avatar { width: 58px; height: 58px; border: 3px solid #fff; border-radius: 50%; object-fit: cover; background: #dce9e4; }
.public-preview-identity h3 { margin: 0; overflow-wrap: anywhere; font-size: 20px; }
.public-preview-identity p { margin: 2px 0 0; overflow-wrap: anywhere; color: rgba(255,255,255,.78); font-size: 11px; }
.public-preview-copy { padding: 18px; }
.public-preview-chip { display: inline-flex; border: 1px solid #f2c6bc; border-radius: 999px; background: #fff5f2; padding: 4px 8px; color: #9b3f31; font-size: 10px; font-weight: 800; }
.public-preview-copy > p { margin: 11px 0 0; color: #4b5563; font-size: 13px; line-height: 1.65; }
.public-preview-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.public-preview-meta span { border: 1px solid #d8e3de; border-radius: 999px; background: #f6faf8; padding: 4px 8px; color: #28594d; font-size: 10px; }

@media (max-width: 900px) {
  .public-profile-editor { grid-template-columns: 1fr; }
  .public-editor-preview { position: static; order: -1; }
}

@media (max-width: 560px) {
  .public-profile-form { padding: 17px; }
  .public-form-grid { grid-template-columns: 1fr; }
  .public-field.wide,
  .public-editor-switches,
  .public-editor-actions { grid-column: 1; }
  .public-editor-actions { align-items: stretch; }
  .public-editor-actions button,
  .public-editor-actions a { flex: 1 1 100%; }
  .public-editor-status { flex-basis: 100%; text-align: left; }
}

html[data-theme="dark"] .public-profile-form,
html[data-theme="dark"] .public-editor-preview { border-color: #3c4753; background: #202a35; }
html[data-theme="dark"] .public-editor-note { background: #163b37; color: #c8e6df; }
html[data-theme="dark"] .public-field > span,
html[data-theme="dark"] .public-editor-switch { color: #e7edf4; }
html[data-theme="dark"] .public-field input,
html[data-theme="dark"] .public-field textarea,
html[data-theme="dark"] .public-field select { border-color: #536171; background: #17202a; color: #f2f5f8; }
html[data-theme="dark"] .public-preview-copy > p,
html[data-theme="dark"] .public-field small { color: #b5c0cb; }
html[data-theme="dark"] .public-editor-actions button,
html[data-theme="dark"] .public-editor-actions a { border-color: #536171; background: #202a35; color: #dcebe6; }
html[data-theme="dark"] .public-editor-actions .primary { background: #168579; color: #fff; }