/* AC Pro UI 设计系统 v1 — 全局换肤(docs/design/ui-refresh.md §2/§3)
   通过 ui-default.footer_extra_html 以 <link> 注入,加载于 ui-default 之后。
   覆盖策略(2026-08-14 主题感知改版):
   - 全局元素换肤规则一律 `html.theme--light body X` 选择器,只在亮色主题生效;
     暗色主题(theme--dark)交还核心 dark.styl,不再与之特异性打架
     (此前 `body a{color:#3b5bfd}` 在暗色下把链接刷成深底上的品牌蓝,看不清;
     部分标题又被核心 dark 刷成灰白,造成"标题一会蓝一会白")。
   - mc-* 自研组件全部走 var(--mc-*) 令牌;令牌在 :root 给亮色值,
     `html.theme--dark` 下整体重映射为暗色值,组件随之自动适配暗色。
   - 不用 !important;只覆盖外观,不动 row/columns 栅格与页面结构。 */

/* ===== §2 设计令牌(亮色) ===== */
:root {
  /* 主色:品牌蓝紫 */
  --mc-primary: #3b5bfd;
  --mc-primary-hover: #2f49d1;
  --mc-primary-soft: #eef1ff;
  --mc-primary-text: #ffffff;

  /* 功能色 */
  --mc-success: #16a34a;
  --mc-warning: #d97706;
  --mc-danger:  #dc2626;
  --mc-gold:    #f59e0b;

  /* 中性色(冷灰) */
  --mc-bg:        #f6f7f9;
  --mc-card:      #ffffff;
  --mc-text:      #1f2329;
  --mc-text-2:    #646a73;
  --mc-text-3:    #8f959e;
  --mc-border:    #e5e7eb;
  --mc-border-soft: #eff0f1;

  /* 阴影 */
  --mc-shadow-sm: 0 1px 2px rgba(31,35,41,.04), 0 1px 3px rgba(31,35,41,.06);
  --mc-shadow-md: 0 2px 8px rgba(31,35,41,.06), 0 4px 16px rgba(31,35,41,.06);
  --mc-shadow-lg: 0 4px 12px rgba(31,35,41,.08), 0 8px 24px rgba(31,35,41,.08);

  /* 圆角 */
  --mc-radius-sm: 8px;
  --mc-radius:    12px;
  --mc-radius-lg: 16px;
  --mc-radius-pill: 999px;

  /* 过渡 */
  --mc-ease: all .18s ease;

  /* 补充令牌:规范 §3 给出具体字面值、且多处复用的色值,集中在此定义 */
  --mc-primary-glow: rgba(59, 91, 253, .1);   /* 表单 focus 外发光(主色 10%) */
  --mc-primary-glow-hover: rgba(59, 91, 253, .14); /* 标签 hover 浅底 */
  --mc-success-soft: rgba(22, 163, 74, .1);
  --mc-gold-soft: rgba(245, 158, 11, .12);
  --mc-row-hover: #fafbfc;                    /* 表格行 hover 浅底 */
  --mc-scrollbar-thumb: #d0d3d9;              /* 滚动条滑块 */
}

/* ===== §2.1 设计令牌(暗色重映射) =====
   只改令牌值,不改任何组件规则;mc-* 组件与下方少量双主题规则自动适配。
   色值对齐核心 dark.styl 的底色体系(#121212 / #323334),主色提亮保证对比度。 */
html.theme--dark {
  --mc-primary: #7c9aff;
  --mc-primary-hover: #9db4ff;
  --mc-primary-soft: rgba(124, 154, 255, .16);
  --mc-primary-text: #ffffff;

  --mc-success: #4ade80;
  --mc-warning: #fbbf24;
  --mc-danger:  #f87171;
  --mc-gold:    #fbbf24;

  --mc-bg:        #121212;
  --mc-card:      #1e1f20;
  --mc-text:      #eee;
  --mc-text-2:    #bdbdbd;
  --mc-text-3:    #8a8f98;
  --mc-border:    #323334;
  --mc-border-soft: #2a2b2c;

  --mc-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --mc-shadow-md: 0 2px 8px rgba(0,0,0,.35);
  --mc-shadow-lg: 0 4px 12px rgba(0,0,0,.4);

  --mc-primary-glow: rgba(124, 154, 255, .22);
  --mc-primary-glow-hover: rgba(124, 154, 255, .24);
  --mc-success-soft: rgba(74, 222, 128, .14);
  --mc-gold-soft: rgba(251, 191, 36, .14);
  --mc-row-hover: #242526;
  --mc-scrollbar-thumb: #4a4b4d;
}

/* ===== §3 全局换肤(仅亮色主题) ===== */

