/* =============================================================================
   局域网 Online Judge -- 全站样式
   设计目标：机房/课堂环境清晰易读，浅色主题 + 高对比状态色，适配投影与手机
   视觉主题：Aluminum（铝）-- 冷峻工业风。阳极氧化铝surface + 金属倒角高光 +
             深色机器显示屏面板。全部颜色/阴影经 CSS 变量统一管理。
   ============================================================================= */

:root {
  /* ---------------------------------------------------- Aluminum 主令牌 ---- */
  /* 面（Surface）：页面主背景 / 卡片 / 极浅灰数据面 / 金属铭牌底 */
  --bg-main: #F4F6F9;
  --bg-card: #FFFFFF;
  --bg-sunken: #F8FAFC;
  --bg-plate: #F1F5F9;

  /* 线（Border）：所有卡片、表格、分割线共用一条金属细边框 */
  --border-metal: #E2E8F0;
  --border-metal-strong: #CBD5E1;

  /* 字（Text） */
  --text-main: #2C3E50;
  --text-sub: #64748B;
  --text-on-dark: #E2E8F0;
  --text-on-dark-sub: #94A3B8;

  /* 主色（保留原有蓝色作为主按钮 / 高亮） */
  --primary-blue: #3182CE;
  --primary-blue-dark: #2B6CB0;
  --primary-blue-soft: #EBF4FF;
  --primary-blue-line: #BEE3F8;

  /* 状态色（低饱和底 + 深色文字，见下方 .st-* 规则） */
  --status-pass: #10B981;
  --status-fail: #EF4444;
  --status-pending: #F59E0B;

  /* 机器金属（代码编辑器 / 深色显示屏面板） */
  --metal-panel: #2D3748;
  --metal-800: #1E293B;
  --metal-900: #0F172A;
  /* 深空灰：Hero 横幅与深色代码面板外框（设计令牌里的正式名字） */
  --bg-metal-dark: #1E293B;
  --bg-metal-darker: #0F172A;

  /* ------------------------------------------------- 硬件元件（Aluminum）---- */
  /* LED 指示灯：状态灯珠本体色，配合 --led-halo 做外发光晕圈 */
  --led-blue: #3182CE;
  --led-pass: #10B981;
  --led-fail: #EF4444;
  --led-pending: #F59E0B;
  --led-idle: #94A3B8;

  /* LCD 显示屏：地址栏 / 只读数码面板（深底 + 冷蓝荧光字） */
  --lcd-bg: #0B1220;
  --lcd-bg-2: #060B14;
  --lcd-text: #7DD3FC;
  --lcd-bezel: #05090F;

  /* 机箱面板：代码编辑器外框（4px 粗压边 + 顶部铭牌条） */
  --chassis: #2D3748;
  --chassis-bar-1: #3A4761;
  --chassis-bar-2: #2D3748;
  --chassis-line: #1A2333;
  /* 机箱右上角三颗假窗口指示灯（红/黄/绿） */
  --chassis-led-r: #FF5F57;
  --chassis-led-y: #FEBC2E;
  --chassis-led-g: #28C840;

  /* 拨动开关：物理开关的关/开两态 */
  --switch-off-1: #DDE3EB;
  --switch-off-2: #C7D0DC;
  --switch-off-line: #B4C0CF;

  /* 拉丝纹理：全站铝面共用的一组极细条纹 */
  --brush-alpha: .055;

  /* 质感：金属倒角高光（外投影 + 顶部 1px 内高光） */
  --bevel: 0 1px 3px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .8);
  --bevel-lg: 0 2px 8px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
  --bevel-inset: inset 0 2px 4px rgba(0, 0, 0, .2);
  --glow-blue: 0 0 0 3px rgba(49, 130, 206, .15);

  /* 字体：Inter 优先；局域网离线环境不外链字体，缺失时回落到系统 UI 字体 */
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  /* 代码字体：JetBrains Mono 优先，逐级回落到本机常见的等宽字体 */
  --mono: "JetBrains Mono", "Fira Code", "Cascadia Mono", Consolas,
          "SFMono-Regular", "Courier New", monospace;

  --radius: 10px;
  --radius-sm: 6px;

  /* -------------------------- 兼容别名：旧令牌名继续可用，统一指向新令牌 ---- */
  --bg: var(--bg-main);
  --card: var(--bg-card);
  --text: var(--text-main);
  --text-muted: var(--text-sub);
  --border: var(--border-metal);
  --primary: var(--primary-blue);
  --primary-dark: var(--primary-blue-dark);
  --primary-soft: var(--primary-blue-soft);
  --code-bg: var(--metal-800);
  --code-text: var(--text-on-dark);
  --shadow: var(--bevel);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background-color: var(--bg-main);
  /* 拉丝铝纹理：极细的竖向条纹，给整块"铝板"一个统一的轧制方向 */
  background-image: repeating-linear-gradient(90deg,
      rgba(148, 163, 184, var(--brush-alpha)) 0 1px,
      rgba(255, 255, 255, 0) 1px 3px);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--primary-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--mono); }

