/* ============================================================================
   应用界面复刻（mock）· Apex Toolkit
   ---------------------------------------------------------------------------
   按 v0.3.30 实拍 1:1 复刻（1531×1130 截图 @125% = 1225×904 CSS）。

   实测尺寸（device px ÷ 1.25）：
     标题栏 48 · 侧栏 172 · 内容区左右 padding 34
     筛选条 y104 h83 · 赛季条 y190 h73 · 地图卡 499×207（间距 14）
     时间线卡 y676 h223 · 分段宽 155 高 56
   色值取自 App.vue daylight 主题与实拍采样：
     --bg #f4f1ec · --side #ece9e3 · --bar #e6e2db
     --s0 #f7f5f0 · --s1 #f8f6f1 · --accent #d63c2f
     时间线四色 #fad7b6 / #d6efdd / #dde9f0 / #f9e5d2

   缩放：整块 em 布局，字号由容器宽度决定，同一份结构在 1080px 首屏窗口与
   700px 功能面板里都成立。
   ========================================================================== */

.mk {
  --mk-bg: #f4f1ec;
  --mk-side: #ece9e3;
  --mk-bar: #e6e2db;
  --mk-s0: #f7f5f0;
  --mk-s1: #f8f6f1;
  --mk-s2: #ece9e2;
  --mk-border: rgba(0, 0, 0, 0.08);
  --mk-border-2: rgba(0, 0, 0, 0.14);
  --mk-text: #1a1a1a;
  --mk-dim: #4b4b4b;
  --mk-faint: #606060;
  /* 2026-10-20：原为 #999999，在 --mk-s2 (#ece9e2) 上只有 2.35:1、在 #f7f5f0 上
     2.61:1，都远低于正文 4.5:1 —— 检测器报的这条是真的（在复刻窗口里实测过，
     不是静态猜测）。逐档试算后取 #666666：最坏背景 #ece9e2 上 4.74:1 过线，
     同时仍明显弱于 --mk-dim (#4b4b4b, 7.7:1) 与 --mk-faint (#606060, 5.2:1)，
     三级层次关系不变。 */
  --mk-mute: #666666;
  /* 2026-10-20：原 #d63c2f 在卡片底 #f4f1ec 上 4.10:1，差 0.4 不到正文下限。
     它同时用作文字色（.mk__item.is-on 选中项、涨跌负号、标签）与图形色，
     取 #c83226 后：卡片底 4.73:1、白底 5.33:1，都过线，且与首页 --red 仍是同一支红。 */
  --mk-accent: #c83226;
  --mk-accent-soft: rgba(214, 60, 47, 0.1);
  --mk-accent-line: rgba(214, 60, 47, 0.3);
  /* 2026-10-20：原 #2d9d6e 在浅底上只有 3.0–3.4:1，而它标的是「+701」这类
     正文级涨跌数字（不是装饰图形），必须过 4.5:1。改 #16734e：
     白底 5.84:1、卡片底 #f4f1ec 5.18:1，仍读作绿，与红色 accent 区分清楚。 */
  --mk-green: #16734e;
  --mk-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--mk-bg);
  color: var(--mk-text);
  font-family: "Segoe UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  font-size: clamp(9px, 1.16cqi, 13px);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.mk--panel { font-size: clamp(9.5px, 1.55cqi, 12.5px); }

.mk svg {
  flex: none;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 标题栏 ─────────────────────────────────────────────────────────── */

.mk__bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex: none;
  height: 3.7em;
  padding: 0 1.1em;
  background: var(--mk-bar);
  border-bottom: 1px solid var(--mk-accent-line);
}

/* 标题栏标记：与真实应用一致——用 logo-mark.png（应用标题栏也是这个图），
   而不是 CSS 拼出来的三块色块。原实现是两段渐变模拟三角，缩小后与真实图标差得很远。
   尺寸用固定 px 而不用 em：.mk 的 font-size 是 clamp(9px, 1.16cqi, 13px)，
   1.35em 在窄窗口下只有 12px，比真实应用标题栏（26px）小一半，会糊成一团。 */
.mk__mark {
  width: 15px;
  height: 15px;
  flex: none;
  display: block;
  object-fit: contain;
}

.mk__title { font-size: 1em; font-weight: 700; letter-spacing: -0.01em; }

