/* ===========================================================
   duzm.top 首页 · 浅色科技风（与工具箱同一套设计语言）
   =========================================================== */
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 72px;
  gap: 22px;
}

.home-card {
  width: min(560px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 40px 36px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.home-logo { display: grid; place-items: center; margin-bottom: 10px; }

.home-card h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.home-sub {
  margin: 2px 0 18px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.home-links { width: 100%; display: flex; flex-direction: column; gap: 10px; }

.home-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  text-decoration: none;
  color: var(--text);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.home-link:hover {
  background: #fff;
  border-color: var(--accent-line);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.home-link-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 20px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.home-link-body { display: flex; flex-direction: column; text-align: left; line-height: 1.45; min-width: 0; }
.home-link-body strong { font-size: 15px; font-weight: 650; }
.home-link-body em { font-style: normal; font-size: 12px; color: var(--muted); }
.home-link-arrow { margin-left: auto; color: var(--muted); font-size: 16px; }
.home-link:hover .home-link-arrow { color: var(--accent); }

#beian {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
#beian .version {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  margin-right: 14px;
}
#beian a { color: var(--text-2); text-decoration: none; }
#beian a:hover { color: var(--accent); }

@media (max-width: 480px) {
  .home-card { padding: 30px 20px 26px; }
  .home-card h1 { font-size: 22px; }
  .home-link-body em { display: none; }
}