/* 数据数字（时间、内存、字节数）统一等宽，便于纵向比对 */
.stat .num, .metric .v, #stats-time, .num-mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- 顶栏 ---- */
/* 半透明磨砂玻璃：滚动时下方内容透出冷灰底，靠 backdrop-filter 保持可读性 */
.topbar {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border-bottom: 1px solid var(--border-metal);
  position: sticky;
  top: 0;
  z-index: 50;
  /* 顶栏底部 1px 高光 + 极淡投影，制造铝板压边的层次 */
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(15, 23, 42, .04);
}
/* 不支持 backdrop-filter 的老浏览器回退为不透明白，避免文字糊在内容上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: #fff; }
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.brand {
  font-weight: 700;
  font-size: 17px;
  color: var(--text-main);
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
/* Logo：拉丝铝立体铭牌 -- 冷灰渐变 + 顶部内高光 + 底部内阴影 + 外投影 */
.brand .logo {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(160deg, #FFFFFF 0%, #EEF2F7 34%, #DCE3EC 58%, #F4F7FA 100%);
  border: 1px solid var(--border-metal-strong);
  color: var(--text-main);
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-shadow: 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff,
              inset 0 -1px 0 rgba(100, 116, 139, .18),
              0 1px 2px rgba(15, 23, 42, .12);
}

.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text-sub);
  font-weight: 500;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav a:hover {
  background: rgba(49, 130, 206, .07);
  border-color: var(--primary-blue-line);
  color: var(--primary-blue);
  text-decoration: none;
}
.nav a.active {
  background: var(--primary-blue-soft);
  border-color: var(--primary-blue-line);
  color: var(--primary-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.server-state { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-sub); }
/* 服务状态指示灯：LED 圆点带外发光晕圈 */
.dot { width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; }
.dot.ok { background: var(--status-pass); box-shadow: 0 0 0 3px rgba(16, 185, 129, .16), 0 0 6px rgba(16, 185, 129, .55); }
.dot.bad { background: var(--status-fail); box-shadow: 0 0 0 3px rgba(239, 68, 68, .16), 0 0 6px rgba(239, 68, 68, .55); }

#nav-user { display: flex; align-items: center; gap: 4px; }
#nav-user a {
  padding: 6px 12px; border-radius: 8px; border: 1px solid transparent;
  color: var(--text-sub); font-weight: 500;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
#nav-user a:hover {
  background: rgba(49, 130, 206, .07);
  border-color: var(--primary-blue-line);
  color: var(--primary-blue);
  text-decoration: none;
}
/* 用户名：铣削出来的硬件插槽 + 金属刻字
   内凹阴影（凹槽）+ 底部白色描边（刻痕反光）+ 两侧固定螺钉 */
.nav-user-name {
  position: relative;
  padding: 5px 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, #E9EEF4, #DFE6EE);
  border: 1px solid #C3CDD9;
  color: #475569;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .7px;
  white-space: nowrap;
  /* 刻字：深灰字 + 下方 1px 白色高光 = 凹刻效果 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95);
  box-shadow: inset 0 2px 3px rgba(15, 23, 42, .12),
              inset 0 -1px 0 rgba(255, 255, 255, .85),
              0 1px 0 rgba(255, 255, 255, .9);
}
/* 插槽两端的固定螺钉 */
.nav-user-name::before,
.nav-user-name::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: #A9B6C6;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, .45), 0 1px 0 rgba(255, 255, 255, .9);
}
.nav-user-name::before { left: 5px; }
.nav-user-name::after  { right: 5px; }

