/* ============================================================
   Flutter / Material Design 3 主题  —  cathi-theme-flutter
   设计语言：Google Flutter 的 Material Design 3 标准
   - 字体 Roboto（中文回退 思源黑体 / 苹方 / 微软雅黑）
   - 圆角：卡片/输入框 16px，按钮 20px（胶囊，M3 标准）
   - 浅色：冷调浅底 + 白卡 + Flutter 蓝 #0175C2 顶栏/重音
   - 深色：M3 dark #1C1B1F 体系 + 分层阴影
   深浅由 Flarum 的 data-theme 属性切换（桥接脚本已注入）。
   ============================================================ */
:root {
  --md-primary: #0175C2;
  --md-primary-hover: #0A84D8;
  --md-primary-press: #0A5C99;
  --md-on-primary: #FFFFFF;

  --primary-color: #0175C2;
  --secondary-color: #13B9FD;
  --accent-color: #0175C2;
  --danger-color: #B3261E;

  --body-bg: #F5F9FD;
  --body-bg-light: #FFFFFF;
  --body-bg-shaded: #EEF3F8;
  --body-bg-faded: rgba(245, 249, 253, 0.92);
  --body-bg-fade-70: rgba(245, 249, 253, 0.7);

  --text-color: #1A1C1E;
  --text-color-fade-70: rgba(26, 28, 30, 0.7);
  --heading-color: #1A1C1E;
  --muted-color: #5C6166;
  --muted-color-light: #90969C;
  --muted-color-dark: #1A1C1E;

  --link-color: #0175C2;
  --discussion-title-color: #1A1C1E;

  --control-bg: #FFFFFF;
  --control-bg-light: #FFFFFF;
  --control-bg-shaded: #EEF3F8;
  --control-bg-darken-5: #E3EAF1;
  --control-bg-darken-10: #D7E0E9;
  --control-color: #1A1C1E;
  --control-muted-color: #5C6166;

  --form-control-bg: #FFFFFF;
  --form-control-color: #1A1C1E;

  --button-bg: #FFFFFF;
  --button-color: #1A1C1E;
  --button-primary-bg: #0175C2;
  --button-primary-color: #FFFFFF;
  --on-primary-color: #FFFFFF;

  --header-bg: #0175C2;
  --header-color: #FFFFFF;
  --header-control-bg: rgba(255, 255, 255, 0.16);
  --header-control-color: #FFFFFF;

  --hero-bg: #E3F2FD;
  --hero-color: #1A1C1E;

  --usercard-bg: #FFFFFF;

  --code-bg: #1E1E1E;
  --code-color: #E6E6E6;

  --tag-bg: #0175C2;
  --tag-color: #FFFFFF;

  --pill-bg: #EEF3F8;

  --overlay-bg: rgba(0, 0, 0, 0.4);
  --tooltip-bg: #1A1C1E;
  --tooltip-color: #FFFFFF;

  --alert-bg: #E3F2FD;
  --alert-color: #1A1C1E;
  --alert-success-bg: #E6F4EA;
  --alert-success-color: #1A1C1E;
  --alert-error-bg: #FCE8E6;
  --alert-error-color: #1A1C1E;

  --discussion-list-item-bg-hover: #EEF3F8;

  --shadow-color: rgba(0, 0, 0, 0.10);
  --shadow-color-darken-5: rgba(0, 0, 0, 0.16);

  --border-radius: 16px;
  --border-radius-rounded: 20px;
  --border-radius-circle: 999px;

  --highlight-color: rgba(1, 117, 194, 0.24);
  --loading-indicator-color: #0175C2;
  --online-user-circle-color: #2E7D32;
  --switch-on-color: #0175C2;
  --switch-off-color: #C5C9CE;
}

