/* ==========================================================================
   南京林业大学校研究生会知识竞赛平台 - 样式表
   配色取自指定绿色色卡（5 级递进）：
     #d5dcd4  最浅  —— 浅底 / 高亮行
     #a6bdab  浅    —— 次级面
     #719e87  中浅  —— 辅助强调
     #448a6e  中    —— 次强调 / 描边
     #00724e  深    —— 主强调色（按钮、标记）
   形状规则：卡片 16px、输入框 10px、按钮全圆角（100px），全站统一。
   ========================================================================== */

/* ---------------------------------------------------------------- 设计变量 */
:root {
  color-scheme: light;

  --bg: #f2f5f2;
  --bg-soft: #e8eee8;
  --surface: #fbfcfb;
  --surface-2: #eef3ee;
  --surface-3: #e0e9e1;

  --ink: #12211c;
  --ink-2: #3f5148;
  --ink-3: #6c7c73;

  --line: #d5dcd4;
  --line-strong: #a6bdab;

  /* 主强调：色卡最深一档，对白字对比 5.97:1 */
  --accent: #00724e;
  --accent-ink: #005c3f;
  --accent-soft: #dcebe2;
  --accent-contrast: #fdfffe;

  /* 色卡其余层级，供描边、次级强调使用 */
  --green-1: #d5dcd4;
  --green-2: #a6bdab;
  --green-3: #719e87;
  --green-4: #448a6e;
  --green-5: #00724e;

  --ok: #00724e;
  --ok-soft: #dcebe2;

  --focus: #448a6e;

  --radius-card: 16px;
  --radius-input: 10px;
  --radius-pill: 100px;

  --shadow-1: 0 1px 2px rgba(18, 33, 28, 0.05), 0 8px 24px -18px rgba(18, 33, 28, 0.35);
  --shadow-2: 0 2px 6px rgba(18, 33, 28, 0.06), 0 24px 48px -32px rgba(18, 33, 28, 0.45);

  --font-sans: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-num: "Cascadia Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --topbar-h: 64px;
  --wrap: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* 深色模式背景带一点绿调，保持同一色系 */
  --bg: #0f1714;
  --bg-soft: #14201b;
  --surface: #15221c;
  --surface-2: #1b2b23;
  --surface-3: #23372c;

  --ink: #e9f1ec;
  --ink-2: #b3c6bb;
  --ink-3: #88a094;

  --line: #263a2f;
  --line-strong: #385546;

  /* 深色底上主色提亮，保证对比度 */
  --accent: #3fb787;
  --accent-ink: #58c99a;
  --accent-soft: #163326;
  --accent-contrast: #06130e;

  --green-1: #d5dcd4;
  --green-2: #a6bdab;
  --green-3: #719e87;
  --green-4: #448a6e;
  --green-5: #00724e;

  --ok: #4cc494;
  --ok-soft: #143024;

  --focus: #719e87;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -18px rgba(0, 0, 0, 0.8);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 24px 48px -32px rgba(0, 0, 0, 0.9);
}

/* ---------------------------------------------------------------- 基础 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* 背景图（桌面/平板）：用 image-set 优先取 WebP（同画质体积小约 40%），
     浏览器不支持时自动回退 JPEG。背景被浅色遮罩覆盖，压缩后肉眼无损。 */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(242, 245, 242, 0.74), rgba(242, 245, 242, 0.8)),
    image-set(
      url("/assets/bg-desktop.webp") type("image/webp"),
      url("/assets/bg-desktop-opt.jpg") type("image/jpeg")
    );
  background-size: 100% 100%, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* 手机端：竖图铺满并居中裁剪 */
@media (max-width: 720px) {
  body {
    background-image:
      linear-gradient(rgba(242, 245, 242, 0.76), rgba(242, 245, 242, 0.82)),
      image-set(
        url("/assets/bg-mobile.webp") type("image/webp"),
        url("/assets/bg-mobile-opt.jpg") type("image/jpeg")
      );
  }
}

