* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 0;
  background: #0f1419; color: #e6edf3;
  font-family: -apple-system, "Microsoft YaHei", Roboto, sans-serif;
}
.qr-box { margin-top: 20px; text-align: center; }
.qr { display: block; margin: 0 auto; width: 100%; max-width: 340px; height: auto;
      border-radius: 10px; background: #fff; padding: 10px; }
.qr-tip { margin: 0 0 14px; }
.box {
  background: #171e26; border: 1px solid #27323f; border-radius: 14px;
  padding: 32px; width: 100%; max-width: 380px;
}
.box.wide { max-width: 520px; }
h1 { font-size: 20px; margin: 0 0 6px; text-align: center; }
.sub { color: #8b98a5; font-size: 13px; text-align: center; margin-bottom: 24px; }
label { display: block; font-size: 13px; color: #8b98a5; margin: 12px 0 6px; }
input, select {
  width: 100%; padding: 11px 13px; background: #0d1117; border: 1px solid #27323f;
  border-radius: 8px; color: #e6edf3; font-size: 14px;
}
input:focus, select:focus { outline: none; border-color: #4ea1ff; }
button {
  width: 100%; margin-top: 20px; padding: 12px; background: #4ea1ff;
  border: none; border-radius: 8px; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
.msg { margin-top: 14px; font-size: 13px; min-height: 18px; text-align: center; color: #8b98a5; }
.msg.ok { color: #3fb950; }
.msg.bad { color: #f85149; }
.logout-row { text-align: right; margin-bottom: 4px; }
.logout-row a { color: #8b98a5; font-size: 13px; text-decoration: none; }
.logout-row a:hover { color: #f85149; }
textarea {
  width: 100%; height: 180px; margin-top: 16px; padding: 10px; background: #0d1117;
  border: 1px solid #27323f; border-radius: 8px; color: #3fb950; font-size: 13px;
  font-family: Consolas, monospace; resize: vertical;
}