* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
  font-family: "Geist Sans";
  src: url("./fonts/geist-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #fff;
  --fg-muted: rgba(255, 255, 255, 0.56);
  --fg-faint: rgba(255, 255, 255, 0.34);
  --border-soft: rgba(255, 255, 255, 0.08);
  --brand: #ff4a31;
  --note-bg: rgba(255, 255, 255, 0.03);
  --qr-shadow: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --fg-muted: #8f8f8f;
  --fg-faint: #b8b8b8;
  --border-soft: #eaeaea;
  --brand: #f23a21;
  --note-bg: rgba(0, 0, 0, 0.03);
  --qr-shadow: rgba(0, 0, 0, 0.16);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.wecom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border-soft);
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { width: 24px; height: 24px; }
.brand span { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.brand b { color: var(--brand); font-weight: inherit; }

.wecom-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fg-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 150ms ease;
}
.wecom-back:hover { color: var(--fg); }
.wecom-back svg { width: 15px; height: 15px; }

.wecom-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 42px 20px 64px;
}

.wecom-main > img {
  width: min(360px, 84vw);
  max-height: 70vh;
  object-fit: contain;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 90px var(--qr-shadow);
}

.wecom-main > p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 14px;
  text-align: center;
}
.wecom-main > p a { color: var(--brand); text-decoration: none; }

.wecom-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 540px;
  padding: 16px 19px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--note-bg);
  color: var(--fg-muted);
  font-size: 12.5px;
  line-height: 1.75;
}
.wecom-note p { margin: 0; }
.wecom-note strong { color: var(--fg); font-weight: 650; }
.wecom-note em { color: var(--brand); font-style: normal; font-weight: 650; }