[data-theme^="dark"] {
  --primary-color: #7FC4FF;
  --secondary-color: #7FC4FF;
  --accent-color: #7FC4FF;
  --danger-color: #F0B0AC;

  --body-bg: #1C1B1F;
  --body-bg-light: #2B2930;
  --body-bg-shaded: #2B2930;
  --body-bg-faded: rgba(28, 27, 31, 0.92);
  --body-bg-fade-70: rgba(28, 27, 31, 0.7);

  --text-color: #E6E1E5;
  --text-color-fade-70: rgba(230, 225, 229, 0.7);
  --heading-color: #E6E1E5;
  --muted-color: #CAC4D0;
  --muted-color-light: #938F99;

  --link-color: #7FC4FF;
  --discussion-title-color: #E6E1E5;

  --control-bg: #2B2930;
  --control-bg-light: #322F37;
  --control-bg-shaded: #211F26;
  --control-bg-darken-5: #211F26;
  --control-bg-darken-10: #1B1A1F;
  --control-color: #E6E1E5;
  --control-muted-color: #CAC4D0;

  --form-control-bg: #2B2930;
  --form-control-color: #E6E1E5;

  --button-bg: #322F37;
  --button-color: #E6E1E5;
  --button-primary-bg: #0175C2;
  --button-primary-color: #FFFFFF;

  --header-bg: #0A5A99;
  --header-color: #FFFFFF;
  --header-control-bg: rgba(255, 255, 255, 0.14);
  --header-control-color: #FFFFFF;

  --hero-bg: #0E3A5F;
  --hero-color: #FFFFFF;

  --usercard-bg: #2B2930;

  --code-bg: #000000;
  --code-color: #E6E6E6;

  --tag-bg: #0175C2;
  --tag-color: #FFFFFF;

  --pill-bg: #322F37;

  --overlay-bg: rgba(0, 0, 0, 0.6);
  --tooltip-bg: #322F37;
  --tooltip-color: #E6E1E5;

  --alert-bg: #322F37;
  --alert-color: #E6E1E5;
  --alert-success-bg: #1E3A24;
  --alert-success-color: #A8E6B0;
  --alert-error-bg: #3A1C1C;
  --alert-error-color: #F0B0AC;

  --discussion-list-item-bg-hover: #322F37;

  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-color-darken-5: rgba(0, 0, 0, 0.5);

  --highlight-color: rgba(127, 196, 255, 0.3);
  --switch-off-color: #5A5A5A;
}

.dark,
html.dark,
body.dark {
  --primary-color: #7FC4FF;
  --secondary-color: #7FC4FF;
  --accent-color: #7FC4FF;
  --body-bg: #1C1B1F;
  --body-bg-light: #2B2930;
  --body-bg-shaded: #2B2930;
  --body-bg-faded: rgba(28, 27, 31, 0.92);
  --body-bg-fade-70: rgba(28, 27, 31, 0.7);
  --text-color: #E6E1E5;
  --text-color-fade-70: rgba(230, 225, 229, 0.7);
  --heading-color: #E6E1E5;
  --muted-color: #CAC4D0;
  --muted-color-light: #938F99;
  --link-color: #7FC4FF;
  --discussion-title-color: #E6E1E5;
  --control-bg: #2B2930;
  --control-bg-light: #322F37;
  --control-bg-shaded: #211F26;
  --control-bg-darken-5: #211F26;
  --control-bg-darken-10: #1B1A1F;
  --control-color: #E6E1E5;
  --form-control-bg: #2B2930;
  --form-control-color: #E6E1E5;
  --button-bg: #322F37;
  --button-color: #E6E1E5;
  --button-primary-bg: #0175C2;
  --button-primary-color: #FFFFFF;
  --header-bg: #0A5A99;
  --header-color: #FFFFFF;
  --header-control-bg: rgba(255, 255, 255, 0.14);
  --header-control-color: #FFFFFF;
  --hero-bg: #0E3A5F;
  --hero-color: #FFFFFF;
  --usercard-bg: #2B2930;
  --code-bg: #000000;
  --code-color: #E6E6E6;
  --tag-bg: #0175C2;
  --tag-color: #FFFFFF;
  --pill-bg: #322F37;
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --tooltip-bg: #322F37;
  --tooltip-color: #E6E1E5;
  --alert-bg: #322F37;
  --alert-color: #E6E1E5;
  --discussion-list-item-bg-hover: #322F37;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-color-darken-5: rgba(0, 0, 0, 0.5);
  --highlight-color: rgba(127, 196, 255, 0.3);
  --switch-off-color: #5A5A5A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-color: #7FC4FF;
    --body-bg: #1C1B1F;
    --body-bg-light: #2B2930;
    --body-bg-shaded: #2B2930;
    --body-bg-faded: rgba(28, 27, 31, 0.92);
    --text-color: #E6E1E5;
    --text-color-fade-70: rgba(230, 225, 229, 0.7);
    --heading-color: #E6E1E5;
    --muted-color: #CAC4D0;
    --muted-color-light: #938F99;
    --link-color: #7FC4FF;
    --discussion-title-color: #E6E1E5;
    --control-bg: #2B2930;
    --control-bg-light: #322F37;
    --control-bg-shaded: #211F26;
    --control-color: #E6E1E5;
    --form-control-bg: #2B2930;
    --form-control-color: #E6E1E5;
    --button-bg: #322F37;
    --button-color: #E6E1E5;
    --button-primary-bg: #0175C2;
    --button-primary-color: #FFFFFF;
    --header-bg: #0A5A99;
    --header-color: #FFFFFF;
    --usercard-bg: #2B2930;
    --code-bg: #000000;
    --tag-bg: #0175C2;
    --tag-color: #FFFFFF;
    --pill-bg: #322F37;
    --discussion-list-item-bg-hover: #322F37;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --highlight-color: rgba(127, 196, 255, 0.3);
  }
}