.mk__win { display: flex; gap: 1.1em; margin-left: auto; color: var(--mk-faint); }
.mk__win i {
  display: block;
  width: 0.72em;
  height: 0.72em;
  border: 1px solid currentColor;
  border-radius: 0.08em;
  opacity: 0.75;
}
.mk__win i:nth-child(2) { border-width: 0 0 1px 0; border-radius: 0; }
.mk__win i:nth-child(3) { border: 0; position: relative; }
.mk__win i:nth-child(3)::before,
.mk__win i:nth-child(3)::after {
  content: "";
  position: absolute;
  inset: 45% 0 auto;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.mk__win i:nth-child(3)::after { transform: rotate(-45deg); }

/* ── 侧栏 ───────────────────────────────────────────────────────────── */

.mk__body { display: flex; flex: 1; min-height: 0; }

.mk__nav {
  flex: none;
  width: 13.2em;
  display: flex;
  flex-direction: column;
  padding: 1em 0.8em 0.7em;
  background: var(--mk-side);
  border-right: 1px solid var(--mk-border);
  overflow: hidden;
}

.mk__navtop {
  display: flex;
  align-items: center;
  margin: 0 0 0.9em;
  padding: 0 0.7em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--mk-text);
}
.mk__pulse { margin-left: auto; color: var(--mk-accent); }
.mk__pulse svg { width: 1.3em; height: 1.3em; }

.mk__sect { margin: 0.6em 0 0.35em; padding: 0 0.7em; font-size: 0.76em; color: var(--mk-mute); }

.mk__nav ul { margin: 0; padding: 0; list-style: none; }

.mk__item {
  display: flex;
  align-items: center;
  gap: 0.65em;
  min-height: 2.5em;
  padding: 0 0.7em;
  border: 1px solid transparent;
  border-radius: 0.5em;
  color: var(--mk-dim);
  font-size: 0.92em;
}
.mk__item svg { width: 1.15em; height: 1.15em; opacity: 0.7; }
.mk__item.is-on {
  background: var(--mk-accent-soft);
  border-color: var(--mk-accent-line);
  color: var(--mk-accent);
}
.mk__item.is-on svg { opacity: 1; }

.mk__navfoot { margin-top: auto; padding: 0.5em 0.7em 0; font-size: 0.74em; color: var(--mk-mute); }

/* ── 内容区 ─────────────────────────────────────────────────────────── */

.mk__main { flex: 1; min-width: 0; padding: 1.5em 2.6em 1.6em; overflow: hidden; }

.mk__h1 {
  margin: 0;
  font-size: 1.28em;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.mk__sub { margin: 0.3em 0 0; font-size: 0.9em; color: var(--mk-faint); }

/* ── 筛选条 ─────────────────────────────────────────────────────────── */

.mk__filterbar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.85em;
  padding: 0.75em 0.9em;
  border: 1px solid var(--mk-border);
  border-radius: 0.55em;
  background: var(--mk-s0);
}

.mk__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.42em 0.9em;
  border: 1px solid var(--mk-border-2);
  border-radius: 0.45em;
  background: var(--mk-s1);
  color: var(--mk-dim);
  font-size: 0.86em;
  font-weight: 600;
}
.mk__tab svg { width: 1.1em; height: 1.1em; }

.mk__bar-right { margin-left: auto; display: flex; align-items: center; gap: 0.9em; }

.mk__synced {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.84em;
  color: var(--mk-dim);
}
.mk__synced svg { width: 1.05em; height: 1.05em; color: var(--mk-green); }
/* 没接上真实数据时不能亮绿灯：文案已改成「示意数据」，图标同步变灰 */
.mk__synced.is-static svg { color: var(--mk-mute); }

.mk__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 1em;
  border-radius: 0.45em;
  background: var(--mk-accent);
  color: #fff;
  font-size: 0.86em;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.mk__btn svg { width: 1em; height: 1em; }