/* 深色模式：压暗背景，保证文字对比度 */
[data-theme="dark"] body {
  background-image:
    linear-gradient(rgba(15, 23, 20, 0.86), rgba(15, 23, 20, 0.86)),
    image-set(
      url("/assets/bg-desktop.webp") type("image/webp"),
      url("/assets/bg-desktop-opt.jpg") type("image/jpeg")
    );
}

@media (max-width: 720px) {
  [data-theme="dark"] body {
    background-image:
      linear-gradient(rgba(15, 23, 20, 0.88), rgba(15, 23, 20, 0.88)),
      image-set(
        url("/assets/bg-mobile.webp") type("image/webp"),
        url("/assets/bg-mobile-opt.jpg") type("image/jpeg")
      );
  }
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 90;
  padding: 10px 16px;
  border-radius: var(--radius-input);
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------- 顶栏 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  /* 顶栏用实色，避免背景照片干扰导航；logo 是深色字，浅底最清楚 */
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 6px 4px;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

/* 顶栏 logo：整张校徽图，按高度自适应，宽度自动 */
/* picture 是行内元素，包住 logo 时需保持块级行为，避免基线留白 */
.brand picture {
  display: block;
  line-height: 0;
}

.brand__logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: min(52vw, 340px);
  object-fit: contain;
  object-position: left center;
}

/* 校徽本身是深色字浅色底，深色模式下给它一个白底托盘 */
[data-theme="dark"] .brand__logo {
  background: #f4f5f3;
  padding: 4px 8px;
  border-radius: 8px;
  height: 36px;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.nav-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.nav-btn[aria-current="page"] {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  font-weight: 600;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

/* ---------------------------------------------------------------- 通用按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn:active {
  transform: translateY(1px) scale(0.995);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-1);
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-ink);
}

[data-theme="dark"] .btn--primary:hover:not(:disabled) {
  background: #4fd0a0;
}

.btn--ghost {
  /* 透明按钮直接压在背景照片上会看不清，给它一个实色底 */
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--green-3);
}

.btn--quiet {
  background: var(--surface);
  color: var(--ink-2);
  border-color: transparent;
  min-height: 40px;
  padding: 0 12px;
}

.btn--quiet:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-2);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

/* ---------------------------------------------------------------- 视图切换 */
.view {
  display: none;
  animation: view-in 0.42s var(--ease) both;
}