/* -------------------------------------------------------------- 标签页 ---- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs .tab { background: var(--bg-card); color: var(--text-sub); border-color: var(--border-metal); box-shadow: var(--bevel); }
.tabs .tab:hover { background: var(--bg-sunken); color: var(--primary-blue); }
.tabs .tab.active {
  background: var(--primary-blue-soft); color: var(--primary-blue);
  border-color: var(--primary-blue-line); font-weight: 600;
}
.panel { animation: fade-in .15s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------- 登录/注册 ---- */
.auth-card { max-width: 460px; margin: 40px auto; }
.auth-card h1 { margin: 0 0 4px; font-size: 21px; }
.auth-card .sub { color: var(--text-sub); font-size: 13.5px; margin-bottom: 18px; }
.auth-card form { margin: 0; }
.form-error {
  background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .28); color: #B91C1C;
  padding: 9px 12px; border-radius: 8px; font-size: 13.5px; margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.form-ok {
  background: rgba(16, 185, 129, .09); border: 1px solid rgba(16, 185, 129, .28); color: #047857;
  padding: 9px 12px; border-radius: 8px; font-size: 13.5px; margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.field-hint { font-size: 12px; color: var(--text-sub); margin-top: 4px; }
.auth-foot { margin-top: 14px; font-size: 13.5px; color: var(--text-sub); text-align: center; }

/* -------------------------------------------------------------- 布局 ---- */
.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 22px 18px 40px; flex: 1; }

/* 卡片：1px 金属细边框 + 金属倒角高光（外投影 + 顶部 1px 内高光） */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-metal);
  border-radius: var(--radius);
  box-shadow: var(--bevel);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.card h2 { margin: 0 0 14px; font-size: 17px; }
.card h2 .sub { font-size: 13px; font-weight: 400; color: var(--text-sub); margin-left: 8px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 22px; letter-spacing: .2px; }
.page-head .desc { color: var(--text-sub); font-size: 13px; }

/* 正文行内代码 = 小铝牌（.markdown 内的规则在下方覆盖，优先级更高） */
.card code {
  background: var(--bg-plate);
  border: 1px solid var(--border-metal);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: #B03A5B;
}
/* 首页「服务器时间」脚注 */
#stats-time {
  font-size: 12px;
  color: var(--text-sub);
  letter-spacing: .2px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-metal);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-problem { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) {
  .grid-2, .grid-problem { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- 首页 ---- */
/* 顶部横幅：深空灰 / 铁灰渐变。像一块压在浅色页面上的阳极氧化深色铝板。 */
.hero {
  position: relative;
  background: linear-gradient(135deg, #1E293B, #0F172A);
  color: #F1F5F9;
  border: 1px solid #0B1220;
  border-radius: 14px;
  padding: 30px 28px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .28),
              inset 0 1px 0 rgba(255, 255, 255, .10);
}
/* 顶边一道极细的金属高光，模拟铝板倒角受光 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
}
.hero h1 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #F8FAFC;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}
.hero p { margin: 0; color: var(--text-on-dark-sub); opacity: 1; }
/* 地址框 = 嵌入式 LCD 数码屏：黑底 + 冷蓝荧光字 + 玻璃反光 + 扫描线 */
.hero .url-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 8px 15px 8px 12px;
  background: linear-gradient(180deg, var(--lcd-bg), var(--lcd-bg-2));
  border: 1px solid var(--lcd-bezel);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .6px;
  color: var(--lcd-text);
  text-shadow: 0 0 7px rgba(125, 211, 252, .5);
  overflow: hidden;
  /* 内凹（屏幕沉在机壳里）+ 外圈底部一道机壳高光 */
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .85),
              inset 0 0 0 1px rgba(255, 255, 255, .05),
              0 1px 0 rgba(255, 255, 255, .14);
}
/* 玻璃斜向反光 */
.hero .url-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}
/* 逐行扫描线 */
.hero .url-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .05) 0 1px,
      rgba(255, 255, 255, 0) 1px 3px);
  pointer-events: none;
}
/* 屏幕左上角的 LINK 指示灯 */
.hero .url-chip .lcd-led {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--led-pass);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, .16), 0 0 6px rgba(16, 185, 129, .8);
}
.hero .url-chip #lan-url { position: relative; z-index: 1; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
/* 功能卡片：铝质面板 + 悬浮上浮 2px */
.tile {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border-metal);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--bevel);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--primary-blue-line);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
  text-decoration: none;
}
.tile .icon { font-size: 22px; line-height: 1.2; }
.tile .title { font-weight: 600; margin: 6px 0 2px; color: var(--text-main); }
.tile .desc { color: var(--text-sub); font-size: 13px; }