/* 重取数据时转一下：只动 transform，符合动效预算 */
.mk__btn.is-busy svg { animation: mk-spin 700ms linear infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* ── 动效（2026-10-20） ────────────────────────────────────────────────
   与 home.css 的分工：这里只管「复刻界面内部」的反馈，页面级编排在 home.css。
   所有效果在 prefers-reduced-motion: reduce 下整体失效（见 home.css 末节）。 */

/* 卡片 3D 倾斜：--rx / --ry 由 motion.js 按指针位置写入。
   跟随期间关掉过渡（否则每帧插值会拖成迟滞），离开时恢复过渡平滑归位。 */
.mk__map {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 520ms var(--ease, ease), box-shadow 320ms var(--ease, ease);
}
.mk__map.is-tilting {
  transition: transform 0ms linear, box-shadow 320ms var(--ease, ease);
}

@media (hover: hover) and (pointer: fine) {
  .mk__map:hover {
    --spot: 1;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  }
}

/* 地图换图：旧图先退，新图解码完再进（motion.js 加/摘 .is-swapping） */
.mk__map-img,
.mk__map-next .thumb {
  transition: opacity 300ms var(--ease, ease);
}
.mk__map-img.is-swapping,
.mk__map-next .thumb.is-swapping {
  opacity: 0;
}

/* 数字更新时短促提亮：底分、剩余时间这些一变，眼睛要能捕捉到 */
@keyframes tick-flash {
  from { filter: brightness(1.5); }
  to   { filter: brightness(1); }
}
[data-live].is-ticking,
.mk__map-left .v.is-ticking {
  animation: tick-flash 560ms var(--ease, ease);
}

/* 排位时间线的当前段：缓慢呼吸。
   常驻循环只在可见时跑——motion.js 用 IntersectionObserver 挂 .is-live-view。 */
@keyframes tl-breathe {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
.mk__tl.is-live-view .mk__tl-seg.is-now {
  animation: tl-breathe 2800ms ease-in-out infinite;
}
.mk__btn--ghost {
  background: var(--mk-s1);
  border: 1px solid var(--mk-border-2);
  color: var(--mk-dim);
  font-weight: 500;
}

/* ── 赛季条 ─────────────────────────────────────────────────────────── */

.mk__season {
  display: flex;
  align-items: center;
  gap: 0.85em;
  margin-top: 0.25em;
  padding: 0.7em 1em;
  border: 1px solid var(--mk-border);
  border-radius: 0.55em;
  background: var(--mk-s1);
}

.mk__season-tag {
  padding: 0.18em 0.5em;
  border: 1px solid var(--mk-accent-line);
  border-radius: 0.3em;
  background: var(--mk-accent-soft);
  color: var(--mk-accent);
  font-size: 0.76em;
  font-weight: 700;
}

.mk__season-t { font-size: 0.95em; font-weight: 700; line-height: 1.3; }
.mk__season-d { font-size: 0.78em; color: var(--mk-mute); }

.mk__season-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2.2em;
  text-align: right;
}
.mk__season-r span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3em;
  font-size: 0.76em;
  color: var(--mk-mute);
}
.mk__season-r span svg { width: 1em; height: 1em; }
.mk__season-r b {
  display: block;
  margin-top: 0.15em;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--mk-text);
}
.mk__season-r .is-count { color: var(--mk-green); font-size: 1.15em; }

/* ── 地图卡 ─────────────────────────────────────────────────────────── */

.mk__maps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7em;
  margin-top: 0.75em;
}

.mk__map {
  position: relative;
  overflow: hidden;
  border-radius: 0.5em;
  aspect-ratio: 499 / 207;
  /* 没有风景图的地图（限时模式的具体点位）用一层底色渐变兜底，
     不热链源站图片，也不显示成一块纯黑 */
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(120, 104, 92, 0.35), transparent 65%),
    #16141a center/cover no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.mk__map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 聚光并进同一层的背景，排在第一层：不新增元素，也不和渐变抢层叠顺序。
     --spot 默认 0，只有 hover 时才亮起来（触屏没有 hover，不会残留）。 */
  background:
    radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, calc(0.17 * var(--spot, 0))),
      rgba(255, 255, 255, calc(0.05 * var(--spot, 0))) 38%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(7, 10, 13, 0.28) 0%,
      rgba(7, 10, 13, 0.38) 38%,
      rgba(7, 10, 13, 0.96) 100%
    );
}

.mk__map-tag {
  position: absolute;
  top: 0.55em;
  left: 0.6em;
  z-index: 2;
  padding: 0.16em 0.55em;
  border-radius: 0.35em;
  background: rgba(20, 16, 14, 0.6);
  border: 1px solid rgba(226, 96, 82, 0.85);
  color: #f08a7c;
  font-size: 0.8em;
  font-weight: 600;
}