.view.is-active {
  display: block;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------- 竞赛列表 */
.page {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.page__head {
  margin-bottom: 26px;
}

.page__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.page__lead {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 60ch;
}

/* 一行两个 */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

/* 每一栏内卡片上下排列，间距与整体网格保持一致 */
.comp-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comp-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.comp-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

.comp-card:active {
  transform: translateY(-1px) scale(0.995);
}

/* 上：配图区。每张图按自身比例决定高度，完整显示、不裁切也不留白，
   所以不同竞赛的卡片高度会不一样，这是刻意允许的错位效果。 */
.comp-card__cover {
  display: block;
  position: relative;
  overflow: hidden;
  background: #f6f8f6;
}

.comp-card__cover img {
  display: block;
  width: 100%;
  height: auto;
  /* 竖图按宽度铺满会过高，限制最大高度；超出时按 contain 完整缩放，不裁切 */
  max-height: 340px;
  object-fit: contain;
  object-position: center;
  background: #f6f8f6;
  transition: transform 0.4s var(--ease);
}

.comp-card:hover .comp-card__cover img {
  transform: scale(1.03);
}

/* 下：竞赛名称与基本信息 */
.comp-card__body {
  display: block;
  padding: 16px 18px 18px;
}

.comp-card__name {
  display: block;
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.comp-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.comp-card__dot {
  color: var(--line-strong);
}

.skeleton-card {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

.comp-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 56px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  color: var(--ink-3);
  text-align: center;
}

.comp-empty strong {
  color: var(--ink);
  font-size: 16px;
}

.comp-empty .btn {
  margin-top: 8px;
}

/* ---------------------------------------------------------------- 登录弹窗 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 21, 0.52);
  backdrop-filter: blur(3px);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 28px 28px 30px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  animation: modal-in 0.24s var(--ease) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modal__close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.modal__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal__note {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-3);
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.tab {
  height: 36px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* ---------------------------------------------------------------- 用户菜单 */
.user-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-right: 2px;
}

#user-menu-btn.is-logged-in .user-dot {
  background: var(--ok);
}

.usermenu {
  position: fixed;
  top: calc(var(--topbar-h) - 6px);
  right: 24px;
  z-index: 70;
  width: 220px;
  padding: 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.usermenu[hidden] {
  display: none;
}

.usermenu__name {
  font-size: 15px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usermenu__sid {
  margin: 3px 0 12px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-family: var(--font-num);
}

.panel__title {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.panel__note {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* 登记卡 */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: 26px;
}

.panel__title {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.panel__note {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

.form {
  margin-top: 20px;
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 6px;
}

/* display:grid 会覆盖 hidden 的默认 display:none，需显式处理 */
.field[hidden],
.auth-register-only[hidden] {
  display: none;
}

.field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.field__label span {
  font-weight: 400;
  color: var(--ink-3);
}

.input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--radius-input);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.input::placeholder {
  color: var(--ink-3);
}

.input:hover {
  border-color: var(--ink-3);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.field__hint {
  font-size: 12.5px;
  color: var(--ink-3);
}

.field__error {
  font-size: 12.5px;
  color: var(--accent-ink);
  font-weight: 600;
}

.field.has-error .input {
  border-color: var(--accent);
}

.form__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- 区块 */
.section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.section--tight {
  padding: 48px 0;
}

.section__head {
  max-width: 720px;
}

.section__title {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.24;
  letter-spacing: -0.015em;
  font-weight: 680;
}

.section__lead {
  margin-top: 12px;
  font-size: 15.5px;
  color: var(--ink-2);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- 排行榜 */
.board {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

.board__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}

.board__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.board__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: background 0.2s var(--ease);
}

.board__live.is-live .board__dot {
  background: var(--ok);
}

.board__live.is-live .board__dot::after {
  content: "";
}

.board__list {
  display: grid;
}

.board-row {
  display: grid;
  /* 名次 / 姓名 / 累计分 / 轮次 / 最近交卷 —— 共 5 列 */
  grid-template-columns:
    minmax(56px, 0.7fr)
    minmax(0, 2fr)
    minmax(80px, 0.9fr)
    minmax(72px, 0.8fr)
    minmax(96px, 1fr);
  gap: 20px;
  align-items: center;
  padding: 14px 24px;
  font-size: 14px;
  text-align: center;
  animation: row-in 0.4s var(--ease) both;
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.board-row + .board-row {
  border-top: 1px solid var(--line);
}

.board-row--head {
  font-size: 12.5px;
  color: var(--ink-3);
  background: var(--surface-2);
  animation: none;
  letter-spacing: 0.02em;
}

.board-row__rank {
  font-family: var(--font-num);
  font-size: 14px;
  color: var(--ink-3);
}

.board-row__rank.is-top {
  color: var(--accent);
  font-weight: 700;
}

.board-row__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
}

/* 本人行：换底色 + 左侧强调条，一眼能找到 */
.board-row.is-me {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.board-row.is-me .avatar {
  background: var(--accent);
  color: var(--accent-contrast);
}

.board-row.is-me .board-row__name-text {
  color: var(--accent-ink);
  font-weight: 700;
}

[data-theme="dark"] .board-row.is-me .board-row__name-text {
  color: var(--accent);
}

.board-row.is-me .board-row__score {
  color: var(--accent-ink);
  font-weight: 700;
}

[data-theme="dark"] .board-row.is-me .board-row__score {
  color: var(--accent);
}

/* 我的成绩：位于表头下方、第一名之上，用浅绿色底突出，版式与普通排名行一致 */
.board-pinned {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
}

.board-pinned .board-row {
  /* 与普通行同样的网格、间距与内边距，只换底色 */
  background: transparent;
  animation: none;
  box-shadow: inset 3px 0 0 var(--accent);
}

.board-pinned .board-row.is-me .board-row__rank,
.board-pinned .board-row.is-me .board-row__name-text {
  color: var(--accent-ink);
  font-weight: 700;
}

.board-pinned .board-row.is-me .board-row__org,
.board-pinned .board-row.is-me .board-row__time,
.board-pinned .board-row.is-me .board-row__date {
  color: var(--ink-2);
}

.board-pinned .board-row.is-me .board-row__score {
  color: var(--accent-ink);
  font-weight: 700;
}

.board-pinned .board-row.is-me .avatar {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* 查看更多 */
.board__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
}

.board__more-note {
  font-size: 13px;
  color: var(--ink-3);
}

.board-row__name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.board-row__org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: 13.5px;
}

.board-row__score {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 650;
  text-align: center;
}

.board-row--head .board-row__score {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-3);
  text-align: center;
}

.board-row__time,
.board-row__date {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

.board-row--head .board-row__time,
.board-row--head .board-row__date {
  font-family: var(--font-sans);
  font-size: 12.5px;
  text-align: center;
}

.board__empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-3);
}

.board__empty strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  margin-bottom: 6px;
}

/* 骨架屏 */
.skeleton-row {
  height: 46px;
  margin: 12px 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* 我的名次卡 */
.my-rank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: var(--radius-card);
  border: 1px dashed var(--line-strong);
  background: var(--surface);
}

.my-rank[hidden] {
  display: none;
}

.my-rank__label {
  font-size: 13px;
  color: var(--ink-3);
}

.my-rank__value {
  font-size: 15px;
  font-weight: 650;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- 答题页 */
.quiz {
  padding: 32px 0 72px;
}

.quiz__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.quiz__progress {
  flex: 1 1 240px;
  min-width: 180px;
}

.quiz__progress-text {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.quiz__progress-text b {
  font-family: var(--font-num);
  font-weight: 650;
  color: var(--ink);
}

.quiz__track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.quiz__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}

.quiz__timer {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
}

.quiz__timer b {
  font-family: var(--font-num);
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.quiz__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 28px;
  margin-top: 26px;
  align-items: start;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}

.question {
  padding: 30px 32px 32px;
}

.question__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-3);
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tag--scene {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

[data-theme="dark"] .tag--scene {
  color: var(--accent);
}

.case-file {
  margin: 18px 0 0;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
}

.question__stem {
  margin-top: 24px;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.5;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.options {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}

.option:hover {
  border-color: var(--ink-3);
  background: var(--surface-2);
}

.option:active {
  transform: scale(0.995);
}

.option__key {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.option__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

.option__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.option.is-selected .option__key {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.option__check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: transparent;
  font-size: 12px;
  line-height: 1;
}

.option.is-selected .option__check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.option:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.question__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.question__hint {
  font-size: 13px;
  color: var(--ink-3);
}

/* 答题卡侧栏 */
.sheet {
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
  padding: 22px;
}

.sheet__title {
  font-size: 14px;
  font-weight: 650;
}

.sheet__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.sheet__cell {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-num);
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.sheet__cell:hover {
  border-color: var(--ink-3);
}

.sheet__cell.is-answered {
  background: var(--surface-3);
  border-color: var(--surface-3);
  color: var(--ink);
  font-weight: 650;
}

.sheet__cell.is-current {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}

.sheet__cell.is-answered.is-current {
  background: var(--accent-soft);
}

.sheet__legend {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.sheet__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  flex: none;
}

.legend-swatch--answered {
  background: var(--surface-3);
  border-color: var(--surface-3);
}

.legend-swatch--current {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.sheet__submit {
  margin-top: 20px;
}

.sheet__submit .btn {
  width: 100%;
}

.sheet__note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}

/* ---------------------------------------------------------------- 成绩页 */
.result {
  padding: 48px 0 72px;
}

.result__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 28px;
  align-items: stretch;
}

.score-card {
  padding: 34px 34px 30px;
  display: flex;
  flex-direction: column;
}

.score-card__label {
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

.score-card__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}

.score-card__number {
  font-family: var(--font-num);
  font-size: clamp(64px, 9vw, 108px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.score-card__denom {
  font-family: var(--font-num);
  font-size: 20px;
  color: var(--ink-3);
}

.score-card__grade {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 30px;
  margin-top: 14px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 13.5px;
  font-weight: 650;
}

.score-card__advice {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 46ch;
  padding-bottom: 22px;
}

.score-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.metric {
  padding: 0 16px 0 0;
}

.metric + .metric {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.metric__value {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
}

.metric__label {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.rank-card {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rank-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.rank-card__label {
  font-size: 13px;
  color: var(--ink-3);
}

.rank-card__value {
  margin-top: 6px;
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.rank-card__value small {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 6px;
}

.rank-card__pct {
  text-align: right;
}

.rank-card__pct b {
  display: block;
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 650;
}

.rank-card__pct span {
  font-size: 12.5px;
  color: var(--ink-3);
}

.rank-card__meta {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}

.rank-card__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.rank-card__meta-row b {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  justify-content: center;
}

/* 排行榜页的操作区：在整页宽度内居中 */
.board-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  justify-content: center;
}

/* 逐题解析 */
.breakdown-head {
  margin-top: 44px;
}

/* 成绩页这句摘要较长，放开 62ch 限制，避免折成两行 */
.breakdown-head .section__lead {
  max-width: none;
}

.breakdown {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.breakdown-item {
  padding: 22px 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  border-left: 3px solid var(--ok);
}

.breakdown-item.is-wrong {
  border-left-color: var(--accent);
}

.breakdown-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-3);
}

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 23px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 650;
  background: var(--ok-soft);
  color: var(--ok);
}

.verdict--wrong {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

[data-theme="dark"] .verdict--wrong {
  color: var(--accent);
}

.breakdown-item__stem {
  margin-top: 10px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.55;
}

.breakdown-item__answers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-2);
}

.breakdown-item__answers b {
  color: var(--ink);
  font-family: var(--font-num);
}

.answer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 13px;
}

.answer-pill b {
  font-family: var(--font-num);
}

.answer-pill--right {
  background: var(--ok-soft);
  color: var(--ok);
}

.answer-pill--wrong {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

[data-theme="dark"] .answer-pill--wrong {
  color: var(--accent);
}

.breakdown-item__expl {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-2);
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

.breakdown-item__expl strong {
  color: var(--ink);
  font-weight: 650;
}

/* ---------------------------------------------------------------- 提示条 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 60;
  transform: translate(-50%, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 520px);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- 加载 / 错误 */
.state {
  padding: 72px 24px;
  text-align: center;
}

.state__title {
  font-size: 17px;
  font-weight: 650;
}

.state__text {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--ink-3);
}

.state__actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1000px) {
  .quiz__layout {
    grid-template-columns: 1fr;
  }

  .sheet {
    position: static;
  }

  .sheet__grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .result__grid {
    grid-template-columns: 1fr;
  }

  /* 平板：名次 / 姓名 / 累计分 / 轮次（隐藏最近交卷），共 4 列 */
  .board-row {
    grid-template-columns:
      minmax(48px, 0.6fr)
      minmax(0, 2fr)
      minmax(72px, 0.9fr)
      minmax(64px, 0.8fr);
    gap: 14px;
    padding: 13px 20px;
  }

  .board-row__date {
    display: none;
  }

  .board-row--head .board-row__date {
    display: none;
  }
}

@media (max-width: 720px) {
  :root {
    /* 手机端顶栏单行：logo 在左，登录与深色按钮在右上角 */
    --topbar-h: 64px;
  }

  .topbar__inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
  }

  .brand__logo {
    height: 26px;
    max-width: 100%;
  }

  .topbar__nav {
    flex: none;
    gap: 6px;
    margin-left: auto;
    width: auto;
    justify-content: flex-end;
  }

  .wrap {
    padding: 0 16px;
  }

  .nav-btn {
    padding: 6px 10px;
    font-size: 13px;
  }

  .theme-toggle {
    padding: 0 12px;
  }

  .page {
    padding: 24px 16px 56px;
  }

  /* 手机端竞赛列表：一行两个改为单列，卡片更易点 */
  .comp-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* 单列时两栏竖向堆叠，间距与卡片间距一致 */
  .comp-col {
    gap: 14px;
  }

  .comp-card__body {
    padding: 13px 15px 15px;
  }

  .comp-card__name {
    font-size: 15.5px;
  }

  .comp-card__meta {
    font-size: 12.5px;
  }

  .modal {
    padding: 16px;
    align-items: center;
  }

  .modal__panel {
    padding: 24px 20px 26px;
    max-height: calc(100dvh - 32px);
  }

  .usermenu {
    right: 12px;
    left: 12px;
    width: auto;
  }

  .panel {
    padding: 22px 20px 24px;
  }

  .section {
    padding: 40px 0;
  }

  .question {
    padding: 20px 18px 24px;
  }

  .case-file {
    padding: 16px;
    font-size: 14.5px;
  }

  .option {
    padding: 14px;
    grid-template-columns: 26px minmax(0, 1fr) 18px;
    gap: 12px;
  }

  .option__key {
    width: 26px;
    height: 26px;
  }

  .option__text {
    font-size: 14.5px;
  }

  .sheet__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* 手机端榜单只保留「名次 / 姓名 / 累计分」3 列。
     网格列数必须与可见单元格数一致，否则会整体错位。 */
  .board-row {
    grid-template-columns:
      minmax(34px, 0.5fr)
      minmax(0, 2.1fr)
      minmax(56px, 0.8fr);
    gap: 10px;
    padding: 12px 14px;
    font-size: 13.5px;
  }

  /* 学号、轮次、交卷时间在小屏隐藏 */
  .board-row__org,
  .board-row--head .board-row__org {
    display: none;
  }

  .board-row__time,
  .board-row--head .board-row__time {
    display: none;
  }

  .board-row__date,
  .board-row--head .board-row__date {
    display: none;
  }

  .board-row--head > span {
    white-space: nowrap;
    font-size: 11.5px;
  }

  /* 姓名列允许收缩，避免长名字撑破网格 */
  .board-row__name-text {
    font-size: 13px;
  }

  .avatar {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .board-row__score {
    font-size: 15px;
  }

  .board-row__time {
    font-size: 12px;
  }

  .board__toolbar {
    padding: 12px 14px;
  }

  .score-card {
    padding: 24px 20px;
  }

  .rank-card {
    padding: 22px 20px;
  }

  /* 本轮答对 / 本轮得分 / 累计轮次 并排一行，
     每项内部「数值在上、说明文字在下」，与电脑端观感一致。 */
  .score-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 16px;
  }

  .metric {
    display: block;
    min-width: 0;
    padding: 0 8px 0 0;
  }

  .metric + .metric {
    padding-left: 10px;
    border-left: 1px solid var(--line);
  }

  .metric__value {
    font-size: 17px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .metric__label {
    margin-top: 2px;
    font-size: 11px;
    white-space: nowrap;
  }

  .breakdown-item {
    padding: 18px 16px;
  }

  .result__actions .btn {
    flex: 1 1 auto;
  }
}

/* 超窄屏（320px 一类）：三项指标仍并排一行，字号略缩，保证不折行 */
@media (max-width: 380px) {
  .metric {
    padding-right: 6px;
  }

  .metric + .metric {
    padding-left: 8px;
  }

  .metric__value {
    font-size: 16px;
  }

  .metric__label {
    font-size: 10.5px;
  }
}

/* ---------------------------------------------------------------- 动效降级 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* 减少透明材质偏好 */
@media (prefers-reduced-transparency: reduce) {
  .topbar {
    background: var(--bg);
    backdrop-filter: none;
  }
}