/* 主页（`GET /`）：介绍平台 + 三个登录入口。
 *
 * 设计基线沿用控制台：浅色、白卡片、极浅描边、大圆角、单一紫色点缀、留白优先。
 * 字号只从 tokens.css 的令牌取值，不在本文件里写死——否则下一次调字号又要漏掉这一页。
 *
 * 每个变量都写了兜底值：这张页面是独立于控制台的（只借它的令牌表），
 * 万一令牌被改名，页面仍然可用，不至于变成一片没有样式的纯文字。
 */

body.home {
  margin: 0;
  background: var(--bg, #f6f7f9);
  color: var(--text, #111827);
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: var(--fs-base, 16px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.home__skip {
  position: absolute;
  left: -9999px;
}
.home__skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-control, 8px);
}

/* ── 顶栏 ────────────────────────────────────────────── */
.home__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 24px;
}
.home__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.home__logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
}
.home__site {
  font-size: var(--fs-base, 16px);
  font-weight: 600;
}
.home__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
/* 管理员与运维入口：右上角、刻意不醒目——比正文小一号、次要色、无边框无底色。
   不给它 hover 上色之外的任何强调，避免和"普通用户"入口抢注意力。 */
.home__staff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}
.home__staff-link {
  color: var(--muted, #6b7280);
  font-size: var(--fs-xs, 14px);
  text-decoration: none;
}
.home__staff-link:hover {
  color: var(--text, #111827);
  text-decoration: underline;
}
.home__staff-sep {
  color: var(--border-control, #d1d5db);
  font-size: var(--fs-xs, 14px);
}
/* 与控制台顶栏的 .topbar__select 同一套尺寸与描边：同一站点不该有两套控件长相。 */
.home__control {
  height: 28px;
  max-width: 132px;
  padding: 0 6px;
  border: 1px solid var(--border-control, #d1d5db);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #111827);
  font-size: var(--fs-sm, 15px);
}

/* ── 主体 ────────────────────────────────────────────── */
.home__main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 56px;
}
.home__hero {
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.home__title {
  margin: 0 0 16px;
  font-size: var(--fs-2xl, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 650;
  max-width: 22em;
}
.home__lede {
  margin: 0 0 28px;
  max-width: 46em;
  color: var(--muted, #4b5563);
  font-size: var(--fs-lg, 20px);
  line-height: 1.7;
}
.home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.home__button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-control, #d1d5db);
  background: var(--surface, #fff);
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-sm, 15px);
  font-weight: 500;
}
.home__button--primary {
  background: var(--brand-strong, #7c3aed);
  border-color: var(--brand-strong, #7c3aed);
  color: #fff;
}
.home__button--primary:hover {
  background: var(--brand-strong-hover, #6d28d9);
}
.home__note {
  margin: 14px 0 0;
  color: var(--muted, #6b7280);
  font-size: var(--fs-sm, 15px);
}

.home__section {
  padding: 40px 0 0;
}
.home__h2 {
  margin: 0 0 8px;
  font-size: var(--fs-xl, 24px);
  font-weight: 600;
}
.home__hint {
  margin: 0 0 20px;
  color: var(--muted, #6b7280);
  font-size: var(--fs-sm, 15px);
}

/* ── 卡片 ────────────────────────────────────────────── */
.home__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.home__card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-card, 12px);
  padding: 22px 22px 24px;
}
.home__card-title {
  margin: 0 0 8px;
  font-size: var(--fs-base, 16px);
  font-weight: 600;
}
.home__card-text {
  margin: 0;
  color: var(--muted, #4b5563);
  font-size: var(--fs-sm, 15px);
  line-height: 1.75;
}

/* ── 边界清单 ────────────────────────────────────────── */
.home__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 56em;
}
.home__list li {
  position: relative;
  padding-left: 22px;
  color: var(--muted, #4b5563);
  font-size: var(--fs-sm, 15px);
}
.home__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brand, #8b5cf6);
}

/* ── 登录入口 ────────────────────────────────────────── */
.home__cards--entries {
  grid-template-columns: repeat(auto-fit, minmax(240px, 420px));
  justify-content: start;
}
.home__entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-card, 12px);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.home__entry:hover {
  border-color: var(--brand, #8b5cf6);
  box-shadow: 0 6px 20px rgba(17, 24, 39, .06);
  transform: translateY(-1px);
}
.home__entry:focus-visible {
  outline: 2px solid var(--brand, #8b5cf6);
  outline-offset: 2px;
}
.home__entry-name {
  font-size: var(--fs-lg, 20px);
  font-weight: 600;
}
.home__entry-text {
  color: var(--muted, #6b7280);
  font-size: var(--fs-sm, 15px);
}
.home__entry-go {
  position: absolute;
  right: 20px;
  top: 20px;
  color: var(--brand, #8b5cf6);
}

/* ── 页脚 ────────────────────────────────────────────── */
.home__footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 24px 40px;
  border-top: 1px solid var(--border, #e5e7eb);
  color: var(--muted, #9ca3af);
  font-size: var(--fs-2xs, 13px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home__footer-sep {
  opacity: .5;
}

/* ── 窄屏 ────────────────────────────────────────────── */
@media (max-width: 560px) {
  .home__header,
  .home__main,
  .home__footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .home__hero {
    padding-top: 32px;
  }
  .home__title {
    font-size: var(--fs-xl, 24px);
  }
  .home__lede {
    font-size: var(--fs-base, 16px);
  }
  /* 窄屏给两个下拉各自收窄，避免顶栏被撑出横向滚动。 */
  .home__control {
    max-width: 96px;
  }
}