后台管理重塑 + 主题 / 皮肤双轴 + a11y 与编辑器增强

Backend
- Post 加 cover_url，Tag 加 color；老库 ALTER 兼容
- admin API: GET /api/admin/dashboard，POST /bulk，POST /tags/:id/merge，
  PUT /tags/:id 接 {name,color}，Settings 加 light_skin_id（兼容老 theme_id）
- 白名单兜底（非法 light_skin_id 落 paper）
- 新增合并 / Dashboard / Theme 测试覆盖

Frontend
- AdminLayout 改为侧边栏布局；新增 Dashboard 总览页
- PostsView 卡片化预览 + 筛选 chip + 批量操作 + 排序
- EditorView 增强：封面图 / WYSIWYG↔MD 双模式 / 实时大纲 / 字数统计 /
  自动保存条 / ⌘S / unsaved 守卫（beforeunload + beforeRouteLeave）
- TagsView 加色板 + 合并到目标
- SettingsView 主题外观改为「亮色皮肤」三选一 + 「暗色皮肤」固定墨色说明
- 新增 CommandPalette（⌘K）+ ShortcutsPanel（?）
- api.js 接新接口；router.js 拆 /admin → /admin/posts

主题 / 皮肤双轴
- site.js: themeMode（light/dark/auto）+ light_skin_id；data-theme 前台，
  data-admin-theme 后台（仅跟随 mode 切明暗）
- styles.css: :root[data-theme] 四套皮肤 + :root[data-admin-theme=dark] 后台墨感
- 修 sticky head / ThemeSwitcher / 表单 / 批量条 等 token 引用
- 后台用独立 --admin-* 系列，与前台主题解耦
- 左栏底部放 inline 形态 ThemeSwitcher（图标按钮 36×36），mobile 保留浮窗

a11y
- 全局 :focus-visible 描边（前后台跟随 token）
- prefers-reduced-motion 全局降级
- color-scheme 随主题切
- meta theme-color 双套（light/dark）
- 命令面板 / 快捷键面板：role=dialog aria-modal aria-label + 搜索框 aria-label
- icon-only 按钮加 aria-label（tag × / 清除选择 / 移除封面等）
- 输入框 aria-label + spellcheck=false
- PostsView 筛选同步 URL（可分享、可刷新保留）
- img width/height + loading=lazy
- utils.js 用 Intl.DateTimeFormat（zh-CN / sv-SE）

frontend/src/admin/EditorView.vue

@@ -1,8 +1,11 @@
 <script setup>
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 import { adminApi } from '../api'
-import { md } from '../utils'
+import { Crepe, CrepeFeature } from '@milkdown/crepe'
+import '@milkdown/crepe/theme/common/style.css'
+import '@milkdown/crepe/theme/frame.css'
+import { marked } from 'marked'
 
 const route = useRoute()
 const router = useRouter()
@@ -14,7 +17,6 @@ const loading = ref(true)
 const saving = ref(false)
 const savedAt = ref('')
 const error = ref('')
-const tab = ref('write') // write | preview
 const tagInput = ref('')
 const dirty = ref(false)
 
