/**
 * 樱花主题皮肤（站点模板 onair）。
 *
 * 只做两件事：
 * 1) 定义整套设计令牌（亮 / 暗），让顶栏、卡片、按钮、评论、后台表单等复用组件
 *    自动换成二次元的色彩与圆角；
 * 2) 少量全局版式（页面底色、链接、页脚）微调。
 *
 * 首页主视觉与卡片列表的结构样式在组件内（OnairHero / OnairHome），
 * 这里不重复它们的布局，避免和 scoped 样式打架。
 *
 * 文件名带 `?v=` 版本号走长缓存（nuxt.config 的 /themes/** 规则），改样式时
 * 同步把 shared/constants/themes.ts 里的版本号 +1。
 */

html[data-template='onair'] {
  --bg-primary: #fff7fb;
  --bg-page: #fff4f8;
  --bg-card: #ffffff;
  --bg-secondary: #ffeff6;
  --bg-tertiary: #ffe3ee;
  --bg-header: rgb(255 247 251 / 82%);

  --text-primary: #3a2f45;
  --text-secondary: #7d6c8b;
  --text-inverted: #ffffff;

  --border-color: #f4dbe8;

  --primary-color: #ff7aa8;
  --primary-hover: #f06a99;
  --primary-text: #c4406e;
  --primary-fill: #e85f8f;
  --primary-solid: var(--primary-color);
  --primary-solid-hover: var(--primary-hover);
  --primary-solid-text: #ffffff;
  --primary-soft: rgb(255 122 168 / 12%);
  --primary-soft-hover: rgb(255 122 168 / 20%);

  /* 语义色跟着粉紫主色调走：info 用薰衣草紫、danger 用深玫瑰，别留一套蓝绿在粉色界面里 */
  --info-color: #7b5bd0;
  --warning-color: #e0a01e;
  --warning-text: #8f5c0a;
  --danger-color: #c9354f;
  --like-color: #ff5f8f;

  --shadow-card: 0 1px 2px rgb(214 79 125 / 6%), 0 10px 24px -16px rgb(214 79 125 / 28%);
  --shadow-card-hover: 0 2px 4px rgb(214 79 125 / 8%), 0 18px 34px -18px rgb(214 79 125 / 38%);
  --shadow-pop: 0 6px 16px -8px rgb(58 47 69 / 18%), 0 9px 28px 8px rgb(58 47 69 / 6%);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 1600px;
  --border-w: 1px;

  --mark-bg: #ffe08a;
  --code-bg: #fff2f8;
  --code-text: #4a3a58;
  --scrollbar-thumb: rgb(58 47 69 / 16%);
  --scrollbar-thumb-hover: rgb(58 47 69 / 30%);
  --scrollbar-track: transparent;

  --toast-bg: rgb(58 47 69 / 92%);
  --toast-error-bg: rgb(180 50 70 / 95%);
  --badge-owner-bg: #ffe6ef;
  --badge-owner-text: #c4406e;
  --tag-warn-text: #8f5c0a;
  --tag-warn-bg: rgb(224 160 30 / 16%);
  --tag-danger-text: #c4406e;
  --tag-danger-bg: rgb(217 83 79 / 12%);
  --chart-post: #e85f8f;
  --chart-views: #3f86b8;

  --hl-text: #3a2f45;
  --hl-keyword: #d94f7d;
  --hl-title: #7a5bd0;
  --hl-literal: #2f6fb0;
  --hl-string: #2f7d5b;
  --hl-builtin: #b5651d;
  --hl-comment: #8d8499;
  --hl-name: #2f7d5b;
  --hl-bullet: #b5651d;
  --hl-del-text: #c4406e;
  --hl-add-bg: rgb(47 125 91 / 10%);
  --hl-del-bg: rgb(196 64 110 / 10%);

  --theme-bg-image:
    radial-gradient(70% 50% at 84% 0%, rgb(255 182 206 / 35%), transparent 62%),
    radial-gradient(60% 45% at 6% 100%, rgb(185 167 232 / 22%), transparent 60%),
    linear-gradient(180deg, #fff9fc 0%, #fff2f8 100%);
  --theme-bg-size: auto, auto, auto;
}

html[data-template='onair'].dark {
  --bg-primary: #0f1424;
  --bg-page: #0b0f1a;
  --bg-card: #141a2b;
  --bg-secondary: #182035;
  --bg-tertiary: #1f2942;
  --bg-header: rgb(11 15 26 / 84%);

  --text-primary: #eaf2ff;
  --text-secondary: #93a4c4;
  --text-inverted: #0b0f1a;

  --border-color: #26304a;

  --primary-color: #f472b6;
  --primary-hover: #f98cc4;
  --primary-text: #ff9ecb;
  --primary-fill: #e05a9f;
  --primary-soft: rgb(244 114 182 / 16%);
  --primary-soft-hover: rgb(244 114 182 / 24%);

  --info-color: #a99bf5;
  --warning-color: #ffd166;
  --warning-text: #ffd166;
  --danger-color: #fb7185;
  --like-color: #fb7185;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 14px 30px -20px rgb(0 0 0 / 70%);
  --shadow-card-hover: 0 2px 4px rgb(0 0 0 / 40%), 0 20px 40px -22px rgb(0 0 0 / 80%);
  --shadow-pop: 0 6px 16px -8px rgb(0 0 0 / 55%), 0 9px 28px 8px rgb(0 0 0 / 30%);

  --mark-bg: #6b4a1c;
  --code-bg: #0d1220;
  --code-text: #d8e2f5;
  --scrollbar-thumb: rgb(234 242 255 / 16%);
  --scrollbar-thumb-hover: rgb(234 242 255 / 30%);

  --toast-bg: rgb(20 26 43 / 94%);
  --toast-error-bg: rgb(120 30 60 / 95%);
  --badge-owner-bg: rgb(244 114 182 / 18%);
  --badge-owner-text: #ffb3d6;
  --tag-warn-text: #ffd166;
  --tag-warn-bg: rgb(255 209 102 / 16%);
  --tag-danger-text: #ff9ec0;
  --tag-danger-bg: rgb(251 113 133 / 16%);
  --chart-post: #f472b6;
  --chart-views: #5eead4;

  --hl-text: #d8e2f5;
  --hl-keyword: #ff9ec0;
  --hl-title: #c4b5fd;
  --hl-literal: #7dd3fc;
  --hl-string: #86efac;
  --hl-builtin: #fcd34d;
  --hl-comment: #8b9bbd;
  --hl-name: #86efac;
  --hl-bullet: #fcd34d;
  --hl-del-text: #ff9ec0;
  --hl-add-bg: rgb(134 239 172 / 12%);
  --hl-del-bg: rgb(255 158 192 / 12%);

  --theme-bg-image:
    radial-gradient(80% 55% at 86% 0%, rgb(34 211 238 / 12%), transparent 62%),
    radial-gradient(70% 50% at 4% 100%, rgb(244 114 182 / 12%), transparent 60%),
    linear-gradient(180deg, #0b0f1a 0%, #0a0d18 60%, #0b0f1a 100%);
  --theme-bg-size: auto, auto, auto;
}

/* 少量全局微调：全部挂在模板作用域下，退出 onair 即失效 */
html[data-template='onair'] .litenote-app-shell {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
}

html[data-template='onair'] .litenote-app-shell__name {
  letter-spacing: 0.01em;
}

html[data-template='onair'] .litenote-app-shell__avatar {
  background: linear-gradient(135deg, #ffb7c5, #b9a7e8);
  border-radius: 12px;
}

html[data-template='onair'] .litenote-app-shell__header {
  border-bottom-color: transparent;
  box-shadow: 0 10px 30px -26px rgb(214 79 125 / 55%);
}

html[data-template='onair'].dark .litenote-app-shell__header {
  box-shadow: 0 10px 30px -24px rgb(0 0 0 / 80%);
}

html[data-template='onair'] .litenote-app-card--hover:hover {
  transform: translateY(-2px);
}

/* ── 评论区 → 留言席 ─────────────────────────────────────────
   评论组件是全站共用的（文章/文档/页面都吃），所以这里只做结构级外观，
   不改它的 DOM 与文案；选择器全部带模板前缀，退出主题即失效。 */
html[data-template='onair'] .litenote-app-comments__header {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-color);
}

/* 角色从评论区右上角探出头，替站长看留言 */
html[data-template='onair'] .litenote-app-comments__header::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: -4px;
  width: 74px;
  height: 74px;
  background: var(--oa-bust-deadpan, url('/images/themes/onair/girl-deadpan-bust.webp')) right bottom / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgb(150 60 100 / 18%));
  pointer-events: none;
}

