/* mobile-dev.html 专用样式（深色，配合 dark.css） */

.md-page a { color: inherit; }

/* ---- Split (图文) ---- */
.md-split { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.md-copy .dk-sub { max-width: none; }
.md-media { position: relative; }
.md-media::before {
  content: ''; position: absolute; right: -16px; top: -16px; width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,184,107,.4), transparent 70%);
  filter: blur(12px); z-index: 0;
}
.md-media img {
  position: relative; z-index: 1; width: 100%; display: block;
  border-radius: 18px; border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

/* ---- 列表 ---- */
.md-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.md-list li { position: relative; padding-left: 30px; font-size: .94rem; color: var(--text); line-height: 1.65; }
.md-list li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #e5471d);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px; background-position: center; background-repeat: no-repeat;
}

/* ---- 网格与卡片 ---- */
.md-grid { display: grid; gap: 22px; }
.md-grid-4 { grid-template-columns: repeat(4, 1fr); }
.md-card { padding: 30px 26px; }
.md-ico {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,92,51,.1); border: 1px solid rgba(255,92,51,.25); color: var(--accent2);
  margin-bottom: 18px; transition: all .35s ease;
}
.md-ico svg { width: 26px; height: 26px; }
.md-card:hover .md-ico { background: var(--accent); color: #fff; border-color: transparent; }
.md-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--title-color); margin: 0 0 10px; line-height: 1.35; }
.md-card p { font-size: .9rem; color: var(--body-color); line-height: 1.75; margin: 0; }

/* ---- 技术标签 ---- */
.md-tech { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.md-tech .dk-tag { font-size: .86rem; padding: 9px 20px; transition: all .3s ease; }
.md-tech .dk-tag:hover { background: var(--accent); color: #fff; border-color: transparent; transform: translateY(-2px); }

/* ---- 流程 ---- */
.md-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.md-step { text-align: center; }
.md-step-num {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), #e5471d);
  box-shadow: 0 10px 26px rgba(255,92,51,.3);
  transition: transform .35s ease, box-shadow .35s ease;
}
.md-step:hover .md-step-num { transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 34px rgba(255,92,51,.42); }
.md-step h4 { margin: 0 0 6px; font-size: .98rem; font-weight: 700; color: var(--title-color); }
.md-step p { margin: 0; font-size: .83rem; color: var(--muted); line-height: 1.65; }

/* ---- 响应式 ---- */
@media (max-width: 992px) {
  .md-split { grid-template-columns: 1fr; gap: 40px; }
  .md-media { order: -1; }
  .md-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .md-steps { grid-template-columns: repeat(3, 1fr); gap: 26px 18px; }
}
@media (max-width: 640px) {
  .md-grid-4 { grid-template-columns: 1fr; }
  .md-steps { grid-template-columns: repeat(2, 1fr); }
  .md-card { padding: 26px 22px; }
  .md-step-num { width: 54px; height: 54px; font-size: 1rem; }
}