/* 系统概览：仪表读数格 -- 极浅灰底 + 放大加粗的等宽数字 + 右上角 LED 状态灯 */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.stat {
  position: relative;
  background: var(--bg-sunken);
  border: 1px solid var(--border-metal);
  border-radius: var(--radius);
  padding: 14px 34px 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* 右上角那颗 LED：颜色由每个卡片的 --led 决定，带一圈柔光晕 */
.stat::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--led, var(--led-blue));
  box-shadow: 0 0 0 3px var(--led-halo, rgba(49, 130, 206, .15)),
              0 0 7px var(--led, var(--led-blue));
}
/* 六个读数格各自灯色：题目/提交=蓝，已评测/通过=绿，等待=黄，编译错误=红 */
.stat:nth-child(1) { --led: var(--led-blue);    --led-halo: rgba(49, 130, 206, .16); }
.stat:nth-child(2) { --led: var(--led-blue);    --led-halo: rgba(49, 130, 206, .16); }
.stat:nth-child(3) { --led: var(--led-pass);    --led-halo: rgba(16, 185, 129, .16); }
.stat:nth-child(4) { --led: var(--led-pending); --led-halo: rgba(245, 158, 11, .20); }
.stat:nth-child(5) { --led: var(--led-pass);    --led-halo: rgba(16, 185, 129, .16); }
.stat:nth-child(6) { --led: var(--led-fail);    --led-halo: rgba(239, 68, 68, .16); }
.stat:hover { border-color: var(--border-metal-strong); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(15, 23, 42, .05); }
.stat .num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--primary-blue);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  /* 读数下方一道极细的银灰分割线，线下再压 1px 白色高光 = 刻进铝板的凹槽 */
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-metal);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}
.stat .label { color: var(--text-sub); font-size: 13px; }

/* ---------------------------------------------------- 题目列表页 ---- */
/* 搜索框：内凹铝槽，聚焦时蓝色导光圈（其余样式由全局表单规则接管） */
#filter {
  padding: 9px 12px;
  background: var(--bg-sunken);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .06);
}
#filter:focus { background: var(--bg-card); }
#filter::placeholder { color: #94A3B8; }

/* 题号 P0001 = 金属铭牌：浅灰底 + 4px 圆角 + 细边框 + 顶部高光 */
#list td > a > strong {
  display: inline-block;
  padding: 1px 8px;
  background: var(--bg-plate);
  border: 1px solid var(--border-metal);
  border-radius: 4px;
  color: var(--text-main);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(15, 23, 42, .04);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
#list td > a:hover { text-decoration: none; }
#list td > a:hover > strong {
  background: var(--primary-blue-soft);
  border-color: var(--primary-blue-line);
  color: var(--primary-blue);
}

/* 表格操作列按钮：金属边框幽灵按钮，悬浮才填充颜色 */
#list tbody .btn {
  background: transparent;
  box-shadow: none;
  border-color: var(--border-metal-strong);
  color: var(--text-sub);
}
#list tbody .btn:hover {
  background: var(--primary-blue);
  border-color: var(--primary-blue-dark);
  color: #fff;
  box-shadow: 0 1px 2px rgba(49, 130, 206, .35);
  text-decoration: none;
}
#list tbody .btn:active { transform: translateY(1px); box-shadow: var(--bevel-inset); }

/* 题目标题链接：正文色，悬浮转主色 */
#list tbody td.wrap > a { color: var(--text-main); font-weight: 500; }
#list tbody td.wrap > a:hover { color: var(--primary-blue); }