@media (max-width: 640px) {
  html[data-template='onair'] .litenote-app-comments__header::after { display: none; }
}

html[data-template='onair'] .litenote-app-comments__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html[data-template='onair'] .litenote-app-comments__title::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: var(--primary-color);
}

html[data-template='onair'] .litenote-app-comment {
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary-soft-hover);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

html[data-template='onair'] .litenote-app-comment.is-reply {
  border-left-color: var(--primary-color);
  background: var(--bg-secondary);
}

html[data-template='onair'] .litenote-app-avatar {
  box-shadow: 0 0 0 2px var(--primary-soft-hover);
}

html[data-template='onair'] .litenote-app-comment__action {
  border-radius: 999px;
  padding-inline: 10px;
}

html[data-template='onair'] .litenote-app-comment__action.is-voted {
  background: var(--primary-soft);
  color: var(--primary-text);
}

html[data-template='onair'] .litenote-app-comment-form__inner {
  border-radius: 16px;
}

html[data-template='onair'] .litenote-app-comment-form__inner:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ── 正文与侧栏的小改动 ─────────────────────────────────────── */
html[data-template='onair'] .litenote-app-post {
  border: 1px solid var(--border-color);
  border-radius: 20px;
}

html[data-template='onair'] .litenote-app-post h2,
html[data-template='onair'] .litenote-app-post h3 {
  position: relative;
  padding-left: 12px;
}

