/* ============================================================
   随笔 · 样式
   设计原则：以正文可读性为中心，静默的界面，克制的强调色。
   命名：.xxx  组件 / .t-*  代码高亮 token
   ============================================================ */

/* ----------------------------------------------
   主题变量
   ---------------------------------------------- */
:root {
  /* ---- 底色 / 文字 ---- */
  --bg: #eaeef6;
  --fg: #16181d;
  --muted: #5c6371;
  --faint: #8b93a2;
  --line: rgba(22, 26, 34, .10);
  --line-2: rgba(22, 26, 34, .06);
  --accent: #2f6fed;
  --accent-2: #a855f7;
  --accent-soft: rgba(47, 111, 237, .12);
  --code-bg: rgba(255, 255, 255, .52);

  /* ---- 玻璃 ---- */
  --glass:        rgba(255, 255, 255, .50);
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-soft:   rgba(255, 255, 255, .34);
  --glass-brd:    rgba(255, 255, 255, .70);
  --glass-line:   rgba(22, 26, 34, .10);
  --glass-hi:     inset 0 1px 0 rgba(255, 255, 255, .85);
  --glass-blur:   18px;
  --card: var(--glass);

  /* ---- 阴影 ---- */
  --shadow:    0 12px 32px rgba(23, 34, 61, .10), 0 2px 8px rgba(23, 34, 61, .05);
  --shadow-lg: 0 26px 58px rgba(23, 34, 61, .17), 0 4px 14px rgba(23, 34, 61, .07);

  /* ---- 背景光斑 ---- */
  --glow-1: rgba(47, 111, 237, .38);
  --glow-2: rgba(168, 85, 247, .30);
  --glow-3: rgba(16, 185, 179, .26);
  --glow-4: rgba(244, 114, 182, .24);

  --fs: 17px;
  --maxw: 720px;
  --widew: 1010px;

  /* 代码高亮 */
  --hl-com: #7b8496;
  --hl-str: #0f7d55;
  --hl-kw:  #9333c4;
  --hl-num: #b45309;
  --hl-fn:  #2f6fed;
}

[data-theme="dark"] {
  --bg: #0a0c11;
  --fg: #e9ebf1;
  --muted: #99a1b1;
  --faint: #6b7280;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .05);
  --accent: #7aa2ff;
  --accent-2: #c084fc;
  --accent-soft: rgba(122, 162, 255, .14);
  --code-bg: rgba(255, 255, 255, .05);

  --glass:        rgba(27, 31, 40, .52);
  --glass-strong: rgba(24, 28, 36, .76);
  --glass-soft:   rgba(27, 31, 40, .34);
  --glass-brd:    rgba(255, 255, 255, .11);
  --glass-line:   rgba(255, 255, 255, .09);
  --glass-hi:     inset 0 1px 0 rgba(255, 255, 255, .07);

  --shadow:    0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .30);
  --shadow-lg: 0 30px 66px rgba(0, 0, 0, .70), 0 6px 18px rgba(0, 0, 0, .40);

  --glow-1: rgba(47, 111, 237, .40);
  --glow-2: rgba(168, 85, 247, .30);
  --glow-3: rgba(16, 185, 179, .24);
  --glow-4: rgba(244, 114, 182, .22);

  --hl-com: #6b7280;
  --hl-str: #7fd6a8;
  --hl-kw:  #d99ae0;
  --hl-num: #f0a868;
  --hl-fn:  #7aa2ff;
}

/* 字号档位 */
html[data-font="s"]  { --fs: 16px; }
html[data-font="m"]  { --fs: 17px; }
html[data-font="l"]  { --fs: 18.5px; }
html[data-font="xl"] { --fs: 20px; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs)/1.78 -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  transition: background .3s ease, color .3s ease, font-size .15s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 28px);
}
body.wide .wrap { max-width: var(--widew); }

::selection { background: var(--accent); color: #fff; }

a { color: var(--accent); }

/* 滚动条（桌面） */
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 10px;
    border: 3px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--faint); }
}

/* ----------------------------------------------
   阅读进度 / 回到顶部
   ---------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 200;
  transition: width .1s linear;
}

.to-top {
  position: fixed;
  right: clamp(14px, 4vw, 26px);
  bottom: clamp(14px, 4vw, 26px);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .25s ease;
  z-index: 90;
  display: grid;
  place-items: center;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--accent); border-color: var(--accent); }

/* ----------------------------------------------
   页头
   ---------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  height: 58px;
  gap: 14px;
}
.logo {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .5px;
  color: var(--fg);
  text-decoration: none;
  flex: none;
}
.logo span { color: var(--accent); }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  position: relative;
  transition: color .15s;
  padding: 2px 0;
}
.site-nav a:hover { color: var(--fg); }
.site-nav a.on { color: var(--fg); font-weight: 600; }
.site-nav a.on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}
.font-ctl { display: flex; gap: 3px; }

.icon-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  border-radius: 8px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  transition: border-color .15s, transform .1s, color .15s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.sm { width: 30px; font-size: 11.5px; font-weight: 700; letter-spacing: -.2px; }

/* ----------------------------------------------
   搜索浮层（命令面板）
   ---------------------------------------------- */
.palette {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(50px, 12vh, 130px) 16px 16px;
}
.palette[hidden] { display: none; }
.palette-mask {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 18, .45);
  backdrop-filter: blur(3px);
  animation: fade .18s ease;
}
.palette-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: drop .2s cubic-bezier(.2, .9, .3, 1);
}
@keyframes fade { from { opacity: 0; } }
@keyframes drop {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
}

.palette-input {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}
.palette-input svg { flex: none; opacity: .4; }
.palette-input input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 15.5px;
  min-width: 0;
}
.palette-input input::placeholder { color: var(--faint); }
.esc-hint {
  flex: none;
  font-size: 10.5px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}

.palette-results {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}
.p-item {
  display: block;
  padding: 11px 13px;
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .12s;
}
.p-item:hover,
.p-item.sel { background: var(--accent-soft); }
.p-item .p-title {
  font-size: 14.5px;
  font-weight: 620;
  margin-bottom: 3px;
  line-height: 1.4;
}
.p-item .p-sub {
  font-size: 12.5px;
  color: var(--faint);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.p-item .p-title mark,
.p-item .p-sub mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
.p-empty {
  padding: 34px 16px;
  text-align: center;
  color: var(--faint);
  font-size: 14px;
}
.palette-foot {
  display: flex;
  gap: 16px;
  padding: 9px 15px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--faint);
  background: var(--code-bg);
}
.palette-foot span { display: flex; align-items: center; gap: 5px; }

kbd {
  font-family: inherit;
  font-size: 10.5px;
  line-height: 1;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 3px 5px;
  background: var(--card);
  color: var(--faint);
}

/* ----------------------------------------------
   列表页
   ---------------------------------------------- */
.intro { padding: clamp(34px, 9vw, 60px) 0 clamp(18px, 5vw, 30px); }
.intro h1 {
  font-size: clamp(27px, 6.6vw, 38px);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -.8px;
  font-weight: 750;
}
.intro p {
  color: var(--muted);
  margin: 0;
  font-size: 15.5px;
  max-width: 48ch;
}

.tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 20px 0 4px;
}
.chip {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  line-height: 1.6;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chip .n { opacity: .6; font-size: 11.5px; margin-left: 3px; }

.post-list { list-style: none; padding: 0; margin: 6px 0 0; }
.post-item {
  padding: clamp(19px, 4vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.post-item:first-child { border-top: 1px solid var(--line); }

.post-item h2 {
  margin: 0 0 7px;
  font-size: clamp(18.5px, 4.5vw, 22px);
  line-height: 1.38;
  letter-spacing: -.3px;
  font-weight: 680;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.post-item h2 a {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease, color .15s;
  padding-bottom: 2px;
}
.post-item h2 a:hover { color: var(--accent); background-size: 100% 2px; }

.pin-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 1px 5px;
  align-self: center;
  flex: none;
}
.cover { font-size: 15px; flex: none; }

.post-item .excerpt {
  color: var(--muted);
  font-size: 14.8px;
  margin: 0 0 11px;
  line-height: 1.72;
}
.meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.8px;
  color: var(--faint);
  flex-wrap: wrap;
}
.meta .dot { opacity: .45; }
.meta a {
  color: var(--faint);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.meta a:hover { color: var(--accent); }

.empty {
  padding: 52px 0;
  text-align: center;
  color: var(--faint);
  font-size: 15px;
}

/* ----------------------------------------------
   文章页
   ---------------------------------------------- */
.article-grid { display: flex; flex-direction: column; }

.article-main { min-width: 0; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color .15s, gap .15s;
}
.back:hover { color: var(--accent); gap: 9px; }

.article h1 {
  font-size: clamp(25px, 6.2vw, 34px);
  line-height: 1.26;
  letter-spacing: -.8px;
  margin: 0 0 14px;
  font-weight: 750;
  font-family: inherit;
}
.article-meta {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13.2px;
  color: var(--faint);
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.article-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.mini-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--faint);
  font-size: 11.5px;
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.mini-btn:hover { color: var(--accent); border-color: var(--accent); }
.mini-btn.done { color: #16a34a; border-color: #16a34a; }

/* ---------------- 目录 TOC ---------------- */
.article-side { order: -1; margin-bottom: 26px; max-height: 44vh; overflow-y: auto; }

.toc {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  padding: 13px 15px;
  font-size: 13.2px;
}
.toc-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.toc nav { display: flex; flex-direction: column; }
.toc a {
  color: var(--muted);
  text-decoration: none;
  padding: 3.5px 0 3.5px 10px;
  border-left: 2px solid var(--line);
  line-height: 1.5;
  transition: all .15s;
  display: block;
}
.toc a:hover { color: var(--fg); border-left-color: var(--faint); }
.toc a.lv3 { padding-left: 22px; font-size: 12.7px; }
.toc a.on {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* 桌面：目录固定在右侧 */
@media (min-width: 1000px) {
  .article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 186px;
    gap: 46px;
    align-items: start;
  }
  .article-side {
    position: sticky;
    top: 78px;
    order: 2;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    margin-bottom: 0;
  }
  .article-main { order: 1; max-width: 720px; }
}

/* ---------------- 正文排版 ---------------- */
.content { font-size: var(--fs); }
.content > *:first-child { margin-top: 0; }

.content h2 {
  font-size: 1.36em;
  margin: 2.1em 0 .68em;
  letter-spacing: -.01em;
  line-height: 1.4;
  font-weight: 700;
  scroll-margin-top: 76px;
}
.content h3 {
  font-size: 1.14em;
  margin: 1.75em 0 .55em;
  font-weight: 650;
  scroll-margin-top: 76px;
}
.content h4 {
  font-size: 1em;
  margin: 1.5em 0 .5em;
  font-weight: 650;
  color: var(--muted);
}

/* 标题锚点 */
.content h2 .anchor,
.content h3 .anchor {
  opacity: 0;
  color: var(--faint);
  text-decoration: none;
  margin-left: 7px;
  font-weight: 400;
  transition: opacity .15s;
}
.content h2:hover .anchor,
.content h3:hover .anchor { opacity: 1; }
.content h2 .anchor:hover,
.content h3 .anchor:hover { color: var(--accent); }

.content p { margin: 0 0 1.15em; }
.content ul, .content ol { margin: 0 0 1.3em; padding-left: 1.45em; }
.content li { margin: .38em 0; }
.content li::marker { color: var(--faint); }
.content strong { font-weight: 680; }
.content em { font-style: italic; }
.content del { color: var(--faint); }

.content a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.content a:hover { border-bottom-color: var(--accent); }

/* 行内代码 */
.content :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: .87em;
  background: var(--code-bg);
  padding: .16em .42em;
  border-radius: 5px;
  border: 1px solid var(--line);
  word-break: break-word;
}

/* ---------------- 代码块 ---------------- */
.code {
  margin: 0 0 1.5em;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--code-bg);
  overflow: hidden;
}
.code figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--code-bg) 60%, var(--card));
}
.code-lang {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--faint);
}
.copy-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--faint);
  font-size: 11.5px;
  font-family: inherit;
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  transition: all .15s;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn.done { color: #16a34a; border-color: #16a34a; }

.code pre {
  margin: 0;
  padding: 15px 17px;
  overflow-x: auto;
  font-size: 13.3px;
  line-height: 1.68;
}
.code pre code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
  color: var(--fg);
}