/* ---------- 基础排版 ---------- */
body {
  font-family: "Roboto", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 400;
  color: var(--text-color);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--body-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.Button,
.Header-title,
.item-title,
.Hero-title,
.DiscussionListItem-title {
  font-family: "Roboto", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.006em;
}

a,
a:link {
  color: var(--link-color);
}
a:hover {
  color: var(--md-primary-hover);
}

::selection {
  background: var(--highlight-color);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--md-primary) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--md-primary) 45%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--md-primary);
  background-clip: padding-box;
}

/* ---------- 顶栏 App-header（M3 彩色顶栏 App Bar） ---------- */
.App-header {
  background: var(--header-bg);
  color: var(--header-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
  border-bottom: none;
}
.Header-title a,
.Header-title a:link {
  color: var(--header-color);
  font-weight: 600;
}
.Header .Navigation-item a,
.Header .Navigation-item .Button {
  color: var(--header-color);
  border-radius: 999px;
  position: relative;
  transition: background-color 0.12s ease;
}
.Header .Navigation-item a:hover,
.Header .Navigation-item .Button:hover {
  background: rgba(255, 255, 255, 0.12);
}
.Header .Navigation-item.active a,
.Header .Navigation-item.active .Button {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}
.Header .Search-input {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  border: 1px solid transparent;
  overflow: hidden;
}
.Header .Search-input:focus-within {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
}
.Header .Search-input input {
  background: transparent;
  color: #FFFFFF;
}
.Header .Search-input input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.Header-secondary .Button,
.Header-secondary .Button:hover {
  color: var(--header-color);
}

/* ---------- 按钮（M3 胶囊按钮 + 分层阴影） ---------- */
.Button {
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--control-bg-darken-10);
  background: var(--button-bg);
  color: var(--button-color);
  box-shadow: 0 1px 2px var(--shadow-color);
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.Button:hover:not(:disabled) {
  background: var(--control-bg-shaded);
  box-shadow: 0 2px 6px var(--shadow-color);
}
.Button:active:not(:disabled) {
  background: var(--control-bg-darken-10);
  box-shadow: 0 1px 2px var(--shadow-color-darken-5);
}
.Button--primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-color);
  box-shadow: 0 2px 6px var(--shadow-color);
}
.Button--primary:hover:not(:disabled) {
  background: var(--md-primary-hover);
  border-color: var(--md-primary-hover);
  box-shadow: 0 4px 10px var(--shadow-color);
}
.Button--primary:active:not(:disabled) {
  background: var(--md-primary-press);
  border-color: var(--md-primary-press);
}
.Button--danger {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: #fff;
}
.Button--danger:hover:not(:disabled) {
  filter: brightness(1.08);
}
.Button--flat {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.Button--flat:hover:not(:disabled) {
  background: var(--control-bg-shaded);
}

/* ---------- 卡片 / 面板（16px 圆角 + 分层阴影） ---------- */
.Hero,
.Dropdown-menu,
.Post,
.DiscussionListItem,
.Notification,
.Alert,
.Modal,
.UserCard,
.card,
.FofWidgets-Widget {
  border-radius: var(--border-radius);
}
.Hero {
  background: var(--hero-bg);
  color: var(--hero-color);
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
}
.Hero .Hero-title,
.Hero h2 {
  color: var(--hero-color);
}
.Hero-close.Button--icon {
  color: var(--hero-color);
}
.Alert {
  background: var(--alert-bg);
  color: var(--alert-color);
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}
.Alert--success {
  background: var(--alert-success-bg);
  color: var(--alert-success-color);
}
.Alert--error {
  background: var(--alert-error-bg);
  color: var(--alert-error-color);
}

/* ---------- 讨论列表项 ---------- */
.DiscussionListItem {
  background: var(--control-bg);
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px var(--shadow-color);
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
.DiscussionListItem:hover {
  background: var(--discussion-list-item-bg-hover);
  box-shadow: 0 3px 8px var(--shadow-color);
  transform: translateY(-1px);
}
.DiscussionListItem-title {
  color: var(--discussion-title-color);
  font-weight: 600;
}
.DiscussionListItem:hover .DiscussionListItem-title {
  color: var(--md-primary);
}
.DiscussionListItem-info {
  color: var(--muted-color);
}
.DiscussionListItem-count {
  color: var(--muted-color);
}
.DiscussionListItem--selected {
  background: var(--discussion-list-item-bg-hover);
  box-shadow: inset 4px 0 0 var(--md-primary), 0 1px 2px var(--shadow-color);
}
.DiscussionListItem--unread .DiscussionListItem-count {
  color: var(--md-primary);
  font-weight: 700;
}
.DiscussionListItem--unread {
  box-shadow: inset 4px 0 0 var(--md-primary), 0 1px 2px var(--shadow-color);
}
.DiscussionListItem--sticky {
  background: color-mix(in srgb, var(--md-primary) 6%, var(--control-bg));
}
.DiscussionListItem--sticky .DiscussionListItem-count {
  color: var(--md-primary);
}

/* ---------- 帖子 ---------- */
.Post {
  background: var(--control-bg);
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  box-shadow: 0 1px 2px var(--shadow-color);
}
.Post-body {
  color: var(--text-color);
  line-height: 1.65;
}
.Post-body li {
  line-height: 1.65;
}

/* ---------- 头像 ---------- */
.Avatar {
  border-radius: var(--border-radius-circle);
  box-shadow: 0 0 0 2px var(--control-bg), 0 0 0 3px color-mix(in srgb, var(--text-color) 10%, transparent);
}

/* ---------- 徽章 / 标签 ---------- */
.Badge {
  border-radius: 999px;
  background: var(--control-bg-shaded);
  color: var(--muted-color);
}
.TagLabel,
.TagLabel--colored {
  border-radius: 999px;
}
.TagsLabel .TagLabel {
  background: var(--tag-bg);
  color: var(--tag-color);
}

/* ---------- 下拉菜单 ---------- */
.Dropdown-menu {
  background: var(--control-bg);
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  box-shadow: 0 8px 24px var(--shadow-color);
  overflow: hidden;
}
.Dropdown-menu > li > a {
  color: var(--text-color);
}
.Dropdown-menu > li > a:hover {
  background: var(--control-bg-shaded);
}
.Dropdown-menu > li.active > a {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-primary);
}

/* ---------- 输入框 / 编辑器 ---------- */
.FormControl,
.Composer .FormControl,
.Composer textarea {
  background: var(--form-control-bg);
  color: var(--form-control-color);
  border: 1px solid var(--control-bg-darken-10);
  border-radius: 12px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.FormControl:focus,
.Composer .FormControl:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
  outline: none;
}
.Composer {
  background: var(--control-bg);
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius: var(--border-radius);
  box-shadow: 0 -4px 16px var(--shadow-color);
}

/* ---------- 模态框 ---------- */
.Modal {
  background: var(--control-bg);
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
}
.Modal-header {
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}
.Modal-header h3 {
  color: var(--heading-color);
}
.Modal-footer {
  border-top: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}

/* ---------- 通知 ---------- */
.NotificationList,
.Notification {
  background: var(--control-bg);
}
.Notification:hover {
  background: var(--discussion-list-item-bg-hover);
}
.Notification.unread {
  background: color-mix(in srgb, var(--md-primary) 10%, var(--control-bg));
}
.NotificationGroup-header {
  color: var(--muted-color);
}

/* ---------- 开关 / Checkbox ---------- */
.Checkbox.Checkbox--switch .Checkbox-display {
  background: var(--switch-off-color);
  border-radius: 999px;
}
.Checkbox.on .Checkbox-display {
  background: var(--switch-on-color);
}

/* ---------- 代码块 ---------- */
code,
pre {
  background: var(--code-bg);
  color: var(--code-color);
  border-radius: 8px;
}

/* ---------- 工具提示 ---------- */
.Tooltip,
.tooltip {
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  border-radius: 8px;
}

/* ---------- 加载指示 ---------- */
.LoadingIndicator .fa,
.LoadingIndicator .icon {
  color: var(--loading-indicator-color);
}

/* ---------- 小组件点缀 ---------- */
.FofWidgets-Widget {
  background: var(--control-bg);
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  padding: 14px;
  box-shadow: 0 1px 2px var(--shadow-color);
}
.FofWidgets-Widget-title {
  color: var(--heading-color);
  font-weight: 600;
}
.OnlineUsersWidget a:hover {
  color: var(--md-primary);
}

/* ==== CATHI-COMPAT-BEGIN ==== */
/* 兼容层前置 token：由 _legacy_patch.py 从本主题调色板派生 */
:root {
  --primary: #0175C2;
  --primary-hover: #0A84D8;
  --primary-press: #0A5C99;
  --elev-color: rgba(0,0,0,0.10);
  --elev-color-2: rgba(0,0,0,0.16);
  --elev-1: 0 1px 2px var(--elev-color);
  --elev-2: 0 4px 12px var(--elev-color);
  --elev-3: 0 12px 32px var(--elev-color-2);
  --bd: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --btn-radius: var(--border-radius-rounded);
  --blur-header: none;
  --motion: .2s cubic-bezier(.2,0,0,1);
  --content-max: 1200px;
  --heading-track: normal;
  --font: "Roboto","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-heading: "Roboto","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono: "JetBrains Mono","Cascadia Code",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
[data-theme^="dark"] {
  --primary: #7FC4FF;
  --primary-hover: color-mix(in srgb, #7FC4FF 82%, #fff);
  --primary-press: color-mix(in srgb, #7FC4FF 82%, #000);
  --elev-color: rgba(0,0,0,0.55);
  --elev-color-2: rgba(0,0,0,0.70);
  --elev-1: 0 1px 2px var(--elev-color);
  --elev-2: 0 4px 12px var(--elev-color);
  --elev-3: 0 12px 32px var(--elev-color-2);
  --bd: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --btn-radius: var(--border-radius-rounded);
  --blur-header: none;
  --motion: .2s cubic-bezier(.2,0,0,1);
  --content-max: 1200px;
  --heading-track: normal;
  --font: "Roboto","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-heading: "Roboto","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono: "JetBrains Mono","Cascadia Code",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ============================================================
   论坛兼容层 —— 对齐「猫猫岛(cozy)」主题的兼容深度
   ------------------------------------------------------------
   分两部分：
   A. 结构兼容：与配色无关的布局/交互修复。cozy 长期踩坑沉淀，
      换任何主题都必须保留，否则功能会坏（菜单被遮、标题被挤、
      多图只显示一张、编辑器按钮错位……）。
   B. 区块补齐：把 cozy 覆盖而通用样式缺的区块（帖子流、正文排版、
      搜索、弹层、标签、Hero、页脚、空态、编辑器、挂件……）补上，
      全部用主题 token 驱动，不写死任何颜色。
   ============================================================ */

/* ============================================================
   A. 结构兼容（跨主题必须保留）
   ============================================================ */

/* --- A1. 下拉菜单遮挡：Flarum 菜单「点击打开、不随鼠标移开关闭」，
        鼠标离开卡片后 :hover 失效，菜单会被下一张卡片盖住 --- */
.DiscussionListItem,
.Post { position: relative; z-index: 1; }
.DiscussionListItem:hover,
.Post:hover { z-index: 10; }
.DiscussionListItem:has(.Dropdown.open),
.Post:has(.Dropdown.open) { z-index: 20; }

/* --- A2. 三点菜单：固定在卡片右内边缘、常显，避免 hover 遮挡与 stats 重叠 --- */
.DiscussionListItem-content { padding-right: 64px !important; }
.DiscussionListItem-controls {
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  z-index: 10 !important;
  width: 24px !important;
  display: flex !important;
  justify-content: flex-end !important;
}
.DiscussionListItem-controls .Dropdown-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.DiscussionListItem-controls .Dropdown-menu {
  margin-top: 6px !important;
  z-index: 1000 !important;
}
/* 按钮与菜单间补一段透明热区，鼠标跨越间隙时不丢 hover */
.DiscussionListItem-controls .Dropdown-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 12px !important;
  background: transparent !important;
}

/* --- A3. tags 扩展「浮动标签」把标题 margin-right 挤压、把 stats 绝对定位
        （扩展会把它们挤成横排导致数字重叠）——改回正常流 --- */
.DiscussionListItem-title,
.UserPage .DiscussionListItem-title,
.DiscussionList--floatingTags .DiscussionListItem-title {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.DiscussionListItem-main { padding-right: 0 !important; min-width: 0; }
.DiscussionListItem-info > .item-tags,
.DiscussionList--floatingTags .DiscussionListItem-info > .item-tags {
  position: static !important;
  right: auto !important;
  top: auto !important;
  max-width: none !important;
  -webkit-mask-image: none !important;
  margin-right: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
}
.DiscussionListItem-stats,
.DiscussionList--floatingTags .DiscussionListItem-stats {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin-top: 0 !important;
}
.DiscussionListItem-stats-item {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.DiscussionListItem-info .item-excerpt {
  margin-right: 0 !important;
  max-width: none !important;
  flex-basis: 100%;
  width: 100%;
}

/* --- A4. 头像旁的 Bootstrap tooltip（width:max-content）会盖住卡片标题区。
        卡片本身已显示作者名 + 时间，悬停 tooltip 冗余且挡视线 --- */
.DiscussionListItem-author-avatar + .tooltip,
.DiscussionListItem-info .tooltip { display: none !important; }

/* --- A5. fancybox 多图画廊：让 Carousel 所有 slide 平铺显示，
        同时保留 .f-carousel__viewport 元素（display:contents 会破坏
        fancybox 事件绑定与点击放大） --- */
.fancybox-gallery.f-carousel { display: block !important; margin: 1.2em 0; }
.fancybox-gallery.f-carousel .f-carousel__viewport {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  transform: none !important;
  overflow: visible !important;
}
.fancybox-gallery.f-carousel .f-carousel__slide {
  position: relative !important;
  grid-area: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fancybox-gallery.f-carousel .f-carousel__slide a { display: block !important; }
.fancybox-gallery.f-carousel .f-carousel__slide img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-md);
  border: var(--bd);
  box-shadow: var(--elev-2);
}

/* --- A6. 编辑器 Composer：标题独占一行、工具栏左 / 发布按钮右下 --- */
.ComposerBody-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
}
.ComposerBody-header > li {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 0 !important;
}
.ComposerBody-header > li.item-title { width: 100% !important; margin-top: 6px !important; }
.ComposerBody-editor { margin-top: 12px; }
.TextEditor-controls.Composer-footer,
.TextEditor-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
  padding-right: 0 !important;
}
.TextEditor-controls .App-primaryControl,
.TextEditor-controls .item-submit { order: 2; margin-left: auto; margin-right: 0 !important; }
.TextEditor-controls .TextEditor-toolbar { order: 1; flex: 1; }

/* --- A7. 页脚：核心是条纯白/深灰硬边，收边并跟随主题 --- */
.App-footer,
body > footer {
  background: var(--body-bg) !important;
  color: var(--muted-color) !important;
  border-top: var(--bd) !important;
  padding: 12px 20px !important;
}
.App-footer:empty { display: none !important; }
/* 自定义页脚（后台 custom_footer 注入的 HTML）常常自带
   `<style>footer{background:#f2f2f2;padding:20px}</style>` —— 那种元素选择器
   会连 Flarum 自己的页脚一起染成硬编码浅色，深色模式下就是一条刺眼的白带。
   这里用更高特异性 + !important 把它拉回主题色（覆盖其内联 <style>）。 */
footer:not([class]),
.App > footer,
.App-footer > footer {
  background: var(--body-bg) !important;
  color: var(--muted-color) !important;
}
footer:not([class]) a,
.App-footer > footer a { color: var(--link-color) !important; }

/* ============================================================
   B. 区块补齐（变量驱动，随设计语言变化）
   ============================================================ */

/* --- B1. 帖子流与正文排版 --- */
.PostStream { border-radius: var(--radius-lg); }
.Post-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-color);
}
.Post-body p { margin: 0 0 1em; }
.PostStream-item + .PostStream-item { border-top: var(--bd); }
.PostStream-empty,
.DiscussionList-empty,
.EmptyState { color: var(--muted-color); }
.Post--highlighted,
.Post.highlight { background: var(--highlight-color) !important; }
.Post-meta,
.Post-header .item-meta { color: var(--muted-color); }
.PostUser h3 a,
.PostUser h3 a:link { color: var(--heading-color); font-weight: 700; }
.PostMention,
.UserMention {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--link-color);
  border-radius: var(--radius-pill);
  padding: .1em .55em;
  font-weight: 700;
  text-decoration: none;
}
.PostMention:hover,
.UserMention:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.PostStream-timeGap span,
.Post-mergeTooltip {
  background: var(--pill-bg);
  border-radius: var(--radius-pill);
  color: var(--muted-color);
  font-weight: 700;
}
.PostStreamScrubber-scrollbar { border-radius: var(--radius-pill); }
.PostStreamScrubber-bar { background: color-mix(in srgb, var(--primary) 18%, transparent); border-radius: var(--radius-pill); }
.PostStreamScrubber-handle {
  border-radius: var(--radius-sm);
  background: var(--control-bg-light);
  border: var(--bd);
  box-shadow: var(--elev-2);
}
.Post-footer .Button,
.Post-controls .Button,
.PostStream-loadMore .Button {
  border-radius: var(--radius-pill);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted-color);
  font-weight: 600;
}
.Post-footer .Button:hover,
.Post-controls .Button:hover,
.PostStream-loadMore .Button:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--link-color);
  border-color: transparent;
}

