/* ============================================================
   珅泽OJ 品牌层
   ------------------------------------------------------------
   在主题样式之后加载（引用点：doj-frontend/templates/layout/html5.html），
   只做两件事：换掉那套一眼能认出出处的配色和形状，把观感做扎实一点。

   ⚠ 选择器全部带 `html` 前缀，不是手滑。
   主题样式在页面里出现**两次**：一次是 <link>（在本文件之前），
   一次是主 bundle 在运行时自己注入的 <style>（在本文件之后）。
   后注入的那份会把这里所有同权重的规则原样盖回去 —— 表现是「刷新后好了一瞬间又变回去」。
   加个 `html`（权重 +1）就稳稳压住，比满屏 !important 干净。
   新加规则时照做；只有确实需要压过更高权重的地方才写 !important。

   其它规矩：
     · 颜色一律走下面的 token，别在规则里散写十六进制 —— 站点有亮/暗两套主题，
       写死深浅必然在其中一套里瞎掉。
     · 顶栏高度别超过 70px。上游导航脚本里的判定基准就是 70，
       顶栏那一行超过 70px 就会被判成「放不下」，开始把导航项往它自己的「更多」里塞。
   ============================================================ */

:root {
  --sz-brand: #c0282d;          /* 印章红。就是站标 brand-logo.png 的笔画色，采样取众数得到 */
  --sz-brand-strong: #9e1f24;   /* hover / active */
  --sz-brand-soft: rgba(192, 40, 45, .1);
  --sz-surface: #fff;           /* 卡片底 */
  --sz-page: #f4f5f7;           /* 页面底 */
  --sz-line: rgba(23, 26, 33, .1);
  --sz-shadow: 0 1px 2px rgba(23, 26, 33, .05), 0 8px 24px -12px rgba(23, 26, 33, .18);
  --sz-radius: 6px;
  --sz-content-width: 1560px;   /* 内容区上限，见「内容宽度」一节 */

  /* 下面这批是 2026-08-08 的「组件现代化」加的，用法见文件末尾那一大节 */
  --sz-radius-sm: 4px;          /* 输入框、标签、菜单项 */
  --sz-radius-lg: 10px;         /* 弹层、大块 */
  --sz-line-soft: rgba(23, 26, 33, .06);    /* 表格行分隔这种「不该被看见」的线 */
  --sz-line-strong: rgba(23, 26, 33, .18);  /* 输入框边框这种「要摸得到」的线 */
  --sz-text: #171a21;           /* 正文 */
  --sz-text-dim: #5c6270;       /* 次要信息：表头、说明、时间。白底 6.11:1 */
  /* 更弱：占位、空状态、禁用。白底 4.75:1 —— **刚好过 WCAG AA 的 4.5，不能再淡**。
     原值 #8b909c 只有 3.20:1，用户三次反馈「亮色下这个字看不清」都是它
     （空等级、题数计数、输入框 placeholder、个人主页小字都吃这个令牌）。
     「弱」是靠和正文 17.41:1 / dim 6.11:1 的**层次差**表达的，不是靠压到看不见。 */
  --sz-text-faint: #6e737e;
  --sz-hover: rgba(23, 26, 33, .04);        /* 行/菜单项悬停底 */
  --sz-head: rgba(23, 26, 33, .015);        /* 表头底 */

  /* 「实心块 + 白字」专用底色（2026-08-09 加），别拿 --sz-brand 顶替。
     --sz-brand 是给**文字 / 边框 / 下划线**用的，它要在页面底色上显眼；
     反过来当色块、上面压白字时，同一个值就不够深了：
       亮色 #c0282d 对白字只有 5.86:1 —— 过 AA，但 12~13px 的小字实测发糊，
         用户反馈「框是暗红、字看着是黑的」就是这个；
       暗色 #e15a60 更糟，3.60:1 直接不达标，hover 的 #f07a80 才 2.69:1。
     所以另开一组，两套主题都压到 6:1 以上（亮色 7.4、暗色 5.9）。
     用在哪：注册按钮、primary 按钮、分页当前页、菜单选中项、题库切换器选中项……
     凡是「底是品牌色、字是白的」都用它。 */
  --sz-brand-solid: #a52028;
  --sz-brand-solid-hover: #8c1a21;
}
/* 主页卡片少，铺开就散，收窄一档。写在 html.page--homepage 上（layout/html5.html 把
   page_name 挂在 <html> 的 class 里），改的是变量，顶栏/页脚跟着一起收，不会错位。 */
html.page--homepage { --sz-content-width: 1200px; }
html.theme--dark {
  --sz-brand: #e15a60;          /* 暗底上纯正的印章红发闷，提亮一档 */
  --sz-brand-strong: #f07a80;
  --sz-brand-soft: rgba(225, 90, 96, .14);
  --sz-surface: #1c1d1f;
  --sz-page: #121212;
  --sz-line: rgba(255, 255, 255, .09);
  --sz-shadow: none;

  --sz-line-soft: rgba(255, 255, 255, .055);
  --sz-line-strong: rgba(255, 255, 255, .16);
  --sz-text: #e8e9ec;
  --sz-text-dim: #a2a7b2;
  /* 暗底(#1c1d1f) 4.69:1。原值 #767b86 只有 3.97 —— 暗色这边同样不达标，
     只是暗底压白字比亮底压黑字耐看，所以先被反馈的是亮色。两边要一起修，
     否则下次有人切到暗色又会踩一遍。 */
  --sz-text-faint: #828793;
  --sz-hover: rgba(255, 255, 255, .045);
  --sz-head: rgba(255, 255, 255, .02);

  /* 暗色下这两个值**不能跟着 --sz-brand 一起提亮**：提亮是为了让红字在深底上看得清，
     而色块是反过来的——底越亮，上面的白字越糊。这里比亮色主题略亮一点点（要在深色页面上
     还看得出是个块），但仍保证对白字 5.9:1。 */
  --sz-brand-solid: #b8323a;
  --sz-brand-solid-hover: #c93f47;
}