/* 高亮 token */
.t-c { color: var(--hl-com); font-style: italic; }
.t-s { color: var(--hl-str); }
.t-k { color: var(--hl-kw); font-weight: 600; }
.t-n { color: var(--hl-num); }
.t-f { color: var(--hl-fn); }

/* ---------------- 引用 / 表格 / 分隔线 ---------------- */
.content blockquote {
  margin: 0 0 1.5em;
  padding: 4px 0 4px 17px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--muted);
}
.content blockquote p:last-child { margin-bottom: 0; }

.table-wrap {
  margin: 0 0 1.5em;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .91em;
  min-width: 340px;
}
.content th, .content td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.content th {
  background: var(--code-bg);
  font-weight: 650;
  font-size: .95em;
  white-space: nowrap;
}
.content tr:last-child td { border-bottom: 0; }
.content tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }

.content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.4em 0;
}

.content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto 1.5em;
}

/* ---------------- 翻页 ---------------- */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 46px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.pager a {
  text-decoration: none;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  transition: border-color .15s, transform .15s;
  display: block;
  background: var(--card);
}
.pager a:hover { border-color: var(--accent); transform: translateY(-2px); }
.pager .dir {
  display: block;
  font-size: 11.5px;
  color: var(--faint);
  margin-bottom: 5px;
  letter-spacing: .4px;
}
.pager .pt {
  font-size: 14.2px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pager .next { text-align: right; }

/* ---------------- 相关文章 ---------------- */
.related {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.related-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 14px;
}
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { margin: 0 0 9px; }
.related li a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  font-size: 14.6px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  transition: border-color .15s, transform .15s;
}
.related li a:hover { border-color: var(--accent); transform: translateX(4px); }
.related .r-shared {
  font-size: 11px;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 6px;
  flex: none;
  margin-left: auto;
}

/* ----------------------------------------------
   归档页
   ---------------------------------------------- */
.archive { padding: clamp(28px, 7vw, 50px) 0 40px; }
.archive h1 {
  font-size: clamp(25px, 6.2vw, 33px);
  margin: 0 0 8px;
  letter-spacing: -.6px;
  font-weight: 750;
}
.page-sub { color: var(--muted); font-size: 15px; margin: 0 0 30px; }

.year-group { margin-bottom: 34px; }
.year-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.year-head .y {
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.year-head .n {
  font-size: 12px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
}
.year-head .rule { flex: 1; height: 1px; background: var(--line); }

.arc-list { list-style: none; padding: 0; margin: 0; }
.arc-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
}
.arc-list li:last-child { border-bottom: 0; }
.arc-date {
  font-size: 12.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  flex: none;
  width: 46px;
}
.arc-list a {
  color: var(--fg);
  text-decoration: none;
  line-height: 1.5;
}
.arc-list a:hover { color: var(--accent); }
.arc-tags {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--faint);
  flex: none;
}

/* ----------------------------------------------
   标签云
   ---------------------------------------------- */
.tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0 40px;
}
.tagcloud a {
  text-decoration: none;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 15px;
  background: var(--card);
  transition: all .16s;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.tagcloud a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.tagcloud .c {
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------
   关于页
   ---------------------------------------------- */
.about { padding: clamp(28px, 7vw, 50px) 0 40px; }
.about h1 {
  font-size: clamp(25px, 6.2vw, 33px);
  margin: 0 0 18px;
  letter-spacing: -.6px;
  font-weight: 750;
}
.about p { color: var(--muted); margin: 0 0 1.1em; }
.facts {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}
.facts li {
  background: var(--card);
  padding: 12px 15px;
  font-size: 14.5px;
  display: flex;
  gap: 12px;
  color: var(--muted);
}
.facts b {
  color: var(--fg);
  min-width: 72px;
  font-weight: 620;
  flex: none;
}

/* ----------------------------------------------
   页脚
   ---------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 36px;
  margin-top: 24px;
  font-size: 12.8px;
  color: var(--faint);
  text-align: center;
}
.site-footer p { margin: 0 0 8px; }
.foot-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.foot-links a,
.linklike {
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.foot-links a:hover,
.linklike:hover { color: var(--accent); }

/* ----------------------------------------------
   小屏微调
   ---------------------------------------------- */
@media (max-width: 640px) {
  .site-nav { gap: 13px; }
  .site-nav a { font-size: 13.8px; }
  .font-ctl { display: none; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
  .post-item .excerpt { font-size: 14.3px; }
  .arc-tags { display: none; }
}

/* ----------------------------------------------
   动画
   ---------------------------------------------- */
/* 入场动画只做位移，不做透明度：
   内置 WebView 里动画时钟有时不推进，opacity 从 0 开始的
   动画会一直停在 0%，整块内容直接看不见。 */
@keyframes rise {
  from { transform: translateY(7px); }
  to   { transform: none; }
}
.article, .post-item, .about, .archive, .tagcloud {
  animation: rise .34s ease both;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------
   打印
   ---------------------------------------------- */
@media print {
  .site-header, .site-footer, .progress, .to-top,
  .article-side, .article-actions, .pager, .related { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .article-main { max-width: none; }
  .code { break-inside: avoid; border-color: #ccc; }
  .content h2, .content h3 { break-after: avoid; }
  .content a { color: #000; border: 0; }
  .content a::after { content: " (" attr(href) ")"; font-size: .82em; color: #555; }
}

/* ============================================================
   后台 · 部署 · 评论
   ============================================================ */

/* ---------------- 通用工具 ---------------- */

.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.linklike:hover { color: var(--accent); }
.foot-admin { opacity: .75; }

.adm-wrap { max-width: var(--widew); }
.adm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 34px 0 18px;
}
.adm-head h1 { font-size: 1.6rem; margin: 0; letter-spacing: -.01em; }
.adm-sub { margin: 5px 0 0; color: var(--muted); font-size: .86rem; }
.adm-head-ops { display: flex; gap: 8px; flex-wrap: wrap; }

.adm-nav {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.adm-nav a {
  padding: 9px 14px; font-size: .87rem; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.adm-nav a:hover { color: var(--fg); }
.adm-nav a.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }

.adm-btn {
  display: inline-block; padding: 8px 15px; font-size: .84rem; line-height: 1.3;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--fg); cursor: pointer; font-family: inherit; text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.adm-btn:hover { border-color: var(--faint); }
.adm-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.adm-btn.primary:hover { filter: brightness(1.08); }
.adm-btn.danger { color: #c0392b; border-color: #e6c3bd; }
.adm-btn.danger:hover { background: #fdf2f0; }
.adm-btn.block { display: block; width: 100%; margin-top: 12px; }
.adm-btn.big { padding: 12px 26px; font-size: .95rem; }
.adm-btn.wide { width: 100%; padding: 11px; font-size: .9rem; }
.adm-btn:disabled { opacity: .55; cursor: default; }

.adm-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  padding: 20px 22px; margin-bottom: 18px;
}
.adm-card h2 {
  font-size: 1rem; margin: 0 0 6px; display: flex; align-items: center;
  gap: 9px; flex-wrap: wrap;
}
.adm-card-sub { margin: 0 0 16px; color: var(--muted); font-size: .84rem; line-height: 1.65; }
.adm-card-sub code, .adm-note code, .adm-banner code, .dep-alt-item code, .dep-note code {
  background: var(--code-bg); padding: 1px 5px; border-radius: 4px;
  font-size: .88em; font-family: ui-monospace, monospace;
}
.adm-badge {
  font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent); letter-spacing: .02em;
}
.adm-badge.warn { background: #fdf3e3; color: #a9660d; }
[data-theme="dark"] .adm-badge.warn { background: #2c2114; color: #e0a860; }

.adm-banner {
  padding: 12px 16px; border-radius: 9px; font-size: .84rem; line-height: 1.6;
  background: #fff9e8; border: 1px solid #f0e0bb; color: #7a5a12; margin-bottom: 20px;
}
.adm-banner.ghost { background: var(--code-bg); border-color: var(--line); color: var(--muted); }
[data-theme="dark"] .adm-banner { background: #2a2415; border-color: #46391d; color: #dcc38a; }
[data-theme="dark"] .adm-banner.ghost { background: var(--code-bg); border-color: var(--line); color: var(--muted); }

.adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.adm-stat {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: 14px 12px; text-align: center;
}
.adm-stat b { display: block; font-size: 1.3rem; letter-spacing: -.02em; }
.adm-stat span { display: block; font-size: .74rem; color: var(--muted); margin-top: 4px; }

.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); margin-bottom: 8px;
}
.adm-row:hover { border-color: var(--faint); }
.adm-row-main { min-width: 0; flex: 1; }
.adm-t {
  display: block; font-weight: 600; font-size: .93rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-row-meta {
  margin-top: 5px; font-size: .76rem; color: var(--muted);
  display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
}
.adm-row-meta .dot { color: var(--faint); }
.adm-row-ops { display: flex; gap: 5px; flex-shrink: 0; }
.adm-op {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg); color: var(--muted); cursor: pointer; font-size: .76rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; padding: 0;
}
.adm-op:hover { color: var(--fg); border-color: var(--faint); }
.adm-op.danger:hover { color: #c0392b; border-color: #e0b4ad; }

.adm-empty { padding: 34px; text-align: center; color: var(--muted); font-size: .87rem; border: 1px dashed var(--line); border-radius: 10px; list-style: none; }
.adm-empty.big { padding: 70px 20px; }

.adm-flex { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }

.adm-note {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 14px 17px; font-size: .82rem; line-height: 1.75; color: var(--muted);
}
.adm-note b { color: var(--fg); }
.adm-note ol, .adm-note ul { margin: 8px 0 0; padding-left: 20px; }
.adm-note li { margin: 4px 0; }
.adm-note p { margin: 9px 0 0; }

.adm-code {
  width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem; line-height: 1.6; padding: 12px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--code-bg); color: var(--fg);
  resize: vertical; margin-top: 6px;
}
.adm-file { font-size: .8rem; margin-bottom: 6px; }
.danger-zone { border-color: #e6c3bd; }
[data-theme="dark"] .danger-zone { border-color: #4a2b26; }

/* ---------------- 表单 ---------------- */

.adm-field { display: block; margin-bottom: 15px; }
.adm-field > span { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.adm-field input, .adm-field select, .adm-field textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: .88rem;
  font-family: inherit; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg);
}
.adm-field textarea { resize: vertical; line-height: 1.65; }
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus {
  outline: none; border-color: var(--accent);
}
.adm-field textarea#fBody {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; line-height: 1.72;
}
.adm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-flags { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 15px; }
.adm-check { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; cursor: pointer; user-select: none; }
.adm-check.big { font-size: .9rem; margin-bottom: 16px; display: flex; }
.adm-check input { width: 16px; height: 16px; accent-color: var(--accent); }

.adm-help { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 15px; }
.adm-help summary { padding: 10px 14px; font-size: .82rem; cursor: pointer; color: var(--muted); }
.adm-help[open] summary { border-bottom: 1px solid var(--line); color: var(--fg); }
.adm-help-body { padding: 12px 14px; }
.adm-help-body table { width: 100%; font-size: .78rem; border-collapse: collapse; }
.adm-help-body td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-help-body td:first-child { width: 42%; font-family: ui-monospace, monospace; color: var(--accent); white-space: nowrap; }
.adm-tip { margin: 10px 0 0; font-size: .78rem; color: var(--muted); }

/* ---------------- 编辑器 ---------------- */

.adm-editor { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.adm-form { min-width: 0; }
.adm-editor-foot { display: flex; gap: 9px; flex-wrap: wrap; padding-top: 4px; }
.adm-preview {
  border: 1px solid var(--line); border-radius: 11px; background: var(--card);
  overflow: hidden;
}
.adm-preview-head {
  padding: 9px 15px; font-size: .76rem; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--code-bg);
}
.adm-preview-body { padding: 20px 22px; max-height: 66vh; overflow-y: auto; }
.adm-preview-body h2 { font-size: 1.15rem; }
.adm-preview-body h3 { font-size: 1.02rem; }

/* ---------------- 登录门禁 ---------------- */

.gate-mode { max-width: 460px; }
.adm-gate { padding: 7vh 0 40px; }
.adm-gate-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  padding: 30px 28px; box-shadow: var(--shadow); text-align: center;
}
.adm-gate-icon { font-size: 1.9rem; margin-bottom: 12px; }
.adm-gate-card h1 { font-size: 1.25rem; margin: 0 0 6px; }
.adm-gate-sub { margin: 0 0 22px; color: var(--muted); font-size: .85rem; }
.adm-gate-card .adm-field { text-align: left; }
.adm-gate-card .adm-check { margin-bottom: 16px; }
.adm-gate-err {
  color: #c0392b; font-size: .8rem; min-height: 1.2em; margin-bottom: 10px;
  opacity: 0; transition: opacity .2s;
}
.adm-gate-err.on { opacity: 1; }
.adm-link {
  display: block; margin: 14px auto 0; background: none; border: 0;
  color: var(--muted); font-size: .78rem; cursor: pointer; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.adm-link:hover { color: var(--fg); }

/* ---------------- 浮动提示 ---------------- */

.admin-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 14px);
  background: #23262d; color: #fff; padding: 11px 20px; border-radius: 9px;
  font-size: .84rem; opacity: 0; pointer-events: none; z-index: 300;
  transition: opacity .22s, transform .22s; max-width: 86vw; text-align: center;
}
.admin-toast.on { opacity: 1; transform: translate(-50%, 0); }
.admin-toast.err { background: #b03024; }

/* ---------------- 评论 ---------------- */

.comments-sec { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); }
.comments-sec .giscus { margin-top: 4px; }
.cmt-setup {
  border: 1px dashed var(--line); border-radius: 11px; padding: 24px 24px 22px;
  background: var(--card);
}
.cmt-setup-icon { font-size: 1.5rem; margin-bottom: 8px; }
.cmt-setup h3 { margin: 0 0 10px; font-size: .98rem; }
.cmt-setup p { margin: 0 0 10px; font-size: .84rem; line-height: 1.7; color: var(--muted); }
.cmt-setup ol { margin: 12px 0 16px; padding-left: 20px; font-size: .82rem; color: var(--muted); line-height: 1.85; }
.cmt-setup code {
  background: var(--code-bg); padding: 1px 5px; border-radius: 4px;
  font-size: .88em; font-family: ui-monospace, monospace;
}
.cmt-missing { color: var(--fg) !important; }
.cmt-setup-btn {
  display: inline-block; padding: 8px 16px; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: .83rem;
}
.cmt-setup-btn:hover { filter: brightness(1.08); }

/* 已启用评论时的界面 */
.cmt-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.cmt-head h2 { margin: 0; font-size: 1.05rem; }
.cmt-login-note { font-size: .76rem; color: var(--faint); }

.cmt-box { min-height: 120px; }
.cmt-loading {
  font-size: .84rem; color: var(--faint); padding: 26px 0;
  text-align: center;
}
.comments-sec .giscus { min-height: 160px; }
.comments-sec .giscus-frame {
  width: 100%; border: 0; border-radius: 10px; display: block;
}
.cmt-fail {
  border: 1px solid var(--line); border-radius: 11px; padding: 20px 22px;
  background: var(--card); font-size: .83rem; line-height: 1.8; color: var(--muted);
}
.cmt-fail code {
  background: var(--code-bg); padding: 1px 5px; border-radius: 4px;
  font-size: .88em; font-family: ui-monospace, monospace;
}

/* ---------------- 部署 ---------------- */

.dep-banner {
  border: 1px solid var(--line); border-radius: 13px; padding: 24px 26px;
  background: var(--card); margin-bottom: 20px;
}
.dep-banner h2 { margin: 0 0 8px; font-size: 1.1rem; }
.dep-banner p { margin: 0 0 14px; font-size: .86rem; line-height: 1.75; color: var(--muted); }
.dep-status { margin-bottom: 24px; }
.dep-ok {
  border: 1px solid #b8dfc4; background: #f2fbf5; border-radius: 11px;
  padding: 18px 20px; font-size: .86rem; line-height: 1.8; color: #1e5c33;
}
[data-theme="dark"] .dep-ok { background: #14251b; border-color: #2b5238; color: #96d3ac; }
.dep-err {
  border: 1px solid #e6c3bd; background: #fdf4f2; border-radius: 11px;
  padding: 18px 20px; font-size: .86rem; line-height: 1.8; color: #8c2d20;
}
[data-theme="dark"] .dep-err { background: #2a1614; border-color: #4a2b26; color: #e3a094; }
.dep-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.dep-file {
  font-family: ui-monospace, monospace; font-size: .73rem;
  background: rgba(0,0,0,.05); padding: 3px 9px; border-radius: 6px;
}
[data-theme="dark"] .dep-file { background: rgba(255,255,255,.08); }
.dep-file i { opacity: .6; font-style: normal; }
.dep-ok .dep-note, .dep-err .dep-note { font-size: .82rem; margin: 8px 0 0; }

.dep-h2 { font-size: 1rem; margin: 30px 0 16px; }
.dep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 30px; }
.dep-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  padding: 20px 22px; display: flex; flex-direction: column;
}
.dep-card.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dep-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.dep-card h3 { margin: 0; font-size: .98rem; }
.dep-tag { font-size: .67rem; font-weight: 600; color: var(--accent); letter-spacing: .03em; }
.dep-desc { margin: 0 0 14px; font-size: .83rem; color: var(--muted); line-height: 1.7; }
.dep-steps { margin: 0; padding-left: 19px; font-size: .82rem; line-height: 1.85; color: var(--muted); flex: 1; }
.dep-steps li { margin: 4px 0; }
.dep-steps code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: .88em; font-family: ui-monospace, monospace; }
.dep-note { margin: 12px 0 0; font-size: .78rem; color: var(--faint); line-height: 1.7; }

.dep-alt { display: grid; gap: 12px; }
.dep-alt-item { border: 1px solid var(--line); border-radius: 10px; padding: 15px 18px; background: var(--bg); }
.dep-alt-item h4 { margin: 0 0 7px; font-size: .88rem; }
.dep-alt-item p { margin: 0 0 7px; font-size: .82rem; line-height: 1.72; color: var(--muted); }
.dep-alt-item p:last-child { margin-bottom: 0; }
.dep-alt-need { font-size: .78rem !important; color: var(--faint) !important; }
.dep-list { margin: 0; padding-left: 20px; font-size: .84rem; line-height: 1.9; color: var(--muted); }
.dep-list b { color: var(--fg); }

/* ---------------- 响应式 ---------------- */

@media (min-width: 1000px) {
  .adm-editor.two-pane { grid-template-columns: 1fr 1fr; }
  .adm-preview { position: sticky; top: 78px; }
}
@media (max-width: 640px) {
  .adm-stats { grid-template-columns: repeat(2, 1fr); }
  .adm-row2 { grid-template-columns: 1fr; }
  .adm-head { margin-top: 24px; }
  .adm-head h1 { font-size: 1.35rem; }
  .adm-row { align-items: flex-start; }
  .dep-grid { grid-template-columns: 1fr; }
}

@media print {
  .comments-sec, .adm-wrap { display: none !important; }
}
/* ---------- 部署：打包选项 ---------- */
.dep-opts {
  margin: 18px 0 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.dep-opts .adm-check {
  margin-bottom: 8px;
}

.dep-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.dep-note code {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12.5px;
  background: rgba(127, 127, 127, 0.15);
}

.dep-note b {
  color: var(--fg);
}

/* ============================================================
   玻璃质感 · Glass
   ------------------------------------------------------------
   三层结构：
     1) 固定背景光斑 + 细噪点（body::before / ::after，z-index:-1）
     2) 半透明磨砂面（backdrop-filter）
     3) 面上的高光描边（inset 0 1px 0 white）
   --card 已经指向 --glass，所以后台 / 评论 / 部署那些老组件
   不改选择器也能一起变成玻璃。
   ============================================================ */

/* ---------------- 1. 背景层 ---------------- */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46vmax 40vmax at 6% 0%,    var(--glow-1), transparent 62%),
    radial-gradient(38vmax 34vmax at 98% 10%,  var(--glow-2), transparent 60%),
    radial-gradient(48vmax 42vmax at 80% 104%, var(--glow-3), transparent 62%),
    radial-gradient(34vmax 30vmax at 2% 94%,   var(--glow-4), transparent 60%);
}

/* 噪点：玻璃的「霜」 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
[data-theme="dark"] body::after { opacity: .85; }

/* ---------------- 2. 磨砂面 ---------------- */

.site-header,
.palette-box,
.article-main,
.post-item,
.toc,
.facts li,
.adm-card,
.adm-row,
.adm-stat,
.adm-gate-card,
.dep-banner,
.dep-card,
.cmt-setup,
.cmt-fail,
.admin-toast,
.to-top {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
}

/* 没有 backdrop-filter 时的降级：把面做得更实 */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  :root {
    --glass: rgba(255, 255, 255, .92);
    --glass-strong: rgba(255, 255, 255, .96);
    --glass-soft: rgba(255, 255, 255, .74);
  }
  [data-theme="dark"] {
    --glass: rgba(26, 30, 39, .93);
    --glass-strong: rgba(22, 26, 34, .97);
    --glass-soft: rgba(30, 34, 44, .8);
  }
}

/* ---------------- 3. 页头 ---------------- */

.site-header {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi), 0 12px 30px -22px rgba(23, 34, 61, .8);
}
[data-theme="dark"] .site-header {
  box-shadow: var(--glass-hi), 0 14px 34px -20px rgba(0, 0, 0, .95);
}

/* ---------------- 4. 卡片 ---------------- */

.post-item,
.toc,
.facts li,
.adm-card,
.adm-row,
.adm-stat,
.adm-gate-card,
.dep-banner,
.dep-card,
.cmt-setup,
.cmt-fail {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi), var(--shadow);
}

/* 列表：每篇一张玻璃卡 */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 10px;
}
.post-item {
  border-radius: 18px;
  padding: clamp(18px, 4vw, 24px) clamp(18px, 4.4vw, 26px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease,
              background .22s ease;
}
.post-item:first-child { border-top: 1px solid var(--glass-brd); }
.post-item:hover {
  transform: translateY(-3px);
  background: var(--glass-strong);
  border-color: var(--glass-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-lg);
}
.post-item .excerpt { margin-bottom: 13px; }

/* ---------------- 5. 文章 ---------------- */

.article-main {
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  padding: clamp(20px, 4.6vw, 40px);
  box-shadow: var(--glass-hi), var(--shadow);
}
.article-meta {
  background: var(--glass-soft);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 28px;
}
.back {
  background: var(--glass-soft);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  padding: 5px 14px 5px 11px;
  margin-bottom: 20px;
}
.back:hover { background: var(--glass); }

/* 目录 */
.toc { border-radius: 16px; padding: 14px 15px; }
.toc a.on { border-left-color: var(--accent); }

/* 代码块 / 表格：面上的浅色凹槽 */
.code {
  background: var(--glass-soft);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  box-shadow: var(--glass-hi);
}
.code figcaption {
  background: var(--glass-soft);
  border-bottom: 1px solid var(--glass-line);
}
.table-wrap {
  background: var(--glass-soft);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
}
.content th { background: var(--glass-soft); }
.content img {
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .content img { opacity: .88; transition: opacity .2s; }
[data-theme="dark"] .content img:hover { opacity: 1; }

/* 翻页 / 相关：主面板里的次级玻璃块 */
.pager { border-top: 0; padding-top: 0; margin-top: 40px; }
.pager a {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  box-shadow: var(--glass-hi);
}
.pager a:hover { background: var(--glass-strong); box-shadow: var(--glass-hi), var(--shadow); }
.related { border-top: 1px solid var(--glass-line); }
.related li a {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 13px;
  box-shadow: var(--glass-hi);
}
.related li a:hover { background: var(--glass-strong); }

/* ---------------- 6. 按钮 / 标签 ---------------- */

.icon-btn,
.mini-btn,
.copy-btn,
.adm-btn,
.adm-op {
  background: var(--glass);
  border-color: var(--glass-brd);
  box-shadow: var(--glass-hi);
}
.icon-btn { border-radius: 10px; }
.mini-btn, .copy-btn { border-radius: 8px; }
.icon-btn:hover, .mini-btn:hover, .copy-btn:hover { background: var(--glass-strong); }
.adm-op { background: var(--glass-soft); border-radius: 9px; }
.adm-op:hover { background: var(--glass); }

.chip, .tagcloud a {
  background: var(--glass);
  border-color: var(--glass-brd);
  box-shadow: var(--glass-hi);
}
.chip:hover, .tagcloud a:hover { background: var(--glass-strong); }
.chip.on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -10px var(--accent);
}
.chip.on:hover { color: #fff; }
.pin-badge { border-color: transparent; background: var(--accent-soft); }

/* 标签云字号用 em 跟随「字号」档位（原来是 px，调档位不生效） */
.tagcloud a { padding: 7px 16px; }

/* ---------------- 7. 搜索浮层 ---------------- */

.palette-mask {
  background: rgba(10, 14, 22, .38);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
}
.palette-box {
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  border-radius: 18px;
  box-shadow: var(--glass-hi), var(--shadow-lg);
}
.palette-input { border-bottom: 1px solid var(--glass-line); }
.palette-results { padding: 8px; }
.p-item { border-radius: 11px; }
.p-item.sel {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}
.palette-foot {
  background: var(--glass-soft);
  border-top: 1px solid var(--glass-line);
}
kbd { background: var(--glass); border-color: var(--glass-brd); }

/* ---------------- 8. 杂项 ---------------- */

.progress {
  height: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, #10b5b3);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.to-top {
  width: 44px;
  height: 44px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  border-radius: 50%;
  box-shadow: var(--glass-hi), var(--shadow);
}
.to-top:hover { background: var(--glass-strong); transform: translateY(-2px); }
.to-top.show:hover { transform: translateY(-2px); }

.facts {
  display: grid;
  gap: 9px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.facts li { border-radius: 13px; }

.intro h1,
.archive h1,
.about h1 {
  background: linear-gradient(115deg, var(--fg) 26%, var(--accent) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fg);
}

.site-footer { border-top: 1px solid var(--glass-line); }

/* 表单也玻璃化 */
.adm-field input,
.adm-field select,
.adm-field textarea {
  background: var(--glass-soft);
  border-color: var(--glass-brd);
  border-radius: 10px;
}
.adm-field input:focus,
.adm-field select:focus,
.adm-field textarea:focus {
  background: var(--glass);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.adm-check input { accent-color: var(--accent); }

.adm-note,
.adm-code,
.adm-help,
.adm-preview,
.dep-opts,
.dep-alt-item {
  background: var(--glass-soft);
  border-color: var(--glass-line);
  border-radius: 14px;
}
.adm-preview-head { background: var(--glass-soft); border-bottom-color: var(--glass-line); }
.adm-nav { border-bottom: 1px solid var(--glass-line); }
.adm-card, .adm-row, .adm-stat { border-radius: 14px; }
.dep-banner, .dep-card { border-radius: 16px; }
.dep-card.featured { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }

.admin-toast {
  background: var(--glass-strong);
  color: var(--fg);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi), var(--shadow-lg);
}
.admin-toast.err {
  background: rgba(176, 48, 36, .9);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}

.comments-sec { border-top: 1px solid var(--glass-line); }
.cmt-setup { border-style: solid; border-radius: 16px; }

/* 滚动条 */
@media (min-width: 900px) {
  ::-webkit-scrollbar-thumb {
    background: var(--line);
    background-clip: padding-box;
    border: 3px solid transparent;
  }
}

/* ---------------- 9. 小屏：降一点磨砂成本 ---------------- */

@media (max-width: 760px) {
  :root { --glass-blur: 12px; }
  [data-theme="dark"] { --glass-blur: 12px; }
  .article-main { border-radius: 18px; }
  .post-item { border-radius: 16px; }
  .pager { gap: 9px; }
  /* 窄屏别出现「· 随笔」这种孤零零的换行：去掉分隔点，改用间距 */
  .article-meta { gap: 4px 11px; }
  .article-meta .dot { display: none; }
}

/* ---------------- 10. 打印：撤掉一切玻璃 ---------------- */

@media print {
  body::before, body::after { display: none !important; }
  .post-item, .article-main, .code, .table-wrap, .toc, .facts li {
    background: #fff !important;
    border-color: #ddd !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ---------------- 后台门禁：账号核验面板 ---------------- */

.adm-gate .adm-note {
  text-align: left;
  margin: 0 0 16px;
}
.adm-gate .adm-note p { margin: 9px 0 0; }
.adm-gate .adm-btn.wide { margin-bottom: 6px; }
.adm-gate .adm-link { margin-top: 6px; }
.adm-gate-sub b { color: var(--fg); }

/* 核验中的那个 ⏳ 轻微呼吸一下，让人知道没卡住 */
.adm-gate-icon {
  animation: gatePulse 1.6s ease-in-out infinite;
}
@keyframes gatePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .adm-gate-icon { animation: none; }
}

/* ---------------- 顶栏：窄屏改成两行，不挤字 ---------------- */

/* 导航链接永远不换行，宁可整块换行，也不要「首/页」竖着断成两半 */
.site-nav a { white-space: nowrap; }

@media (max-width: 620px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    min-height: 58px;
    padding-top: 9px;
    padding-bottom: 9px;
    row-gap: 2px;
  }
  /* 导航整块落到第二行、居中 */
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: center;
    gap: 22px;
  }
  /* 顶栏变高了，锚点滚动的留白也跟着涨 */
  .content h2,
  .content h3 { scroll-margin-top: 108px; }
}

/* ============================================================
   主题引擎 & 插件
   ------------------------------------------------------------
   主题只改 CSS 变量（写在 <html> 行内，优先级最高），
   这里只放「主题改不到」的部分：字体令牌、扁平化开关、面板 UI。
   ============================================================ */

/* ---------------- 字体令牌：主题可以整套换掉 ---------------- */

:root {
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

body { font-family: var(--font-body); }

.content h2, .content h3, .content h4,
.article h1, .intro h1, .archive h1, .about h1,
.post-item h2, .year-head .y, .adm-head h1, .dep-h2, .look-title {
  font-family: var(--font-head);
}

.content :not(pre) > code,
.code pre code,
.code-lang,
.adm-code,
.look-note code {
  font-family: var(--font-mono);
}

/* ---------------- 主题开关 ---------------- */

/* 没光斑：整层背景装饰都撤掉 */
html[data-noblobs="1"] body::before { display: none; }

/* 扁平主题（纸 / 墨 / 终端）：关掉全部磨砂，别白花钱 */
html[data-flat="1"] * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 扁平主题下阴影也收敛一点，不然纸面上飘着玻璃的影子很怪 */
html[data-flat="1"] .post-item,
html[data-flat="1"] .article-main,
html[data-flat="1"] .adm-card,
html[data-flat="1"] .dep-card,
html[data-flat="1"] .look-box {
  box-shadow: var(--glass-hi), 0 1px 2px rgba(24, 22, 18, .05),
              0 12px 26px -20px rgba(24, 22, 18, .34);
}

/* 工具栏按钮多了要能换行 */
.article-actions { flex-wrap: wrap; }

/* ---------------- 外观面板（只在后台用） ---------------- */

.look-box {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  border-radius: 20px;
  box-shadow: var(--glass-hi), var(--shadow-lg);
  overflow: hidden;
}

.look-sec { margin-bottom: 18px; }
.look-sec:last-child { margin-bottom: 4px; }

.look-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .8px;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 9px;
}
.look-val { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }

/* 三档分段控件 */
.look-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--glass-soft);
  border: 1px solid var(--glass-line);
}
.look-seg button {
  flex: 1;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  padding: 7px 4px;
  border-radius: 9px;
  cursor: pointer;
}
.look-seg button:hover { color: var(--fg); }
.look-seg button.on {
  background: var(--glass-strong);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--glass-hi), 0 2px 6px rgba(23, 34, 61, .10);
}