/* 正文元素 */
.Post-body blockquote {
  border-left: 3px solid var(--primary);
  background: var(--body-bg-shaded);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1em 0;
  padding: .6em 1em;
  color: var(--muted-color-dark);
}
.Post-body pre,
.Post-body code,
pre code {
  background: var(--code-bg);
  color: var(--code-color);
  border-radius: var(--radius-sm);
}
.Post-body pre {
  padding: 12px 14px;
  overflow-x: auto;
  line-height: 1.62;
  border: var(--bd);
}
.Post-body kbd {
  font-family: var(--font-mono, var(--font));
  background: var(--body-bg-shaded);
  border: var(--bd);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: .1em .45em;
  font-size: .86em;
}
.Post-body hr { margin: 1.8em 0; border: none; border-top: 2px dashed color-mix(in srgb, var(--text-color) 18%, transparent); }
.Post-body img,
.Post-body video {
  max-width: 100%;
  border-radius: var(--radius-md);
  border: var(--bd);
  box-shadow: var(--elev-1);
}
.Post-body img.emoji,
.Post-body .emoji {
  border: none;
  box-shadow: none;
  border-radius: 0;
  vertical-align: -.18em;
}
.Post-body table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.Post-body th,
.Post-body td { border: var(--bd); padding: 8px 12px; }
.Post-body th { background: var(--body-bg-shaded); font-weight: 700; color: var(--heading-color); }
.Post-body ul,
.Post-body ol { padding-left: 1.4em; }
.Post-body li { margin: .25em 0; }