/* ---------- 内容宽度 ---------- */
/* 上游把 .row 卡在 980px(≥1000px 视口) / 1200px(≥1280px 视口)，宽屏上两侧空太多，
   题库、评测记录这类宽表格挤得难看。2026-08-08 放宽到 1560px，并给顶层 row 一圈边距，
   窗口更窄时先吃掉边距、再开始压内容，不会贴边。
   主页例外：它就是几张卡片，铺到 1560px 会散架，仍按 1200px 收着。
   padding 只给顶层 row —— 上游的 .row .row 已是 max-width:none，嵌套的再加就层层内缩。 */
html .row { max-width: var(--sz-content-width); }
html .nav > .row,
html .footer > .row,
html .main > .row,
html .header--mobile > .row { padding-left: 24px; padding-right: 24px; }
/* 断点跟上游对齐（breakpoints.json: mobile=600），别自己另立一个 ——
   两套断点错开的区间里会出现「一半样式按手机、一半按桌面」 */
@media only screen and (max-width: 600px) {
  html .nav > .row,
  html .footer > .row,
  html .main > .row,
  html .header--mobile > .row { padding-left: 12px; padding-right: 12px; }
}

/* ---------- 页面底色 ---------- */
html body { background-color: var(--sz-page); }

/* ---------- 顶栏 ---------- */
html .nav {
  height: 64px;
  background: var(--sz-surface);
  border-bottom: 1px solid var(--sz-line);
  box-shadow: none;
}
html.theme--dark .nav { background: #191a1c; }
html .nav__list--main > .nav__list-item { height: 64px; }
html .nav .nav__item {
  height: 64px; line-height: 64px;
  padding: 0 16px; margin: 0 2px;
  font-size: 15px; letter-spacing: .2px;
  border: 0; border-radius: 0;
  transition: color .15s;
}
html .nav .nav__item:hover { background: transparent; color: var(--sz-brand); }
/* 选中态：上游是顶部一条粉色发光条，换成底部一根品牌色短线 —— 安静，也不撞脸 */
html .nav .nav__item:before { display: none; }
html .nav .nav--active {
  color: var(--sz-brand);
  border-color: transparent;
  font-weight: 600;
  position: relative;
}
html .nav .nav--active:after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0;
  height: 2px; background: var(--sz-brand); border-radius: 2px 2px 0 0;
}
html .nav__item--round {
  height: 36px; line-height: 36px; margin-top: 14px;
  background: var(--sz-brand-solid); border-color: var(--sz-brand-solid);
  border-radius: 18px; padding: 0 18px;
}
html .nav__item--round:hover { background: var(--sz-brand-solid-hover); }

/* ---------- 站标 ---------- */
/* 2026-08-08 起只有印章图，没有字。图比原来大一档（36→40px）—— 少了旁边那两个字，
   原尺寸在 64px 高的顶栏里显得空。 */
html .sz-logo {
  display: flex; align-items: center;
  height: 64px; padding: 0 18px 0 0;
  text-decoration: none;
}
html .sz-logo:hover { text-decoration: none; }
html .sz-logo__img { height: 40px; width: auto; display: block; }

/* ---------- 卡片 ---------- */
html .section {
  background: var(--sz-surface);
  border: 1px solid var(--sz-line);
  border-radius: var(--sz-radius);
  box-shadow: var(--sz-shadow);
  overflow: hidden;
}
html .section__header { border-bottom: 1px solid var(--sz-line); }
html .section__title { color: inherit; font-weight: 600; }

/* ---------- 按钮 ---------- */
html .button, html button.rounded, html .rounded.button {
  border-radius: var(--sz-radius);
  transition: background .15s, border-color .15s, color .15s;
}
/* 选择器必须写成 `.button:not(.codicon).primary` 的形状 —— 上游主色规则就长这样，
   权重 0,3,0；只写 `html .primary.button`（0,2,1）会输，按钮仍然是蓝的。 */
html .button:not(.codicon).primary, html .primary.button, html .button.primary {
  background-color: var(--sz-brand-solid);
  border-color: var(--sz-brand-solid);
  color: #fff;
}
html .button:not(.codicon).primary:not(.disabled):hover,
html .primary.button:hover, html .button.primary:hover {
  background-color: var(--sz-brand-solid-hover);
  border-color: var(--sz-brand-solid-hover);
  box-shadow: none;
}

/* ---------- 链接 ---------- */
/* 分两类，别一刀切成品牌色：
     · **正文里的链接**（题面、题解、公告）是行动点 —— 给品牌红，要显眼；
     · **其它地方的链接**（题目列表、表格、侧栏、分类、顶栏、页脚）是结构 ——
       继承文字色，hover 才变红。
   一刀切的后果实测过：题库列表 20 行题名全是红的，一整列在喊，反而看不出重点在哪。 */
html .typo a, html .typo-a { color: var(--sz-brand); }
html .typo a:hover, html .typo-a:hover { color: var(--sz-brand-strong); }
html a { color: inherit; }
html a:hover { color: var(--sz-brand); }
html .nav .nav--active, html .nav .nav--active:hover { color: var(--sz-brand); }
/* 徽章、难度标签这些自带底色的，颜色由它们自己决定，别被上面两条带跑 */
html a.problem__tag-link, html a.problem__tag-link:hover,
html a.user-profile-badge, html a.user-profile-badge:hover,
html a.contest-tag, html a.contest-tag:hover { color: inherit; }