@@ -25,6 +27,7 @@ const form = reactive({
   title: '',
   slug: '',
   summary: '',
+  cover_url: '',
   content_md: '',
   tags: [],
   status: 'draft',
@@ -33,6 +36,14 @@ const form = reactive({
   override_minutes: false
 })
 
+// ---------- mode: 'wysiwyg' | 'md' ----------
+const mode = ref('wysiwyg')
+
+// ---------- Milkdown Crepe ----------
+
+const editorEl = ref(null)
+let crepe = null
+
 // ---------- 阅读时长 ----------
 
 function estimateMinutes(text) {
@@ -42,11 +53,30 @@ function estimateMinutes(text) {
   return Math.max(1, Math.floor(cjk / 400) + Math.floor(latin / 220))
 }
 
+const cjkChars = computed(() => (form.content_md.match(/[㐀-鿿　-〿＀-￯]/g) || []).length)
+const latinWords = computed(() => (form.content_md.match(/[A-Za-z0-9']+/g) || []).length)
+const paragraphs = computed(() => {
+  const t = form.content_md.trim()
+  if (!t) return 0
+  return t.split(/\n\s*\n/).filter((p) => p.trim()).length
+})
 const autoMinutes = computed(() => estimateMinutes(form.content_md))
 const finalMinutes = computed(() =>
   form.override_minutes && form.reading_minutes ? Number(form.reading_minutes) : autoMinutes.value
 )
 
+// ---------- outline ----------
+const outline = computed(() => {
+  const lines = form.content_md.split('\n')
+  const out = []
+  for (const ln of lines) {
+    const m = /^(#{1,3})\s+(.+?)\s*$/.exec(ln)
+    if (!m) continue
+    out.push({ level: m[1].length, text: m[2].trim() })
+  }
+  return out
+})
+
 // ---------- 时间 ----------
 
 function isoToLocal(iso) {
@@ -70,30 +100,28 @@ const publishedLocal = ref('')
 
 // ---------- 载入 ----------
 
-onMounted(async () => {
+async function loadData() {
   if (isEdit.value) {
-    try {
-      const p = await adminApi.post(id.value)
-      form.kind = p.kind || 'long'
-      form.title = p.title || ''
-      form.slug = p.slug || ''
-      form.summary = p.summary || ''
-      form.content_md = p.content_md || ''
-      form.tags = p.tags ? [...p.tags] : []
-      form.status = p.status || 'draft'
-      publishedLocal.value = isoToLocal(p.published_at)
-      if (p.reading_minutes && p.reading_minutes !== estimateMinutes(p.content_md || '')) {
-        form.override_minutes = true
-        form.reading_minutes = p.reading_minutes
-      }
-    } catch (e) {
-      error.value = e.message || '载入失败'
+    const p = await adminApi.post(id.value)
+    form.kind = p.kind || 'long'
+    form.title = p.title || ''
+    form.slug = p.slug || ''
+    form.summary = p.summary || ''
+    form.cover_url = p.cover_url || ''
+    form.content_md = p.content_md || ''
+    form.tags = p.tags ? [...p.tags] : []
+    form.status = p.status || 'draft'
+    publishedLocal.value = isoToLocal(p.published_at)
+    if (p.reading_minutes && p.reading_minutes !== estimateMinutes(p.content_md || '')) {
+      form.override_minutes = true
+      form.reading_minutes = p.reading_minutes
     }
   } else {
     const raw = localStorage.getItem(DRAFT_KEY)
     if (raw) {
       try {
-        Object.assign(form, JSON.parse(raw))
+        const d = JSON.parse(raw)
+        Object.assign(form, d)
         savedAt.value = '本地草稿已恢复'
       } catch (e) {
         localStorage.removeItem(DRAFT_KEY)
@@ -101,12 +129,95 @@ onMounted(async () => {
     }
     publishedLocal.value = isoToLocal(new Date().toISOString())
   }
-  loading.value = false
-  // 载入完成后的第一次变更才触发自动保存
+}
+
+async function initEditor() {
+  crepe = new Crepe({
+    root: editorEl.value,
+    defaultValue: form.content_md,
+    features: {
+      [CrepeFeature.AI]: false
+    },
+    featureConfigs: {
+      [CrepeFeature.Placeholder]: {
+        text: form.kind === 'short' ? '写点什么…' : '开始写，或按 / 唤出命令菜单'
+      }
+    }
+  })
+
+  crepe.on((listener) => {
+    listener.markdownUpdated((_ctx, markdown) => {
+      form.content_md = markdown
+    })
+  })
+
+  await crepe.create()
+
   setTimeout(() => {
     dirty.value = false
     watchForm()
   }, 0)
+}
+
+onMounted(async () => {
+  try {
+    await loadData()
+  } catch (e) {
+    error.value = e.message || '载入失败'
+  }
+  loading.value = false
+  await nextTick()
+  if (mode.value === 'wysiwyg') {
+    await initEditor()
+  }
+})
+
+onBeforeUnmount(() => {
+  if (crepe) {
+    crepe.destroy()
+    crepe = null
+  }
+})
+
+// ---------- mode switching ----------
+async function switchMode(next) {
+  if (next === mode.value) return
+  if (next === 'md') {
+    // WYSIWYG → MD: tear down crepe
+    if (crepe) {
+      crepe.destroy()
+      crepe = null
+    }
+  } else {
+    // MD → WYSIWYG: spin up crepe with the current markdown
+    await nextTick()
+    if (!crepe && editorEl.value) {
+      crepe = new Crepe({
+        root: editorEl.value,
+        defaultValue: form.content_md,
+        features: { [CrepeFeature.AI]: false },
+        featureConfigs: {
+          [CrepeFeature.Placeholder]: {
+            text: form.kind === 'short' ? '写点什么…' : '开始写，或按 / 唤出命令菜单'
+          }
+        }
+      })
+      crepe.on((listener) => {
+        listener.markdownUpdated((_ctx, markdown) => {
+          form.content_md = markdown
+        })
+      })
+      await crepe.create()
+    }
+  }
+  mode.value = next
+}
+
+watch(mode, (n) => {
+  // ensure form is always the source of truth
+  if (n === 'md' && crepe) {
+    // last sync already happened via listener
+  }
 })
 
 // ---------- 自动保存 ----------
@@ -165,6 +276,7 @@ function buildPayload() {
     title: form.title,
     slug: form.slug,
     summary: form.summary,
+    cover_url: form.cover_url,
     content_md: form.content_md,
     tags: [...form.tags],
     status: form.status,
@@ -210,6 +322,32 @@ async function unpublish() {
   await save('draft')
 }
 
+// 强制立即保存（⌘S）
+function onGlobalKey(e) {
+  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+    e.preventDefault()
+    save()
+  }
+}
+onMounted(() => window.addEventListener('keydown', onGlobalKey))
+onBeforeUnmount(() => window.removeEventListener('keydown', onGlobalKey))
+
+// ---------- unsaved 守卫 ----------
+// 关闭/刷新页面
+function onBeforeUnload(e) {
+  if (!dirty.value) return
+  e.preventDefault()
+  e.returnValue = ''
+}
+onMounted(() => window.addEventListener('beforeunload', onBeforeUnload))
+onBeforeUnmount(() => window.removeEventListener('beforeunload', onBeforeUnload))
+
+// 路由内 SPA 离开
+onBeforeRouteLeave(() => {
+  if (!dirty.value) return true
+  return window.confirm('当前改动还没保存，确定离开吗？')
+})
+
 // ---------- 标签 ----------
 
 function addTag() {
@@ -230,40 +368,40 @@ function removeTag(t) {
   form.tags = form.tags.filter((x) => x !== t)
 }
 
-// ---------- 预览 ----------
+// ---------- cover ----------
+const coverInput = ref('')
 
-const preview = computed(() => md.render(form.content_md || ''))
-
-function onKeydown(e) {
-  // Tab 缩进，而不是跳出输入框
-  if (e.key === 'Tab') {
-    e.preventDefault()
-    const el = e.target
-    const start = el.selectionStart
-    const end = el.selectionEnd
-    form.content_md =
-      form.content_md.slice(0, start) + '  ' + form.content_md.slice(end)
-    setTimeout(() => el.setSelectionRange(start + 2, start + 2))
-  }
+function setCover() {
+  const v = coverInput.value.trim()
+  if (!v) return
+  form.cover_url = v
+  coverInput.value = ''
 }
+
+function clearCover() {
+  form.cover_url = ''
+}
+
+// preview mode — render markdown to HTML for the side panel
+const previewHtml = computed(() => marked.parse(form.content_md || '', { breaks: true }))
 </script>
 
 <template>
   <section v-if="loading" class="loading">载入中…</section>
 
   <section v-else class="editor">
-    <header class="head">
-      <div class="left">
-        <h1 class="title">{{ isEdit ? '编辑文章' : '写新的' }}</h1>
-        <span class="state">
+    <header style="display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px;">
+      <div>
+        <h1 style="font-family: var(--serif); font-size: 22px;">{{ isEdit ? '编辑文章' : '写新的' }}</h1>
+        <div class="save-bar" :class="{ saving, saved: !saving && !dirty && savedAt, dirty: !saving && dirty }">
+          <span class="dot"></span>
           <span v-if="saving">保存中…</span>
           <span v-else-if="dirty">有未保存的改动</span>
-          <span v-else-if="savedAt">已保存 {{ savedAt }}</span>
+          <span v-else-if="savedAt">{{ savedAt }}</span>
           <span v-else>还没改过</span>
-        </span>
+        </div>
       </div>
-
-      <div class="right">
+      <div style="display: flex; gap: 8px;">
         <button class="btn" @click="form.status === 'published' ? unpublish() : save()">
           存草稿
         </button>
@@ -274,332 +412,162 @@ function onKeydown(e) {
       </div>
     </header>
 
-    <p v-if="error" class="error">{{ error }}</p>
+    <p v-if="error" style="color: #b4553f; font-size: 13px; margin-bottom: 12px;">{{ error }}</p>
 
-    <div class="grid">
-      <!-- 左：正文 -->
-      <div class="main">
-        <div class="kind-switch">
-          <button class="kind" :class="{ on: form.kind === 'long' }" @click="form.kind = 'long'">
-            长文
-          </button>
-          <button class="kind" :class="{ on: form.kind === 'short' }" @click="form.kind = 'short'">
-            短文
-          </button>
-          <span class="hint">
-            {{ form.kind === 'long' ? '有标题、有结构，适合讲完整一件事' : '一两段话，时间线里不显示标题' }}
+    <div class="editor-grid">
+      <div>
+        <!-- cover -->
+        <div class="cover-block" :class="{ has: form.cover_url }">
+          <div v-if="form.cover_url" class="preview" :style="{ backgroundImage: `url(${form.cover_url})` }">
+            <button class="remove" @click="clearCover">移除封面</button>
+          </div>
+          <div v-else class="placeholder">+ 添加封面图（输入 URL）</div>
+          <div v-if="!form.cover_url" class="input-row">
+            <input
+              v-model="coverInput"
+              placeholder="https://…"
+              type="url"
+              inputmode="url"
+              aria-label="封面图 URL"
+              spellcheck="false"
+              @keydown.enter.prevent="setCover"
+            />
+            <button @click="setCover">设置</button>
+          </div>
+        </div>
+
+        <!-- kind switch + title -->
+        <div style="display: flex; gap: 6px; align-items: center; margin-bottom: 10px;">
+          <button class="chip" :class="{ on: form.kind === 'long' }" @click="form.kind = 'long'">长文</button>
+          <button class="chip" :class="{ on: form.kind === 'short' }" @click="form.kind = 'short'">短文</button>
+          <span style="font-size: 12px; color: var(--admin-muted); margin-left: 4px;">
+            {{ form.kind === 'short' ? '一两段话，时间线里不显示标题' : '有标题、有结构，适合讲完整一件事' }}
           </span>
+          <span style="flex: 1;"></span>
+          <div class="editor-mode">
+            <button :class="{ on: mode === 'wysiwyg' }" @click="switchMode('wysiwyg')">富文本</button>
+            <button :class="{ on: mode === 'md' }" @click="switchMode('md')">Markdown</button>
+          </div>
         </div>
 
         <input
           v-model="form.title"
-          class="input title-input"
+          class="input"
+          style="font-family: var(--serif); font-size: 19px; padding: 10px 12px; margin-bottom: 12px;"
           :placeholder="form.kind === 'short' ? '标题（可留空，仅作归档索引）' : '标题'"
         />
 
-        <div class="tabs">
-          <button class="tab" :class="{ on: tab === 'write' }" @click="tab = 'write'">编写</button>
-          <button class="tab" :class="{ on: tab === 'preview' }" @click="tab = 'preview'">预览</button>
-          <span class="counter">{{ form.content_md.length }} 字</span>
-        </div>
-
+        <!-- editor area -->
+        <div v-show="mode === 'wysiwyg'" ref="editorEl"></div>
         <textarea
-          v-show="tab === 'write'"
+          v-show="mode === 'md'"
+          class="md-pane"
           v-model="form.content_md"
-          class="textarea md-input"
-          rows="20"
-          :placeholder="form.kind === 'short' ? '写点什么…' : '# 标题\n\n正文，支持 Markdown。'"
-          @keydown="onKeydown"
+          placeholder="直接写 Markdown…"
         ></textarea>
 
-        <div v-show="tab === 'preview'" class="prose preview" v-html="preview"></div>
+        <div class="editor-stats">
+          <span><strong>{{ cjkChars }}</strong> 汉字</span>
+          <span><strong>{{ latinWords }}</strong> 词</span>
+          <span><strong>{{ paragraphs }}</strong> 段</span>
+          <span><strong>{{ finalMinutes }}</strong>′ 读时长</span>
+          <span style="margin-left: auto; color: var(--admin-faint);">⌘S 保存</span>
+        </div>
       </div>
 
-      <!-- 右：元信息 -->
-      <aside class="side">
-        <div class="field">
-          <label>类型</label>
-          <p class="value">{{ form.kind === 'short' ? '短文' : '长文' }}</p>
+      <aside>
+        <!-- outline -->
+        <div v-if="outline.length" class="outline" style="margin-bottom: 18px;">
+          <div class="ttl">大纲</div>
+          <ul>
+            <li
+              v-for="(o, i) in outline"
+              :key="i"
+              :class="{ h3: o.level >= 3 }"
+              :title="o.text"
+            >{{ o.text }}</li>
+          </ul>
         </div>
 
-        <div class="field">
-          <label for="slug">Slug（链接）</label>
-          <input id="slug" v-model="form.slug" class="input" placeholder="留空自动生成" />
-          <p v-if="form.slug" class="sub">/post/{{ form.slug }}</p>
-        </div>
-
-        <div class="field">
-          <label for="summary">摘要</label>
-          <textarea
-            id="summary"
-            v-model="form.summary"
-            class="textarea"
-            rows="3"
-            placeholder="长文显示在时间线里的一段话"
-          ></textarea>
-        </div>
-
-        <div class="field">
-          <label>标签</label>
-          <div v-if="form.tags.length" class="taglist">
-            <span v-for="t in form.tags" :key="t" class="tag-chip">
-              {{ t }}
-              <button class="x" @click="removeTag(t)">×</button>
-            </span>
+        <!-- meta -->
+        <div class="panel" style="padding: 16px 18px;">
+          <div class="field">
+            <label>类型</label>
+            <p style="margin: 0; font-size: 14px;">{{ form.kind === 'short' ? '短文' : '长文' }}</p>
           </div>
-          <input
-            v-model="tagInput"
-            class="input"
-            placeholder="输入后回车添加"
-            @keydown="onTagInput"
-            @blur="addTag"
-          />
-        </div>
 
-        <div class="field">
-          <label for="pub">发布时间</label>
-          <input id="pub" v-model="publishedLocal" type="datetime-local" class="input" />
-        </div>
+          <div class="field">
+            <label for="slug">Slug（链接）</label>
+            <input id="slug" v-model="form.slug" class="input" placeholder="留空自动生成" />
+            <p v-if="form.slug" style="margin: 4px 0 0; font-size: 12px; color: var(--admin-muted); word-break: break-all;">/post/{{ form.slug }}</p>
+          </div>
 
-        <div class="field">
-          <label for="mins">阅读时长（分钟）</label>
-          <div class="mins-row">
+          <div class="field">
+            <label for="summary">摘要</label>
+            <textarea
+              id="summary"
+              v-model="form.summary"
+              class="textarea"
+              rows="3"
+              placeholder="长文显示在时间线里的一段话"
+            ></textarea>
+          </div>
+
+          <div class="field">
+            <label>标签</label>
+            <div v-if="form.tags.length" style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;">
+              <span v-for="t in form.tags" :key="t" class="chip">
+                {{ t }}
+                <button class="x" @click="removeTag(t)" :aria-label="`移除标签 ${t}`">×</button>
+              </span>
+            </div>
             <input
-              id="mins"
-              v-model="form.reading_minutes"
-              type="number"
-              min="1"
+              v-model="tagInput"
               class="input"
-              :disabled="!form.override_minutes"
-              :placeholder="String(autoMinutes)"
+              placeholder="输入后回车添加"
+              aria-label="添加标签"
+              @keydown="onTagInput"
+              @blur="addTag"
             />
-            <label class="check">
-              <input v-model="form.override_minutes" type="checkbox" />
-              手动指定
-            </label>
           </div>
-          <p class="sub">自动估算：{{ finalMinutes }} 分钟</p>
-        </div>
 
-        <div class="field">
-          <label>状态</label>
-          <p class="value">
-            <span class="dot" :class="form.status"></span>
-            {{ form.status === 'published' ? '已发布' : '草稿' }}
-          </p>
-        </div>
+          <div class="field">
+            <label for="pub">发布时间</label>
+            <input id="pub" v-model="publishedLocal" type="datetime-local" class="input" />
+          </div>
 
-        <button class="btn wide" @click="save()">立即保存</button>
-        <RouterLink to="/admin" class="back">← 返回列表</RouterLink>
+          <div class="field">
+            <label for="mins">阅读时长（分钟）</label>
+            <div style="display: flex; align-items: center; gap: 10px;">
+              <input
+                id="mins"
+                v-model="form.reading_minutes"
+                type="number"
+                min="1"
+                class="input"
+                :disabled="!form.override_minutes"
+                :placeholder="String(autoMinutes)"
+              />
+              <label style="display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--admin-muted); white-space: nowrap; margin: 0;">
+                <input v-model="form.override_minutes" type="checkbox" />
+                手动指定
+              </label>
+            </div>
+            <p style="margin: 4px 0 0; font-size: 12px; color: var(--admin-muted);">自动估算：{{ finalMinutes }} 分钟</p>
+          </div>
+
+          <div class="field">
+            <label>状态</label>
+            <p style="margin: 0; font-size: 14px;">
+              <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--admin-faint); margin-right: 6px; vertical-align: 2px;" :style="form.status === 'published' ? { background: 'var(--admin-accent)' } : {}"></span>
+              {{ form.status === 'published' ? '已发布' : '草稿' }}
+            </p>
+          </div>
+
+          <button class="btn" style="width: 100%;" @click="save()">立即保存</button>
+          <RouterLink to="/admin" style="display: inline-block; margin-top: 14px; font-size: 13px; color: var(--admin-accent);">← 返回列表</RouterLink>
+        </div>
       </aside>
     </div>
   </section>
-</template>
-
-<style scoped>
-.head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  flex-wrap: wrap;
-  margin-bottom: 16px;
-}
-
-.left {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.title {
-  font-size: 22px;
-}
-
-.state {
-  font-size: 12.5px;
-  color: var(--muted);
-}
-
-.right {
-  display: flex;
-  gap: 8px;
-}
-
-.error {
-  color: #9a5b45;
-  font-size: 13px;
-  margin-bottom: 12px;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 280px;
-  gap: 22px;
-  align-items: start;
-}
-
-@media (max-width: 860px) {
-  .grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-.kind-switch {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 14px;
-}
-
-.kind {
-  padding: 5px 14px;
-  border: 1px solid var(--line);
-  background: var(--card);
-  border-radius: 999px;
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.kind.on {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #fff;
-}
-
-.hint {
-  font-size: 12px;
-  color: var(--muted);
-}
-
-.title-input {
-  font-family: var(--serif);
-  font-size: 19px;
-  padding: 10px 12px;
-  margin-bottom: 14px;
-}
-
-.tabs {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border-bottom: 1px solid var(--line);
-  margin-bottom: -1px;
-}
-
-.tab {
-  padding: 7px 14px;
-  border: 1px solid transparent;
-  border-bottom: 0;
-  background: none;
-  cursor: pointer;
-  font-size: 13.5px;
-  color: var(--muted);
-  border-radius: 3px 3px 0 0;
-}
-
-.tab.on {
-  color: var(--accent);
-  border-color: var(--line);
-  background: var(--card);
-  margin-bottom: -1px;
-}
-
-.counter {
-  margin-left: auto;
-  font-size: 12px;
-  color: var(--faint);
-  padding-bottom: 6px;
-}
-
-.md-input {
-  min-height: 420px;
-  font-family: var(--mono);
-  font-size: 14px;
-  line-height: 1.8;
-  border-radius: 0 3px 3px 3px;
-}
-
-.preview {
-  min-height: 420px;
-  padding: 18px 20px;
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 0 3px 3px 3px;
-}
-
-.side {
-  border: 1px solid var(--line);
-  background: var(--card);
-  border-radius: 4px;
-  padding: 18px;
-}
-
-.value {
-  margin: 0;
-  font-size: 14px;
-}
-
-.sub {
-  margin: 4px 0 0;
-  font-size: 12px;
-  color: var(--muted);
-  word-break: break-all;
-}
-
-.taglist {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 8px;
-}
-
-.x {
-  border: 0;
-  background: none;
-  cursor: pointer;
-  color: var(--muted);
-  padding: 0 0 0 4px;
-}
-
-.mins-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.check {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--muted);
-  white-space: nowrap;
-  margin: 0;
-}
-
-.dot {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--faint);
-  margin-right: 6px;
-  vertical-align: 2px;
-}
-
-.dot.published {
-  background: var(--accent);
-}
-
-.wide {
-  width: 100%;
-}
-
-.back {
-  display: inline-block;
-  margin-top: 14px;
-  font-size: 13px;
-  color: var(--accent);
-}
-</style>
+</template>