/* 主题卡 */
.look-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
  gap: 9px;
}
.look-card {
  display: flex;
  flex-direction: column;
  /* 按钮的 UA 样式带 align-items:flex-start，不写死这个，
     子元素（色块那种空元素）会缩成 1px 宽的竖线 */
  align-items: stretch;
  gap: 5px;
  padding: 9px;
  text-align: left;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--glass-soft);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.look-card:hover { transform: translateY(-2px); border-color: var(--glass-brd); }
.look-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.look-card b { font-size: .85rem; font-weight: 650; }
.look-card small { font-size: .7rem; line-height: 1.45; color: var(--muted); }

.look-swatch {
  position: relative;
  display: block;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--glass-brd);
  overflow: hidden;
}
.look-swatch i {
  position: absolute;
  left: 7px; right: 7px; bottom: 7px;
  height: 8px;
  border-radius: 99px;
  display: block;
}

/* 强调色 */
.look-dots { display: flex; gap: 9px; flex-wrap: wrap; }
.look-dot {
  width: 31px; height: 31px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: var(--glass-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .15s;
}
.look-dot:hover { transform: scale(1.08); }
.look-dot span { display: block; width: 17px; height: 17px; border-radius: 50%; }
.look-dot.on { box-shadow: 0 0 0 2px var(--accent); }

.look-range {
  width: 100%;
  margin: 2px 0 12px;
  accent-color: var(--accent);
}
.look-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
}
.look-check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* 自定义强调色取色器 */
.look-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
}
.look-custom input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--glass-brd);
  border-radius: 50%;
  background: var(--glass-soft);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}