html[data-template='onair'] .litenote-app-post h2::before,
html[data-template='onair'] .litenote-app-post h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  bottom: 0.28em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary-color), var(--primary-soft-hover));
}

/* 引用块：公共层已给了主色左条，这里只换底色与圆角 */
html[data-template='onair'] .litenote-app-article blockquote {
  border-radius: 0 12px 12px 0;
  background: var(--primary-soft);
}

/* ── 页面标题（PageHeader）───────────────────────────────────
   PageHeader 是公共组件，这里只按它的语义结构（header > 竖条 + h1 + p）
   换外观，不改它的 DOM，也不给公共文件加类名。
   ⚠️ 必须排掉后台的 main（.litenote-app-admin__main）：后台列表页的工具栏也是
   `main > div > header > div > span:first-child`，不排除就会把「共 N 条」那行文字
   压成 6px 宽竖排（实测 /console/moments、/console/anime 都中）。 */
html[data-template='onair'] main:not(.litenote-app-admin__main) > div > header > div > span:first-child {
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary-color), var(--primary-soft-hover));
  box-shadow: 0 0 0 3px var(--primary-soft);
}

html[data-template='onair'] main:not(.litenote-app-admin__main) > div > header h1 {
  letter-spacing: 0.01em;
}

/* ── 瞬间 → 动态气泡 ───────────────────────────────────────── */
html[data-template='onair'] .litenote-app-moments__body {
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary-color);
  border-radius: 4px 16px 16px 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

html[data-template='onair'] .litenote-app-moments__time {
  font-family: var(--font-code, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--primary-text);
}

/* ── 分类 / 标签 / 友链 ────────────────────────────────────── */
html[data-template='onair'] .litenote-app-cat-row:hover {
  background: var(--primary-soft);
}

html[data-template='onair'] .litenote-app-link__avatar,
html[data-template='onair'] .litenote-app-sidebar-card :where(.litenote-app-avatar) {
  box-shadow: 0 0 0 2px var(--primary-soft-hover);
}

html[data-template='onair'] .litenote-app-sidebar-card {
  border-radius: 16px;
}

/* ── 按钮：贴纸感（描边 + 硬投影）──────────────────────────── */
html[data-template='onair'] .litenote-ui-btn--primary {
  border: 1px solid var(--primary-color);
  box-shadow: 2px 2px 0 var(--primary-soft-hover);
}

html[data-template='onair'] .litenote-ui-btn--primary:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

/* ── 登录 / 注册：整套皮肤 ───────────────────────────────────
   这两个页面是 ssr:false，靠 litenote_template 只读镜像 cookie 决定模板，
   所以规则挂在 html[data-template] 上而不是外壳类里。 */
