/* ------------------------------------------------------------------
   Transfer Space（drop.ntkfqzhxx.top）视觉美化
   同源外部样式表，加载顺序在 /static/style.css 之后，用于覆盖原有观感。
   设计要点：非纯白背景、柔和渐变光晕、毛玻璃顶栏、悬浮卡片、
   渐变主按钮、把备案信息收进页面底部居中的统一页脚。
   ------------------------------------------------------------------ */

:root {
  --wb-blue:    #1f6feb;
  --wb-indigo:  #6d5dfc;
  --wb-teal:    #18a999;
  --wb-ink:     #16233a;
  --wb-muted:   #5e6f89;
  --wb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

html, body { min-height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--wb-ink);
  font-family: var(--wb-font);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* 60/30/10：彩色渐变作大面积背景，白色卡片作辅助，蓝色作强调 */
  background:
    radial-gradient(900px 520px at 10% -6%,  rgba(31, 111, 235, .18), transparent 62%),
    radial-gradient(780px 480px at 92% 4%,   rgba(109,  93, 252, .16), transparent 60%),
    radial-gradient(820px 520px at 50% 108%, rgba( 24, 169, 153, .13), transparent 62%),
    linear-gradient(158deg, #edf3ff 0%, #f2f0ff 46%, #e8f7f4 100%);
  background-attachment: fixed;
}

/* ---------------- 顶栏 ---------------- */
.topbar {
  height: 64px;
  padding: 0 28px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(31, 111, 235, .10);
  box-shadow: 0 8px 26px rgba(25, 55, 105, .06);
}
.brand { font-size: 16px; letter-spacing: .02em; }
.brand:hover { color: var(--wb-blue); }
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2b7bf3, #6d5dfc);
  box-shadow: 0 6px 14px rgba(31, 111, 235, .32);
  font-size: 15px;
}
.topnav { font-size: 14px; }

/* 让页脚始终落在视口底部，卡片在剩余空间里居中偏上 */
main.wrap { flex: 1 0 auto; }
body.centered main.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 470px;
  padding-top: 24px;
  padding-bottom: 8vh;
}
body.centered main.wrap > .card { width: 100%; }

/* ---------------- 卡片 ---------------- */
.card {
  position: relative;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(20, 32, 48, .04), 0 24px 56px -26px rgba(28, 58, 110, .42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20, 32, 48, .05), 0 28px 62px -26px rgba(28, 58, 110, .48);
}
/* 顶部渐变细条，作为视觉识别 */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #2b7bf3, #6d5dfc 52%, #18a999);
}
.card.narrow { padding: 34px 30px 30px; }
.card.center h1 {
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--wb-ink);
}
.card > .muted { color: var(--wb-muted); line-height: 1.85; }
.card > .muted.small { font-size: 12.5px; color: #8492a8; }
.card code, p code { background: #f1f5fd; border-color: #e2eaf8; color: #3b587f; }
.home-actions { margin: 24px 0 18px; }

/* ---------------- 主按钮 ---------------- */
.btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #2b7bf3 0%, #1f6feb 52%, #5b53e0 100%);
  box-shadow: 0 10px 22px -9px rgba(31, 111, 235, .70);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.btn.primary:hover {
  background: linear-gradient(135deg, #3b87f7 0%, #2776ef 52%, #6a61e8 100%);
  filter: brightness(1.03);
  transform: translateY(-2px);
  box-shadow: 0 15px 28px -9px rgba(31, 111, 235, .75);
}
.btn.primary:disabled { filter: grayscale(.35); opacity: .7; transform: none; }
.btn.primary.block {
  height: 46px;
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: .08em;
}

/* ---------------- 页脚衔接 ---------------- */
.foot {
  color: #7b8aa1;
  font-size: 12.5px;
  letter-spacing: .06em;
  padding: 0 20px 12px;
}
.wb-filing {
  margin-top: 0;
  border-top: 1px solid rgba(31, 111, 235, .10);
  background: rgba(255, 255, 255, .34);
  padding-bottom: 22px;
}

/* ---------------- 小屏 ---------------- */
@media (max-width: 700px) {
  .topbar { height: 58px; padding: 0 16px; }
  body.centered main.wrap { padding-top: 24px; padding-bottom: 32px; }
  .card.narrow { padding: 26px 20px 24px; }
  .card.center h1 { font-size: 22px; }
}