.mk__map-live {
  position: absolute;
  top: 0.6em;
  right: 0.65em;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.28em;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74em;
}
.mk__map-live::before {
  content: "";
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  /* 默认灰点：静态值不能亮绿灯（卡片上写「示意」时不许同时声称「实时」） */
  background: rgba(255, 255, 255, 0.42);
}
.mk__map-live.is-live::before { background: #63c48c; }

.mk__map-name {
  position: absolute;
  left: 0.72em;
  top: 3.2em;
  z-index: 2;
  font-size: 1.72em;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.mk__map-time {
  position: absolute;
  right: 0.8em;
  top: 4.9em;
  z-index: 2;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82em;
  font-weight: 600;
}

.mk__map-foot {
  position: absolute;
  left: 0.72em;
  right: 0.8em;
  bottom: 0.7em;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8em;
}

.mk__map-left { line-height: 1.3; }
.mk__map-left .k {
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78em;
}
.mk__map-left .k svg { width: 1.05em; height: 1.05em; }
.mk__map-left .v { margin-top: 0.1em; color: #9fe0bb; font-size: 1.05em; font-weight: 700; }
.mk__map-left .v em { margin-left: 0.5em; font-style: normal; font-size: 0.85em; font-weight: 500; }

.mk__map-next { display: flex; align-items: center; gap: 0.55em; }
.mk__map-next .thumb {
  width: 3.5em;
  height: 3.5em;
  border-radius: 0.4em;
  background: #3a332c;
  object-fit: cover;
  display: block;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* 没有素材时保留占位尺寸，只把内容藏掉：直接 display:none 会让右侧文字跳位 */
.mk__map-next .thumb.is-empty { visibility: hidden; }
.mk__map-next .txt { text-align: right; line-height: 1.3; }
.mk__map-next .k { color: #f08a7c; font-size: 0.8em; font-weight: 700; }
.mk__map-next .n { color: #fff; font-size: 0.98em; font-weight: 700; }
.mk__map-next .t { color: rgba(255, 255, 255, 0.6); font-size: 0.74em; }

/* ── 排位轮换时间线 ─────────────────────────────────────────────────── */

.mk__tl {
  margin-top: 0.75em;
  padding: 0.75em 0.85em 0.85em;
  border: 1px solid var(--mk-border);
  border-radius: 0.55em;
  background: var(--mk-s0);
}

.mk__tl-head { display: flex; align-items: center; gap: 0.5em; font-size: 0.86em; font-weight: 700; }
.mk__tl-head svg { width: 1.15em; height: 1.15em; color: var(--mk-accent); }
.mk__tl-note { color: var(--mk-mute); font-size: 0.86em; font-weight: 400; }
.mk__tl-collapse {
  margin-left: auto;
  padding: 0.28em 0.8em;
  border: 1px solid var(--mk-border-2);
  border-radius: 0.4em;
  background: var(--mk-s1);
  color: var(--mk-dim);
  font-size: 0.8em;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.mk__tl-now { display: flex; align-items: center; gap: 0.6em; margin-top: 0.6em; font-size: 0.84em; }
.mk__tl-now .clock { color: var(--mk-dim); }
.mk__tl-now .map { font-weight: 700; }
.mk__tl-now .range { color: var(--mk-mute); }
.mk__tl-jump { margin-left: auto; display: flex; gap: 0.4em; }
.mk__tl-jump span {
  padding: 0.24em 0.7em;
  border: 1px solid var(--mk-border-2);
  border-radius: 0.4em;
  background: var(--mk-s1);
  color: var(--mk-dim);
  font-size: 0.78em;
}

.mk__tl-dates {
  position: relative;
  display: flex;
  margin-top: 0.5em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--mk-border);
  font-size: 0.74em;
  color: var(--mk-dim);
}
.mk__tl-dates .d1 { font-weight: 600; }
.mk__tl-dates .d2 { position: absolute; left: 21.5%; font-weight: 600; }

.mk__tl-axis {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  margin-top: 0.3em;
  font-size: 0.74em;
  color: var(--mk-mute);
  text-align: center;
}

.mk__tl-bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.35em;
  margin-top: 0.3em;
}
.mk__tl-seg {
  position: relative;
  height: 4.6em;
  padding: 0.45em 0.55em;
  border-radius: 0.35em;
  border: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1.35;
  overflow: hidden;
}
.mk__tl-seg b { display: block; font-size: 0.92em; font-weight: 700; color: #2a2620; }
.mk__tl-seg span { display: block; margin-top: 0.15em; font-size: 0.78em; color: #5c5449; }

.mk__tl-seg--a { background: #fad7b6; }
.mk__tl-seg--b { background: #d6efdd; }
.mk__tl-seg--c { background: #dde9f0; }
.mk__tl-seg--d { background: #f9e5d2; }

.mk__tl-seg.is-now::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: -1.05em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--mk-accent);
}
.mk__tl-seg.is-now::after {
  content: "";
  position: absolute;
  left: 0.49em;
  top: -0.68em;
  width: 1px;
  height: 0.68em;
  background: var(--mk-accent);
}

/* 真数据接管后的时间线（live.js 给 .mk__tl 挂 is-live）：
   接口只给 current 与 next 两段，窗口就是这两段的总跨度，不再画 24 小时。 */
.mk__tl.is-live .mk__tl-axis { grid-template-columns: repeat(5, 1fr); }
.mk__tl.is-live .mk__tl-bars { display: flex; }
.mk__tl.is-live .mk__tl-seg { flex: 1 1 0; min-width: 0; }
.mk__tl.is-live .mk__tl-dates .d2 { left: auto; right: 0; }

/* 收起态必须排在上面两条之后：特异性相同（0,3,0），后者胜，
   写在前面会被 .is-live 的 display:flex 盖掉（2026-10-19 实测踩过） */
.mk__tl.is-collapsed .mk__tl-bars,
.mk__tl.is-collapsed .mk__tl-axis,
.mk__tl.is-collapsed .mk__tl-dates { display: none; }

/* ── 地图风景图（禁止内联样式，一律用类）────────────────────────────── */

/* 风景图改成真 <img>（2026-10-19）：CSS 背景图没有原生懒加载，首屏会一次拉齐
   五张约 245 KB；换成 <img loading="lazy"> 后，手机端落在首屏外的图不再抢带宽。
   图由 live.js 按接口返回的地图名改写 src，没有素材的地图（限时模式的具体点位）
   把 src 摘掉并 hidden，露出卡片自身的底色渐变。 */
.mk__map-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mk__map-img[hidden] { display: none; }

/* ── 功能面板通用件 ─────────────────────────────────────────────────── */

.mk__card {
  padding: 0.85em 1em;
  border: 1px solid var(--mk-border);
  border-radius: 0.55em;
  background: var(--mk-s1);
  box-shadow: var(--mk-shadow);
}

.mk__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18em 0.6em;
  border: 1px solid var(--mk-border-2);
  border-radius: 0.35em;
  background: var(--mk-s1);
  color: var(--mk-dim);
  font-size: 0.8em;
  white-space: nowrap;
}
.mk__chip.is-on {
  border-color: var(--mk-accent-line);
  background: var(--mk-accent-soft);
  color: var(--mk-accent);
}

.mk__dot-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.8em;
  color: var(--mk-dim);
}
.mk__dot-state::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--mk-green);
}

.mk__sync-r { margin-left: auto; }

/* ── 01 猎杀底分 ────────────────────────────────────────────────────── */

.mk__sync {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.8em;
  padding: 0.5em 0.85em;
  border: 1px solid var(--mk-border);
  border-radius: 0.5em;
  background: var(--mk-s0);
  font-size: 0.82em;
  color: var(--mk-dim);
}
.mk__sync svg { width: 1.1em; height: 1.1em; color: var(--mk-green); }

.mk__summary {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 0.6em;
  margin-top: 0.7em;
}
.mk__sum {
  padding: 0.65em 0.85em;
  border: 1px solid var(--mk-border);
  border-radius: 0.5em;
  background: var(--mk-s1);
}
.mk__sum-k { font-size: 0.76em; color: var(--mk-mute); }
.mk__sum-v { margin-top: 0.15em; font-size: 1.15em; font-weight: 700; }
.mk__sum-v small { font-size: 0.6em; font-weight: 500; color: var(--mk-mute); }

.mk__plats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7em;
  margin-top: 0.7em;
}

.mk__plat {
  padding: 0.75em 0.9em;
  border: 1px solid var(--mk-border);
  border-radius: 0.55em;
  background: var(--mk-s1);
  box-shadow: var(--mk-shadow);
}
.mk__plat-h {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--mk-border);
  font-size: 0.85em;
  font-weight: 600;
}
.mk__plat-h svg { width: 1.1em; height: 1.1em; opacity: 0.75; }
.mk__plat-h .mk__dot-state { margin-left: auto; font-weight: 400; }
.mk__plat-k { margin-top: 0.5em; font-size: 0.76em; color: var(--mk-mute); }
.mk__plat-v {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.mk__plat-v small { font-size: 0.4em; font-weight: 600; color: var(--mk-mute); }
.mk__plat-note { display: flex; gap: 0.45em; margin-top: 0.15em; font-size: 0.76em; color: var(--mk-faint); }
.mk__plat-note b { color: var(--mk-green); font-weight: 600; }
.mk__plat-note b.is-down { color: var(--mk-accent); }
.mk__plat-note b.is-flat { color: var(--mk-mute); }

.mk__bar-mini {
  height: 0.28em;
  margin-top: 0.45em;
  border-radius: 999px;
  background: var(--mk-s2);
  overflow: hidden;
}
.mk__bar-mini i { display: block; height: 100%; border-radius: 999px; background: var(--mk-accent); }
.mk__bar-mini i.w32 { width: 32%; }
.mk__bar-mini i.w48 { width: 48%; }
.mk__bar-mini i.w64 { width: 64%; }
.mk__bar-mini i.w80 { width: 80%; }

.mk__plat-row {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3em;
  font-size: 0.74em;
  color: var(--mk-mute);
}
.mk__plat-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4em;
  margin-top: 0.45em;
  padding-top: 0.45em;
  border-top: 1px solid var(--mk-border);
  text-align: center;
}
.mk__plat-cols span { display: block; font-size: 0.72em; color: var(--mk-mute); }
.mk__plat-cols b { font-size: 0.92em; font-weight: 600; }

/* ── 02 ALGS ────────────────────────────────────────────────────────── */

.mk__crumb { font-size: 0.78em; color: var(--mk-mute); }
.mk__season-head { display: flex; align-items: center; gap: 0.55em; margin-top: 0.25em; }
.mk__season-head .mk__season-t { margin: 0; font-size: 1.15em; font-weight: 700; }
.mk__season-src { font-size: 0.78em; color: var(--mk-mute); }

.mk__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55em 1.2em;
  margin-top: 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid var(--mk-border);
}
.mk__metric span { display: block; font-size: 0.74em; color: var(--mk-mute); }
.mk__metric b { font-size: 1em; font-weight: 700; }
.mk__metric b small { font-size: 0.7em; font-weight: 500; color: var(--mk-mute); }
/* 上面的 `.mk__metric span` 会把动态值节点（如 algs-days）也变成块级，
   导致「已开赛 / 5 / 天」被拆成三行；值应当留在行内。 */
.mk__metric b span { display: inline; }

.mk__tabs {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--mk-border);
  font-size: 0.8em;
  color: var(--mk-faint);
  overflow: hidden;
  white-space: nowrap;
}
.mk__tabs .mk__tab {
  padding: 0.2em 0.55em;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 500;
}
.mk__tabs .mk__tab.is-on {
  border-color: var(--mk-accent-line);
  background: var(--mk-accent-soft);
  color: var(--mk-accent);
}
.mk__tabs-r { margin-left: auto; }

.mk__algs-body {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0.7em;
  margin-top: 0.7em;
}
.mk__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.9em;
  border: 1px solid var(--mk-border);
  border-radius: 0.55em;
  background: var(--mk-s1);
  text-align: center;
}
.mk__count-v { font-size: 2em; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.mk__count-v small { font-size: 0.36em; font-weight: 600; margin-left: 0.15em; color: var(--mk-dim); }
.mk__count-c { margin-top: 0.25em; font-size: 0.78em; color: var(--mk-faint); }
.mk__count-d { margin-top: 0.15em; font-size: 0.76em; color: var(--mk-mute); }

.mk__note {
  padding: 0.75em 0.9em;
  border: 1px solid var(--mk-border);
  border-radius: 0.55em;
  background: var(--mk-s1);
  font-size: 0.8em;
  color: var(--mk-dim);
  line-height: 1.65;
}
.mk__note b { display: block; font-size: 1.05em; color: var(--mk-text); margin-bottom: 0.2em; }
.mk__note i { display: block; margin-top: 0.3em; font-style: normal; color: var(--mk-mute); }

/* ── 03 游戏准星 ────────────────────────────────────────────────────── */

.mk__status {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.8em;
  padding: 0.45em 0.85em;
  border: 1px solid var(--mk-border);
  border-radius: 0.5em;
  background: var(--mk-s0);
  font-size: 0.82em;
  color: var(--mk-dim);
}
.mk__status svg { width: 1.1em; height: 1.1em; color: var(--mk-accent); }
.mk__status-r { margin-left: auto; }

.mk__presets {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.45em;
  margin-top: 0.7em;
}
.mk__preset {
  padding: 0.45em 0.3em;
  border: 1px solid var(--mk-border-2);
  border-radius: 0.45em;
  background: var(--mk-s1);
  text-align: center;
  font-size: 0.72em;
  color: var(--mk-dim);
  line-height: 1.35;
}
.mk__preset.is-on {
  border-color: var(--mk-accent-line);
  background: var(--mk-accent-soft);
  color: var(--mk-accent);
}
.mk__preset i {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto 0.3em;
  background:
    linear-gradient(currentColor, currentColor) center/100% 0.16em no-repeat,
    linear-gradient(currentColor, currentColor) center/0.16em 100% no-repeat;
  opacity: 0.85;
}

.mk__editor {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0.8em;
  margin-top: 0.8em;
}
.mk__preview {
  display: grid;
  place-items: center;
  min-height: 7em;
  border: 1px solid var(--mk-border);
  border-radius: 0.5em;
  background:
    linear-gradient(45deg, #ded9cf 25%, transparent 25%) 0 0/0.8em 0.8em,
    linear-gradient(-45deg, #ded9cf 25%, transparent 25%) 0 0.4em/0.8em 0.8em,
    linear-gradient(45deg, transparent 75%, #ded9cf 75%) 0.4em -0.4em/0.8em 0.8em,
    linear-gradient(-45deg, transparent 75%, #ded9cf 75%) -0.4em 0/0.8em 0.8em,
    #e8e4dc;
}
.mk__preview i {
  width: 2.2em;
  height: 2.2em;
  background:
    linear-gradient(#fff, #fff) center/100% 0.2em no-repeat,
    linear-gradient(#fff, #fff) center/0.2em 100% no-repeat;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.75));
}

.mk__sliders { display: grid; gap: 0.4em; }
.mk__slider-k { display: flex; justify-content: space-between; font-size: 0.76em; color: var(--mk-dim); }
.mk__slider-k span:last-child { color: var(--mk-mute); }
.mk__track { position: relative; height: 1em; display: flex; align-items: center; }
.mk__track::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 0.18em;
  margin-top: -0.09em;
  border-radius: 999px;
  background: var(--mk-s2);
}
.mk__track i {
  position: absolute;
  left: var(--v, 40%);
  width: 0.7em;
  height: 0.7em;
  margin-left: -0.35em;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--mk-border-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.mk__track i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  right: 0.35em;
  height: 0.18em;
  margin-top: -0.09em;
  border-radius: 999px;
  background: var(--mk-accent);
}
.mk__slider:nth-child(1) .mk__track i { --v: 34%; }
.mk__slider:nth-child(2) .mk__track i { --v: 58%; }
.mk__slider:nth-child(3) .mk__track i { --v: 22%; }
.mk__slider:nth-child(4) .mk__track i { --v: 72%; }
.mk__slider:nth-child(5) .mk__track i { --v: 46%; }

.mk__swatches { display: flex; gap: 0.2em; margin-top: 0.35em; }
.mk__swatches i { width: 0.8em; height: 0.8em; border-radius: 0.15em; }
.mk__swatches i:nth-child(1) { background: #e5484d; }
.mk__swatches i:nth-child(2) { background: #f5a524; }
.mk__swatches i:nth-child(3) { background: #4ade80; }
.mk__swatches i:nth-child(4) { background: #38bdf8; }
.mk__swatches i:nth-child(5) { background: #a78bfa; }
.mk__swatches i:nth-child(6) { background: #fff; box-shadow: inset 0 0 0 1px var(--mk-border-2); }
.mk__swatches i:nth-child(7) { background: #1a1a1a; }

/* ── 04 画面设置 ────────────────────────────────────────────────────── */

.mk__path { display: flex; align-items: center; gap: 0.45em; margin-top: 0.45em; }
.mk__path-input {
  flex: 1;
  min-width: 0;
  padding: 0.3em 0.55em;
  border: 1px solid var(--mk-border-2);
  border-radius: 0.3em;
  background: var(--mk-s0);
  font-size: 0.78em;
  color: var(--mk-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk__sect-h {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0.8em 0 0.4em;
  font-size: 0.92em;
  font-weight: 600;
}
.mk__sect-h em {
  display: grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 0.28em;
  background: var(--mk-accent-soft);
  color: var(--mk-accent);
  font-style: normal;
  font-size: 0.82em;
  font-weight: 700;
}

.mk__plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55em; }
.mk__plan {
  padding: 0.6em 0.75em;
  border: 1px solid var(--mk-border);
  border-radius: 0.45em;
  background: var(--mk-s0);
}
.mk__plan b { display: block; font-size: 0.86em; font-weight: 600; }
.mk__plan span { display: block; margin-top: 0.12em; font-size: 0.74em; color: var(--mk-mute); line-height: 1.5; }

.mk__setting {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 0.45em;
  align-items: center;
  padding: 0.38em 0;
  border-bottom: 1px solid var(--mk-border);
  font-size: 0.8em;
}
.mk__setting:first-of-type { border-top: 1px solid var(--mk-border); }
.mk__setting-k { color: var(--mk-dim); }
.mk__select {
  padding: 0.18em 0.45em;
  border: 1px solid var(--mk-border-2);
  border-radius: 0.28em;
  background: var(--mk-s0);
  color: var(--mk-text);
  font-size: 0.95em;
  text-align: center;
}

/* ── 05 启动管理 ────────────────────────────────────────────────────── */

.mk__toolbar {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.5em;
  font-size: 0.78em;
  color: var(--mk-faint);
}
.mk__search {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.5em;
  padding: 0.3em 0.6em;
  border: 1px solid var(--mk-border-2);
  border-radius: 0.35em;
  background: var(--mk-s0);
  font-size: 0.78em;
  color: var(--mk-mute);
}
.mk__search svg { width: 1em; height: 1em; }

.mk__filters { display: flex; flex-wrap: wrap; gap: 0.3em; margin-top: 0.5em; }
.mk__filter {
  padding: 0.1em 0.5em;
  border: 1px solid var(--mk-border);
  border-radius: 0.3em;
  background: var(--mk-s0);
  font-size: 0.74em;
  color: var(--mk-dim);
}
.mk__filter.is-on {
  border-color: var(--mk-accent-line);
  background: var(--mk-accent-soft);
  color: var(--mk-accent);
}

.mk__params { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.7em; margin-top: 0.5em; }
.mk__param { display: flex; gap: 0.45em; padding: 0.45em 0; border-bottom: 1px solid var(--mk-border); }
.mk__param-dot {
  flex: none;
  width: 0.42em;
  height: 0.42em;
  margin-top: 0.4em;
  border-radius: 50%;
  background: var(--mk-accent);
}
.mk__param-dot--gray { background: var(--mk-mute); }
.mk__param-b { min-width: 0; }
.mk__param-t { display: flex; align-items: center; gap: 0.3em; font-size: 0.82em; font-weight: 600; }
.mk__param-t code {
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.95em;
  font-weight: 500;
}
.mk__param-d { margin-top: 0.1em; font-size: 0.74em; color: var(--mk-mute); line-height: 1.5; }

.mk__tag { padding: 0 0.3em; border-radius: 0.22em; font-size: 0.85em; font-weight: 500; }
.mk__tag--red { background: var(--mk-accent-soft); color: var(--mk-accent); }
.mk__tag--gray { background: var(--mk-s2); color: var(--mk-dim); }

.mk__side {
  flex: none;
  width: 10em;
  padding: 0.75em;
  border-left: 1px solid var(--mk-border);
  background: var(--mk-s0);
  font-size: 0.78em;
}
.mk__side-t { font-size: 0.95em; font-weight: 600; color: var(--mk-dim); }
.mk__side-card {
  margin-top: 0.45em;
  padding: 0.45em 0.55em;
  border: 1px solid var(--mk-border);
  border-radius: 0.35em;
  background: var(--mk-s1);
}
.mk__side-card b { display: block; font-weight: 600; }
.mk__side-card span { font-size: 0.92em; color: var(--mk-mute); }
.mk__side-btn {
  display: block;
  margin-top: 0.45em;
  padding: 0.3em;
  border-radius: 0.3em;
  background: var(--mk-accent);
  color: #fff;
  text-align: center;
  font-weight: 600;
}

/* ── 容器与响应式 ───────────────────────────────────────────────────── */

.hero__window,
.panel__media { container-type: inline-size; }

@media (max-width: 1080px) {
  .mk { height: auto; }
  .mk__maps { grid-template-columns: 1fr; }
  .mk__tl-axis { grid-template-columns: repeat(5, 1fr); }
  .mk__tl-bars { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
  .mk__map-time { display: none; }
  .mk__map-name { font-size: 1.35em; top: 3em; }
  .mk__tl-jump, .mk__tl-note { display: none; }
  .mk__season-r { gap: 1em; }
  .mk__season-r > div:last-child { display: none; }
  .mk__presets { grid-template-columns: repeat(4, 1fr); }
  .mk__editor { grid-template-columns: 1fr; }
  .mk__preview { min-height: 4.5em; }
  .mk__side { display: none; }
  .mk__params { grid-template-columns: 1fr; }
  .mk__setting { grid-template-columns: 1fr 1fr; }
  .mk__summary { grid-template-columns: 1fr; }
  .mk__algs-body { grid-template-columns: 1fr; }
  .mk__plats { grid-template-columns: 1fr; }
  .mk__metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ── 降低动效：必须放在本文件最后 ──────────────────────────────────────
   两条复位规则的特异性与它们要覆盖的规则完全相同：
     .mk__map                                    (0,1,0)
     .mk__tl.is-live-view .mk__tl-seg.is-now     (0,3,0)
   同特异性下后写者胜，所以这个块**只能放在文件末尾**。
   2026-10-20 实测踩过两次（第一次是 .mk__tl.is-collapsed 被 is-live 盖掉，
   第二次是这里的呼吸动画没被关掉）—— 位移与循环归零，但颜色/透明度过渡保留，
   因为那是「操作有响应」的反馈，减少动效的用户同样需要。 */
@media (prefers-reduced-motion: reduce) {
  .mk__map { transform: none; }
  .mk__tl.is-live-view .mk__tl-seg.is-now { animation: none; }
}