/* ==========================================================================
   多巴胺 OJ · 视觉规范
   刻意和作者的另外两个站（项目簿 / 记作业，都是纸张铅字质感）拉开距离：
   高饱和撞色 + 大圆角 + 2~3px 深色描边 + 4px 硬阴影，做成「贴纸 / 漫画」的手感。
   规矩只有三条：
     1. 阴影一律是「硬」的（0 模糊、带偏移），绝不用柔软的投影；
     2. 每个色块都描黑边，保证在浅色底上依然有分量；
     3. 动效幅度小（抬起 2px、放大 1.02），热闹但不晕。
   ========================================================================== */

:root {
  /* 撞色盘 */
  --pink: #FF3D81;
  --yellow: #FFD23F;
  --mint: #3DDC97;
  --violet: #5B5BFF;
  --orange: #FF7A45;
  --cyan: #00C2D1;

  /* 中性 */
  --ink: #1A1A1A;
  --ink-2: #4A4A55;
  --ink-3: #8B8B99;
  --paper: #FFF8EE;
  --paper-2: #FFEFD9;
  --surface: #FFFFFF;
  --surface-2: #FFFBF3;
  --line: #1A1A1A;
  --line-soft: #E4DCCB;

  /* 语义色（判题结果用色块表达） */
  --ac: #3DDC97;
  --wa: #FF3D81;
  --tle: #FF7A45;
  --mle: #FFD23F;
  --re: #5B5BFF;
  --ce: #9A9A9A;
  --pe: #00C2D1;
  --se: #7A4B2A;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --shadow: 4px 4px 0 var(--line);
  --shadow-sm: 3px 3px 0 var(--line);
  --shadow-lg: 6px 6px 0 var(--line);
  --nav-h: 62px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  background-color: var(--paper);
  /* 手账感的点阵底纹，很淡，不抢内容 */
  background-image: radial-gradient(rgba(26, 26, 26, 0.07) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; }
code, pre, .mono { font-family: var(--font-mono); }

::selection { background: var(--yellow); }

/* --------------------------------- 导航 ---------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--nav-h);
  background: var(--pink);
  border-bottom: 3px solid var(--line);
}
.nav-inner {
  max-width: 1220px; min-height: var(--nav-h); margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--yellow); border: 2.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; box-shadow: 2px 2px 0 var(--line);
  transform: rotate(-4deg);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 900; font-size: 17px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.brand-sub { font-size: 11px; color: rgba(255,255,255,.85); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 2.5px solid transparent; background: transparent;
  color: #fff; font-size: 13.5px; font-weight: 700; font-family: inherit;
  transition: transform .12s, background .12s;
}
.nav-link:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.nav-link.active { background: var(--yellow); color: var(--ink); border-color: var(--line); box-shadow: 2px 2px 0 var(--line); }
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.nav-user { color: #fff; font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }
/* 它现在是个按钮（点了进自己的个人主页），把浏览器默认样式清掉 */
button.nav-user { background: none; border: 0; padding: 2px 4px; border-radius: 8px; cursor: pointer; font-family: inherit; }
button.nav-user:hover { background: rgba(255, 255, 255, .18); }
.nav-toggle {
  display: none; background: var(--yellow); border: 2.5px solid var(--line);
  border-radius: 10px; padding: 6px 10px; cursor: pointer; color: var(--ink);
  font-size: 16px; box-shadow: 2px 2px 0 var(--line); font-family: inherit;
}
.nav .btn-sm { background: var(--surface); }

/* --------------------------------- 页面 ---------------------------------- */
.page { max-width: 1220px; margin: 0 auto; padding: 24px 18px 70px; min-height: calc(100vh - var(--nav-h) - 130px); }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 27px; }
.page-title-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 13px;
  background: var(--pink); color: #fff;
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.page-sub { color: var(--ink-3); font-size: 12.5px; font-family: var(--font-mono); font-weight: 600; }
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.muted { color: var(--ink-3); }
.right { margin-left: auto; }
.center { text-align: center; }
.spacer { flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* --------------------------------- 卡片 ---------------------------------- */
.card {
  background: var(--surface);
  border: 2.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.card-pad { padding: 18px 20px; }
.card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 800; margin-bottom: 4px;
}
.card-title .card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 8px;
  background: var(--paper-2); color: var(--ink);
  border: 2px solid var(--ink);
}
.card-title .ic { stroke-width: 1.9; }
.card-hover { transition: transform .14s, box-shadow .14s; }
.card-hover:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.divider { height: 2px; background: var(--line-soft); margin: 12px 0; border-radius: 2px; }

