/* ============================================================
   机房设备运维 · UI 主题
   配色灵感来自作者 Logo「小王子 KELVIN」：黑 + 洋红粉 + 白
   ============================================================ */
:root {
  --ink: #141417;            /* 主黑 */
  --ink-soft: #26262b;       /* 次黑 */
  --pink: #ec2c8c;           /* Logo 洋红 */
  --pink-dark: #c71e75;
  --pink-soft: #fdeaf4;
  --bg: #f5f6f8;
  --text: #1f2328;
  --muted: #6b7280;
  --border: #e5e8ee;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(20, 20, 23, .06);
  --shadow-hover: 0 10px 28px rgba(20, 20, 23, .12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- 导航栏（黑色涂鸦风） ---------- */
.navbar {
  background: var(--ink);
  border-bottom: 3px solid var(--pink);
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 18px rgba(20, 20, 23, .25);
}
.navbar .inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 60px;
  flex-wrap: wrap;
}
.navbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 14px;
  text-decoration: none;
}
.navbar .brand img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  background: #fff;
  padding: 2px;
  transition: transform .25s ease;
}
.navbar .brand:hover img { transform: rotate(-6deg) scale(1.08); }
.navbar .brand .brand-text {
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  letter-spacing: 1px;
}
.navbar .brand .brand-text em {
  font-style: normal;
  color: var(--pink);
}
.navbar a.nav-link {
  color: #cfd2d8;
  text-decoration: none;
  font-size: 14.5px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color .2s ease, background .2s ease;
}
.navbar a.nav-link:hover { color: #fff; background: rgba(236, 44, 140, .18); }
.navbar .nav-spacer { flex: 1; }
.navbar .user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cfd2d8;
  font-size: 13px;
  margin-right: 4px;
}
.navbar .user-chip .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* ---------- 主体容器 ---------- */
.container {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 16px 60px;
  flex: 1;
}

h1 { font-size: 24px; margin: 4px 0 18px; letter-spacing: .5px; }
h1::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 22px;
  background: var(--pink);
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: -3px;
}
h2 { font-size: 18px; margin: 24px 0 12px; }

/* ---------- 卡片 ---------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { box-shadow: var(--shadow-hover); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.device-card { display: flex; flex-direction: column; gap: 6px; }
.device-card:hover { transform: translateY(-3px); }
.device-card .code { font-weight: 700; color: var(--pink); }
.device-card .meta { color: var(--muted); font-size: 13px; }

/* ---------- 表格 ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
th, td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; }
th {
  background: var(--ink);
  font-weight: 600;
  color: #fff;
  letter-spacing: .5px;
}
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: var(--pink-soft); }
tbody tr:last-child td { border-bottom: none; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 20px;
  font-size: 12px;
  background: var(--pink-soft);
  color: var(--pink-dark);
  font-weight: 600;
}
.tag.warn { background: #fff4e5; color: #b45309; }
.tag.danger { background: #fde8e8; color: #c0392b; }
.tag.ok { background: #e6f6ec; color: #1a7f37; }
.tag.gray { background: #eef1f5; color: var(--muted); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover {
  background: var(--pink);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(236, 44, 140, .35);
}
.btn:active { transform: translateY(0); }
.btn.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; box-shadow: none; }
.btn.small { padding: 6px 14px; font-size: 13px; border-radius: 8px; }
.btn.danger { background: #d64545; }
.btn.danger:hover { background: #b93a3a; box-shadow: 0 6px 16px rgba(214, 69, 69, .3); }
.btn.ghost.danger { background: #fff; color: #d64545; border-color: #d64545; }
.btn.ghost.danger:hover { background: #fdecec; color: #b93a3a; box-shadow: none; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; }

/* ---------- 表单 ---------- */
label { display: block; margin: 14px 0 5px; font-weight: 600; font-size: 14px; }
input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(236, 44, 140, .15);
}

/* ---------- 二维码（相框式展示，点击可放大） ---------- */
.qr-box { text-align: center; padding: 20px 16px; }
.qr-box img {
  width: 248px;
  height: 248px;                 /* border-box：净内容 ≈ 220，四周白框 12 + 描边 2 */
  padding: 12px;
  background: #fff;
  border-radius: 20px;
  border: 2px solid #f7c9e0;
  box-shadow: 0 14px 34px rgba(236, 44, 140, .14), 0 3px 10px rgba(20, 20, 23, .06);
  cursor: zoom-in;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .3s ease, border-color .3s ease;
}
.qr-box img:hover {
  transform: scale(1.05) rotate(-1.2deg);
  box-shadow: 0 20px 44px rgba(236, 44, 140, .22), 0 4px 12px rgba(20, 20, 23, .08);
  border-color: var(--pink);
}
.qr-box .url { color: var(--muted); font-size: 12px; word-break: break-all; margin-top: 10px; }