.look-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.look-custom input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }

/* 插件列表 */
.look-list { display: flex; flex-direction: column; gap: 8px; }
.look-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: var(--glass-soft);
  cursor: pointer;
}
.look-item:hover { border-color: var(--glass-brd); }
.look-item-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.look-item b { font-size: .87rem; font-weight: 620; }
.look-item small { font-size: .74rem; line-height: 1.5; color: var(--muted); }

.look-switch { position: relative; flex: none; width: 40px; height: 23px; display: inline-block; }
.look-switch input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; z-index: 2; cursor: pointer;
}
.look-switch i {
  position: absolute; inset: 0;
  border-radius: 99px;
  background: var(--line);
  transition: background .18s;
}
.look-switch i::after {
  content: '';
  position: absolute;
  top: 2.5px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform .18s;
}
.look-switch input:checked + i { background: var(--accent); }
.look-switch input:checked + i::after { transform: translateX(16px); }

.look-note {
  margin-top: 15px;
  font-size: .75rem;
  line-height: 1.75;
  color: var(--faint);
}
.look-note code {
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .9em;
}

/* 插件的小提示 */
.plug-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 12px);
  z-index: 340;
  max-width: 86vw;
  padding: 9px 17px;
  border-radius: 11px;
  font-size: .82rem;
  text-align: center;
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  color: var(--fg);
  box-shadow: var(--glass-hi), var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.plug-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   第三方库带来的东西
   （Markdown=marked / 高亮=highlight.js / 搜索=Fuse.js / 消毒=DOMPurify）
   ============================================================ */

/* ---------------- highlight.js 的 token 映射到主题变量 ----------------
   换皮肤时高亮配色自动跟着变，不用给每套主题各写一份 token 颜色 */
.hljs-comment,
.hljs-quote { color: var(--hl-com); font-style: italic; }

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-name,
.hljs-strong { color: var(--hl-kw); font-weight: 600; }

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-meta-string,
.hljs-selector-attr,
.hljs-selector-pseudo { color: var(--hl-str); }

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable { color: var(--hl-num); }

.hljs-title,
.hljs-section,
.hljs-title.function_,
.hljs-function .hljs-title,
.hljs-built_in { color: var(--hl-fn); }

.hljs-type,
.hljs-class .hljs-title,
.hljs-selector-class,
.hljs-selector-id { color: var(--hl-kw); }

.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-tag { color: var(--faint); }

.hljs-tag .hljs-name { color: var(--hl-kw); font-weight: 600; }
.hljs-tag .hljs-attr { color: var(--hl-num); }
.hljs-emphasis { font-style: italic; }
.hljs-deletion { color: #c0392b; }
.hljs-subst { color: var(--fg); }

/* 行内代码和代码块里的字号跟着主题的等宽字体走 */
.code pre code.hljs { background: none; padding: 0; }

/* ---------------- GFM 结构：任务列表 / 脚注 / 嵌套列表 ---------------- */

.content ul.contains-task-list { list-style: none; padding-left: .1em; }
.content li.task-list-item { display: flex; gap: 9px; align-items: flex-start; }
.content li.task-list-item input[type="checkbox"] {
  flex: none;
  margin: .48em 0 0;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}
.content li.task-list-item > *:not(input) { min-width: 0; }

.content .footnotes {
  margin-top: 2.8em;
  padding-top: 1.2em;
  border-top: 1px solid var(--glass-line);
  font-size: .9em;
  color: var(--muted);
}
.content .footnotes::before { content: '脚注'; display: block; font-size: .72rem;
  letter-spacing: .8px; text-transform: uppercase; color: var(--faint); margin-bottom: .6em; }
.content .footnotes ol { padding-left: 1.25em; }
.content sup a { text-decoration: none; padding: 0 .15em; font-size: .78em; }

/* 嵌套列表的间距收一点，不然一深就散架 */
.content ul ul, .content ol ol,
.content ul ol, .content ol ul { margin-bottom: .3em; }
.content li > p { margin-bottom: .45em; }
.content li > p:last-child { margin-bottom: 0; }

/* marked 输出的表格没有外层容器，补上横向滚动 */
.content > table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  max-width: 100%;
}
.content > table th,
.content > table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.content > table th { background: var(--glass-soft); white-space: nowrap; }

/* ============================================================
   媒体库
   ============================================================ */

.med-page { padding-bottom: 40px; }

/* ---------------- 拖拽上传区 ---------------- */

.med-drop {
  position: relative;
  border: 1.5px dashed var(--glass-line);
  border-radius: 16px;
  background: var(--glass-soft);
  padding: 22px 20px;
  text-align: center;
  transition: border-color .16s, background .16s, transform .16s;
}
.med-drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.005);
}
.med-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.med-drop-inner b { font-size: .95rem; }
.med-drop-inner > span { font-size: .84rem; color: var(--muted); }
.med-drop-inner small { font-size: .72rem; color: var(--faint); line-height: 1.6; }

.med-progress {
  margin-top: 14px;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.med-progress i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 99px;
  transition: width .15s linear;
}
.med-progress span {
  display: block;
  margin-top: 8px;
  font-size: .76rem;
  color: var(--muted);
}

/* ---------------- 筛选条 ---------------- */

.med-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 10px;
}
.med-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.med-tabs button {
  border: 1px solid var(--glass-line);
  background: var(--glass-soft);
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.med-tabs button:hover { color: var(--fg); border-color: var(--glass-brd); }
.med-tabs button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px -8px var(--accent);
}
.med-tabs button span { font-size: .72rem; opacity: .75; }

.med-search {
  flex: 1;
  min-width: 160px;
  max-width: 260px;
  padding: 8px 12px;
  font: inherit;
  font-size: .84rem;
  border: 1px solid var(--glass-brd);
  border-radius: 10px;
  background: var(--glass-soft);
  color: var(--fg);
}
.med-search:focus { outline: none; border-color: var(--accent); background: var(--glass); }

.med-summary { font-size: .78rem; color: var(--faint); margin-bottom: 14px; }
.med-summary b { color: var(--fg); }

/* ---------------- 网格 ---------------- */

.med-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.med-item {
  margin: 0;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--glass-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.med-item:hover { border-color: var(--glass-brd); }

.med-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--code-bg);
  cursor: zoom-in;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.med-thumb img,