/* --------------------------------- 按钮 ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  border: 2.5px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 800; font-family: inherit;
  box-shadow: var(--shadow-sm); transition: transform .1s, box-shadow .1s, background .12s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-primary { background: var(--pink); color: #fff; }
.btn-mint { background: var(--mint); color: var(--ink); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-violet { background: var(--violet); color: #fff; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-danger { background: var(--wa); color: #fff; }
.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; font-weight: 700; }
.btn-ghost:hover:not(:disabled) { background: var(--paper-2); box-shadow: none; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-width: 2px; box-shadow: 2px 2px 0 var(--line); }
.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn-block { width: 100%; }

/* --------------------------------- 表单 ---------------------------------- */
.field { margin-bottom: 13px; }
.label { display: block; font-size: 12.5px; font-weight: 800; margin-bottom: 5px; color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; padding: 9px 12px; font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 2.5px solid var(--line); border-radius: var(--r-sm);
  outline: none; transition: box-shadow .12s, background .12s;
}
.input:focus, .select:focus, .textarea:focus { background: #fff; box-shadow: 3px 3px 0 var(--mint); }
.textarea { min-height: 92px; resize: vertical; line-height: 1.65; }
.textarea.mono, .input.mono { font-family: var(--font-mono); font-size: 13px; }
.form-hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }
.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 700; user-select: none; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--pink); cursor: pointer; }