/* ---------- 页脚 ---------- */
html .footer { border-top: 1px solid var(--sz-line); background: transparent; }
html .footer__extra-link-item { font-size: 12px; opacity: .55; }
html .footer__extra-link-item a { color: inherit; }
html .footer__extra-link-item a:hover { color: var(--sz-brand); }

/* ============================================================
   组件现代化（2026-08-08）
   ------------------------------------------------------------
   上游那套观感的几个标志性特征，逐个换掉：
     · 表格每行上下各一条 1px 实线 + 隔行灰底（斑马纹）→ 只留一条极淡的行分隔 + 悬停高亮
     · 侧栏菜单靠 3px 左边框标选中 → 圆角块状底色
     · 输入框 35px 高、方角、focus 时套一圈淡蓝 outline → 38px、圆角、品牌色 focus ring
     · 分页器靠 2px 上/下边框做态 → 圆角 pill
     · 列表空状态是一只灰色毛球插画 → 一句话
   共同的思路：**少画线，多留白，状态靠底色不靠描边**。

   颜色一律走 :root 的 token，别散写十六进制 —— 亮/暗两套主题都要成立。
   ============================================================ */

/* ---------- 表格 ---------- */
html .data-table { font-size: 14px; }
/* 上游 `.data-table tr` 权重 0,1,1，`html .data-table tr` 是 0,1,2，压得住 */
html .data-table tr { border-top: 0; border-bottom: 0; }
html .data-table tr:nth-child(2n) { background: transparent; }   /* 斑马纹去掉 */
html .data-table > thead > tr {
  color: var(--sz-text-faint);
  background: var(--sz-head);
  border-top: 0;
  border-bottom: 1px solid var(--sz-line);
}
html .data-table th {
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
  padding: 11px 12px; line-height: 1.4;
}
html .data-table > tbody > tr {
  height: 46px;
  border-bottom: 1px solid var(--sz-line-soft);
  transition: background .12s ease;
}
html .data-table > tbody > tr:last-child { border-bottom: 0; }
html .data-table > tbody > tr:hover { background: var(--sz-hover); }
html .data-table td { padding: 8px 12px; line-height: 1.5; }
html .data-table tr.highlight { background: var(--sz-brand-soft); }
/* 列竖线。上游按页面逐个加：`.page--record_main .col--status{border-right:1px solid #e4e4e4}`
   这类规则有十来条，权重 0,2,0。用属性选择器一网打尽 ——
   `html .data-table td[class*=col--]` 是 0,2,2，压得住，也不用跟着上游加页面就补一条。
   只清 border-right：`.record-status--border` 的左边那根彩色状态条要留着，那是有用的信息。 */
html .data-table td[class*="col--"], html .data-table th[class*="col--"] { border-right: 0; }

/* ---------- 卡片内部 ---------- */
html .section__header {
  padding: 16px 18px 0;
  border-bottom: 1px solid var(--sz-line-soft);
}
html .section__header:last-child { padding-bottom: 16px; }
html .section__header .section__title { line-height: 32px; }
html .section__title { font-size: 15px; letter-spacing: .2px; }
html .section__body { padding: 14px 18px; }
/* 卡片里紧挨着标题的表格：表头再画一条线就是双线了，去掉 */
html .section__header + .section__body.no-padding > .data-table > thead > tr { border-top: 0; }

/* ---------- 侧栏 / 下拉菜单 ---------- */
html .menu { padding: 6px; font-size: 14px; }
html .menu__link {
  width: auto;
  padding: 9px 12px;
  border-left: 0;                       /* 上游用 3px 左边框标选中，这里改成整块底色 */
  border-radius: var(--sz-radius-sm);
  color: var(--sz-text-dim);
  line-height: 1.3;
  transition: background .12s ease, color .12s ease;
}
html a.menu__link:not(.disabled):hover,
html button.menu__link:not(.disabled):hover {
  background: var(--sz-hover);
  color: var(--sz-text);
}
html .menu__link.expandable { color: var(--sz-text); font-weight: 600; }
html .menu__seperator { margin: 6px 10px; border-color: var(--sz-line-soft); }
html .menu__item .menu .menu__link { padding-left: 26px; }
html .menu__link.highlight { background: var(--sz-brand-soft); }
/* 顶栏下拉弹层 */
html .nav__dropdown .dropdown-target.menu,
html .dropdown .menu {
  border-radius: var(--sz-radius);
  border: 1px solid var(--sz-line);
  box-shadow: 0 4px 6px -2px rgba(23, 26, 33, .06), 0 12px 32px -8px rgba(23, 26, 33, .18);
  padding: 6px;
}
html.theme--dark .nav__dropdown .dropdown-target.menu,
html.theme--dark .dropdown .menu { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6); }

/* ---------- 表单控件 ---------- */
html input.textbox, html textarea.textbox, html span.textbox, html .select {
  height: 38px; line-height: 36px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--sz-line-strong);
  border-radius: var(--sz-radius-sm);
  background: var(--sz-surface);
  color: var(--sz-text);
  margin-bottom: 12px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html textarea.textbox { height: auto; line-height: 1.65; padding: 10px 12px; }
html .select { padding-right: 30px; }
/* focus：上游套的是 `outline: 2px solid #c1e0ff`（淡蓝），必须显式清掉，
   换成品牌色的 ring —— 只写 border-color 的话那圈蓝还在。 */
html input.textbox:focus, html textarea.textbox:focus, html span.textbox:focus,
html .select:focus, html .autocomplete-wrapper.focused {
  outline: 0;
  border-color: var(--sz-brand);
  box-shadow: 0 0 0 3px var(--sz-brand-soft);
}
html input.textbox::placeholder, html textarea.textbox::placeholder { color: var(--sz-text-faint); }
html .checkbox input, html .radiobox input[type=radio] {
  border-color: var(--sz-line-strong);
  border-radius: 3px;
}
html .radiobox input[type=radio] { border-radius: 50%; }
html .checkbox { font-size: 14px !important; }
html .search input[type=text] { font-size: 14px; }