.med-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.med-play,
.med-icon {
  position: absolute;
  font-size: 1.4rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.med-play { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.med-icon { position: static; color: var(--faint); text-shadow: none; font-size: 1.8rem; }

.med-item figcaption { padding: 9px 11px 4px; min-width: 0; }
.med-item figcaption b {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.med-item figcaption small { display: block; font-size: .7rem; color: var(--faint); margin-top: 3px; }

.med-ops {
  display: flex;
  gap: 5px;
  padding: 8px 11px 11px;
  margin-top: auto;
}
.med-ops .adm-op { width: auto; min-width: 30px; padding: 0 7px; font-size: .72rem; }

.med-more { text-align: center; margin-top: 18px; }

/* ---------------- 选择器（编辑器里打开） ---------------- */

.med-picker { position: fixed; inset: 0; z-index: 330; display: flex; align-items: flex-end; }
.med-picker[hidden] { display: none; }
@media (min-width: 720px) {
  .med-picker { align-items: center; justify-content: center; padding: 40px 16px; }
}
.med-mask {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 22, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.med-box {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--glass-hi), var(--shadow-lg);
  overflow: hidden;
}
@media (min-width: 720px) { .med-box { border-radius: 20px; } }

.med-box-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-line);
}
.med-box-head b { font-size: .95rem; }
.med-box-head span { font-size: .76rem; color: var(--faint); flex: 1; }
.med-x {
  border: 0; background: none; color: var(--faint);
  font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.med-x:hover { color: var(--fg); }
.med-box-body { padding: 16px; overflow-y: auto; overscroll-behavior: contain; }

/* ============================================================
   数学公式 KaTeX
   ============================================================ */
.katex {
  font-size: 1.1em;
  line-height: 1.2;
}

.katex-display {
  margin: 1em 0;
  text-align: center;
}

/* ============================================================
   图表 Mermaid
   ============================================================ */
.mermaid {
  display: block;
  text-align: center;
  margin: 1em 0;
  background: var(--glass);
  border-radius: 8px;
  padding: 1em;
}

/* 代码块中的图表 */
pre .mermaid {
  padding: 0;
  margin: 0;
  background: transparent;
}

/* 正文框拖入文件时高亮 */
.adm-field textarea.drop-hot {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* ============================================================
   页面切换动画
   ------------------------------------------------------------
   新页面浮入。刻意不做「先淡出、再换内容」——这个 WebView 的定时器
   有节流，淡出那一段会被拉长成白屏，得不偿失。
   动画类挂在 body 上，因为 #app 的 className 会被各个视图重置，
   挂它自己身上留不住。
   ============================================================ */
body.page-enter #app {
  animation: pageIn .62s cubic-bezier(.16, .84, .44, 1) both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(20px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* 列表项依次浮入：进入动画期间生效，逐条错开 */
body.page-enter .post-item,
body.page-enter .arc-list li,
body.page-enter .tagcloud a {
  animation: itemIn .62s cubic-bezier(.16, .84, .44, 1) both;
}
body.page-enter .post-item:nth-child(1),
body.page-enter .arc-list li:nth-child(1) { animation-delay: .02s; }
body.page-enter .post-item:nth-child(2),
body.page-enter .arc-list li:nth-child(2) { animation-delay: .05s; }
body.page-enter .post-item:nth-child(3),
body.page-enter .arc-list li:nth-child(3) { animation-delay: .08s; }
body.page-enter .post-item:nth-child(4),
body.page-enter .arc-list li:nth-child(4) { animation-delay: .11s; }
body.page-enter .post-item:nth-child(5),
body.page-enter .arc-list li:nth-child(5) { animation-delay: .13s; }
body.page-enter .post-item:nth-child(n+6),
body.page-enter .arc-list li:nth-child(n+6) { animation-delay: .15s; }
body.page-enter .tagcloud a:nth-child(1) { animation-delay: .02s; }
body.page-enter .tagcloud a:nth-child(2) { animation-delay: .04s; }
body.page-enter .tagcloud a:nth-child(3) { animation-delay: .06s; }
body.page-enter .tagcloud a:nth-child(4) { animation-delay: .08s; }
body.page-enter .tagcloud a:nth-child(5) { animation-delay: .10s; }
body.page-enter .tagcloud a:nth-child(n+6) { animation-delay: .12s; }

@keyframes itemIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.page-enter #app { animation: none; }
  body.page-enter .post-item,
  body.page-enter .arc-list li,
  body.page-enter .tagcloud a { animation: none; }
}

/* ============================================================
   控制台后台
   ------------------------------------------------------------
   自成一套深色配色，不跟前台主题走 —— 后台和站点在视觉上分得开，
   进来就知道「这是控制台，不是我的博客」。
   强调色仍然取前台的 --accent，两边还是一家人。
   动画一律偏长、偏慢，用 easeOutExpo 那一类曲线，急不得。
   ============================================================ */

.con-root {
  --con-bg:      #0a0d13;
  --con-bg-2:    #0e121a;
  --con-panel:   rgba(255, 255, 255, .030);
  --con-panel-2: rgba(255, 255, 255, .052);
  --con-line:    rgba(255, 255, 255, .075);
  --con-line-2:  rgba(255, 255, 255, .042);
  --con-fg:      #e8edf7;
  --con-dim:     #8b95a8;
  --con-faint:   #5b6577;
  --con-accent:  var(--accent, #5b8cff);
  --con-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --con-ease:    cubic-bezier(.16, .84, .44, 1);
  --con-ease-2:  cubic-bezier(.22, .61, .36, 1);
}

.con-root,
.con-gate-root {
  display: block;
  max-width: none;
  padding: 0;
  margin: 0;
  background: var(--con-bg);
  color: var(--con-fg);
}

/* 底部一圈光，避免大片死黑 */
.con-glow {
  position: fixed;
  inset: auto 0 -40vh 0;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 100% at 50% 100%,
              color-mix(in srgb, var(--con-accent) 16%, transparent) 0%,
              transparent 70%);
}

.con {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
}

/* ---------------- 左栏 ---------------- */

.con-rail {
  flex: none;
  width: 218px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 18px;
  background: linear-gradient(180deg, var(--con-bg-2), var(--con-bg));
  border-right: 1px solid var(--con-line);
}

.con-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px 20px;
  font: 600 14px/1 var(--con-mono);
  letter-spacing: .04em;
  color: var(--con-fg);
}

.con-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--con-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--con-accent) 60%, transparent);
  animation: conPing 3.2s var(--con-ease-2) infinite;
}

@keyframes conPing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--con-accent) 55%, transparent); }
  60%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.con-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.con-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--con-dim);
  text-decoration: none;
  font-size: .93rem;
  transition: color .34s var(--con-ease), background .34s var(--con-ease),
              transform .34s var(--con-ease);
}

.con-nav a i {
  font: 500 10px/1 var(--con-mono);
  font-style: normal;
  color: var(--con-faint);
  transition: color .34s var(--con-ease);
}

.con-nav a:hover {
  color: var(--con-fg);
  background: var(--con-panel);
  transform: translateX(3px);
}

.con-nav a.on {
  color: var(--con-fg);
  background: var(--con-panel-2);
}

.con-nav a.on i { color: var(--con-accent); }

/* 选中项左边那条竖线，宽度从 0 长出来 */
.con-nav a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  border-radius: 2px;
  background: var(--con-accent);
  transform: translateY(-50%);
  transition: height .5s var(--con-ease);
}

.con-nav a.on::before { height: 18px; }

.con-rail-foot {
  padding: 14px 8px 0;
  border-top: 1px solid var(--con-line-2);
}

.con-who {
  font: 500 11px/1.5 var(--con-mono);
  color: var(--con-faint);
  word-break: break-all;
  margin-bottom: 9px;
}

/* ---------------- 右主区 ---------------- */

.con-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.con-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 48px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--con-bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--con-line-2);
}

.con-path {
  font: 500 12px/1 var(--con-mono);
  color: var(--con-faint);
}
.con-path b { color: var(--con-fg); font-weight: 600; }

.con-sys {
  font: 500 11px/1 var(--con-mono);
  color: var(--con-faint);
  padding: 5px 10px;
  border: 1px solid var(--con-line-2);
  border-radius: 999px;
  transition: color .5s var(--con-ease), border-color .5s var(--con-ease);
}

.con-sys.flash {
  color: var(--con-accent);
  border-color: color-mix(in srgb, var(--con-accent) 45%, transparent);
}

.con-body {
  flex: 1;
  padding: 34px 30px 96px;
  max-width: 1020px;
}

/* ---------------- 标题 ---------------- */

.con-head { margin-bottom: 26px; }
.con-head h1 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--con-fg);
}
.con-sub {
  margin: 0;
  font: 500 12px/1.6 var(--con-mono);
  color: var(--con-faint);
}

/* ---------------- 统计块 ---------------- */

.con-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 34px;
}

.con-tile {
  position: relative;
  padding: 18px 18px 16px;
  border: 1px solid var(--con-line);
  border-radius: 13px;
  background: var(--con-panel);
  overflow: hidden;
  transition: border-color .45s var(--con-ease),
              transform .45s var(--con-ease),
              background .45s var(--con-ease);
}

.con-tile::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--con-accent);
  opacity: .55;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s var(--con-ease);
}

.con-tile:hover {
  border-color: color-mix(in srgb, var(--con-accent) 34%, var(--con-line));
  background: var(--con-panel-2);
  transform: translateY(-3px);
}
.con-tile:hover::after { transform: scaleY(1); }
.con-tile[data-kind="dft"]::after { background: #e0a33e; }
.con-tile[data-kind="wrd"]::after { background: #4fd1a5; }
.con-tile[data-kind="all"]::after { background: #a78bfa; }

.con-tile b {
  display: block;
  font: 600 1.75rem/1.1 var(--con-mono);
  letter-spacing: -.02em;
  color: var(--con-fg);
  font-variant-numeric: tabular-nums;
}

.con-tile span {
  display: block;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--con-faint);
  letter-spacing: .04em;
}

/* ---------------- 小节标题 ---------------- */

.con-sec {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 14px;
}
.con-sec:first-child { margin-top: 0; }

.con-sec-t {
  font: 600 11px/1 var(--con-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--con-dim);
}

.con-sec-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--con-line), transparent);
}

.con-sec.danger .con-sec-t { color: #e06b6b; }

/* ---------------- 文章列表 ---------------- */

.con-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--con-line);
  border-radius: 13px;
  overflow: hidden;
  background: var(--con-panel);
}

.con-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--con-line-2);
  transition: background .4s var(--con-ease), padding-left .4s var(--con-ease);
}
.con-row:last-child { border-bottom: 0; }
.con-row:hover { background: var(--con-panel-2); padding-left: 21px; }
.con-row.draft { opacity: .68; }

.con-row-state {
  flex: none;
  display: flex;
  gap: 5px;
  width: 74px;
}

.con-row-state i {
  font: 600 9px/1 var(--con-mono);
  font-style: normal;
  letter-spacing: .06em;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.con-row-state .pub { color: #4fd1a5; background: rgba(79, 209, 165, .12); }
.con-row-state .dft { color: #e0a33e; background: rgba(224, 163, 62, .13); }
.con-row-state .pin { color: var(--con-accent);
  background: color-mix(in srgb, var(--con-accent) 14%, transparent); }

.con-row-main { flex: 1; min-width: 0; }

.con-row-t {
  display: block;
  color: var(--con-fg);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .3s var(--con-ease);
}
.con-row-t:hover { color: var(--con-accent); }
.con-row-t .cov { margin-right: 5px; }

.con-row-meta {
  display: block;
  margin-top: 4px;
  font: 500 11px/1.4 var(--con-mono);
  color: var(--con-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.con-row-ops {
  flex: none;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .4s var(--con-ease), transform .4s var(--con-ease);
}
.con-row:hover .con-row-ops,
.con-row:focus-within .con-row-ops {
  opacity: 1;
  transform: translateX(0);
}

.con-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--con-line-2);
  border-radius: 8px;
  background: transparent;
  color: var(--con-dim);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: color .34s var(--con-ease), border-color .34s var(--con-ease),
              background .34s var(--con-ease), transform .34s var(--con-ease);
}
.con-op:hover {
  color: var(--con-fg);
  border-color: var(--con-line);
  background: var(--con-panel-2);
  transform: translateY(-2px);
}
.con-op.danger:hover {
  color: #ff8080;
  border-color: rgba(255, 128, 128, .4);
}

/* ---------------- 卡片 ---------------- */

.con-card {
  padding: 20px 20px 18px;
  border: 1px solid var(--con-line);
  border-radius: 13px;
  background: var(--con-panel);
  margin-bottom: 14px;
}

.con-card-t {
  font-size: .95rem;
  font-weight: 600;
  color: var(--con-fg);
  margin-bottom: 6px;
}

.con-card-sub {
  margin: 0 0 14px;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--con-dim);
}

.con-card-sub code,
.con-note code {
  font: 500 11.5px/1 var(--con-mono);
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .07);
  color: var(--con-accent);
}

.con-card.danger-zone { border-color: rgba(224, 107, 107, .3); }

.con-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--con-faint);
  font-size: .9rem;
}
.con-empty a { color: var(--con-accent); }

