.preview-banner {
  margin-top: 24px;
  padding: 12px 16px;
  border: 1px solid #e8d9b8;
  border-radius: 7px;
  background: #faf4e6;
  color: #765c28;
  font-size: 12px;
  line-height: 1.6;
}

.preview-banner[hidden] { display: none; }

.editor-nav { display: flex; align-items: center; gap: 26px; }
.editor-nav a { color: #5e6d65; text-decoration: none; font-size: 12px; font-weight: 600; }
.editor-nav a:hover { color: #164f43; }
@media (max-width: 620px) { .editor-nav { gap: 12px; } .editor-nav a { font-size: 10px; } }

.style-details { border-top: 1px solid #dcded6; padding: 13px 24px 17px; }
.style-details summary { cursor: pointer; color: #164f43; font-size: 12px; font-weight: 700; }
.style-details summary span { color: #8c9a90; font-weight: 400; margin-left: 8px; }
.style-details label { display: block; margin: 17px 0 6px; color: #65716a; font-size: 11px; font-weight: 700; }
.style-details textarea { width: 100%; height: 100px; border: 1px solid #dfe3db; border-radius: 6px; padding: 10px; font-size: 12px; resize: vertical; background: #fff; }
.style-details textarea:focus { border-color: #164f43; }

/* Shared dark controls. */
.preview-banner { background:#29232c; border-color:#60465c; color:#f3dbea; border-radius:12px; }
.editor-nav a { color:#b5b5bf; }
.editor-nav a:hover { color:#fff; }
.style-details { border-color:#383840; }
.style-details summary { color:#f1f1f4; }
.style-details summary span { color:#9797a2; }
.style-details label { color:#c3c3cd; }
.style-details textarea { background:#222228; border-color:#45454f; color:#fff; border-radius:9px; }
.style-details textarea:focus { border-color:#0099ff; }