/* --------------------------------- 徽章 / 胶囊 --------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  border: 2px solid var(--line); background: var(--surface); white-space: nowrap;
}
.pill-diff { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.25); }
.tag-pill {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--paper-2);
  border: 2px solid var(--line); cursor: pointer;
}
.tag-pill.active { background: var(--violet); color: #fff; }
.tag-list { display: flex; gap: 5px; flex-wrap: wrap; }

/* 判题结果色块 */
.verdict {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 11px; border-radius: 8px; font-weight: 900; font-size: 12.5px;
  border: 2.5px solid var(--line); box-shadow: 2px 2px 0 var(--line);
  font-family: var(--font-mono); color: var(--ink); white-space: nowrap;
}
.verdict-lg { padding: 9px 20px; font-size: 18px; border-radius: 12px; box-shadow: 3px 3px 0 var(--line); }
.verdict-AC { background: var(--ac); }
.verdict-WA { background: var(--wa); color: #fff; }
.verdict-TLE { background: var(--tle); color: #fff; }
.verdict-MLE { background: var(--mle); }
.verdict-RE { background: var(--re); color: #fff; }
.verdict-CE { background: var(--ce); color: #fff; }
.verdict-PE { background: var(--pe); }
.verdict-SE { background: var(--se); color: #fff; }
.verdict-WAIT { background: var(--yellow); }
.verdict-MANUAL { background: var(--violet); color: #fff; }
.verdict-JUDGING { background: var(--yellow); animation: pulse 1s ease-in-out infinite; }

@keyframes pulse { 50% { transform: scale(1.06); } }

/* 结果小方块（排行榜矩阵 / 逐点结果） */
.cell {
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--line); display: inline-block; flex-shrink: 0;
  font-size: 9px; font-weight: 900; text-align: center; line-height: 18px;
  color: var(--ink); cursor: default; transition: transform .1s;
}
.cell:hover { transform: scale(1.18); z-index: 2; }
.cell-empty { background: var(--surface); border-style: dashed; border-color: var(--line-soft); }
.cell-AC { background: var(--ac); }
.cell-WA { background: var(--wa); }
.cell-TLE { background: var(--tle); }
.cell-MLE { background: var(--mle); }
.cell-RE { background: var(--re); }
.cell-CE { background: var(--ce); }
.cell-PE { background: var(--pe); }
.cell-SE { background: var(--se); }
.cell-WAIT { background: var(--yellow); }
.cell-MANUAL { background: var(--violet); }

/* --------------------------------- 统计条 -------------------------------- */
.statbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
  background: var(--surface); border: 2.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 14px 16px;
}
.stat-label { font-size: 12px; font-weight: 800; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
.stat-num { font-size: 28px; font-weight: 900; font-family: var(--font-mono); line-height: 1.2; }
.stat-num small { font-size: 14px; font-weight: 800; }
.stat-pink { background: var(--pink); color: #fff; }
.stat-pink .stat-label { color: rgba(255,255,255,.9); }
.stat-yellow { background: var(--yellow); }
.stat-mint { background: var(--mint); }
.stat-violet { background: var(--violet); color: #fff; }
.stat-violet .stat-label { color: rgba(255,255,255,.9); }

/* --------------------------------- 公告 ---------------------------------- */
.announce {
  background: var(--yellow); border: 2.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 15px 18px; margin-bottom: 20px;
}
.announce-title { font-weight: 900; font-size: 15px; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }

/* --------------------------------- 题目列表 ------------------------------ */
.problem-list { display: flex; flex-direction: column; gap: 12px; }
.problem-row {
  /* 标题那一列给 minmax(0, 1fr)，否则在窄容器（首页右栏、移动端）里
     会被其它列挤成一条竖线，标题一个字一行 —— 这是第一版截图上真实出现过的样子。 */
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 190px 168px;
  align-items: center; gap: 14px;
  background: var(--surface); border: 2.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 13px 18px;
  transition: transform .14s, box-shadow .14s; cursor: pointer;
}
.problem-row:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
/* 首页里嵌在卡片内的小号题目行：只用「题号 + 标题 + 统计」三列 */
.problem-row.compact { grid-template-columns: 82px minmax(0, 1fr) 150px; padding: 10px 13px; box-shadow: none; }
/* 登录后题目列表右侧多一列星星（收藏）。窄屏和手机上另外安排，见文件末尾的响应式段。 */
.problem-row.has-fav { grid-template-columns: 92px minmax(0, 1fr) 190px 168px 34px; }
.fav-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  padding: 0; border: 2px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink-3); cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .12s, color .12s, background .12s;
}
.fav-btn:hover { transform: translate(-1px, -1px); color: var(--ink); box-shadow: var(--shadow); }
.fav-btn:disabled { opacity: .6; cursor: default; }
/* 收藏了就点亮：svg 上的 fill="none" 是表现属性，CSS 能盖过它 */
.fav-btn.on { background: var(--yellow); border-color: var(--line); color: var(--ink); }
.fav-btn.on .ic { fill: var(--yellow); }
.fav-btn-row { width: auto; height: auto; padding: 5px 10px; gap: 6px; font-weight: 800; font-size: 12.5px; }
/* 个人主页上那个「收藏 N 道」：看着像标签，其实点了会去题目列表 */
.pill-link { border: 2px solid var(--line); cursor: pointer; font-weight: 800; box-shadow: var(--shadow-sm); }
.pill-link:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow); }

/* 后台「数据备份」那张卡片里的备份清单 */
.backup-list { display: flex; flex-direction: column; gap: 8px; }
.backup-row {
  border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--surface-2);
  padding: 9px 12px;
}
.backup-row .backup-main { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 3px; }
.problem-code { font-family: var(--font-mono); font-weight: 900; font-size: 14px; }
.problem-title { font-weight: 800; font-size: 15.5px; }
.problem-meta { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.problem-rate { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); font-weight: 700; }
.bar { height: 9px; background: var(--paper-2); border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--mint); }

/* --------------------------------- 题目详情 ------------------------------ */
.detail-grid { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
.detail-side { position: sticky; top: calc(var(--nav-h) + 14px); display: flex; flex-direction: column; gap: 14px; }
.sample-box { margin-top: 10px; }
.sample-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sample-block { min-width: 0; }
.sample-label { font-size: 12px; font-weight: 800; color: var(--ink-3); margin-bottom: 4px; }
.code-box {
  background: #16161D; color: #E8E8F0; border: 2.5px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75;
  overflow-x: auto; white-space: pre; margin: 0;
}
.code-box.light { background: var(--surface-2); color: var(--ink); }
.code-editor {
  background: #16161D; color: #E8E8F0; border: 2.5px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.8;
  width: 100%; min-height: 300px; resize: vertical; outline: none; tab-size: 4;
}
.code-editor:focus { box-shadow: 3px 3px 0 var(--violet); }

/* --------------------------------- 排行榜 -------------------------------- */
.rank-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.rank-table th {
  text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 800;
  padding: 0 10px 4px; white-space: nowrap;
}
.rank-table td { padding: 9px 10px; background: var(--surface); border-top: 2.5px solid var(--line); border-bottom: 2.5px solid var(--line); }
.rank-table td:first-child { border-left: 2.5px solid var(--line); border-radius: var(--r) 0 0 var(--r); }
.rank-table td:last-child { border-right: 2.5px solid var(--line); border-radius: 0 var(--r) var(--r) 0; }
.rank-no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; border-radius: 10px; font-weight: 900;
  border: 2.5px solid var(--line); background: var(--paper-2); font-family: var(--font-mono);
}
.rank-1 { background: var(--yellow); }
.rank-2 { background: #D8D8E0; }
.rank-3 { background: var(--orange); color: #fff; }
.cell-matrix { display: flex; gap: 4px; flex-wrap: wrap; }
.rank-me td { background: #FFF3F8; }

/* --------------------------------- 表格 ---------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; padding: 9px 11px; font-size: 12px; font-weight: 800; color: var(--ink-2);
  border-bottom: 2.5px solid var(--line); white-space: nowrap; background: var(--paper-2);
}
.table td { padding: 9px 11px; border-bottom: 2px solid var(--line-soft); white-space: nowrap; }
.table tr:hover td { background: var(--surface-2); }
.table td.wrap-cell { white-space: normal; }

/* --------------------------------- 提交详情 ------------------------------ */
.case-list { display: flex; flex-direction: column; gap: 8px; }
.case-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border: 2.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.case-idx { font-family: var(--font-mono); font-weight: 900; font-size: 13px; min-width: 60px; }
.case-stats { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.case-msg { font-size: 12.5px; color: var(--ink-2); word-break: break-all; }

/* --------------------------------- 弹窗 ---------------------------------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 200; background: rgba(26, 26, 26, .45);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal {
  background: var(--surface); border: 3px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-height: 88vh; display: flex; flex-direction: column;
  animation: popIn .16s ease-out;
}
@keyframes popIn { from { transform: scale(.94) translateY(8px); opacity: 0; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 2.5px solid var(--line); background: var(--paper-2);
  border-radius: calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0;
}
.modal-title { font-weight: 900; font-size: 16px; }
.modal-close {
  background: var(--surface); border: 2.5px solid var(--line); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 18px; line-height: 1;
  box-shadow: 2px 2px 0 var(--line); font-family: inherit; color: var(--ink);
}
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot {
  padding: 13px 18px; border-top: 2.5px solid var(--line);
  display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap;
}

/* --------------------------------- 提示条 -------------------------------- */
.toast-wrap { position: fixed; top: 76px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 9px; pointer-events: none; }
.toast {
  padding: 10px 16px; border-radius: 999px; border: 2.5px solid var(--line);
  box-shadow: var(--shadow-sm); font-weight: 800; font-size: 13.5px;
  background: var(--mint); color: var(--ink); max-width: 330px;
}
.toast.error { background: var(--wa); color: #fff; }
.toast.warn { background: var(--yellow); }
.toast.info { background: var(--violet); color: #fff; }

.alert { display: flex; gap: 9px; padding: 12px 15px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.75; border: 2.5px solid var(--line); font-weight: 600; }
.alert.info { background: #E8F7FF; }
.alert.warn { background: #FFF6D6; }
.alert.danger { background: #FFE4EF; }
.alert.mint { background: #DFFBEE; }

.empty { text-align: center; padding: 46px 20px; color: var(--ink-3); }
.empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: 12px;
  border-radius: 20px;
  background: var(--surface-2); color: var(--ink-3);
  border: 2.5px solid var(--line-soft);
}
.empty-title { font-weight: 800; font-size: 16px; color: var(--ink-2); }
.empty-desc { font-size: 12.5px; margin-top: 5px; }

.spinner {
  width: 30px; height: 30px; margin: 60px auto; border-radius: 50%;
  border: 4px solid var(--paper-2); border-top-color: var(--pink);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------- 分页 ---------------------------------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.pager-info { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }

/* --------------------------------- 代码区 -------------------------------- */
.code-wrap { position: relative; }
.lang-chip {
  position: absolute; top: 9px; right: 11px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 800; background: var(--yellow); color: var(--ink);
  padding: 2px 9px; border-radius: 999px; border: 2px solid var(--line);
}

/* --------------------------------- Markdown ------------------------------ */
.md-p { margin: 0 0 11px; line-height: 1.85; }
.md-h { margin: 18px 0 9px; font-size: 17px; border-left: 5px solid var(--pink); padding-left: 9px; }
.md-ul, .md-ol { margin: 0 0 11px; padding-left: 24px; line-height: 1.85; }
.md-ul li, .md-ol li { margin-bottom: 3px; }
.md-quote {
  margin: 0 0 11px; padding: 9px 14px; background: var(--paper-2);
  border-left: 5px solid var(--violet); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.md-quote .md-p:last-child { margin-bottom: 0; }
.md-hr { border: none; border-top: 2.5px dashed var(--line-soft); margin: 18px 0; }
.md-pre {
  position: relative; background: #16161D; color: #E8E8F0;
  border: 2.5px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px; overflow-x: auto; font-size: 12.5px; line-height: 1.75; margin: 0 0 12px;
}
.md-pre[data-lang]::after {
  content: attr(data-lang); position: absolute; top: 7px; right: 10px;
  font-size: 10.5px; color: var(--ink-3); font-family: var(--font-mono);
  background: rgba(255,255,255,.1); padding: 1px 7px; border-radius: 999px;
}
.md-pre code { font-family: var(--font-mono); }
.md-code {
  background: var(--paper-2); border: 1.5px solid var(--line-soft);
  padding: 1px 6px; border-radius: 6px; font-size: 0.92em; font-family: var(--font-mono);
}
/* 公式：真正由 KaTeX 排版（vendor/katex）。这两个类只是排版完成前的占位/兜底：
   万一 katex.min.js 没加载成功，页面至少还能看到 $…$ 原文，而不是错位的一片空白。 */
.md-math-inline { word-break: break-word; overflow-wrap: anywhere; }
.md-math-block {
  display: block; margin: 12px 0; padding: 2px 0;
  overflow-x: auto; overflow-y: hidden; text-align: center;
}
/* KaTeX 的默认字号是 1.21em，在题面这种 14px 正文里偏大，收一点更贴合整体 */
.katex { font-size: 1.04em; }
.katex-display { margin: 10px 0; }
.katex-display > .katex { font-size: 1.12em; }
/* 长公式在窄屏上横向滚动，而不是把卡片顶破 */
.md-body .katex-display { max-width: 100%; padding-bottom: 2px; }
.md-table-wrap { overflow-x: auto; margin: 0 0 12px; }
.md-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.md-table th, .md-table td { border: 2px solid var(--line); padding: 6px 11px; text-align: left; }
.md-table th { background: var(--yellow); font-weight: 800; }
.md-img { max-width: 100%; border-radius: var(--r-sm); border: 2px solid var(--line); }

/* --------------------------------- 页脚 ---------------------------------- */
.footer {
  max-width: 1220px; margin: 0 auto; padding: 22px 18px 48px;
  border-top: 2.5px dashed var(--line-soft); color: var(--ink-3); font-size: 12px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.footer-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.footer-dot { color: var(--line-soft); }
.footer-beian { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.footer-beian a { color: var(--ink-3); font-size: 11.5px; }

/* --------------------------------- 404 ---------------------------------- */
.nf { text-align: center; padding: 60px 20px; }
.nf-code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: .16em; font-weight: 800; }
.nf h1 { font-size: 30px; margin: 10px 0 8px; }
.nf p { color: var(--ink-2); }

/* --------------------------------- 响应式 -------------------------------- */
@media (max-width: 1080px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-side { position: static; }
  .problem-row { grid-template-columns: 84px minmax(0, 1fr) 140px; }
  /* 有星星时是四列（限时那列在窄屏本来就藏起来了） */
  .problem-row.has-fav { grid-template-columns: 84px minmax(0, 1fr) 140px 30px; }
  .problem-row .problem-hide-md { display: none; }
  .statbar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* 输入框字号 ≥16px，否则 iOS 聚焦时会自动放大页面 */
  .input, .select, .textarea, .code-editor { font-size: 16px; }
  .code-editor { font-size: 14px; min-height: 220px; }
  body { font-size: 13.5px; }

  .nav-inner { padding: 8px 13px; gap: 9px; }
  .brand-logo { width: 33px; height: 33px; font-size: 17px; }
  .brand-name { font-size: 15px; }
  .brand-sub { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-links {
    order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 5px;
    padding: 9px 0 4px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-link { justify-content: flex-start; padding: 9px 13px; }
  .nav-right { order: 2; }

  .page { padding: 16px 13px calc(52px + env(safe-area-inset-bottom)); }
  .page-head h1 { font-size: 22px; }
  .grid-2, .grid-3, .grid-4, .statbar, .sample-grid { grid-template-columns: 1fr; }
  .card-pad { padding: 15px; }

  /* 题目卡片改成两行布局，标题不被挤扁 */
  .problem-row { grid-template-columns: 1fr; gap: 8px; padding: 13px 15px; }
  .problem-row .problem-code { font-size: 13px; }
  .problem-row .problem-hide-md { display: none; }
  /* 手机上也是单列，星星就钉在卡片右上角（题号那一行很短，不会撞上） */
  .problem-row.has-fav { position: relative; }
  .problem-row.has-fav .fav-btn { position: absolute; right: 12px; top: 11px; }
  /* 首页那种紧凑卡片在手机上折成两行：题号 + 标题一行，统计单独一行。
     不这样处理的话「通过 N · 尝试 M」会独占一列，把标题挤成一列竖字。 */
  .problem-row.compact { grid-template-columns: 74px minmax(0, 1fr); row-gap: 3px; }
  .problem-row.compact .compact-rate { grid-column: 1 / -1; }

  .modal-mask { padding: 8px; align-items: flex-end; }
  .modal { max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .modal-foot .btn { flex: 1 1 auto; }
  .toast-wrap { left: 13px; right: 13px; top: 70px; }
  .toast { max-width: none; }
  .footer { flex-direction: column; align-items: flex-start; gap: 7px; padding: 18px 14px calc(30px + env(safe-area-inset-bottom)); }
  .footer-main, .footer-beian { flex-direction: column; align-items: flex-start; gap: 5px; }
  .footer-dot { display: none; }
  .rank-table th, .rank-table td { padding: 7px 8px; font-size: 12.5px; }
  .cell { width: 19px; height: 19px; }
}

/* 页脚公安备案警徽（和另外两个站用同一张本地图片，不依赖外部站点） */
.beian-badge { display: inline-block; flex-shrink: 0; vertical-align: -2px; }

/* ================================ 题解社区 ================================ */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 3px;
  border-radius: 9px; background: var(--pink); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 1; vertical-align: 1.5px;
}
.sol-item {
  border: 2px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sol-item:last-child { margin-bottom: 0; }
.sol-item[data-go] { cursor: pointer; }
.sol-item[data-go]:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.sol-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.sol-code {
  font-family: var(--font-mono); font-weight: 800; font-size: 12px; color: #fff;
  background: var(--violet); border: 2px solid var(--line); border-radius: 8px; padding: 1px 7px;
}
.sol-author { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.sol-stat { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-3); }
.sol-title { font-weight: 800; margin-top: 7px; }
.sol-excerpt { color: var(--ink-2); font-size: 13px; line-height: 1.7; margin-top: 4px; }
.sol-note { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.sol-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin-top: 9px; font-size: 12.5px; color: var(--ink-3);
}
.sol-body { margin-top: 4px; }
.sol-editor { min-height: 320px; width: 100%; }
.review-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px;
  padding: 10px 12px; border: 2px dashed var(--line); border-radius: var(--r); background: var(--paper-2);
}

/* ================================ 个人主页 ================================ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--av, var(--violet)); color: #fff; font-weight: 800;
  border: 2.5px solid var(--line); border-radius: 50%;
  box-shadow: 2px 2px 0 var(--line); letter-spacing: -0.5px;
}
/* 页眉里那一个「用户名 → 个人主页」的按钮：长得像链接，不是按钮 */
.user-link {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: inherit; text-align: left;
  border-bottom: 2px solid transparent; transition: border-color .12s, color .12s;
}
.user-link:hover { color: var(--violet); border-bottom-color: var(--violet); }

.profile-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.profile-main { flex: 1 1 260px; min-width: 0; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.profile-name { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -0.5px; }
.profile-sub { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; }
.profile-bio {
  margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
  border-left: 3px solid var(--line-soft); padding-left: 10px;
}
/* 进度条：多巴胺色 + 硬边框，和站内其它卡片一套语言 */
.progress {
  height: 12px; background: var(--paper-2); border: 2.5px solid var(--line);
  border-radius: 8px; overflow: hidden; box-shadow: 1.5px 1.5px 0 var(--line);
}
.progress > span { display: block; height: 100%; background: var(--mint); border-radius: 4px; transition: width .3s; }
.diff-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.diff-row:last-child { margin-bottom: 0; }
.flex1 { flex: 1 1 auto; min-width: 0; }

@media (max-width: 760px) {
  .profile-head { gap: 12px; }
  .profile-name { font-size: 21px; }
  .profile-actions { flex-direction: row; width: 100%; }
  .profile-actions .btn { flex: 1 1 auto; }
}

/* ========================= 名字颜色与称号（洛谷那套） ========================= */
/* 名字：颜色由 --uname 或内联 style 给；没有就是正文色 */
.uname { font-weight: 700; }
.user-link .uname { border-bottom: 2px solid transparent; }
.user-link:hover .uname { border-bottom-color: currentColor; }
/* 称号：小胶囊，底色由名字颜色兑出来（--tag），没设颜色就是中性灰 */
.utag {
  display: inline-block; margin-left: 5px; padding: 0.5px 6px; vertical-align: 1px;
  font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap;
  color: var(--tag, var(--ink-2));
  border: 1.6px solid currentColor; border-radius: 7px;
  background: #F4F1EA; /* color-mix 不认识的老浏览器退回中性底 */
  background: color-mix(in srgb, var(--tag, #8B8B99) 14%, #fff);
}
.utag-lg { font-size: 12.5px; padding: 1.5px 9px; vertical-align: 2px; }
/* 导航是粉底，称号用半透明白，别让自定义颜色在那里看不清 */
.utag-nav { color: #fff; border-color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .18); margin-left: 4px; }

/* 站长改颜色时的色块选择器 */
.color-dot {
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  background: var(--c, #1A1A1A); border: 2.5px solid var(--line);
  box-shadow: 1.5px 1.5px 0 var(--line); padding: 0;
}
.color-dot.on { outline: 3px solid var(--ink); outline-offset: 2px; }
.color-dot:hover { transform: translate(-1px, -1px); }
.tag-preview {
  margin-top: 12px; padding: 10px 12px; border: 2px dashed var(--line-soft);
  border-radius: var(--r); background: var(--paper-2); font-size: 15px;
}
.sol-actions { margin-top: 8px; }

/* ========================= 头像 / 陶片放逐 / 封禁 ========================= */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--av, var(--violet)); color: #fff; font-weight: 800;
  border: 2.5px solid var(--line); border-radius: 50%;
  box-shadow: 2px 2px 0 var(--line); letter-spacing: -0.5px; }
.avatar-img { object-fit: cover; background: var(--paper-2); }
/* 自己的头像：可点着换 */
.avatar-btn { position: relative; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.avatar-btn:hover .avatar { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line); }
.avatar-edit {
  position: absolute; right: -4px; bottom: -4px; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--ink);
  border: 2px solid var(--line); box-shadow: 1px 1px 0 var(--line);
}
.nav-user .avatar { border-width: 2px; box-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.rank-user { display: inline-flex; align-items: center; gap: 7px; }
/* 页脚里的文字链接（陶片放逐） */
.footer-link {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
  border-bottom: 1.5px solid currentColor; opacity: .9;
}
.footer-link:hover { opacity: 1; }

/* 后台的小搜索框（图标嵌在输入框里） */
.search-box { position: relative; display: inline-flex; align-items: center; }
.search-box > svg { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.search-box .input { padding-left: 32px; width: 240px; }

/* ================================= 工单 ================================= */
.ticket-title { margin: 12px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.ticket-reply {
  border: 2px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  padding: 11px 13px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
}
/* 管理员的回复换成撞色底：一眼分得清"这是官方回复" */
.ticket-reply.staff { background: #F3EEFF; border-color: var(--violet); }
.ticket-reply-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; font-size: 12.5px; }
.ticket-reply-body { font-size: 13.5px; }
.ticket-reply:last-child { margin-bottom: 0; }

/* 工单每日额度（站长给单个用户设的）：后台用户行里的小标签 + 工单页的额度提示 */
.t-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px;
  border: 2px solid var(--line); border-radius: 999px; background: var(--surface-2);
  font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
/* 前面还有封禁/禁言标签时留个缝，单独出现时不要凭空多一截空白 */
.pill + .t-chip { margin-left: 6px; }
.t-chip-used { font-weight: 400; color: var(--ink-3); }
.t-chip-off { background: var(--wa); border-color: var(--line); color: #fff; }
.t-chip-off .t-chip-used { color: rgba(255,255,255,.85); }
.t-chip-un { background: var(--mint); border-color: var(--line); }
.t-quota { margin-top: 6px; }
/* 额度用完 / 被关掉时这句提示要显眼一点，别让人以为按钮坏了 */
.t-quota-out { color: var(--wa); font-weight: 700; }