.con-dim { color: var(--con-faint); font-size: .85rem; }

/* ---------------- 表单 ---------------- */

.con-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1080px) {
  .con-editor:has(.con-preview:not([hidden])) {
    grid-template-columns: 1fr 1fr;
  }
}

.con-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.con-field { display: block; margin-bottom: 12px; }

.con-field > span {
  display: block;
  margin-bottom: 6px;
  font: 500 11px/1 var(--con-mono);
  letter-spacing: .08em;
  color: var(--con-faint);
}

.con-field input,
.con-field textarea,
.con-code,
.con-file {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--con-line);
  border-radius: 9px;
  background: rgba(0, 0, 0, .28);
  color: var(--con-fg);
  font-size: .92rem;
  font-family: inherit;
  transition: border-color .4s var(--con-ease), box-shadow .4s var(--con-ease),
              background .4s var(--con-ease);
}

.con-field textarea { line-height: 1.65; resize: vertical; }

.con-field input:focus,
.con-field textarea:focus,
.con-code:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--con-accent) 55%, var(--con-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--con-accent) 13%, transparent);
  background: rgba(0, 0, 0, .38);
}

.con-field input::placeholder,
.con-field textarea::placeholder { color: var(--con-faint); opacity: .7; }

.con-code {
  font: 500 12px/1.6 var(--con-mono);
  resize: vertical;
}

.con-file { padding: 8px 10px; font-size: .84rem; color: var(--con-dim); }

.con-flags { display: flex; gap: 18px; margin: 4px 0 14px; }

.con-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--con-dim);
  cursor: pointer;
  transition: color .35s var(--con-ease);
}
.con-check:hover { color: var(--con-fg); }
.con-check.big { margin-bottom: 14px; }
.con-check input { width: auto; accent-color: var(--con-accent); }

.con-flex { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------------- 按钮 ---------------- */

.con-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 15px;
  border: 1px solid var(--con-line);
  border-radius: 9px;
  background: var(--con-panel);
  color: var(--con-fg);
  font-size: .88rem;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .4s var(--con-ease), border-color .4s var(--con-ease),
              transform .4s var(--con-ease), color .4s var(--con-ease);
}

.con-btn:hover {
  background: var(--con-panel-2);
  border-color: var(--con-line);
  transform: translateY(-2px);
}

.con-btn.primary {
  background: color-mix(in srgb, var(--con-accent) 88%, transparent);
  border-color: transparent;
  color: #fff;
}
.con-btn.primary:hover {
  background: var(--con-accent);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--con-accent) 70%, transparent);
}

.con-btn.danger { color: #ff9a9a; border-color: rgba(255, 128, 128, .28); }
.con-btn.danger:hover { background: rgba(255, 128, 128, .1); }

.con-btn.tiny { padding: 6px 11px; font-size: .82rem; }
.con-btn.wide { width: 100%; }
.con-btn.ghost { background: transparent; }

.con-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--con-faint);
  font-size: .85rem;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: color .35s var(--con-ease);
}
.con-link:hover { color: var(--con-accent); }

.con-form-foot {
  display: flex;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--con-line-2);
}

/* ---------------- 速查表 / 提示 ---------------- */

.con-help {
  margin-top: 8px;
  border: 1px solid var(--con-line-2);
  border-radius: 10px;
  overflow: hidden;
}
.con-help summary {
  padding: 10px 13px;
  font-size: .85rem;
  color: var(--con-dim);
  cursor: pointer;
  transition: color .35s var(--con-ease), background .35s var(--con-ease);
}
.con-help summary:hover { color: var(--con-fg); background: var(--con-panel); }
.con-help-body { padding: 4px 13px 13px; }
.con-help table { width: 100%; border-collapse: collapse; }
.con-help td {
  padding: 6px 0;
  font-size: .82rem;
  color: var(--con-dim);
  vertical-align: top;
  border-top: 1px solid var(--con-line-2);
}
.con-help td:first-child {
  width: 42%;
  font: 500 11.5px/1.5 var(--con-mono);
  color: var(--con-accent);
}

.con-note {
  margin-top: 14px;
  padding: 14px 15px;
  border: 1px solid var(--con-line-2);
  border-radius: 10px;
  background: rgba(0, 0, 0, .2);
  font-size: .85rem;
  line-height: 1.65;
  color: var(--con-dim);
}
.con-note b { color: var(--con-fg); }
.con-note ol { margin: 8px 0 0; padding-left: 20px; }
.con-note li { margin-bottom: 5px; }
.con-note p { margin: 8px 0 0; }

/* ---------------- 预览 ---------------- */

.con-preview {
  border: 1px solid var(--con-line);
  border-radius: 13px;
  background: var(--con-panel);
  overflow: hidden;
  align-self: start;
  position: sticky;
  top: 66px;
}
.con-preview-head {
  padding: 11px 15px;
  border-bottom: 1px solid var(--con-line-2);
  font: 600 10.5px/1 var(--con-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--con-faint);
}
.con-preview-body {
  padding: 18px;
  max-height: 62vh;
  overflow-y: auto;
  font-size: .92rem;
  color: var(--con-dim);
}
.con-preview-body h1,
.con-preview-body h2,
.con-preview-body h3 { color: var(--con-fg); }

.con-field textarea.drop-hot,
.con-field textarea:focus.drop-hot {
  border-color: var(--con-accent);
  background: color-mix(in srgb, var(--con-accent) 8%, rgba(0, 0, 0, .28));
}

/* ---------------- 门禁 ---------------- */