html[data-template='onair'] .litenote-app-auth {
  background:
    radial-gradient(70% 45% at 88% 4%, rgb(255 182 206 / 45%), transparent 62%),
    radial-gradient(60% 40% at 4% 96%, rgb(185 167 232 / 30%), transparent 60%),
    linear-gradient(180deg, #fff9fc 0%, #fff2f8 100%);
}

html[data-template='onair'].dark .litenote-app-auth {
  background:
    radial-gradient(70% 45% at 88% 4%, rgb(34 211 238 / 14%), transparent 62%),
    radial-gradient(60% 40% at 4% 96%, rgb(244 114 182 / 14%), transparent 60%),
    linear-gradient(180deg, #0b0f1a 0%, #0a0d18 100%);
}

html[data-template='onair'] .litenote-app-auth__card {
  border: 2px solid var(--primary-color);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--primary-soft-hover), var(--shadow-pop);
}

html[data-template='onair'] .litenote-app-auth__wordmark {
  letter-spacing: 0.12em;
}

html[data-template='onair'] .litenote-app-auth__submit {
  border: 2px solid var(--primary-color);
  box-shadow: 3px 3px 0 var(--primary-soft-hover);
}



html[data-template='onair'] .litenote-app-footer__link:hover {
  color: var(--primary-text);
}


/* ── Markdown 编辑器（Vditor）─────────────────────────────────────────────
   与 ms 皮肤的 `.vditor` 块一一对应：面板/工具栏/正文接主题令牌，
   IR 模式的标记色、缩放条、字数角标也一起换掉，避免编辑器里露出 Vditor 的灰底与系统蓝。 */
html[data-template='onair'] .vditor {
  --panel-background-color: var(--bg-primary);
  --panel-shadow: var(--shadow-pop);
  --toolbar-background-color: var(--bg-secondary);
  --toolbar-icon-color: var(--text-secondary);
  --toolbar-icon-hover-color: var(--primary-color);
  --textarea-background-color: var(--bg-primary);
  --textarea-text-color: var(--text-primary);
  --second-color: var(--text-secondary);
  /* 与站点令牌同名，不能自引用，用文字色混出浅线 */
  --border-color: color-mix(in srgb, var(--text-secondary) 22%, transparent);
  --resize-icon-color: var(--text-secondary);
  --resize-background-color: transparent;
  --resize-hover-icon-color: var(--primary-solid-text);
  --resize-hover-background-color: var(--primary-color);
  --count-background-color: var(--primary-soft);
  --heading-border-color: var(--border-color);
  --blockquote-color: var(--text-secondary);
  --ir-heading-color: var(--primary-text);
  --ir-title-color: var(--text-secondary);
  --ir-bi-color: var(--primary-text);
  --ir-link-color: var(--primary-text);
  --ir-bracket-color: var(--text-secondary);
  --ir-paren-color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-primary);
}

html[data-template='onair'] .vditor-toolbar {
  border-bottom: 1px solid var(--border-color);
}

html[data-template='onair'] .vditor-toolbar__item .vditor-tooltipped {
  color: var(--text-secondary);
}

html[data-template='onair'] .vditor-toolbar__item .vditor-tooltipped:hover,
html[data-template='onair'] .vditor-menu--current {
  color: var(--primary-color) !important;
}

html[data-template='onair'] .vditor-toolbar__divider {
  border-color: var(--border-color);
}

html[data-template='onair'] .vditor-reset {
  color: var(--text-primary);
}

html[data-template='onair'] .vditor-reset a,
html[data-template='onair'] .vditor-ir__link {
  color: var(--primary-text);
  text-decoration-color: var(--primary-color);
}

html[data-template='onair'] .vditor-reset h1,
html[data-template='onair'] .vditor-reset h2 {
  border-bottom-color: var(--border-color);
}

html[data-template='onair'] .vditor-reset hr {
  background-color: var(--border-color);
}

html[data-template='onair'] .vditor-reset blockquote {
  color: var(--text-secondary);
  border-left-color: var(--primary-color);
}

html[data-template='onair'] .vditor-reset iframe {
  border-color: var(--border-color);
}

html[data-template='onair'] .vditor-reset table tr {
  border-top-color: var(--border-color);
  background-color: var(--bg-secondary);
}