/* ============================================================
   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);
}