.con-gate-root {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(70% 60% at 50% 0%,
      color-mix(in srgb, var(--accent, #5b8cff) 12%, transparent), transparent 70%),
    #0a0d13;
}

.con-gate-card {
  width: 100%;
  max-width: 430px;
  padding: 34px 30px 30px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .028);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: center;
  animation: conRise .85s cubic-bezier(.16, .84, .44, 1) both;
}

.con-gate-icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--accent, #5b8cff);
}

.con-gate-card h1 {
  margin: 0 0 8px;
  font-size: 1.22rem;
  font-weight: 600;
  color: #e8edf7;
}

.con-gate-sub {
  margin: 0 0 20px;
  font-size: .88rem;
  line-height: 1.7;
  color: #8b95a8;
}

.con-gate-card .con-note { text-align: left; }
.con-gate-card .con-btn,
.con-gate-card .con-link { font-family: inherit; }
.con-gate-card .con-link { color: #5b6577; }
.con-gate-card .con-link:hover { color: var(--accent, #5b8cff); }

/* 「核对中」的三个点 */
.con-gate-dots { display: flex; justify-content: center; gap: 7px; }
.con-gate-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  color: var(--accent, #5b8cff);
  animation: conBlink 1.5s ease-in-out infinite;
}
.con-gate-dots i:nth-child(2) { animation-delay: .22s; }
.con-gate-dots i:nth-child(3) { animation-delay: .44s; }

@keyframes conBlink {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* ---------------- 提示条 ---------------- */

.con-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 90;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(16, 20, 28, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #e8edf7;
  font-size: .86rem;
  white-space: nowrap;
  max-width: 88vw;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translate(-50%, 22px);
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.16, .84, .44, 1),
              transform .55s cubic-bezier(.16, .84, .44, 1);
}
.con-toast.show { opacity: 1; transform: translate(-50%, 0); }
.con-toast.ok  { border-color: rgba(79, 209, 165, .4); color: #8ff0cb; }
.con-toast.err { border-color: rgba(255, 128, 128, .4); color: #ffb0b0; }

/* ============================================================
   动画：一律偏长，走 expo-out，收尾拖得长一点才有质感
   ============================================================ */

@keyframes conRise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes conSlideIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 内容区：每次换页逐块浮上来 */
.con-body.con-in > * {
  animation: conRise .82s var(--con-ease) both;
}
.con-body.con-in > *:nth-child(1) { animation-delay: 0s; }
.con-body.con-in > *:nth-child(2) { animation-delay: .07s; }
.con-body.con-in > *:nth-child(3) { animation-delay: .13s; }
.con-body.con-in > *:nth-child(4) { animation-delay: .18s; }
.con-body.con-in > *:nth-child(5) { animation-delay: .23s; }
.con-body.con-in > *:nth-child(6) { animation-delay: .27s; }
.con-body.con-in > *:nth-child(n+7) { animation-delay: .30s; }

/* 列表行再逐条错开一层 */
.con-body.con-in .con-row {
  animation: conRise .7s var(--con-ease) both;
}
.con-body.con-in .con-row:nth-child(1) { animation-delay: .10s; }
.con-body.con-in .con-row:nth-child(2) { animation-delay: .15s; }
.con-body.con-in .con-row:nth-child(3) { animation-delay: .20s; }
.con-body.con-in .con-row:nth-child(4) { animation-delay: .24s; }
.con-body.con-in .con-row:nth-child(5) { animation-delay: .28s; }
.con-body.con-in .con-row:nth-child(n+6) { animation-delay: .31s; }

/* 左栏：挂载时滑进来 */
.con-nav a { animation: conSlideIn .72s var(--con-ease) both; }
.con-nav a:nth-child(1) { animation-delay: .06s; }
.con-nav a:nth-child(2) { animation-delay: .11s; }
.con-nav a:nth-child(3) { animation-delay: .16s; }
.con-nav a:nth-child(4) { animation-delay: .21s; }
.con-nav a:nth-child(5) { animation-delay: .26s; }
.con-nav a:nth-child(6) { animation-delay: .31s; }

.con-brand { animation: conRise .8s var(--con-ease) both; }
.con-rail-foot { animation: conRise .9s var(--con-ease) .2s both; }

/* 统计块再晚半拍，和数字滚动对上 */
.con-body.con-in .con-tile {
  animation: conRise .9s var(--con-ease) both;
}
.con-body.con-in .con-tile:nth-child(1) { animation-delay: .12s; }
.con-body.con-in .con-tile:nth-child(2) { animation-delay: .19s; }
.con-body.con-in .con-tile:nth-child(3) { animation-delay: .26s; }
.con-body.con-in .con-tile:nth-child(4) { animation-delay: .33s; }

/* ---------------- 窄屏 ---------------- */

@media (max-width: 900px) {
  .con { flex-direction: column; }

  .con-rail {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
    column-gap: 12px;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--con-line);
  }

  .con-brand { padding: 0; flex: none; order: 1; animation: none; }
  .con-brand-t { display: block; }

  .con-rail-foot {
    order: 2;
    margin-left: auto;
    flex: none;
    padding: 0;
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: none;
  }
  .con-who { display: none; }

  .con-nav {
    order: 3;
    flex: 0 0 100%;      /* flex:1 会盖掉 width，必须用 flex-basis 顶开一整行 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .con-nav a {
    justify-content: center;
    padding: 9px 6px;
    white-space: nowrap;
    font-size: .86rem;
  }
  .con-nav a i { display: none; }
  .con-nav a::before { display: none; }

  .con-body { padding: 24px 18px 80px; }
  .con-bar { padding: 0 18px; }
  .con-path { display: none; }
  .con-tiles { grid-template-columns: repeat(2, 1fr); }
  .con-duo { grid-template-columns: 1fr; }
  .con-row-state { width: 58px; }
  .con-row-ops { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .con-root *, .con-gate-root * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .con-toast { transition: opacity .01ms; }
}

/* ============================================================
   控制台模式：把前台的外壳全部收起来
   app.js 的 paintPage() 会按路由挂 body.con-mode
   ============================================================ */
body.con-mode {
  background: #0a0d13;
}

body.con-mode .site-header,
body.con-mode .site-footer,
body.con-mode .progress,
body.con-mode .to-top {
  display: none !important;
}

/* #app 平时是 .wrap（有最大宽度和内边距），控制台要铺满 */
body.con-mode #app.wrap {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* 控制台里滚动条也换成深色 */
body.con-mode {
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
body.con-mode ::-webkit-scrollbar-track { background: transparent; }
body.con-mode ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
}

/* ============================================================
   快速发布
   ============================================================ */

.con-quick-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--con-line-2);
}

.con-quick-info {
  flex: 1;
  min-width: 140px;
  font: 500 11.5px/1.4 var(--con-mono);
  color: var(--con-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   用户管理
   ============================================================ */

.con-user {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--con-line-2);
  transition: background .4s var(--con-ease);
}
.con-user:last-child { border-bottom: 0; }
.con-user:hover { background: var(--con-panel-2); }
.con-user.off { opacity: .55; }

.con-user-av {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 13px/1 var(--con-mono);
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--con-accent) 90%, transparent),
    color-mix(in srgb, var(--con-accent) 45%, #000));
}

.con-user-main { flex: 1; min-width: 0; }
.con-user-main b {
  display: block;
  font-size: .93rem;
  font-weight: 500;
  color: var(--con-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.con-you {
  font: 600 9px/1 var(--con-mono);
  font-style: normal;
  letter-spacing: .06em;
  padding: 3px 5px;
  border-radius: 4px;
  color: var(--con-accent);
  background: color-mix(in srgb, var(--con-accent) 15%, transparent);
  vertical-align: 1px;
}

.con-user-mail,
.con-user-meta {
  display: block;
  font: 500 11px/1.5 var(--con-mono);
  color: var(--con-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.con-user-role {
  flex: none;
  font: 600 10px/1 var(--con-mono);
  letter-spacing: .06em;
  padding: 5px 9px;
  border-radius: 6px;
}
.con-user-role.admin {
  color: var(--con-accent);
  background: color-mix(in srgb, var(--con-accent) 14%, transparent);
}
.con-user-role.author {
  color: #9aa5b8;
  background: rgba(255, 255, 255, .06);
}

.con-user-ops {
  flex: none;
  display: flex;
  gap: 5px;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .4s var(--con-ease), transform .4s var(--con-ease);
}
.con-user:hover .con-user-ops,
.con-user:focus-within .con-user-ops { opacity: 1; transform: none; }

.con-user-ops .con-op {
  width: auto;
  padding: 0 9px;
  font-size: 11.5px;
  height: 28px;
}

@media (max-width: 900px) {
  .con-user-ops { opacity: 1; transform: none; flex-wrap: wrap; justify-content: flex-end; }
  .con-quick-info { width: 100%; flex: none; }
}

/* ============================================================
   编辑器工具栏（图形化）
   ============================================================ */

.con-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 7px 8px;
  border: 1px solid var(--con-line);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: rgba(0, 0, 0, .18);
}

.con-tools button {
  min-width: 30px;
  height: 29px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--con-dim);
  font: 500 13px/1 var(--con-mono);
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s var(--con-ease), background .3s var(--con-ease),
              border-color .3s var(--con-ease);
}
.con-tools button:hover {
  color: var(--con-fg);
  background: var(--con-panel-2);
  border-color: var(--con-line);
}
.con-tools button:active { transform: scale(.94); }

.con-tools-sep {
  width: 1px;
  height: 18px;
  margin: 0 3px;
  background: var(--con-line);
}

/* 工具栏和正文输入框贴在一起 */
.con-tools + textarea {
  border-radius: 0 0 9px 9px !important;
}

/* ============================================================
   我的资料
   ============================================================ */

.con-me {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  flex-wrap: wrap;
}

.con-avatar {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 34px/1 var(--con-mono);
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--con-accent) 90%, transparent),
    color-mix(in srgb, var(--con-accent) 40%, #000));
  border: 1px solid var(--con-line);
}
.con-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.con-me-main { flex: 1; min-width: 220px; }
.con-me-main .con-field { margin-bottom: 6px; }

/* ============================================================
   顶栏头像与下拉菜单
   ============================================================ */

.account-chip .who { cursor: pointer; }

.account-chip .av.has-img {
  background-size: cover;
  background-position: center;
  color: transparent;
}

.auth-menu {
  position: fixed;
  z-index: 260;
  min-width: 218px;
  padding: 6px;
  border-radius: 14px;
  background: var(--glass-strong, #fff);
  border: 1px solid var(--glass-brd, rgba(0, 0, 0, .1));
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .45);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  transition: opacity .32s cubic-bezier(.16, .84, .44, 1),
              transform .38s cubic-bezier(.16, .84, .44, 1),
              visibility .38s;
}
.auth-menu.on { opacity: 1; visibility: visible; transform: none; }

.auth-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--glass-brd, rgba(0, 0, 0, .08));
  margin-bottom: 5px;
}
.auth-menu-head:empty { display: none; }
.auth-menu-head .av {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
}
.auth-menu-head .av.has-img { background-size: cover; background-position: center; }
.auth-menu-head span { min-width: 0; }
.auth-menu-head b {
  display: block;
  font-size: .88rem;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-menu-head i {
  display: block;
  font-style: normal;
  font-size: .74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-menu a,
.auth-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: .88rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--con-ease, ease), color .3s var(--con-ease, ease);
}
.auth-menu a:hover,
.auth-menu button:hover { background: var(--glass-soft, rgba(0, 0, 0, .05)); }

.auth-menu a b {
  flex: 1;
  font-weight: 500;
}
.auth-menu a span {
  font-size: .74rem;
  color: var(--muted);
}
.auth-menu button:last-child { color: #d9534f; }
.auth-menu button:last-child:hover { background: rgba(217, 83, 79, .1); }

/* ============================================================
   评论管理
   ============================================================ */

.con-cm {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--con-line-2);
  transition: background .4s var(--con-ease);
}
.con-cm:last-child { border-bottom: 0; }
.con-cm:hover { background: var(--con-panel-2); }

.con-cm-av {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1 var(--con-mono);
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--con-accent) 85%, transparent),
    color-mix(in srgb, var(--con-accent) 40%, #000));
}

.con-cm-main { flex: 1; min-width: 0; }

.con-cm-main b {
  display: block;
  font-size: .9rem;
  font-weight: 500;
  color: var(--con-fg);
}

.con-cm-post {
  display: block;
  margin-top: 2px;
  font: 500 10.5px/1.5 var(--con-mono);
  color: var(--con-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.con-cm-body {
  display: block;
  margin-top: 7px;
  font-size: .87rem;
  line-height: 1.7;
  color: var(--con-dim);
  max-height: 5.2em;
  overflow: hidden;
}

.con-cm-ops {
  flex: none;
  display: flex;
  gap: 5px;
  align-items: flex-start;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .4s var(--con-ease), transform .4s var(--con-ease);
}
.con-cm:hover .con-cm-ops,
.con-cm:focus-within .con-cm-ops { opacity: 1; transform: none; }

.con-cm-ops .con-op {
  width: auto;
  padding: 0 9px;
  font-size: 11.5px;
  height: 28px;
}

@media (max-width: 900px) {
  .con-cm-ops { opacity: 1; transform: none; flex-direction: column; }
}

/* ============================================================
   溢出修正
   ------------------------------------------------------------
   宽图表、长公式、宽表格在窄屏上原本会被直接裁掉 —— 因为容器
   没开滚动，内容又比容器宽。这里统一给「可能超宽」的块加横向滚动
   （只在需要时出现滚动条，不影响正常排版）。
   ============================================================ */

/* 流程图 / 时序图：按原尺寸画，宽了就横向滚。
   别给 svg 加 max-width:100% —— 那会把五步的流程图缩成一条看不清字的细线，
   比裁掉更糟。 */
.mermaid {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.mermaid svg {
  height: auto;
  display: block;
  margin: 0 auto;
  max-width: none;
}

/* 块级公式：一长串推导在手机上会超出屏幕 */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 6px;
  -webkit-overflow-scrolling: touch;
}
.katex-display > .katex { white-space: nowrap; }

/* 图片/视频/嵌页：一律不许撑破容器 */
.content img,
.content video,
.content audio,
.content iframe,
.content svg {
  max-width: 100%;
}
.content video,
.content iframe {
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto 1.5em;
}

/* 宽表格：自己的横向滚动条，别把整个页面撑宽 */
.content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 长链接、长单词不许撑破行 */
.content p,
.content li,
.content td,
.cm-body,
.con-cm-body {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 控制台里的预览同理 */
.con-preview-body .mermaid,
.con-preview-body .katex-display { overflow-x: auto; }
.con-preview-body table { display: block; overflow-x: auto; }

/* ============================================================
   邮箱未验证的提示条（挂在控制台内容区顶部）
   ============================================================ */
.con-warn {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 34px;
  background: rgba(255, 178, 76, .09);
  border-bottom: 1px solid rgba(255, 178, 76, .25);
  color: #ffca7a;
  font-size: .86rem;
}
.con-warn[hidden] { display: none; }
.con-warn .con-btn { flex: none; }

/* 用户列表里的「已验证 / 未验证」小标记 */
.con-user-ok,
.con-user-no {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 500;
  font-style: normal;
  vertical-align: 1px;
}
.con-user-ok { background: rgba(79, 209, 165, .16); color: #6fe0b6; }
.con-user-no { background: rgba(255, 178, 76, .16); color: #ffca7a; }

@media (max-width: 900px) {
  .con-warn { padding: 11px 18px; }
}

/* ---------------- 第三方通知面板 ---------------- */

.con-select {
  padding: 9px 12px;
  border: 1px solid var(--con-line);
  border-radius: 9px;
  background: rgba(0, 0, 0, .28);
  color: var(--con-fg);
  font-size: .88rem;
  font-family: inherit;
  cursor: pointer;
}

.con-subcard {
  padding: 14px;
  border: 1px solid var(--con-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .18);
  margin-bottom: 10px;
}

.con-check.small { margin-right: 10px; font-size: .82rem; }
.con-check.small input { width: auto; accent-color: var(--con-accent); }