/* Arco-style flat: one accent #165DFF, 1px #E5E6EB borders, radius <= 4px, no shadow. */
* { box-sizing: border-box; box-shadow: none; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #1D2129; font: 14px/1.6 "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif; font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
.muted { color: #86909C; }

header { position: relative; height: 64px; background: #fff; border-bottom: 1px solid #E5E6EB; }
.bar { display: flex; align-items: center; justify-content: space-between; height: 63px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: #1D2129; }
nav { display: flex; }
nav a { padding: 0 16px; line-height: 63px; font-size: 14px; color: #4E5969; }
nav a:hover { color: #165DFF; }
nav a.current { color: #165DFF; }
.menu-btn { display: none; height: 32px; padding: 0 12px; background: #fff; color: #1D2129; border: 1px solid #E5E6EB; border-radius: 2px; font: inherit; cursor: pointer; }

.hero { background: #F7F8FA; padding: 80px 0; }
h1 { font-size: 40px; line-height: 1.3; font-weight: 600; color: #1D2129; }
.page-title { font-size: 28px; font-weight: 600; margin-bottom: 12px; }
.lead { margin-top: 16px; font-size: 16px; color: #4E5969; }
section { padding: 48px 0; }
.hero + section { padding-top: 56px; }
.actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border: 1px solid transparent; border-radius: 2px; font: inherit; font-size: 14px; cursor: pointer; }
.btn-primary { background: #165DFF; border-color: #165DFF; color: #fff; }
.btn-primary:hover { background: #4080FF; border-color: #4080FF; }
.btn-primary:active { background: #0E42D2; border-color: #0E42D2; }
.btn-secondary { background: #fff; border-color: #E5E6EB; color: #1D2129; }
.btn-secondary:hover { border-color: #165DFF; color: #165DFF; }
.btn:disabled { background: #F7F8FA; border-color: #E5E6EB; color: #86909C; cursor: not-allowed; }
:focus-visible { outline: 2px solid #165DFF; outline-offset: 2px; }

.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.point, .card, .panel { background: #fff; border: 1px solid #E5E6EB; border-radius: 4px; padding: 24px; }
.point h3, .panel h3 { font-size: 18px; font-weight: 600; margin: 16px 0 8px; }
.card h3 { font-size: 20px; font-weight: 600; margin: 0; }
.panel h3 { margin-top: 0; }
.point p { color: #4E5969; }
.icon { display: block; color: #165DFF; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
.card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card .version { font-size: 16px; font-weight: 500; }
.card .meta, .card .sha, .card .note { color: #4E5969; font-size: 14px; overflow-wrap: anywhere; }
.card .note .ui { white-space: nowrap; }
.card .meta .file { display: inline-block; max-width: 100%; }
.card .sha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.card .sha code { display: block; width: 100%; padding: 6px 8px; background: #F7F8FA; border: 1px solid #E5E6EB; border-radius: 2px; font: 12px/20px ui-monospace, Menlo, Consolas, monospace; color: #1D2129; word-break: break-all; }
.card .copy { height: 32px; padding: 0 8px; margin-right: -8px; background: none; border: 0; border-radius: 2px; color: #165DFF; font: inherit; font-size: 14px; cursor: pointer; }
.card-actions { display: flex; align-items: center; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.card .gh { color: #165DFF; }
.card .gh:hover, .card .copy:hover { color: #4080FF; }
.card .empty { color: #86909C; }
.card .note { margin-top: 4px; }

.panel { margin-top: 24px; }
.panel .muted { margin-bottom: 12px; }
textarea { display: block; width: 100%; padding: 8px 12px; background: #F7F8FA; color: #1D2129; border: 1px solid #E5E6EB; border-radius: 2px; font: inherit; font-size: 14px; word-break: break-all; resize: none; }
.panel .actions { margin: 12px 0; }
#claim { margin-top: 24px; }
/* Status colour only on the border; text stays #1D2129 (orange and red on white are below 4.5:1). */
.alert { margin-top: 16px; padding: 10px 16px; background: #fff; color: #1D2129; border: 1px solid; border-left-width: 3px; border-radius: 2px; }
.alert[hidden], [hidden] { display: none; }
.alert-warn { border-color: #FF7D00; }
.alert-error { border-color: #F53F3F; }
.alert-ok { border-color: #00B42A; }
#copy-status { min-height: 22px; margin: 0 0 12px; }

footer { border-top: 1px solid #E5E6EB; background: #F7F8FA; padding: 24px 0; color: #4E5969; }

@media (max-width: 767px) {
  .card .meta .sep { display: none; }
  .card .meta .file { display: block; }
  .container { padding: 0 16px; }
  .menu-btn { display: inline-block; }
  nav { display: none; position: absolute; top: 63px; left: 0; right: 0; flex-direction: column; background: #fff; border-bottom: 1px solid #E5E6EB; z-index: 2; }
  .nav-open nav { display: flex; }
  nav a { padding: 0 16px; line-height: 44px; }
  .hero { padding: 40px 0; }
  h1 { font-size: 26px; }
  .page-title { font-size: 24px; }
  .points, .cards { grid-template-columns: 1fr; gap: 12px; }
  .point, .card, .panel { padding: 16px; }
  .actions, .card-actions { flex-direction: column; align-items: stretch; }
  .card-actions { gap: 12px; }
  .card-actions .gh { display: flex; align-items: center; justify-content: center; height: 44px; background: #fff; border: 1px solid #E5E6EB; border-radius: 2px; color: #1D2129; }
  .card-actions .gh:hover { border-color: #165DFF; color: #165DFF; }
  .card .copy { height: 44px; }
  .btn { width: 100%; height: 44px; }
  section { padding: 32px 0; }
}