.admin-brand { display: flex; align-items: center; gap: .75rem; line-height: 1.15; }
.admin-brand-logo { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; clip-path: circle(46% at 50% 50%); background: #fff; flex: 0 0 auto; }
.visual-editor { display: grid; grid-template-columns: minmax(480px, 1fr) 380px; gap: 1rem; align-items: start; }
.preview-shell { background: #d9dde4; border: 1px solid #b8bec8; border-radius: 8px; overflow: hidden; position: sticky; top: 72px; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; background: var(--navy); color: #fff; }
.preview-toolbar select { max-width: 220px; }
.preview-toolbar button { padding: .45rem .7rem; }
.preview-frame { display: block; width: 100%; height: calc(100vh - 190px); min-height: 620px; border: 0; background: #fff; }
.editor-inspector { background: #fff; border: 1px solid #d2d6dc; border-top: 5px solid var(--burgundy); padding: 1.25rem; max-height: calc(100vh - 85px); overflow: auto; position: sticky; top: 72px; }
.editor-inspector form { display: grid; gap: 1rem; }
.editor-inspector label { display: grid; gap: .35rem; font-weight: 700; }
.editor-inspector textarea { min-height: 100px; }
.editor-help { background: #eef2f7; padding: .8rem; font-size: .9rem; }
.editor-field-active { outline: 3px solid var(--burgundy) !important; outline-offset: 4px; cursor: pointer !important; }
.editor-clickable { cursor: pointer !important; }
.editor-clickable:hover { outline: 2px dashed var(--burgundy); outline-offset: 3px; }
.editor-logo-preview { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 50%; clip-path: circle(46% at 50% 50%); background: #fff; }
.editor-hero-preview { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; background: var(--navy); }
.editor-banner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.editor-banner-field { align-content: start; background: #f5f6f8; border: 1px solid #d2d6dc; padding: 1rem; }
.editor-banner-preview { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; background: var(--navy); }
.editor-actions { display: flex; gap: .7rem; position: sticky; bottom: 0; background: #fff; padding: .8rem 0; border-top: 1px solid #ddd; }
.editor-links { display: grid; gap: .75rem; margin-top: 1rem; }
.editor-links .button { text-align: center; }
.editor-status { font-size: .9rem; color: #4a5568; }
.visual-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.visual-tabs a { background: #fff; border: 1px solid #ccd1d9; padding: .6rem .8rem; text-decoration: none; }
.visual-tabs a.active { background: var(--navy); color: #fff; border-color: var(--navy); }

@media (max-width: 1180px) {
  .visual-editor { grid-template-columns: 1fr; }
  .preview-shell, .editor-inspector { position: static; }
  .preview-frame { height: 720px; }
  .editor-inspector { max-height: none; }
}

@media (max-width: 700px) {
  .preview-shell { display: none; }
  .visual-editor { display: block; }
  .editor-inspector { padding: 1rem; }
  .visual-tabs a { flex: 1; text-align: center; }
  .editor-banner-grid { grid-template-columns: 1fr; }
}