/* --- 页面背景(Hydro 的页面底色挂在 #panel 上) ---
   浅渐变 + topography 低透明度纹理(heropatterns.com,CC BY 4.0,已本地托管),
   消除大面积死白;fixed 附着,滚动时纹理不动,更有质感。 */
html.theme--light body {
  color: var(--mc-text);
}
html.theme--light body #panel {
  background-color: var(--mc-bg);
  background-image: url('/mc-brand/bg-topography.svg'),
    linear-gradient(180deg, #f8f9fc 0%, var(--mc-bg) 420px);
  background-size: 600px, 100% 100%;
  background-attachment: fixed, scroll;
  /* 短内容页面把页脚推到底部,减少下方空洞 */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 52px);
}
/* --- 沉浸式布局页(登录/注册/找回密码/退出登录/sudo 等,layout--immersive) ---
   核心这组页面是「深蓝背景图 + 白字」(misc/immersive.styl);上面的浅底换肤
   会把背景刷白,白字直接隐形(2026-08-29 线上事故:/login 表单完全看不见)。
   这里把背景与页脚还给核心口径;暗色主题本就走核心 dark.styl,不受影响。 */
html.theme--light.layout--immersive body #panel {
  background: #80b2d5 url('/misc/immersive-background.jpg') no-repeat;
  background-size: cover;
}
html.theme--light.layout--immersive body .footer {
  background: none;
  border-top: none;
  color: #fff;
}
html.theme--light.layout--immersive body .footer a,
html.theme--light.layout--immersive body .footer a:hover {
  color: #fff;
}

/* flex 推底对两种主题都有益,且无颜色语义,暗色同样适用 */
body #panel > .main {
  flex: 1 0 auto;
}
body #panel > .footer {
  flex-shrink: 0;
}

/* --- .section 卡片:白卡 16px 圆角 + 轻投影 + 无边框,间距 20px(仅亮色;暗色用核心 dark.styl) --- */
html.theme--light body .section {
  border: none;
  border-radius: var(--mc-radius-lg);
  background: var(--mc-card);
  box-shadow: var(--mc-shadow-sm);
  margin-bottom: 20px;
}
html.theme--light body .section__title {
  color: var(--mc-text);
}
html.theme--light body .section__list__item,
html.theme--light body .section__footer {
  border-color: var(--mc-border-soft);
}

/* --- 顶部导航 .nav:白底 + 底部 1px 边 + 轻投影;pill 式当前页高亮(仅亮色) --- */
html.theme--light body .nav {
  background: var(--mc-card);
  border-bottom: 1px solid var(--mc-border);
  box-shadow: var(--mc-shadow-sm);
}
/* 默认主题的独立投影元素投影过重,已由 .nav 自身轻投影替代 */
html.theme--light body .nav--shadow {
  box-shadow: none;
}
html.theme--light body .nav .nav__item {
  color: var(--mc-text-2);
  border-top-color: transparent;
  transition: var(--mc-ease);
}
/* 去掉默认主题高亮时的顶部发光条 */
html.theme--light body .nav .nav__item::before {
  box-shadow: none;
}
html.theme--light body .nav .nav__item:hover {
  color: var(--mc-text);
  background: transparent;
  border-top-color: transparent;
}
/* 当前页:pill 浅底 + 主色文字(垂直内缩 8px 形成胶囊) */
html.theme--light body .nav .nav__item.nav--active,
html.theme--light body .nav .nav__item.nav--active:hover {
  color: var(--mc-primary);
  background: var(--mc-primary-soft);
  border-color: transparent;
  border-radius: var(--mc-radius-pill);
  margin: 8px 2px;
  padding: 0 14px;
  line-height: 26px;
}
/* 导航右侧圆角按钮项(登录/注册):主色描边胶囊 */
html.theme--light body .nav .nav__item--round,
html.theme--light body .nav .nav__item--round:visited,
html.theme--light body .nav .nav__item--round:active {
  border: 1px solid var(--mc-primary);
  color: var(--mc-primary);
  background: transparent;
}
html.theme--light body .nav .nav__item--round:hover {
  background: var(--mc-primary);
  color: var(--mc-primary-text);
  border-color: var(--mc-primary);
}

/* --- 按钮 .button:pill 圆角 + 微交互(仅亮色) --- */
html.theme--light body .button {
  height: auto;
  padding: 8px 18px;
  line-height: 1.5;
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-pill);
  background: var(--mc-card);
  color: var(--mc-text);
  box-shadow: none;
  transition: var(--mc-ease);
}
html.theme--light body .button:hover {
  background: var(--mc-bg);
  border-color: var(--mc-border);
  color: var(--mc-text);
}
html.theme--light body .button.primary {
  background: var(--mc-primary);
  border-color: var(--mc-primary);
  color: var(--mc-primary-text);
  box-shadow: var(--mc-shadow-sm);
}
html.theme--light body .button.primary:hover {
  background: var(--mc-primary-hover);
  border-color: var(--mc-primary-hover);
  color: var(--mc-primary-text);
  transform: translateY(-1px);
  box-shadow: var(--mc-shadow-md);
}