/* ---------- 二维码放大灯箱 ---------- */
.zoom-mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 23, .82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 300;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .25s ease;
}
.zoom-mask.show { opacity: 1; }
.zoom-mask img {
  width: min(74vw, 400px);
  height: auto;
  padding: 18px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: scale(.92);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.zoom-mask.show img { transform: scale(1); }
.zoom-mask .tip { color: #cfd2d8; font-size: 13px; letter-spacing: 1px; }

/* ---------- 详情列表 ---------- */
.detail-list { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; }

/* ---------- 提示 ---------- */
.flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  background: #e6f6ec;
  color: #1a7f37;
  border-left: 4px solid #1a7f37;
}
.flash.error { background: #fde8e8; color: #c0392b; border-left-color: #c0392b; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- 页脚「关于我」 ---------- */
.site-footer {
  background: var(--ink);
  border-top: 3px solid var(--pink);
  color: #cfd2d8;
  padding: 26px 16px;
}
.site-footer .inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.site-footer img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
  padding: 3px;
}
.site-footer .about-name {
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;
}
.site-footer .about-name em { font-style: normal; color: var(--pink); }
.site-footer .about-desc { font-size: 13px; color: #9aa0a8; margin-top: 2px; }
.site-footer .footer-link {
  margin-left: auto;
  color: var(--pink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color .2s ease;
}
.site-footer .footer-link:hover { color: #ff5cad; }

/* ---------- 关于我页面 ---------- */
.about-hero {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.about-hero img {
  width: 180px;
  height: 180px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 8px 8px 0 var(--pink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.about-hero img:hover {
  transform: rotate(-2deg) scale(1.03);
  box-shadow: 12px 12px 0 var(--pink);
}
.about-hero .who h2 { margin: 0 0 6px; font-size: 26px; }
.about-hero .who h2 em { font-style: normal; color: var(--pink); }
.about-hero .who p { color: var(--muted); margin: 4px 0; }

/* ---------- 登录页品牌区 ---------- */
.login-brand { text-align: center; margin-bottom: 18px; }
.login-brand img {
  width: 110px;
  height: 110px;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 6px 6px 0 var(--pink);
  transition: transform .25s ease;
}
.login-brand img:hover { transform: rotate(-3deg) scale(1.05); }
.login-brand .slogan {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  letter-spacing: 1px;
}
.login-brand .slogan em { font-style: normal; color: var(--pink); font-weight: 700; }

/* ---------- 关于我页面 · 组件 ---------- */
.about-lead {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--pink);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin-bottom: 18px;
  font-size: 16px;
  color: #33383f;
  line-height: 1.9;
  box-shadow: var(--shadow);
}
.about-lead .sig {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
  letter-spacing: .5px;
}
.about-lead .sig em { font-style: normal; color: var(--pink-dark); font-weight: 700; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid var(--border);
  color: #4b5563;
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover { transform: translateY(-2px); border-color: var(--pink); color: var(--pink-dark); }
.chip.solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.solid:hover { color: #fff; border-color: var(--pink); }
.chip.pink { background: var(--pink-soft); border-color: #f7c9e0; color: var(--pink-dark); }

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.story-item {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.story-item:hover {
  transform: translateY(-3px);
  border-color: var(--pink);
  box-shadow: var(--shadow-hover);
}
.story-item .glyph {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: 8px;
}
.story-item .glyph em { font-style: normal; color: var(--pink); }
.story-item .t { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.story-item p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }

.timeline { list-style: none; margin: 14px 0 0; padding-left: 24px; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--border);
}
.timeline li { position: relative; margin-bottom: 20px; }
.timeline li:last-child { margin-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -24px; top: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--pink);
}
.timeline .when { font-size: 12.5px; font-weight: 700; color: var(--pink-dark); letter-spacing: 1px; }
.timeline .what { font-weight: 700; font-size: 15px; display: block; margin-top: 1px; }
.timeline p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }

.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.stack-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: transform .22s ease, border-color .22s ease;
}
.stack-item:hover { transform: translateY(-3px); border-color: var(--pink); }
.stack-item .k { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.stack-item .v { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 4px; }
.stack-item .v em { font-style: normal; color: var(--pink); }

/* ---------- 关于我页面 · AI 协作 ---------- */
.ai-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 22px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .5px;
}
.ai-sub::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--pink);
  flex: none;
}
.ai-sub span { color: var(--muted); font-weight: 400; font-size: 12.5px; letter-spacing: 0; }

.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.ai-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  background: #fff;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ai-card:hover {
  transform: translateY(-3px);
  border-color: var(--pink);
  box-shadow: var(--shadow-hover);
}
.ai-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  background: var(--ink);
  margin-bottom: 12px;
}
.ai-card.pink .ai-badge { background: var(--pink); }
.ai-badge.sm { font-size: 13px; letter-spacing: 0; }
.ai-name { font-weight: 800; font-size: 16.5px; letter-spacing: .5px; }
.ai-role {
  display: inline-block;
  margin: 7px 0 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pink-dark);
  background: var(--pink-soft);
  padding: 3px 11px;
  border-radius: 20px;
}
.ai-card ul { margin: 0; padding-left: 17px; color: var(--muted); font-size: 13.5px; line-height: 1.85; }
.ai-card ul li::marker { color: var(--pink); }

.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.split-grid.ratio { grid-template-columns: 1.75fr 1fr; }

.ratio-bar {
  display: flex;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  margin: 16px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: var(--shadow);
}
.ratio-bar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.ratio-me { flex: 0 0 70%; background: var(--ink); }
.ratio-ai { flex: 1; background: var(--pink); }
.ratio-note { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.split-item { border-radius: 12px; padding: 16px 18px; }
.split-item .h {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.split-item .h::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.split-item ul { margin: 0; padding-left: 17px; font-size: 13.5px; line-height: 1.85; }
.split-item.machine { background: #f6f7f9; border: 1.5px dashed var(--border); color: #4b5563; }
.split-item.machine ul { color: var(--muted); }
.split-item.human { background: var(--pink-soft); border: 1.5px solid #f7c9e0; color: var(--pink-dark); }
.split-item.human ul { color: #8a3a63; }
.split-item ul li::marker { color: var(--pink); }
.split-item strong { color: var(--ink); font-weight: 700; }
.split-item.human strong { color: var(--pink-dark); }

/* ---------- 手机扫码场景优先：小屏加大点击区域 ---------- */
@media (max-width: 640px) {
  .container { padding: 16px 12px 50px; }
  .detail-list { grid-template-columns: 90px 1fr; }
  .btn { padding: 12px 18px; }
  table { font-size: 13px; }
  th, td { padding: 8px; }
  .navbar .brand .brand-text { font-size: 15px; }
  .site-footer .inner { justify-content: center; text-align: center; }
  .site-footer .footer-link { margin-left: 0; }
  .about-hero { justify-content: center; text-align: center; }
  .split-grid.ratio { grid-template-columns: 1fr; }
  .ratio-bar { height: 36px; font-size: 12px; }
}

/* ============================================================
   交互增强包 · Interaction Pack
   点哪儿都有反馈：涟漪 / 悬浮提示 / 整卡跳转 / 回到顶部 / 轻提示
   ============================================================ */

/* ---------- 按钮：涟漪 + 按压反馈 ---------- */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: scale(0);
  animation: ripple .55s ease-out forwards;
  pointer-events: none;
}
.btn.ghost .ripple { background: rgba(236, 44, 140, .2); }
@keyframes ripple { to { transform: scale(3.4); opacity: 0; } }
.btn:active { transform: translateY(0) scale(.96); }

/* ---------- 键盘焦点可见（无障碍） ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(236, 44, 140, .4);
  outline-offset: 2px;
}

/* ---------- 整卡 / 整行可点击 ---------- */
[data-href] { cursor: pointer; }
.card[data-href] { position: relative; }
.card[data-href]:hover { border-color: #f5bcd9; }
.device-card[data-href]::after {
  content: "查看 →";
  position: absolute;
  right: 16px; top: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pink);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.device-card[data-href]:hover::after { opacity: 1; transform: none; }

/* ---------- 表格里的内容链接 ---------- */
td a:not(.btn) { color: var(--pink-dark); font-weight: 600; text-decoration: none; }
td a:not(.btn):hover { text-decoration: underline; }

/* ---------- 页面入场动画（错峰浮现） ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.container > * { animation: fadeInUp .42s ease both; }
.container > *:nth-child(2) { animation-delay: .06s; }
.container > *:nth-child(3) { animation-delay: .12s; }
.container > *:nth-child(4) { animation-delay: .18s; }
.container > *:nth-child(5) { animation-delay: .24s; }
.flash.fade-out { opacity: 0; transform: translateY(-8px); transition: opacity .5s ease, transform .5s ease; }

/* ---------- 回到顶部按钮 ---------- */
.to-top {
  position: fixed;
  right: 22px; bottom: 26px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(20, 20, 23, .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
  z-index: 60;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--pink); transform: translateY(-4px); }
.to-top:active { transform: translateY(-1px) scale(.94); }

/* ---------- 轻提示 Toast ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: 34px;
  transform: translateX(-50%) translateY(16px);
  background: var(--ink);
  color: #fff;
  padding: 11px 24px;
  border-radius: 30px;
  font-size: 14px;
  letter-spacing: .5px;
  box-shadow: 0 12px 30px rgba(20, 20, 23, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
  z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 导航：当前页高亮 ---------- */
.navbar a.nav-link { position: relative; }
.navbar a.nav-link.active { color: #fff; background: rgba(236, 44, 140, .18); }
.navbar a.nav-link.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
}

/* ---------- 复制成功的小脉冲 ---------- */
.btn.copied { animation: copiedPulse .5s ease; }
@keyframes copiedPulse { 50% { transform: scale(.95); } }

/* ---------- 尊重系统「减弱动效」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   启动动画包 · Motion Pack
   ------------------------------------------------------------
   设计原则：
     1. 只做"呈现动效"，不延迟内容 —— 用户该多快看到就多快看到；
        唯一的例外是首页开场动画，它只播一次且可跳过（见下方说明）。
     2. 只用 transform / opacity / clip-path，走 GPU 合成，手机上不掉帧。
     3. 打印页（.qr-cell）完全不受影响 —— 动画只加在 .qr-box 上。
     4. 全部动效都被上面的 prefers-reduced-motion 规则覆盖：
        系统开了"减弱动效"的用户会看到瞬时完成，不会卡住。
   ============================================================ */

/* ---------- 1. 导航栏滑入 ---------- */
@keyframes navDrop {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
.navbar { animation: navDrop .42s cubic-bezier(.22, 1, .36, 1) both; }

/* ---------- 2. 内容错峰浮现（在原有 fadeInUp 基础上补齐时序） ---------- */
/* 原有规则只写到了第 5 个子元素，这里把后面几个也补上，
   否则列表长的页面会出现"前面几个有动画、后面突然蹦出来"的割裂感。 */
.container > *:nth-child(6) { animation-delay: .30s; }
.container > *:nth-child(7) { animation-delay: .36s; }
.container > *:nth-child(8) { animation-delay: .42s; }
.container > *:nth-child(n+9) { animation-delay: .48s; }

/* ---------- 3. 二维码「绘制」出场 ----------
   做法说明：
     二维码是服务端生成的 PNG（已含中心 Logo），所以没法逐点绘制。
     这里用两件事组合出"被扫描线画出来"的观感：
       · 图片本身淡入（只用 opacity，不动 transform ——
         因为 .qr-box img:hover 用了 transform，动画若也改 transform 会打架）
       · 一条洋红发光扫描线从上往下扫过（独立伪元素，动的是 transform）
     扫描线的位移量 248px = .qr-box img 的高度，padding-top 20px = 图片上边缘。 */
.qr-box { position: relative; }

.qr-box img {
  animation: qrFade .55s ease .06s both;
}
@keyframes qrFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.qr-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;                      /* 与 .qr-box 的 padding-top 对齐 */
  width: 248px;                   /* 与 .qr-box img 同宽 */
  height: 3px;
  margin-left: -124px;            /* 居中 */
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  box-shadow: 0 0 14px rgba(236, 44, 140, .75);
  pointer-events: none;
  animation: qrScan .95s cubic-bezier(.22, 1, .36, 1) .08s both;
}
@keyframes qrScan {
  0%   { transform: translateY(0);    opacity: 0; }
  12%  {                             opacity: 1; }
  86%  {                             opacity: 1; }
  100% { transform: translateY(248px); opacity: 0; }   /* 扫过整张二维码 */
}

/* ---------- 4. 顶部进度条 ----------
   点链接 / 提交表单时推进，新页面加载完淡出。
   解决的是"手机上点了没反应，不知道到底点没点上"的问题。 */
.top-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink), #ff5cad, var(--pink));
  box-shadow: 0 0 10px rgba(236, 44, 140, .6);
  opacity: 0;
  z-index: 400;
  pointer-events: none;
  transition: width .4s ease, opacity .3s ease;
}
.top-progress.active { opacity: 1; }
.top-progress.done { opacity: 0; transition: width .18s ease, opacity .28s ease .1s; }

/* ---------- 5. 首页开场动画（Splash）----------
   触发条件由 base.html 里的内联脚本决定，只有两种情况才播：
     · URL 带 ?demo=1        —— 答辩演示时手动打开
     · 首页 且 本次会话没播过 —— 每个会话最多看一次
   学生扫码进的是 /room/xxx，不满足条件，因此永远不会被这段动画耽误。 */
.splash { display: none; }

.splash-on .splash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 900;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--ink);
  overflow: hidden;
}
/* 播动画时锁住滚动，避免背景页面跟着滑动 */
.splash-on body { overflow: hidden; }

.splash-inner {
  position: relative;
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
}
.splash-logo {
  width: 98px;
  height: 98px;
  border-radius: 24px;
  object-fit: cover;
  background: #fff;
  padding: 3px;
  box-shadow: 0 14px 40px rgba(236, 44, 140, .35);
  animation: splashLogo .8s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes splashLogo {
  from { opacity: 0; transform: scale(.5) rotate(-12deg); }
  to   { opacity: 1; transform: none; }
}
/* 一圈洋红光环从 Logo 向外扩散 */
.splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--pink);
  animation: splashRing 1.15s ease-out .2s both;
}
@keyframes splashRing {
  from { opacity: .85; transform: scale(.62); }
  to   { opacity: 0;   transform: scale(1.55); }
}
.splash-title {
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 2px;
  animation: splashUp .5s ease .34s both;
}
.splash-sub {
  color: var(--pink);
  font-size: 12.5px;
  letter-spacing: 3px;
  animation: splashUp .5s ease .52s both;
}
@keyframes splashUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* 整体退出：上移 + 淡出 */
.splash.leaving { animation: splashOut .42s ease forwards; }
@keyframes splashOut {
  to { opacity: 0; transform: translateY(-26px); }
}

/* 手机竖屏适配 */
@media (max-width: 640px) {
  .splash-inner { width: 118px; height: 118px; }
  .splash-logo { width: 86px; height: 86px; }
  .splash-title { font-size: 15px; letter-spacing: 1px; }
  .splash-sub { font-size: 11.5px; letter-spacing: 2px; }
}

/* 开场动画进行中，暂停背景页面的入场动画，
   避免动画播放时背景里的元素还在动，造成视觉干扰 */
.splash-on .navbar,
.splash-on .container > * { animation-play-state: paused; }

/* ============================================================
   工单概览面板
   ------------------------------------------------------------
   四个数字 + 一条状态分布彩带。彩带是纯 CSS 的：
   每段就是一个 div，宽度由 flex 按条数分配，没有任何图表库。
   为什么不用 ECharts：这里只需要表达"比例"，一条彩带就够了；
   引 1 MB 的图表库来做这件事不划算，而且手机首次加载会明显变慢。
   ============================================================ */
.stats-panel { padding: 18px 20px; }

.stats-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.stats-head strong { font-size: 16px; letter-spacing: .5px; }
.stats-scope {
  font-size: 12.5px;
  color: var(--muted);
  background: #eef1f5;
  padding: 2px 10px;
  border-radius: 20px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stat {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}
.stat-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: .5px;
}
.stat-num.warn { color: #d64545; }        /* 有积压时标红，提醒关注 */
.stat-num.good { color: #1a7f37; }
.stat-label {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .5px;
}

/* ---------- 状态分布彩带 ---------- */
.stats-sub {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1px;
}
.status-bar {
  display: flex;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform-origin: left center;
  animation: sbIn .55s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sbIn {
  from { opacity: 0; transform: scaleX(.35); }
  to   { opacity: 1; transform: none; }
}
.status-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}
/* 五段配色：从"要关注"到"已结束"，冷热分明 */
.sb-todo    { background: #d64545; }   /* 待处理 —— 红，最需要关注 */
.sb-assign  { background: #3b82c4; }   /* 已派单 —— 蓝 */
.sb-doing   { background: var(--pink); } /* 处理中 —— 洋红，与主题一致 */
.sb-done    { background: #1a7f37; }   /* 已完成 —— 绿 */
.sb-closed  { background: #9aa0a8; }   /* 已关闭 —— 灰 */

.stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.stats-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.stats-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.stats-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.8;
}
.stats-note strong { color: var(--ink); }

/* 手机上四个数字排成两行，避免挤成一团 */
@media (max-width: 640px) {
  .stats-cards { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 22px; }
  .status-bar { height: 28px; }
  .status-bar span { font-size: 11px; }
}