:root {
  --bg: #ffffff;
  --fg: #1f2933;
  --muted: #52606d;
  --accent: #0b6efd;
  --border: #e4e7eb;
  --code-bg: #f5f7fa;
  --max-width: 860px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans",
    "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR",
    "Noto Sans Arabic", "Noto Sans Hebrew", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 24px 16px 64px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

header.site-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  font-size: 20px;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.5px;
}

.lang-switcher {
  position: relative;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lang-switcher select {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 32px 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: #fff;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2352606d' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

[dir="rtl"] .lang-switcher select {
  padding: 6px 12px 6px 32px;
  background-position: left 10px center;
}

h1 {
  font-size: 28px;
  margin: 0 0 8px;
  line-height: 1.3;
}

.subtitle {
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 14px;
}

h2 {
  font-size: 20px;
  margin: 32px 0 12px;
  line-height: 1.4;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
}

[dir="rtl"] h2 {
  border-left: none;
  border-right: 4px solid var(--accent);
  padding-left: 0;
  padding-right: 10px;
}

p, ul, ol {
  margin: 0 0 14px;
}

ul, ol {
  padding-inline-start: 24px;
}

li { margin-bottom: 6px; }

.perm-list {
  list-style: none;
  padding: 0;
}

.perm-list li {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 10px;
  background: var(--code-bg);
}

.perm-list li strong { display: block; margin-bottom: 4px; }

footer.site-footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 520px) {
  h1 { font-size: 22px; }
  h2 { font-size: 17px; }
  body { padding: 16px 12px 48px; }
}