/* --- B2. 搜索 --- */
.SearchResults {
  background: var(--control-bg-light);
  border: var(--bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  overflow: hidden;
}
.SearchResults li > a {
  border-radius: var(--radius-xs);
  margin: 1px 5px;
  font-weight: 600;
}
.SearchResults li > a:hover,
.SearchResults li > a:focus {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--link-color);
}
.Header .Search input,
.Search-input .FormControl { background: transparent; }
.Search--focused .FormControl,
.Search-input .FormControl:focus { border-color: var(--primary); }

/* --- B3. 下拉 / 弹层 / 模态 / 提示 --- */
.Dropdown-menu,
.Popover-content,
.Modal-content {
  background: var(--control-bg-light);
  border: var(--bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  overflow: hidden;
}
.Dropdown-menu > li > a,
.Dropdown-menu > li > button {
  border-radius: var(--radius-xs);
  margin: 1px 5px;
  font-weight: 600;
  transition: background-color var(--motion), color var(--motion);
}
.Dropdown-menu > li > a:hover,
.Dropdown-menu > li > button:hover,
.Dropdown-menu > li.active > a {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--link-color);
}
.Modal-header {
  border-bottom: var(--bd);
  background: var(--body-bg-shaded);
}
.Modal-header h3 { font-weight: 700; color: var(--heading-color); }
.Modal-footer { border-top: var(--bd); background: var(--body-bg-shaded); }
.Modal-close .Button { border-radius: var(--radius-pill); }
.Tooltip-inner,
.tooltip-inner {
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  border-radius: var(--radius-xs);
  font-weight: 600;
  padding: 6px 10px;
}