/* -------------------------------------------------------------- 表格 ---- */
/* 表格外框即一块铝板：1px 金属边 + 顶部内高光 */
.table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-metal);
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), inset 0 1px 0 rgba(255, 255, 255, .8);
}
table { width: 100%; border-collapse: collapse; background: var(--bg-card); font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-metal); white-space: nowrap; }
/* 表头：极浅灰拉丝面 + 微字距，像仪表盘刻度行 */
th {
  background-color: var(--bg-sunken);
  background-image: repeating-linear-gradient(90deg,
      rgba(148, 163, 184, .10) 0 1px,
      rgba(255, 255, 255, 0) 1px 4px);
  font-weight: 600;
  color: var(--text-sub);
  font-size: 12.5px;
  letter-spacing: .3px;
  border-bottom: 1px solid var(--border-metal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .14s ease; }
tbody tr:hover { background: var(--bg-sunken); }
td.wrap { white-space: normal; }

/* 数据数字（时间 / 内存 / 字节数 / 通过测试点）统一等宽字体，列间可纵向对齐。
   各页面表格列序不同，用 :has() 按页面定位到对应列，不改动 HTML。 */
body:has(#filter) tbody td:nth-child(3),        /* 题目列表：时间限制 */
body:has(#filter) tbody td:nth-child(4),        /* 题目列表：内存限制 */
body:has(#filter) tbody td:nth-child(5),        /* 题目列表：测试点   */
body:has(#auto) tbody td:nth-child(5),          /* 评测状态：耗时     */
body:has(#auto) tbody td:nth-child(6),          /* 评测状态：内存     */
body:has(#auto) tbody td:nth-child(8),          /* 评测状态：提交时间 */
body:has(#auto) tbody td:nth-child(9),          /* 评测状态：代码大小 */
body:has(#code-card) tbody td:nth-child(5),     /* 我的提交：耗时     */
body:has(#code-card) tbody td:nth-child(6),     /* 我的提交：内存     */
body:has(#code-card) tbody td:nth-child(7),     /* 我的提交：通过测试点 */
body:has(#code-card) tbody td:nth-child(8) {    /* 我的提交：提交时间 */
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}

/* -------------------------------------------------------------- 徽章 ---- */
/* 状态标签 = 硬件 LED 指示灯条：低饱和底色 + 深色文字 + 前置发光圆点 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.badge.lg { font-size: 14px; padding: 5px 14px; }
/* ::before 即那颗微小 LED：颜色继承文字色，带一圈柔光晕 */
.badge::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px -0.5px currentColor;
}
.badge.lg::before { width: 7px; height: 7px; }

.st-accepted      { color: #047857; background: rgba(16, 185, 129, .10); border-color: rgba(16, 185, 129, .28); }
.st-wronganswer   { color: #B91C1C; background: rgba(239, 68, 68, .10);  border-color: rgba(239, 68, 68, .28); }
.st-timelimitexceeded  { color: #B45309; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .30); }
.st-memorylimitexceeded{ color: #6D28D9; background: rgba(139, 92, 246, .10); border-color: rgba(139, 92, 246, .28); }
.st-runtimeerror  { color: #BE185D; background: rgba(236, 72, 153, .10); border-color: rgba(236, 72, 153, .28); }
.st-compileerror  { color: #475569; background: rgba(100, 116, 139, .10); border-color: rgba(100, 116, 139, .26); }
.st-outputlimitexceeded { color: #0E7490; background: rgba(6, 182, 212, .10); border-color: rgba(6, 182, 212, .28); }
.st-pending       { color: #B45309; background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .26); }
.st-judging       { color: #1D4ED8; background: rgba(49, 130, 206, .10); border-color: rgba(49, 130, 206, .28); }
.st-systemerror   { color: #7F1D1D; background: rgba(239, 68, 68, .13);  border-color: rgba(239, 68, 68, .32); }

/* -------------------------------------------------------------- 按钮 ---- */
/* 幽灵按钮：透明/极淡底 + 金属边框，悬浮才填充颜色 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-metal-strong);
  background: linear-gradient(180deg, #FFFFFF, #FCFDFE);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--bevel);
  transition: background .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .1s ease;
}
.btn:hover { background: var(--bg-sunken); border-color: var(--primary-blue-line); color: var(--primary-blue); text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: var(--bevel-inset); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:disabled:hover { background: linear-gradient(180deg, #FFFFFF, #FCFDFE); border-color: var(--border-metal-strong); color: var(--text-main); }
/* 主按钮：铝壳上的蓝色阳极氧化按键 */
.btn-primary {
  background: var(--primary-blue);
  border-color: var(--primary-blue-dark);
  color: #fff;
  box-shadow: 0 1px 2px rgba(49, 130, 206, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover { background: var(--primary-blue-dark); border-color: var(--primary-blue-dark); color: #fff; }
/* 按下时凹陷：内阴影模拟机械键程 */
.btn-primary:active { box-shadow: var(--bevel-inset); }
.btn-primary:disabled:hover { background: var(--primary-blue); border-color: var(--primary-blue-dark); color: #fff; }
.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------- 表单 ---- */
/* 同时覆盖 password / file，避免登录注册页的密码框落在主题之外 */
select, input[type=text], input[type=password], input[type=email], input[type=file], textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-metal-strong);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .16s ease, box-shadow .16s ease;
}
select:hover, input[type=text]:hover, input[type=password]:hover, textarea:hover { border-color: #B4C2D4; }
select:focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=file]:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: var(--glow-blue);
}
input[type=file] { padding: 7px 10px; }
input[type=file]::file-selector-button {
  font-family: inherit;
  font-size: 13px;
  margin-right: 10px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--border-metal-strong);
  background: linear-gradient(180deg, #FFFFFF, var(--bg-sunken));
  color: var(--text-main);
  cursor: pointer;
}
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 13px; color: var(--text-sub); margin-bottom: 5px; }

/* -------------------------------------------------- 语言/标准选择条 ---- */
/* 独立成行、给足高度，并抬到代码框之上：避免被 textarea 压住/视觉重叠 */
.lang-bar {
  position: relative;
  z-index: 2;
  clear: both;
  margin: 4px 0 10px;
}
.lang-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lang-picker > label {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
.lang-picker > select {
  width: auto;
  min-width: 210px;
  max-width: 340px;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 13.5px;
}
.lang-picker > .small { flex: 1 1 200px; min-width: 0; }
@media (max-width: 720px) {
  .lang-picker > select { min-width: 0; width: 100%; }
}

/* ------------------------------------------------------------ 代码框 ---- */
.editor-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.editor-head .hint { font-size: 12.5px; color: var(--text-sub); }

/* 编辑器容器 = 机器显示屏面板：
   4px 深灰外框当作机壳压边，内部深色屏面 + 内凹阴影，模拟嵌入式的显示终端 */
textarea.code {
  position: relative;
  z-index: 0;
  min-height: 380px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
  tab-size: 4;
  background: var(--metal-900);
  color: var(--text-on-dark);
  border: 4px solid var(--metal-panel);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .2),
              inset 0 2px 10px rgba(0, 0, 0, .5);
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  caret-color: #7DD3FC;
}
textarea.code::placeholder { color: #64748B; }
/* 聚焦：机壳外一圈蓝色导光圈，屏面内凹不变 */
textarea.code:focus {
  border-color: var(--metal-panel);
  box-shadow: var(--glow-blue),
              inset 0 2px 10px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------ 提交代码页 / 题目详情 ---- */
/* 题目限制提示里的数值走等宽字体，与表格数据保持一致 */
#problem-info strong, #p-meta strong, #build-hint {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
#build-hint { font-size: 12.5px; }

/* 语言/标准选择条：一条铝制控制面板 */
.lang-bar {
  padding: 8px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-metal);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.lang-picker > select { background: var(--bg-card); }

/* 主操作按钮：加大 + 蓝色阳极氧化 + 按下内凹（机械键程） */
#btn-submit.btn-primary.btn-lg {
  padding: 12px 30px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .5px;
  min-width: 158px;
  box-shadow: 0 2px 5px rgba(49, 130, 206, .32),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}
#btn-submit.btn-primary.btn-lg:hover {
  box-shadow: 0 4px 12px rgba(49, 130, 206, .34),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}
#btn-submit.btn-primary.btn-lg:active {
  transform: translateY(1px);
  box-shadow: var(--bevel-inset);
}

/* ------------------------------------------------------------ 题面 ---- */
.markdown { line-height: 1.75; word-wrap: break-word; }
.markdown h1 { font-size: 21px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-metal); }
.markdown h2 { font-size: 17px; margin: 22px 0 10px; }
.markdown h3 { font-size: 15px; margin: 18px 0 8px; }
.markdown p { margin: 10px 0; }
.markdown ul, .markdown ol { padding-left: 24px; margin: 10px 0; }
/* 行内代码 = 小铝牌 */
.markdown code {
  background: var(--bg-plate);
  border: 1px solid var(--border-metal);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #B03A5B;
}
/* 代码块 = 机器显示屏面板（深色边框 + 内凹） */
.markdown pre {
  background: var(--metal-800);
  color: var(--text-on-dark);
  border: 3px solid var(--metal-panel);
  padding: 13px 15px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35), 0 1px 2px rgba(15, 23, 42, .1);
}
.markdown pre code { background: none; border: none; color: inherit; padding: 0; }
.markdown blockquote {
  margin: 12px 0; padding: 8px 14px;
  border-left: 3px solid var(--primary-blue-line);
  background: var(--bg-sunken);
  color: var(--text-main);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.markdown table { border: 1px solid var(--border-metal); border-radius: 8px; overflow: hidden; }
.markdown img { max-width: 100%; }
.markdown hr { border: none; border-top: 1px solid var(--border-metal); margin: 20px 0; }

/* ------------------------------------------------------------ 结果 ---- */
.result-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
/* 指标格 = 仪表读数小铝牌 */
.metric {
  background: var(--bg-sunken);
  border: 1px solid var(--border-metal);
  border-radius: 8px;
  padding: 9px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.metric .k { font-size: 12px; color: var(--text-sub); }
.metric .v { font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-main); }

/* 进度条 = 铝槽内嵌指示灯条 */
.progress {
  height: 8px;
  background: var(--bg-plate);
  border: 1px solid var(--border-metal);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 14px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, #059669, var(--status-pass)); }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(49, 130, 206, .22);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  display: inline-block;
  animation: spin .8s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 日志/源码面板：与代码编辑器同一套机器显示屏语言 */
pre.log {
  background: var(--metal-900);
  color: #FCA5A5;
  border: 3px solid var(--metal-panel);
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
  max-height: 340px;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35);
}
.hidden { display: none !important; }
.muted { color: var(--text-sub); }
.small { font-size: 13px; }
.center { text-align: center; }
.mt { margin-top: 14px; }
.empty { padding: 26px; text-align: center; color: var(--text-sub); }
.page-center { display: grid; place-items: center; }
.center-card { max-width: 560px; text-align: center; margin-top: 60px; }
.error-code { font-size: 46px; margin: 0; color: var(--primary-blue); font-family: var(--mono); }

/* ------------------------------------------------------------ 提示条 ---- */
#toast-box { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
  background: var(--metal-800); color: #fff; padding: 10px 15px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: 14px; max-width: 380px;
  animation: slide-in .18s ease;
}
.toast.ok { background: #047857; }
.toast.err { background: #B91C1C; }
@keyframes slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ------------------------------------------------------------ 页脚 ---- */
.footer {
  border-top: 1px solid var(--border-metal);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-sunken));
  color: var(--text-sub);
  font-size: 13px;
  padding: 14px 18px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* =============================================================================
   硬件元件层（Aluminum Hardware Parts）
   机箱面板 / 拨动开关 / 响应式顶栏 —— 由 style.css 统一提供，
   页面只需按约定增加结构，无需改动任何 JS 绑定。
   ============================================================================= */

/* ------------------------------------------------- 机箱面板（代码编辑器）----
   结构：
     <div class="chassis">
       <div class="chassis-bar">
         <span class="chassis-title">main.cpp</span>
         <span class="chassis-leds"><i class="r"></i><i class="y"></i><i class="g"></i></span>
       </div>
       <textarea class="code" id="code"></textarea>
     </div>
   外框 4px 压边 + 顶部铭牌条 + 右上角三颗假指示灯，textarea 本体成为机箱内的屏幕。 */
.chassis {
  border: 4px solid var(--chassis);
  border-radius: 10px;
  background: var(--chassis);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .22),
              inset 0 1px 0 rgba(255, 255, 255, .10);
}
.chassis-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  background: linear-gradient(180deg, var(--chassis-bar-1), var(--chassis-bar-2));
  border-bottom: 1px solid var(--chassis-line);
}
.chassis-title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .5px;
  color: #94A3B8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 三颗假指示灯：红/黄/绿，像 macOS 窗口按钮或服务器面板状态灯 */
.chassis-leds { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.chassis-leds i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .35),
              0 0 5px -1px currentColor;
}
.chassis-leds .r { background: var(--chassis-led-r); color: var(--chassis-led-r); }
.chassis-leds .y { background: var(--chassis-led-y); color: var(--chassis-led-y); }
.chassis-leds .g { background: var(--chassis-led-g); color: var(--chassis-led-g); }

/* 机箱内的屏幕：去掉自身边框与圆角，交给 .chassis 统一压边 */
.chassis > textarea.code {
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  min-height: 360px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5);
}
.chassis > textarea.code:focus {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(49, 130, 206, .55),
              inset 0 2px 10px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------- 物理拨动开关 ----
   结构（input 必须保留原 id，JS 直接读 .checked，无需任何改动）：
     <label class="switch-field">
       <input type="checkbox" id="auto" checked>
       <span class="switch" aria-hidden="true"></span>
       <span>自动刷新（5s）</span>
     </label> */
.switch-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text-sub);
  white-space: nowrap;
}
/* 真身 checkbox 保留在 DOM 中（可聚焦、可点击、JS 可读），只是视觉上隐藏 */
.switch-field > input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--switch-off-1), var(--switch-off-2));
  border: 1px solid var(--switch-off-line);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, .24),
              inset 0 -1px 0 rgba(255, 255, 255, .7);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* 拨钮：金属圆柱，带顶部高光与底部投影 */
.switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #E7ECF3);
  border: 1px solid #AEBACA;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .30), inset 0 1px 0 #fff;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), background .2s ease;
}
/* 打开：蓝色阳极氧化 + 外圈导光晕 */
.switch-field > input:checked + .switch {
  background: linear-gradient(180deg, var(--primary-blue-dark), var(--primary-blue));
  border-color: var(--primary-blue-dark);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .30),
              0 0 0 3px rgba(49, 130, 206, .14);
}
.switch-field > input:checked + .switch::after {
  transform: translateX(20px);
  background: linear-gradient(180deg, #FFFFFF, #EAF2FB);
  border-color: #2B6CB0;
}
/* 键盘可达性：聚焦时给开关一圈导光圈 */
.switch-field > input:focus-visible + .switch {
  box-shadow: 0 0 0 3px rgba(49, 130, 206, .40);
}
.switch-field:hover .switch { border-color: var(--border-metal-strong); }
.switch-field:hover > input:checked + .switch { border-color: var(--primary-blue-dark); }

/* --------------------------------------------- 题目列表：行悬浮导轨高光 ---- */
#list tbody td:first-child {
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow .14s ease;
}
#list tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary-blue); }

/* =============================================================================
   响应式顶栏：窄屏下改为三行网格（品牌+状态 / 导航条 / 用户条），
   导航与用户条各自横向滚动，避免链接被挤成"一字一行"的竖排文字。
   ============================================================================= */
.nav a, #nav-user a, .server-state, .brand { white-space: nowrap; }

@media (max-width: 900px) {
  .topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand state"
      "nav   nav"
      "user  user";
    gap: 7px 12px;
    height: auto;
    min-height: 0;
    padding: 9px 14px;
  }
  .brand { grid-area: brand; min-width: 0; overflow: hidden; }
  .server-state { grid-area: state; }
  .nav {
    grid-area: nav;
    flex: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 2px 14px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; }
  #nav-user {
    grid-area: user;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 7px 14px 0;
    border-top: 1px solid var(--border-metal);
  }
  #nav-user::-webkit-scrollbar { display: none; }
  #nav-user a { flex: 0 0 auto; }
}

@media (max-width: 420px) {
  .brand { font-size: 15px; gap: 7px; }
  .topbar-inner { padding: 8px 12px; }
  .nav { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  #nav-user { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .hero { padding: 24px 20px; }
  .hero h1 { font-size: 22px; }
  /* 窄屏下地址屏独占一行，避免长 URL 撑破横幅 */
  .hero .url-chip { display: flex; width: 100%; }
  .hero .url-chip #lan-url { min-width: 0; overflow-x: auto; }
}