/* ---------- 分页 ---------- */
/* 上游拿 2px 的上/下边框当选中态，整条分页看起来像被划了一刀。改成 pill。 */
html .pager { font-size: 14px; padding: 10px 0; }
html .pager.pager-bottom, html .pager.pager-top { border: 0; margin: 0; }
html .pager .pager__item,
html .pager.pager-bottom .pager__item, html .pager.pager-top .pager__item {
  border: 0;
  border-radius: var(--sz-radius-sm);
  padding: 7px 12px;
  margin: 0 2px;
  min-width: 34px;
  color: var(--sz-text-dim);
  transition: background .12s ease, color .12s ease;
}
html .pager .pager__item.link:hover { background: var(--sz-hover); color: var(--sz-text); }
html .pager .pager__item.current {
  background: var(--sz-brand-solid);
  color: #fff !important;
  border: 0 !important;
  font-weight: 600;
}

/* ---------- 标签 ---------- */
html .problem__tag-link, html .contest-tag, html .discussion-node-tag,
html .search-tag__item, html .widget--category-filter__tag {
  border-radius: 999px;
  font-size: 12px;
  padding: 3px 10px;
  line-height: 1.4;
}

/* ---------- 标签页 ---------- */
html .section__tab-header-item {
  font-size: 14px;
  border-radius: var(--sz-radius-sm) var(--sz-radius-sm) 0 0;
  color: var(--sz-text-dim);
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
html .section__tab-header-item.tab--active, html .section__tab-header-item.selected {
  color: var(--sz-text); font-weight: 600;
}
/* immersive 版（个人主页头图上那排）。上游暗色主题给选中项塞了 `background-color:#0f0f0f`，
   在品牌红的头图上就是一块突兀的黑砖。改成半透明白 —— 深色底上唯一不挑颜色的做法。
   上游那条是 `.theme--dark .section__tab-container.immersive .…selected`（0,3,0），
   所以这里也得写到 `html.theme--dark` 才压得住。 */
html .section__tab-container.immersive .section__tab-header-item { color: rgba(255, 255, 255, .8); }
html .section__tab-container.immersive .section__tab-header-item:hover,
html.theme--dark .section__tab-container.immersive .section__tab-header-item:hover {
  background: rgba(255, 255, 255, .1); color: #fff;
}
html .section__tab-container.immersive .section__tab-header-item.selected,
html.theme--dark .section__tab-container.immersive .section__tab-header-item.selected {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none;
  border-radius: var(--sz-radius-sm) var(--sz-radius-sm) 0 0;
}
/* 选中指示条：头图是红底，再用品牌红就看不见了，这里用白 */
html .section__tab-container.immersive .section__tab-header-item.selected:after { background: #fff; }

/* ---------- 题库页顶部的「所属题库」切换器 ---------- */
/* 这个组件的样式写在出题插件模板的 <style> 块里（权重 0,1,0）。那边归出题功能维护，
   配色这类事在这里盖（`html .ti-sw…` 是 0,1,1，压得住），别去改那个文件。
   选中项原本用 --sz-brand 作底 + 白字：13px 的字压在饱和红上发糊，
   用户反馈「框是暗红但字看着是黑的」。换成 --sz-brand-solid（见文件顶部那段说明），
   字重从 bold 收回 600 —— 密笔画在红底上更糊。 */
/* ⚠ 暗色那两条必须写 `html.theme--dark …`（0,2,1），不能只靠 `html .ti-sw…`（0,1,1）：
   上游有一条 `.theme--dark a { color:#bdbdbd }` 也是 0,1,1，**打平**，
   而上游样式是主 bundle 运行时后注入的，打平就输 —— 表现是暗色下选中项的字变成灰色
   （对比度掉到 3.14），亮色下却是好的。加 html 前缀只提 1 点权重，这种时候不够。 */
html .ti-sw__item--active,
html .ti-sw__item--active:hover,
html.theme--dark .ti-sw__item--active,
html.theme--dark .ti-sw__item--active:hover {
  background: var(--sz-brand-solid);
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
}

/* 那个模板的 <style> 里，「没题的等级」「标签」「计数」三处都是用 opacity 硬压出来的
   （.38 / .65 / .6）。**透明度在两套主题下不等价**：暗色底上压白字，越压越暗、还看得清；
   亮色底上压黑字，38% 的黑几乎化进白底 —— 用户反馈「亮色下这个字看不太清，之前是暗色」。

   改用设计系统里给「占位 / 空状态 / 禁用」定好的 --sz-text-faint 和给次要信息定的
   --sz-text-dim，两套主题各自调过对比度，不再靠透明度硬压。
   opacity 要显式写回 1，否则模板那条还在压。
   权重 (0,1,1) 压得住模板的 (0,1,0)，不受「模板 <style> 在 body 里、加载更晚」的影响。 */
html .ti-sw__item--empty { opacity: 1; color: var(--sz-text-faint); }
html .ti-sw__label { opacity: 1; color: var(--sz-text-dim); }
html .ti-sw__n { opacity: 1; color: var(--sz-text-faint); }
/* 选中项里的计数压在红底上，用半透明白，别套用上面那条灰 */
html .ti-sw__item--active .ti-sw__n { opacity: 1; color: rgba(255, 255, 255, .85); }

/* ---------- 比赛列表页顶部的横幅卡片 ---------- */
/* 上游给「进行中」配粉红（#e98696→#e96b6b）、「未开始」配天蓝（#8acde6→#469dcf），
   再加一个亮黄色的「查看详情」按钮 —— 三种颜色互相不认识，也都不是本站的颜色。
   收成一套：进行中＝品牌红（要抢眼），未开始＝中性石板灰（还没到点，不该比进行中更响），
   按钮统一白底红字。上游选择器带 `.page--contest_main`（0,3,0），这里照抄形状再加 html。 */
html.page--contest_main .section--contest.live {
  background: var(--sz-brand, #c0282d);
  background-image: radial-gradient(ellipse farthest-corner at left top, #d6564f 0%, #a52028 100%);
}
html.page--contest_main .section--contest.ready {
  background: #55606f;
  background-image: radial-gradient(ellipse farthest-corner at left top, #6b7684 0%, #414a57 100%);
}
html.page--contest_main .section--contest .info .icon { color: rgba(255, 255, 255, .75); }
html.page--contest_main .section--contest .detail-button {
  background: #fff;
  color: var(--sz-brand-strong, #9e1f24);
  font-weight: 600;
  border-radius: 999px;
}
html.page--contest_main .section--contest .detail-button:hover {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .18);
}

/* ---------- 比赛 / 作业侧栏头图 ---------- */
/* 上游是青底 + 一张卡通插画，跟登录页背景一样属于「一眼认得出来源」的资源。
   换成品牌色渐变，图去掉。 */
html .contest-sidebar__bg {
  background: linear-gradient(135deg, #8e1d21 0%, var(--sz-brand, #c0282d) 60%, #d6564f 100%);
  background-image:
    radial-gradient(circle at 88% 18%, transparent 52px, rgba(255, 255, 255, .09) 53px,
                    rgba(255, 255, 255, .09) 60px, transparent 61px),
    linear-gradient(135deg, #8e1d21 0%, #c0282d 60%, #d6564f 100%);
  border-radius: var(--sz-radius) var(--sz-radius) 0 0;
}
html .contest-sidebar__bg h1 { text-shadow: none; font-weight: 600; }

/* ---------- 右下角快捷搜索（omnibar） ---------- */
/* 上游是个白色圆角方块浮在右下角，在暗色页面上像块反光的补丁。改成品牌色圆钮。 */
html .omnibar-toggle,
html.theme--dark .omnibar-toggle {
  background: var(--sz-brand-solid);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(23, 26, 33, .2);
  transition: transform .15s ease, background .15s ease;
}
html .omnibar-toggle:hover { background: var(--sz-brand-solid-hover); transform: translateY(-2px); }
html .omnibar-main { border-radius: var(--sz-radius-lg); overflow: hidden; }

/* ---------- 空状态 ---------- */
/* 上游放的是一只灰色毛球插画（nothing-icon 的背景图），跟站点调性不搭，直接不显示 */
html .nothing-icon { display: none; }
html .nothing-placeholder {
  padding: 56px 0;
  font-size: 14px;
  color: var(--sz-text-faint);
}
html .nothing-placeholder.compact { padding: 24px 0; }

/* ---------- 引用 / 提示块 ---------- */
html blockquote {
  border-left: 3px solid var(--sz-line-strong);
  border-radius: 0 var(--sz-radius-sm) var(--sz-radius-sm) 0;
  background: var(--sz-hover);
  color: var(--sz-text-dim);
  padding: 12px 16px;
  font-size: 14px;
}
html blockquote.note { background: var(--sz-brand-soft); color: var(--sz-text); }
html blockquote.warn, html blockquote.red { background: var(--sz-hover); }

/* ---------- 排版 ---------- */
html body { color: var(--sz-text); }
html .typo { line-height: 1.85; }
html .typo h1, html .typo h2, html .typo h3 { letter-spacing: .3px; }
html .help-text, html .supplementary { color: var(--sz-text-dim); font-size: 13px; }
html .text-gray { color: var(--sz-text-faint); }

/* ============================================================
   登录 / 注册 / 找回密码（layout--immersive）
   ------------------------------------------------------------
   上游给这套页面铺的是一张蓝紫色的山峰插画。它是**去标识时漏掉的一处**：
   跟印章红完全不搭，而且一眼能认出出处，偏偏这又是学生看到的第一个页面。
   整套换掉：品牌红渐变打底、表单收进一张毛玻璃卡片、
   站标放白色圆底上（红印章直接压在红底上会糊）。

   背景不引用任何图片，全用 CSS 渐变画 —— 少一次请求，也不用再维护一张位图。

   ⚠ 背景那条必须写成 `html.layout--immersive #panel`：上游用的是
   `.layout--immersive #panel`（权重 1,1,0，带一个 ID）。写 `.slideout-panel`（0,2,1）盖不住 ——
   卡片和按钮都变了、唯独背景还是那张山峰图，就是这么来的。
   ============================================================ */
html.layout--immersive #panel {
  background-color: #4a0d10;
  background-image:
    /* 右上角一道细圆环，呼应站标的印章形状 */
    radial-gradient(circle at 82% 22%, transparent 176px, rgba(255, 255, 255, .07) 177px,
                    rgba(255, 255, 255, .07) 190px, transparent 191px),
    radial-gradient(58% 78% at 78% 16%, rgba(255, 255, 255, .1) 0%, transparent 62%),
    radial-gradient(46% 62% at 10% 88%, rgba(255, 255, 255, .06) 0%, transparent 60%),
    linear-gradient(160deg, #4a0d10 0%, #8e1d21 44%, #c0282d 80%, #d6564f 100%);
  background-size: cover;
}
/* 表单卡片 */
html.layout--immersive .immersive--center {
  width: 360px;
  max-width: calc(100vw - 32px);
  margin: 56px auto;
  padding: 34px 32px 26px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.layout--immersive .immersive--center h1 {
  margin: 0 0 26px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
}
/* 站标。红印章压在红底上看不清，垫一层白圆底 */
html.layout--immersive .immersive--center h1:before {
  content: '';
  display: block;
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  background: #fff url('/brand-logo.png') center / 46px 46px no-repeat;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
/* material 输入框（下划线式）。上游暗色主题把字色压到 #aaa，在毛玻璃上几乎看不见 */
html.layout--immersive label.textbox.material,
html.theme--dark.layout--immersive label.textbox.material { color: rgba(255, 255, 255, .82); }
html.layout--immersive label.textbox.material input,
html.theme--dark.layout--immersive label.textbox.material input {
  color: #fff;
  background: transparent;
  border-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  box-shadow: none;
}
html.layout--immersive label.textbox.material input:focus,
html.theme--dark.layout--immersive label.textbox.material input:enabled:read-write:focus {
  border-bottom-color: #fff;
  box-shadow: none;
  outline: 0;
}
/* 提交按钮：红底上再放红按钮等于没有，反过来用白底红字 */
html.layout--immersive .immersive--center .button:not(.codicon).primary {
  background: #fff;
  border-color: #fff;
  color: var(--sz-brand-strong, #9e1f24);
  font-weight: 600;
  height: 42px; line-height: 40px;
  box-shadow: none;
}
html.layout--immersive .immersive--center .button:not(.codicon).primary:not(.disabled):hover {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(255, 255, 255, .88);
  color: var(--sz-brand-strong, #9e1f24);
}
html.layout--immersive .supplementary.inverse a { opacity: .85; font-size: 13px; }
html.layout--immersive .supplementary.inverse a:hover { opacity: 1; }
/* 这套页面自带页脚，压在渐变上，去掉它的底色 */
html.layout--immersive .footer { background: transparent; border-top-color: rgba(255, 255, 255, .12); }
html.layout--immersive .footer, html.layout--immersive .footer a { color: rgba(255, 255, 255, .7); }

/* ---------- 侧栏吸顶 ---------- */
/* 上游用一套 JS 在 `[data-sticky]` 上写 inline style 来做吸顶。它有个前提：侧栏比正文矮。
   一旦反过来（控制面板就是：十几个管理项 vs 两张卡片），它会把侧栏 absolute 到容器底部，
   于是侧栏顶端跑到容器上方 —— 被固定顶栏整个切掉，表现是「右边一片空白，但 HTML 里有内容」。
   换成原生 `position: sticky`：浏览器自己处理「比容器高就不吸」的情况，不需要算高度。
   inline style 优先级最高，所以这几条必须 !important 才压得住那套 JS。
   top 取 80px = 顶栏 64px + 16px 呼吸。 */
html [data-sticky], html [data-sticky].is_stuck {
  position: sticky !important;
  top: 80px !important;
  bottom: auto !important;
  width: auto !important;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- 滚动条 ---------- */
/* 默认那条宽灰滚动条在浅色卡片上很抢眼，收细、圆角、只在悬停时明显一点 */
html ::-webkit-scrollbar { width: 10px; height: 10px; }
html ::-webkit-scrollbar-track { background: transparent; }
html ::-webkit-scrollbar-thumb {
  background: var(--sz-line-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html ::-webkit-scrollbar-thumb:hover { background: var(--sz-text-faint); background-clip: content-box; }

/* ============================================================
   收口：上游残留的三个主色
   ------------------------------------------------------------
   上游主题里硬编码了三个强调色，它们是 stylus 变量编译进 bundle 的，改不了源头，
   只能按选择器逐条盖掉。上面几节已经覆盖了顶栏/按钮/链接这些大件，这里补齐其余的：

     #5f9fd6（蓝）—— hover / focus / primary 一类「可交互」的地方
     #ed5f82（粉）—— selected / active 一类「当前选中」的地方
     #00b4cc（青）—— 只有题库搜索框那个提交按钮用

   本站三者统一成印章红（选中态另靠字重和底色区分，不再靠色相）。

   **写覆盖时先看上游那条规则的选择器形状**，两个坑都踩过：
     1. 权重不够。primary 按钮上游写的是 `.button:not(.codicon).primary`（0,3,0），
        只写 `html .primary.button`（0,2,1）会输，按钮仍然是蓝的。
     2. `.page--xxx` / `.layout--xxx` 是挂在 **`<html>` 元素本身**上的（见 layout/html5.html），
        所以必须写 `html.page--contest_main …`，**中间不能有空格** ——
        写成后代选择器就一个元素都匹配不到，而且看代码完全正常。
   写完一定要在页面上用 getComputedStyle 复核，别只看代码。

   清单怎么来的：拿静态目录里编译好的 theme-<版本>.css，
   正则抓出所有包含这三个色值的规则块，逐条搬过来。**升级上游主题后照做一遍** ——
   上游新增的组件会带着原色冒出来。
   ============================================================ */

/* ---- 交互态（原 #5f9fd6） ---- */
html blockquote.note { border-color: var(--sz-brand); }
html blockquote.note:before { color: var(--sz-brand); }
html .calendar__header button:hover { color: var(--sz-brand); }
html .contest-tag:hover,
html .discussion-node-tag:hover { background: var(--sz-brand-solid); border-color: var(--sz-brand); }
html .collapsible-content .collapsible-toggle__link { color: var(--sz-brand); }
html .dczcomments__operations a:hover { color: var(--sz-brand); }
html .reactions .reaction.active,
html .reactions .reaction:hover { border-color: var(--sz-brand); }
html .radiobox.with-image .radiobox__image-container:hover { border-color: var(--sz-brand); }
html .select:focus,
html input.textbox:focus, html textarea.textbox:focus, html span.textbox:focus,
html label.textbox.material input:enabled:read-write:focus,
html .autocomplete-wrapper:focus, html .autocomplete-wrapper.focused { border-color: var(--sz-brand); }
html label.textbox.material.focus { color: var(--sz-brand); }
html .loader { border-left-color: var(--sz-brand); }
html .side--other .messagepad__message__body { background: var(--sz-brand-solid); }
html .side--other .messagepad__message__body:after { border-top-color: var(--sz-brand); }
html .messagepad__input button:enabled { background-color: var(--sz-brand-solid); }
html #nprogress .bar { background: var(--sz-brand); }
html #nprogress .spinner-icon { border-top-color: var(--sz-brand); border-left-color: var(--sz-brand); }
html .pager__item.link:hover { border-color: var(--sz-brand); }
html .problem__tag-link:hover,
html .widget--category-filter__tag:hover,
html .category-filter__header .list .list__item.selected { background: var(--sz-brand-solid); }
html .search-tag__item.selected { background: var(--sz-brand-solid) !important; }
html .scratchpad__panel-title { background: var(--sz-brand-solid); }
html .section__tab-container:not(.immersive) .section__tab-header-item:hover,
html.page--problem_detail .section__tab-header-item:hover,
html.page--contest_detail_problem .section__tab-header-item:hover,
html.page--homework_detail_problem .section__tab-header-item:hover { border-color: var(--sz-brand); }
html.page--domain_permission .col--family { border-top-color: var(--sz-brand); }
/* ---- 题库搜索框的提交按钮（原 #00b4cc） ---- */
html .search > button { background: var(--sz-brand-solid); border-color: var(--sz-brand); }

/* ---- 选中态（原 #ed5f82） ---- */
html a.menu__link.active, html button.menu__link.active,
html a.menu__link.active:hover, html button.menu__link.active:hover,
html.theme--dark a.menu__link.active, html.theme--dark button.menu__link.active,
html.theme--dark a.menu__link.active:hover, html.theme--dark button.menu__link.active:hover { background: var(--sz-brand-solid); }
html .checkbox input:checked { background: var(--sz-brand-solid); border-color: var(--sz-brand); }
html .checkbox input:enabled:hover { border-color: var(--sz-brand-soft); }
html .messagepad__list-item.active,
html.theme--dark .messagepad__list-item.active { border-color: var(--sz-brand); background: var(--sz-brand-soft); }
html .pager__item.current { color: var(--sz-brand) !important; border-color: var(--sz-brand) !important; }
html .scratchpad__toolbar__button.activated { background: var(--sz-brand-solid) !important; }
html .section__tab-container.immersive .section__tab-header-item.selected:after { background: var(--sz-brand); }
html .section__tab-container:not(.immersive) .section__tab-header-item.tab--active,
html .section__tab-container:not(.immersive) .section__tab-header-item.selected,
html.page--problem_detail .section__tab-header-item.tab--active,
html.page--contest_detail_problem .section__tab-header-item.tab--active,
html.page--homework_detail_problem .section__tab-header-item.tab--active { border-color: var(--sz-brand); }
html .widget--category-filter__tag.selected { background: var(--sz-brand-solid); }

/* ============================================================
   移动端（≤600px，与上游 breakpoints.json 的 mobile 一致）
   ------------------------------------------------------------
   小屏下顶栏会变成右侧滑出的**纵向菜单**（`.nav.slideout-menu`）。
   上面「顶栏」一节那些 64px 的高度/行高是给横向导航条写的，权重（0,2,1）又比上游
   移动端那条（0,1,0）高，不挡一下的话侧滑菜单里每一项都会撑成 64px 高的大块。
   ============================================================ */
@media only screen and (max-width: 600px) {
  html .nav.slideout-menu { height: auto; }
  html .nav.slideout-menu .nav__list--main > .nav__list-item { height: auto; }
  html .nav.slideout-menu .nav__item {
    height: auto;
    line-height: 2.4rem;
    padding: 0 20px 3px;
    margin: 0;
    font-size: 14px;
  }
  /* 选中态的底部短线是横向导航条的语言，纵向列表里换回左边一道 */
  html .nav.slideout-menu .nav--active:after { display: none; }
  html .nav.slideout-menu .nav--active { border-left: 3px solid var(--sz-brand); }
  html .nav.slideout-menu .sz-logo { height: auto; padding: 14px 20px; }
  html .nav.slideout-menu .sz-logo__img { height: 32px; }

  /* 小屏下侧栏是堆叠在正文下面的，再吸顶会把它钉在半空 */
  html [data-sticky], html [data-sticky].is_stuck {
    position: static !important;
    max-height: none;
    overflow: visible;
  }

  /* 卡片贴边更省地方，圆角也收一点 */
  html .section { border-radius: var(--sz-radius-sm); }
  html .section__header { padding: 14px 14px 0; }
  html .section__body { padding: 12px 14px; }
  html .data-table td, html .data-table th { padding: 8px 10px; }
}

/* ==========================================================================
   顶栏下拉（2026-08-09）
   五条路（GESP-Scratch / GESP-C++ / CSP / 考前串讲 / 考前模拟）父项不可点，
   悬停展开一级面板；「考点强化练习」再展开二级。结构在 partials/nav.html，
   内容在 hain-ti/nav.ts，行为脚本内联在 nav.html 末尾。

   **这一节必须待在文件最末尾**：上面 690 行起是 `@media (max-width:600px)` 块，
   贴在它的收尾 `}` 之前会被整节关进窄屏媒体查询里 —— 现象是桌面端完全没效果、
   只有把窗口拖到很窄才对，很难一眼看出来。

   规则顺序有讲究：基础 → 翻转 → 展开态 → hover → 窄屏 → reduced-motion。
   翻转那组权重是 (0,3,1)，JS 加的 --noflip 也写成同权重靠源码顺序在后取胜。
   ========================================================================== */

/* ---- 基础：父项与面板 ---- */
html .nav__list-item--menu { position: relative; }

/* 父项是 <button>，得把浏览器默认按钮样式抹平成跟旁边 <a class="nav__item"> 一样 */
html .nav .sz-nav-menutrigger {
  background: none;
  border: 0;
  font: inherit;
  cursor: default;          /* 不是链接，别给手型 —— 它点不动 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
html .nav .sz-nav-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55;
  transition: transform .15s ease, opacity .15s ease;
}

html .sz-navmenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;              /* .nav 自身是 500，这里只需在 nav 内部盖住兄弟节点 */
  /* 尺寸按「家长和小学生用」的标准放大过一轮：190px/13px 那版用户反馈「选框太小」。
     顶栏这几个下拉是全站最主要的导航路径，不是二级设置菜单，该给足点击面积。 */
  min-width: 232px;
  padding: 8px;
  font-size: 14px;
  background: var(--sz-surface, #fff);
  border: 1px solid var(--sz-line-soft, #e6e8eb);
  border-radius: var(--sz-radius-sm, 6px);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .18);
  /* 用 visibility 而不是 display:none —— 隐藏时仍有布局，
     JS 才能靠 offsetWidth 量出二级面板宽度来决定往左还是往右翻 */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
html.theme--dark .sz-navmenu { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6); }

html .sz-navmenu__group {
  margin: 6px 10px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sz-text-dim, #8a8f9a);
}
html .sz-navmenu__list { margin: 0; padding: 0; list-style: none; }
/* 等级多的那两条路（C++ 八级）排两列，否则面板会拖得很长 */
html .sz-navmenu__list--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
}
html .sz-navmenu__item { position: relative; list-style: none; }
html .sz-navmenu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  color: var(--sz-text, #23262b);
  border-radius: var(--sz-radius-sm, 6px);
  cursor: pointer;
}
html a.sz-navmenu__link:hover,
html button.sz-navmenu__link:hover { background: var(--sz-brand-soft, #fbeced); color: var(--sz-brand, #c0282d); }
html .sz-navmenu__caret { opacity: .5; }
html .sz-navmenu__empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--sz-text-dim, #8a8f9a);
  white-space: nowrap;
}

/* ---- 二级面板 ---- */
html .sz-navmenu__sub {
  position: absolute;
  top: -6px;
  left: 100%;
  z-index: 21;
  min-width: 178px;
  padding: 8px;
  background: var(--sz-surface, #fff);
  border: 1px solid var(--sz-line-soft, #e6e8eb);
  border-radius: var(--sz-radius-sm, 6px);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .18);
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease, visibility .12s;
}
html.theme--dark .sz-navmenu__sub { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6); }

/* ---- 翻转：靠右的项让二级往左飞，否则顶出横向滚动条 ----
   顶栏最右边那几项的二级面板往右展开会超出视口。默认让最后两项往左，
   JS 再按实测的 getBoundingClientRect 校正（视口宽度千变万化，纯 CSS 猜不准）。 */
html .nav__list-item--menu:nth-last-child(-n+2) .sz-navmenu__sub { left: auto; right: 100%; }
html .sz-navmenu__item--flip .sz-navmenu__sub { left: auto; right: 100%; }
html .sz-navmenu__item--noflip .sz-navmenu__sub { left: 100%; right: auto; }

/* ---- 展开态（触屏点击 / 键盘）---- */
html .nav__list-item--menu.is-open > .sz-navmenu,
html .sz-navmenu__item--has-sub.is-open > .sz-navmenu__sub {
  visibility: visible;
  opacity: 1;
  transform: none;
}
html .nav__list-item--menu.is-open .sz-nav-caret { transform: rotate(180deg); opacity: .9; }

/* ---- hover：只在真有悬停能力的设备上。
   触屏浏览器会把 tap 模拟成 hover 并「粘住」，展开了点外面也不关，
   所以这里必须用 (hover:hover) and (pointer:fine) 圈住，触屏走 JS 的点击展开。 ---- */
@media (hover: hover) and (pointer: fine) {
  html .nav__list-item--menu:hover > .sz-navmenu,
  html .nav__list-item--menu:focus-within > .sz-navmenu {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  html .nav__list-item--menu:hover .sz-nav-caret { transform: rotate(180deg); opacity: .9; }
  html .sz-navmenu__item--has-sub:hover > .sz-navmenu__sub,
  html .sz-navmenu__item--has-sub:focus-within > .sz-navmenu__sub {
    visibility: visible;
    opacity: 1;
  }
}

/* ---- 窄屏：顶栏本身变成右侧滑出的纵向菜单，绝对定位的浮层在里面没有意义，
   退化成点击展开的手风琴。断点取 900 而不是站内惯用的 600 ——
   顶栏有八项，600~900 之间早就换行挤成一坨了。 ---- */
@media (max-width: 900px) {
  html .sz-navmenu,
  html .sz-navmenu__sub {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--sz-line-soft, #e6e8eb);
    border-radius: 0;
    margin: 0 0 0 16px;
    padding: 0;
    min-width: 0;
    display: none;
  }
  html .nav__list-item--menu.is-open > .sz-navmenu,
  html .sz-navmenu__item--has-sub.is-open > .sz-navmenu__sub { display: block; }
  html .sz-navmenu__list--grid { grid-template-columns: repeat(4, 1fr); }
  html .nav .sz-nav-menutrigger { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html .sz-navmenu,
  html .sz-navmenu__sub,
  html .nav .sz-nav-caret { transition: none; }
}
