website-editor { display: contents; }
.ed-topbar { position: relative; display: flex; align-items: center; gap: .5rem; padding: .6rem 0; margin-bottom: .5rem; border-bottom: 1px solid #6663; font: 14px/1.4 ui-sans-serif, system-ui, sans-serif; }
.ed-topbar .ed-grow { flex: 1; }
.ed-topbar strong { font-size: 1rem; }
.ed-topbar button, .ed-toolbar button, .ed-add-popover button, .ed-popover button { font: inherit; }
.ed-topbar button { padding: .35rem .7rem; border-radius: .4rem; border: 1px solid #6666; background: Canvas; color: CanvasText; cursor: pointer; }
.ed-topbar button:disabled { opacity: .55; cursor: default; }
.ed-muted { opacity: .65; font-size: .85rem; }
.ed-dirty { color: #b45309; }
.ed-error { color: #dc2626; }
html.editing #page-blocks [data-block-id] { position: relative; }
html.editing #page-blocks [data-block-id]:hover { outline: 1px dashed #3b82f688; outline-offset: 3px; }
html.editing #page-blocks [data-block-id].ed-selected,
html.editing #page-blocks [data-block-id][contenteditable="true"] { outline: 2px solid #3b82f6; outline-offset: 3px; border-radius: 2px; }
#page-blocks [data-kind="section"] { border: 1px dashed #8b8b8b88; border-radius: .5rem; padding: .5rem .75rem; margin: .5rem 0; }
.ed-divider { position: relative; height: .6rem; margin: -.3rem 0; display: flex; align-items: center; justify-content: center; }
.ed-plus { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid #6666; background: Canvas; color: CanvasText; cursor: pointer; line-height: 1; opacity: 0; transition: opacity .12s; }
.ed-divider:hover .ed-plus, .ed-plus:focus-visible { opacity: 1; }
.ed-toolbar { position: fixed; z-index: 2147483001; display: flex; gap: .25rem; padding: .3rem; background: Canvas; color: CanvasText; border: 1px solid #6663; border-radius: .5rem; box-shadow: 0 6px 24px #0003; font: 13px/1.3 ui-sans-serif, system-ui, sans-serif; }
.ed-toolbar button { padding: .25rem .5rem; border-radius: .3rem; border: 1px solid #6666; background: Canvas; color: CanvasText; cursor: pointer; }
.ed-toolbar button:hover, .ed-add-popover button:hover { background: #8882; }
.ed-add-popover { position: fixed; z-index: 2147483003; display: flex; flex-direction: column; gap: .3rem; min-width: 10rem; padding: .5rem; background: Canvas; color: CanvasText; border: 1px solid #6663; border-radius: .5rem; box-shadow: 0 8px 32px #0004; font: 13px/1.3 ui-sans-serif, system-ui, sans-serif; }
.ed-add-popover strong { margin-bottom: .2rem; font-size: .8rem; opacity: .7; }
.ed-add-popover button { padding: .3rem .5rem; text-align: left; border-radius: .3rem; border: 1px solid #6666; background: Canvas; color: CanvasText; cursor: pointer; }
.ed-popover { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2147483002; width: min(24rem, calc(100vw - 2rem)); padding: 1rem; background: Canvas; color: CanvasText; border: 1px solid #6663; border-radius: .6rem; box-shadow: 0 12px 48px #0005; font: 14px/1.4 ui-sans-serif, system-ui, sans-serif; }
.ed-popover label { display: block; margin-bottom: .6rem; font-size: .85rem; }
.ed-popover input { width: 100%; margin-top: .2rem; box-sizing: border-box; }