/* --- B4. 标签 / 徽章 --- */
.TagLabel,
.Tag {
  border-radius: var(--radius-pill);
  font-weight: 700;
}
/* 原生彩色标签饱和度过高，压进当前表面保证可读 */
.TagLabel.colored {
  background: color-mix(in srgb, var(--tag-bg) 20%, var(--control-bg)) !important;
  color: var(--heading-color) !important;
  border: 1px solid color-mix(in srgb, var(--tag-bg) 32%, transparent) !important;
  box-shadow: none !important;
}
.TagIcon {
  --icon-muted: color-mix(in srgb, var(--color, currentColor) 55%, var(--control-bg));
  background: var(--icon-muted) !important;
  color: var(--icon-muted) !important;
}
.TagTile {
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  transition: transform var(--motion), box-shadow var(--motion);
}
.TagTile:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
.Badge {
  border: 2px solid var(--control-bg-light);
  box-shadow: var(--elev-1);
  border-radius: var(--radius-sm);
}
.Badge--sticky {
  background: var(--primary) !important;
  color: var(--button-primary-color) !important;
}

/* --- B5. Hero 变体（标签页 / 欢迎栏） --- */
.WelcomeHero,
.TagHero {
  background: var(--hero-bg) !important;
  color: var(--hero-color) !important;
  border: var(--bd);
  border-radius: var(--radius-lg);
}
.Hero-title { font-weight: 700; color: var(--hero-color); }
.Hero-subtitle { color: color-mix(in srgb, var(--hero-color) 72%, transparent); }
.Hero-close .Button { border-radius: var(--radius-pill); color: var(--hero-color); }

