/* ==========================================================================
   平台官网（v0.5.1）：developers.cloudlove.top 未登录时的首页 · 前缀 site- / auth-
   与应用内页面同一套令牌与组件：白底、1px 描边、墨蓝主按钮、纸艺插画；常驻元素不加阴影。
   ========================================================================== */

.site { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* ---------- 顶栏：与应用顶栏同高、同样的半透明白底 ---------- */
.site-top {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--topbar-h);
  padding: 0 var(--page-px);
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid var(--c-border);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-sm);
}
.site-brand img { flex: none; border-radius: var(--r-sm); }
.site-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-top-nav { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.site-top-nav .yb-btn--ghost > .yb-icon { margin: 0 -2px 0 0; color: var(--c-text-3); }

/* ---------- 主体：左侧介绍，右侧登录 / 申请卡片 ---------- */
.site-main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--sp-12) var(--page-px) 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas:
    "intro auth"
    "steps auth"
    "kinds auth";
  grid-template-rows: auto auto 1fr;
  column-gap: 72px;
  align-items: start;
}
.site-intro { grid-area: intro; }
.site-steps { grid-area: steps; }
.site-kinds { grid-area: kinds; }
.site-auth  { grid-area: auth; position: sticky; top: calc(var(--topbar-h) + var(--sp-6)); outline: none; }

/* 纸艺插画：呼应 Logo 的层叠纸片，是页面唯一的插画 */
.site-art { position: relative; width: 168px; margin-bottom: var(--sp-6); }
.site-art .yb-paper { --paper-size: 168px; }
.site-art-logo {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  border-radius: 18px;
  transform: translate(-50%, -50%);
}
.site-title {
  max-width: 15em;
  font-size: var(--fs-30);
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
}
.site-lead {
  max-width: 34em;
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--c-text-2);
}

.site-steps, .site-kinds {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-divider);
}
.site-h2 { font-size: var(--fs-15); margin-bottom: var(--sp-5); }

/* 三个步骤是有先后的流程，所以用编号 */
.site-step-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.site-step-list li { display: flex; gap: var(--sp-3); }
.site-step-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-brand-ink);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-ink);
  line-height: 1;
}
.site-step-list h3, .site-kind-list h3 { font-size: var(--fs-14); line-height: 28px; }
.site-step-list p, .site-kind-list p { margin-top: 2px; font-size: var(--fs-13); line-height: 1.7; color: var(--c-text-2); }

.site-kind-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.site-kind-list li { display: flex; gap: var(--sp-3); }
.site-kind-list .yb-tile { --tile: 36px; }
.site-kind-list h3 { line-height: 1.4; margin-top: 1px; }

.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  padding: var(--sp-6) var(--page-px) calc(var(--sp-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-divider);
  font-size: var(--fs-12);
  color: var(--c-text-3);
}
.site-foot a { border-radius: var(--r-xs); }
.site-foot a:hover { color: var(--c-text-1); }

/* ---------- 登录 / 申请卡片 ---------- */
.auth-card {
  padding: var(--sp-6) 28px 28px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
}
.auth-title { font-size: var(--fs-18); margin-bottom: var(--sp-5); }
.auth-tabs { margin: -6px 0 var(--sp-5); }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form .yb-btn { margin-top: var(--sp-1); }
.auth-password { position: relative; }
.auth-password input { padding-right: 40px; }
.auth-reveal {
  position: absolute; top: 50%; right: 6px;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--c-text-3);
  transform: translateY(-50%);
}
.auth-reveal:hover { color: var(--c-text-1); background: var(--c-fill-1); }
.auth-reveal[aria-pressed="true"] { color: var(--c-brand-ink); }
.auth-notice {
  margin-bottom: var(--sp-4);
  padding: 10px 12px;
  border-radius: var(--r-lg);
  font-size: var(--fs-13);
  line-height: 1.6;
  background: var(--c-fill-1);
  color: var(--c-text-2);
}
.auth-notice--success { background: var(--c-success-bg); color: var(--c-green-600); }
.auth-notice--warning { background: var(--c-warning-bg); color: var(--c-amber-700); }
.auth-notice--danger  { background: var(--c-danger-bg);  color: var(--c-red-600); }
.auth-hint { margin-top: var(--sp-4); font-size: var(--fs-12); line-height: 1.7; color: var(--c-text-3); }
.auth-link {
  font-weight: var(--fw-medium);
  color: var(--c-brand-ink);
  border-radius: var(--r-xs);
  text-decoration: underline;
  text-decoration-color: var(--c-border-2);
  text-underline-offset: 3px;
}
.auth-link:hover { text-decoration-color: currentColor; }

/* ---------- 平板与手机：单列，卡片紧跟在标题之后 ---------- */
@media (max-width: 959px) {
  .site-main {
    max-width: 640px;
    padding-top: var(--sp-8);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "auth" "steps" "kinds";
    grid-template-rows: none;
  }
  .site-auth { position: static; margin-top: var(--sp-6); }
  .site-art { width: 120px; margin-bottom: var(--sp-5); }
  .site-art .yb-paper { --paper-size: 120px; }
  .site-art-logo { width: 46px; height: 46px; border-radius: 13px; }
  .site-title { font-size: var(--fs-24); }
  .site-lead { font-size: var(--fs-15); }
  .site-steps { margin-top: var(--sp-8); }
}
@media (max-width: 639px) {
  .site-brand span { font-size: var(--fs-14); }
  .site-top-nav .yb-btn--ghost { display: none; }
  .site-step-list, .site-kind-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .auth-card { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
}