/* PopLingo 官網共用樣式 —— 極簡、無 JavaScript、無外部資源 */

body {
  font-family: system-ui, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif;
  max-width: 820px; margin: 0 auto; padding: 0 16px 48px;
  line-height: 1.75; color: #222; background: #fff;
}

/* ---- 頁首 / 導覽 ---- */
header.site {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 20px 0 10px; border-bottom: 1px solid #e5e5e5;
}
header.site .brand { margin: 0; font-size: 24px; font-weight: 700; }
header.site .brand a { color: #222; text-decoration: none; }
header.site .ver { color: #999; font-size: 14px; }
header.site .spacer { flex: 1 1 auto; }
header.site .lang { font-size: 14px; }

nav.site { padding: 10px 0; border-bottom: 1px solid #eee; font-size: 15px; }
nav.site a { margin-right: 16px; color: #0b57d0; text-decoration: none; }
nav.site a:hover { text-decoration: underline; }
nav.site a.here { color: #222; font-weight: 700; }

/* ---- 標題與文字 ---- */
h1 { font-size: 30px; margin: 30px 0 6px; }
h2 { border-bottom: 1px solid #ddd; padding-bottom: 4px; margin-top: 38px; font-size: 21px; }
h3 { margin-top: 26px; font-size: 17px; }
p.lead { color: #555; font-size: 17px; margin-top: 4px; }
a { color: #0b57d0; }
ul, ol { padding-left: 24px; }
li { margin: 3px 0; }
hr { border: 0; border-top: 1px solid #eee; margin: 30px 0; }

/* ---- 表格 ---- */
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: #f6f6f6; font-weight: 600; }

/* ---- 程式碼 ---- */
code, pre {
  font-family: Consolas, "Courier New", monospace;
  background: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 3px;
}
code { padding: 1px 5px; font-size: 14px; }
pre { padding: 10px 12px; overflow-x: auto; font-size: 14px; }

/* ---- 提示框 ---- */
.note { background: #fffbe6; border: 1px solid #efe0a0; padding: 10px 14px; border-radius: 3px; }
.warn { background: #fdf0f0; border: 1px solid #f0c0c0; padding: 10px 14px; border-radius: 3px; }

/* ---- 下載區 ---- */
.dl { background: #f4f8ff; border: 1px solid #cfe0ff; padding: 16px 18px; border-radius: 4px; margin: 20px 0; }
.dl .big {
  display: inline-block; background: #0b57d0; color: #fff; text-decoration: none;
  padding: 11px 22px; border-radius: 4px; font-weight: 700; font-size: 16px;
}
.dl .big:hover { background: #0947ab; }
.dl .meta { color: #666; font-size: 14px; margin-top: 8px; }

/* ---- 特色卡片 ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.card { border: 1px solid #e3e3e3; border-radius: 4px; padding: 12px 14px; }
.card b { display: block; margin-bottom: 4px; }
.card span { color: #555; font-size: 14px; }

/* ---- QR ---- */
.qr { width: 200px; height: 200px; border: 1px solid #ddd; background: #fafafa; }

/* ---- 頁尾 ---- */
footer.site {
  margin-top: 60px; padding-top: 14px; border-top: 1px solid #ddd;
  color: #666; font-size: 14px;
}
footer.site a { color: #0b57d0; }