/* --- B6. 侧栏挂件 --- */
.WidgetsContainer .Widget,
.Widget-content,
.item-widget,
.FofWidgets-Widget-content {
  border-radius: var(--radius-lg);
  border: var(--bd);
}
.Widget-title,
.Widget-header,
.FofWidgets-Widget-title {
  font-weight: 700;
  color: var(--heading-color);
}
.FoF-NewsWidget-line { border-radius: var(--radius-sm); }
.FoF-NewsWidget-line--current {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: var(--radius-sm);
}

/* --- B7. 用户页 / 通知 --- */
.UserPage .Post,
.NotificationList,
.UserCard--popover { border-radius: var(--radius-lg); }
/* 注：.UserCard 内部布局与装饰由 cathi-linkage 名片系统负责，此处只做容器级圆角 */
.UserCard--popover { box-shadow: var(--elev-3); }
.UserCard .username { font-weight: 800; }
.NotificationList-header,
.NotificationGroup-header {
  background: var(--body-bg-shaded);
  font-weight: 700;
  color: var(--heading-color);
}
.Notification.unread { background: color-mix(in srgb, var(--primary) 10%, var(--control-bg)); }

/* --- B8. 表单 / 按钮变体 --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
select,
textarea { border-radius: var(--radius-sm); }
.Checkbox-display { border-radius: var(--radius-xs); }
.Checkbox.on .Checkbox-display { background: var(--primary); border-color: var(--primary); }
.Button--link,
.Button--icon,
.Button--flat {
  border-radius: var(--radius-pill);
}
.Button--link { color: var(--link-color); }
.Button--link:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.Button-badge {
  background: var(--primary) !important;
  color: var(--button-primary-color) !important;
}
.Composer-controls .Button,
.item-newDiscussion .Button,
.IndexPage-newDiscussion .Button { border-radius: var(--radius-pill); }
.Composer-header .FormControl { font-weight: 700; }
.TextEditor-toolbar > li > .Button {
  border-radius: var(--radius-xs);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.TextEditor-toolbar > li > .Button:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: transparent;
}

/* --- B9. 侧边导航 / 索引导航 --- */
.IndexPage-nav .Dropdown-menu,
.App-nav .Dropdown-menu { border-radius: var(--radius-lg); }
.item-nav .Dropdown-menu > li > a,
.sideNavOffset .Dropdown-menu > li > a {
  border-radius: var(--radius-xs);
  margin: 1px 5px;
  font-weight: 600;
}
.item-nav .Dropdown-menu > li > a:hover,
.sideNavOffset .Dropdown-menu > li > a:hover,
.item-nav .Dropdown-menu > li.active > a {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--link-color);
}

/* --- B10. 键盘焦点可见性（各主题色但保持可辨识） --- */
a:focus-visible,
button:focus-visible,
.Button:focus-visible,
.FormControl:focus-visible,
.Dropdown-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============================================================
   C. 响应式与无障碍（沿用 cozy 的处理）
   ============================================================ */
@media (max-width: 767px) {
  .DiscussionListItem { margin-bottom: 8px; padding: 0; }
  .DiscussionListItem-content { padding: 12px 48px 12px 16px !important; }
  .DiscussionListItem-author { margin-right: 0 !important; align-self: flex-start !important; }
  .PostStream { border-radius: var(--radius-md); padding: 2px 14px; border-left: none; border-right: none; }
  .Post-body { font-size: 15.5px; line-height: 1.78; }
  .Hero,
  .WelcomeHero,
  .TagHero { border-radius: var(--radius-lg); }
  .App-drawer .Dropdown-menu { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}
@media (min-width: 1100px) {
  .Post-body { font-size: 16.5px; line-height: 1.85; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  .App-header,
  .App-footer,
  .Composer,
  .Post-controls,
  .DiscussionListItem-controls { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}
/* ==== CATHI-COMPAT-END ==== */