/* --- 表格 .data-table:去竖线/斑马纹,细横线 + 行 hover 浅底(仅亮色) --- */
html.theme--light body .data-table thead > tr {
  border: none;
  border-bottom: 1px solid var(--mc-border);
}
html.theme--light body .data-table thead > tr > th {
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mc-text-3);
}
html.theme--light body .data-table > tbody > tr,
html.theme--light body .data-table > tbody > tr:nth-child(even) {
  background: transparent;
  border: none;
  border-top: 1px solid var(--mc-border-soft);
}
html.theme--light body .data-table > tbody > tr:first-child {
  border-top: none;
}
html.theme--light body .data-table > tbody > tr:hover {
  background: var(--mc-row-hover);
}
html.theme--light body .data-table > tbody > tr > td {
  height: 44px;
  padding: 6px 10px;
}

/* --- 表单 .textbox:8px 圆角,focus 主色边框 + 主色外发光(仅亮色) --- */
html.theme--light body input.textbox,
html.theme--light body textarea.textbox,
html.theme--light body select.textbox {
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-sm);
  transition: var(--mc-ease);
}
html.theme--light body input.textbox:focus,
html.theme--light body textarea.textbox:focus,
html.theme--light body select.textbox:focus {
  border-color: var(--mc-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--mc-primary-glow);
}
html.theme--light body label {
  color: var(--mc-text-2);
}

/* --- 标签:pill 浅底 + 主色文字,无边框(仅亮色) --- */
html.theme--light body .problem__tag-item {
  border: none;
  border-radius: var(--mc-radius-pill);
  background: var(--mc-primary-soft);
  color: var(--mc-primary);
}
html.theme--light body .problem__tag-item.interactive:hover {
  background: var(--mc-primary-glow-hover);
  color: var(--mc-primary);
}
html.theme--light body .problem__tag-link {
  border-radius: var(--mc-radius-pill);
  background: var(--mc-primary-soft);
  color: var(--mc-primary);
}
html.theme--light body .problem__tag-link:hover {
  background: var(--mc-primary);
  color: var(--mc-primary-text);
}

/* --- 页脚 .footer(仅亮色) --- */
html.theme--light body .footer {
  border-top: 1px solid var(--mc-border);
  color: var(--mc-text-3);
}
html.theme--light body .footer a {
  color: var(--mc-text-3);
}
html.theme--light body .footer a:hover {
  color: var(--mc-primary);
  text-decoration: none;
}

/* --- 链接 a:主色,hover 加深,去下划线(仅亮色;暗色用核心 dark.styl 的 #bdbdbd/accent) --- */
html.theme--light body a,
html.theme--light body .link,
html.theme--light body .typo a,
html.theme--light body .typo .link {
  color: var(--mc-primary);
  text-decoration: none;
  transition: var(--mc-ease);
}
html.theme--light body a:hover,
html.theme--light body .link:hover,
html.theme--light body .typo a:hover,
html.theme--light body .typo .link:hover {
  color: var(--mc-primary-hover);
  text-decoration: none;
}

/* ===== 双主题规则(颜色一律走令牌,亮暗自动适配) ===== */

/* 讨论列表标题:统一正文色,hover 才显示主色。
   修复"标题一会蓝一会白":亮色下它曾被 `body a` 刷蓝,暗色下被核心 dark.styl 刷灰白,
   现在两种主题都稳定为正文色(令牌已按主题重映射)。特异性 (0,2,2) 压过
   `html.theme--light body a` (0,1,3) 与 `.theme--dark a` (0,1,1)。 */
html body .discussion__list .discussion__title a {
  color: var(--mc-text);
  text-decoration: none;
}
html body .discussion__list .discussion__title a:hover {
  color: var(--mc-primary);
}

/* --- 滚动条(webkit):8px,滑块圆角(双主题,走令牌) --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--mc-scrollbar-thumb);
  border-radius: var(--mc-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mc-text-3);
}

/* ===== 布局/功能性隐藏(无颜色语义,双主题通用) ===== */

/* --- 窄屏隐藏 Hydro 全局搜索悬浮按钮(.omnibar-toggle) ---
   Hydro 全局搜索按钮 fixed 定位于右下角、z-index 高(实测窄屏压在闯关页/训练页内容上);
   搜索已可通过导航栏入口进入,窄屏(≤640px)隐藏不损失功能,宽屏保持原样。 */
@media (max-width: 640px) {
  .omnibar-toggle {
    display: none;
  }
}