/* CSS 负责「长什么样」。规则格式：选择器 { 属性: 值; } */

/* 让整个页面居中、有背景色 */
body {
  margin: 0;
  min-height: 100vh;          /* vh = 屏幕高度的百分比，100vh 就是整屏 */
  display: flex;              /* 用弹性布局 */
  align-items: center;        /* 垂直居中 */
  justify-content: center;    /* 水平居中 */
  background: #0f172a;        /* 背景色（深蓝） */
  font-family: system-ui, "Microsoft YaHei", sans-serif;
}

/* .card 表示「class 名叫 card 的元素」，对应 HTML 里的 class="card" */
.card {
  background: #ffffff;
  padding: 40px 48px;         /* 内边距：内容与边框的距离 */
  border-radius: 16px;        /* 圆角 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);  /* 阴影 */
  text-align: center;
  max-width: 420px;
}

h1 {
  margin-top: 0;
  font-size: 28px;
  color: #0f172a;
}

p {
  color: #475569;
  line-height: 1.6;           /* 行高，让文字不挤在一起 */
}

button {
  margin-top: 12px;
  padding: 12px 28px;
  font-size: 16px;
  color: #ffffff;
  background: #2563eb;        /* 蓝色 */
  border: none;
  border-radius: 999px;        /* 超大圆角 = 胶囊形状 */
  cursor: pointer;            /* 鼠标移上去变成小手 */
}

/* :hover 表示「鼠标悬停时」的样式 */
button:hover {
  background: #1d4ed8;        /* 深一点的蓝 */
}