:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #0c2042;
  --muted: #71809a;
  --muted-strong: #566982;
  --line: #dfe5ee;
  --surface: #f6f9ff;
  --blue: #2868ed;
  --blue-dark: #1f56d8;
  --blue-soft: #edf4ff;
  --white: #ffffff;
  --danger: #bd3c47;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--white); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button,
a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

a { color: inherit; }

.site-shell { min-height: 100vh; }

.site-header {
  height: 58px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
}

.site-header-inner {
  width: min(100%, 1120px);
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-brand,
.all-products-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-brand { gap: 10px; font-size: 17px; font-weight: 760; letter-spacing: -0.25px; }
.site-brand img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.all-products-link { gap: 4px; color: var(--blue); font-size: 14px; font-weight: 620; white-space: nowrap; }
.all-products-link[hidden] { display: none; }
.all-products-link span { font-size: 24px; font-weight: 400; line-height: 1; }

.app-main { width: min(100%, 1120px); margin: 0 auto; }

.loading-state {
  width: min(calc(100% - 40px), 720px);
  margin: 72px auto;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.loading-logo,
.loading-line { background: #eef2f7; animation: loading-pulse 1.3s ease-in-out infinite; }
.loading-logo { width: 82px; height: 82px; border-radius: 24px; }
.loading-line { width: 48%; height: 14px; border-radius: 7px; }
.loading-line.wide { width: 68%; height: 22px; }

@keyframes loading-pulse {
  50% { opacity: 0.48; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-logo,
  .loading-line { animation: none; }
}

.collection-page { padding: 58px 24px 70px; }
.collection-heading { max-width: 700px; margin-bottom: 34px; }
.collection-eyebrow { color: var(--blue); font-size: 13px; font-weight: 760; letter-spacing: 0.08em; }
.collection-heading h1 { margin: 12px 0 10px; font-size: clamp(30px, 5vw, 46px); line-height: 1.16; letter-spacing: -1.1px; }
.collection-heading p { margin: 0; color: var(--muted-strong); font-size: 16px; line-height: 1.75; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.product-card {
  min-width: 0;
  min-height: 112px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--white);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.product-card:hover { border-color: #b8cdfa; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(21, 63, 133, 0.08); }
.product-card:focus-visible,
.version-option:focus-visible,
.site-brand:focus-visible,
.all-products-link:focus-visible,
.qr-trigger:focus-visible,
.qr-dialog-close:focus-visible { outline: 3px solid rgba(40, 104, 237, 0.3); outline-offset: 3px; }

.product-card-head { width: 100%; display: flex; align-items: center; gap: 13px; }
.product-logo { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 18px; object-fit: cover; background: var(--blue-soft); }
.product-card-copy { min-width: 0; flex: 1; }
.product-card-title-row { min-width: 0; display: flex; align-items: center; gap: 6px; }
.product-card h2 { min-width: 0; margin: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; }
.product-summary { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-platforms { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.availability-tag { padding: 3px 7px; border-radius: 999px; color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 650; line-height: 1.45; white-space: nowrap; }
.product-enter { flex: 0 0 auto; margin-left: auto; color: var(--blue); font-size: 18px; }

.detail-page { width: min(100%, 760px); margin: 0 auto; padding: 24px 22px 34px; }

.app-identity { min-height: 116px; display: flex; align-items: center; gap: 22px; }
.app-identity .product-logo { width: 102px; height: 102px; border-radius: 27px; }
.app-identity-copy { min-width: 0; }
.product-title-row { display: flex; align-items: center; gap: 10px; }
.app-identity h1 { margin: 0; font-size: 30px; line-height: 1.16; letter-spacing: -0.7px; }
.app-identity p { margin: 11px 0 0; color: var(--muted-strong); font-size: 15px; line-height: 1.55; }
.qr-trigger { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; color: var(--blue); background: var(--white); cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.qr-trigger:hover { border-color: #b8cdfa; background: var(--blue-soft); }
.qr-trigger svg { width: 19px; height: 19px; fill: currentColor; }

.download-categories { margin-top: 30px; display: grid; gap: 18px; }
.download-category { padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.category-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.category-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--blue-soft); }
.category-icon img { width: 23px; height: 23px; opacity: 0.75; }
.category-icon.apple img { width: 22px; height: 22px; }
.category-heading h2 { margin: 0 0 3px; font-size: 19px; line-height: 1.3; letter-spacing: -0.2px; }
.category-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.version-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.version-list .version-option:only-child { grid-column: 1 / -1; }
.version-option {
  min-width: 0;
  min-height: 76px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  background: #fbfdff;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.version-option:hover { border-color: #a9c4fb; background: #f6f9ff; transform: translateY(-1px); }
.version-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.version-copy strong { display: flex; align-items: center; gap: 7px; font-size: 15px; font-style: normal; font-weight: 700; }
.version-copy small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.version-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 13px; font-weight: 700; white-space: nowrap; }
.version-action img { width: 17px; height: 17px; filter: brightness(0) saturate(100%) invert(36%) sepia(91%) saturate(2165%) hue-rotate(213deg) brightness(94%) contrast(97%); }
.version-action span { font-size: 20px; font-weight: 400; line-height: 1; }
.recommend-tag { padding: 2px 6px; border-radius: 999px; color: var(--blue); background: var(--white); font-size: 10px; font-style: normal; font-weight: 750; line-height: 1.4; }
.version-option.is-recommended { border-color: var(--blue); color: var(--white); background: var(--blue); box-shadow: 0 8px 20px rgba(40, 104, 237, 0.18); }
.version-option.is-recommended:hover { border-color: var(--blue-dark); color: var(--white); background: var(--blue-dark); }
.version-option.is-recommended .version-copy small,
.version-option.is-recommended .version-action { color: rgba(255, 255, 255, 0.88); }
.version-option.is-recommended .version-action img { filter: brightness(0) invert(1); }
.no-download-state { min-height: 210px; padding: 36px 20px; border: 1px dashed #cfd8e6; border-radius: 18px; display: grid; place-content: center; text-align: center; background: #fafcff; }
.no-download-state span { color: #344764; font-size: 21px; font-weight: 720; }
.no-download-state p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }

.trust-note { margin-top: 23px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; }
.trust-note strong { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted-strong); font-size: 13px; font-weight: 650; }
.trust-note strong img { width: 17px; height: 17px; }

body.qr-dialog-open { overflow: hidden; }
.qr-dialog { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.qr-dialog[hidden] { display: none; }
.qr-dialog-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8, 24, 50, 0.55); cursor: default; }
.qr-dialog-panel { position: relative; width: min(100%, 340px); padding: 30px 28px 28px; border-radius: 22px; text-align: center; background: var(--white); box-shadow: 0 24px 70px rgba(9, 29, 62, 0.24); }
.qr-dialog-panel h2 { margin: 0; color: var(--ink); font-size: 21px; }
.qr-dialog-panel p { margin: 8px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.qr-dialog-close { position: absolute; top: 12px; right: 13px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 24px; line-height: 1; cursor: pointer; }
.qr-dialog-close:hover { color: var(--ink); background: var(--surface); }
.qr-image-frame { width: min(100%, 240px); aspect-ratio: 1; margin: 0 auto; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.qr-image-frame img { display: block; width: 100%; height: 100%; }

.state-page { min-height: 520px; padding: 80px 24px; display: grid; place-items: center; text-align: center; }
.state-content { max-width: 440px; }
.state-content img { width: 72px; height: 72px; border-radius: 21px; }
.state-content h1 { margin: 22px 0 10px; font-size: 26px; }
.state-content p { margin: 0 0 22px; color: var(--muted-strong); line-height: 1.7; }
.state-action { min-height: 44px; padding: 0 20px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--white); background: var(--blue); text-decoration: none; font-weight: 680; }
.noscript-message { margin: 0; padding: 24px; text-align: center; color: var(--danger); }

@media (max-width: 860px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .site-header-inner { padding-inline: 18px; }
  .site-brand { font-size: 16px; }
  .site-brand img { width: 27px; height: 27px; }
  .collection-page { padding: 38px 18px 52px; }
  .collection-heading { margin-bottom: 24px; }
  .collection-heading h1 { font-size: 31px; }
  .collection-heading p { font-size: 14px; }
  .product-grid { grid-template-columns: 1fr; gap: 12px; }
  .product-card { min-height: 104px; padding: 18px; border-radius: 17px; }
  .detail-page { padding: 20px 18px 28px; }
  .app-identity { min-height: 108px; gap: 17px; }
  .app-identity .product-logo { width: 92px; height: 92px; border-radius: 24px; }
  .app-identity h1 { font-size: 27px; }
  .app-identity p { margin-top: 8px; font-size: 13px; }
  .download-categories { margin-top: 25px; gap: 14px; }
  .download-category { padding: 17px; border-radius: 16px; }
  .version-list { grid-template-columns: 1fr; }
  .version-list .version-option:only-child { grid-column: auto; }
}

@media (max-width: 370px) {
  .site-header-inner { padding-inline: 14px; }
  .site-brand span { font-size: 14px; }
  .collection-page { padding-inline: 14px; }
  .product-card { padding-inline: 14px; }
  .product-card-head { gap: 10px; }
  .product-card .product-logo { width: 56px; height: 56px; border-radius: 16px; }
  .product-card-title-row { gap: 4px; }
  .product-card h2 { font-size: 18px; }
  .product-platforms { gap: 4px; }
  .availability-tag { padding-inline: 5px; font-size: 10px; }
  .product-enter { font-size: 17px; }
  .detail-page { padding-inline: 14px; }
  .app-identity { gap: 13px; }
  .app-identity .product-logo { width: 78px; height: 78px; border-radius: 21px; }
  .app-identity h1 { font-size: 24px; }
  .version-option { padding-inline: 13px; }
  .version-action { font-size: 12px; }
}