fix(ux): move page title next to brand, fix dark mode editor borders and icons

- App.vue: remove margin-right:auto from brand, add margin-left:auto to nav-links so page title sits right after Mach-CMS
- QuillEditor: use --ac-border (subtle) instead of --ac-border-strong; dark mode borders at 0.08 opacity
- QuillEditor: fix toolbar icon SVG stroke/fill colors to use theme vars instead of Quill default #444

src/App.vue

@@ -99,7 +99,6 @@ async function handleLogout() {
   display: flex;
   align-items: center;
   height: 100%;
-  margin-right: auto;
   color: var(--ac-header-text);
   font-family: var(--song-font-display);
   font-size: 18px;
@@ -113,6 +112,7 @@ async function handleLogout() {
   align-items: center;
   height: 100%;
   gap: 6px;
+  margin-left: auto;
 }
 
 .nav-links a,

src/components/QuillEditor.vue

@@ -87,30 +87,45 @@ watch(() => props.modelValue, (val) => {
   line-height: 1.8;
 }
 .quill-editor :deep(.ql-toolbar) {
-  border-color: var(--ac-border-strong, #d4c4b0);
+  border-color: var(--ac-border);
   background: var(--ac-surface, #faf8f5);
 }
 .quill-editor :deep(.ql-container) {
-  border-color: var(--ac-border-strong, #d4c4b0);
+  border-color: var(--ac-border);
 }
 .quill-editor :deep(.ql-editor.ql-blank::before) {
   color: var(--ac-text-disabled);
 }
-.quill-editor :deep(.ql-toolbar button) {
-  color: var(--ac-text-secondary);
-}
-.quill-editor :deep(.ql-toolbar button:hover) {
+.quill-editor :deep(.ql-toolbar button),
+.quill-editor :deep(.ql-toolbar .ql-picker-label) {
   color: var(--ac-text);
 }
-.quill-editor :deep(.ql-toolbar .ql-active) {
+.quill-editor :deep(.ql-toolbar button:hover),
+.quill-editor :deep(.ql-toolbar button.ql-active),
+.quill-editor :deep(.ql-toolbar .ql-picker-label:hover),
+.quill-editor :deep(.ql-toolbar .ql-picker-item:hover) {
   color: var(--ac-primary-ink);
 }
-.quill-editor :deep(.ql-toolbar .ql-picker-label),
-.quill-editor :deep(.ql-toolbar .ql-picker-item) {
-  color: var(--ac-text-secondary);
+.quill-editor :deep(.ql-toolbar button .ql-stroke),
+.quill-editor :deep(.ql-toolbar .ql-picker-label .ql-stroke) {
+  stroke: var(--ac-text);
 }
-.quill-editor :deep(.ql-toolbar .ql-picker-label:hover),
-.quill-editor :deep(.ql-toolbar .ql-picker-item:hover) {
-  color: var(--ac-text);
+.quill-editor :deep(.ql-toolbar button:hover .ql-stroke),
+.quill-editor :deep(.ql-toolbar button.ql-active .ql-stroke) {
+  stroke: var(--ac-primary-ink);
+}
+.quill-editor :deep(.ql-toolbar button .ql-fill) {
+  fill: var(--ac-text);
+}
+.quill-editor :deep(.ql-toolbar button:hover .ql-fill),
+.quill-editor :deep(.ql-toolbar button.ql-active .ql-fill) {
+  fill: var(--ac-primary-ink);
+}
+:root[data-theme='dark'] .quill-editor :deep(.ql-toolbar),
+:root[data-theme='dark'] .quill-editor :deep(.ql-container) {
+  border-color: rgba(230, 236, 239, 0.08);
+}
+:root[data-theme='dark'] .quill-editor :deep(.ql-toolbar) {
+  background: var(--ac-bg-card);
 }
 </style>