[data-install-app][hidden] {
  display: none !important;
}

.proto-action.install {
  border-color: rgba(199, 75, 56, 0.34);
  color: var(--cinnabar);
}

.proto-action.install:hover {
  border-color: var(--cinnabar);
  background: rgba(199, 75, 56, 0.08);
}

.proto-drawer .drawer-install {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(199, 75, 56, 0.34);
  border-radius: 8px;
  background: rgba(199, 75, 56, 0.06);
  color: var(--forest);
  text-align: left;
}

.proto-drawer .drawer-install:hover {
  border-color: var(--cinnabar);
  background: rgba(199, 75, 56, 0.1);
}

.proto-drawer .drawer-install strong {
  font-size: 13px;
}

.proto-drawer .drawer-install small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.pwa-install-guide,
.pwa-install-guide * {
  box-sizing: border-box;
}

.pwa-install-guide {
  --pwa-paper: #fffefa;
  --pwa-ink: #18231f;
  --pwa-muted: #68716c;
  --pwa-line: #d9ddd7;
  --pwa-forest: #28584b;
  --pwa-forest-soft: #e4eee9;
  --pwa-cinnabar: #c74b38;
  position: fixed;
  z-index: 5200;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 27, 22, 0.52);
  backdrop-filter: blur(10px);
  color: var(--pwa-ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

.pwa-install-guide[data-open="false"],
.pwa-install-guide [hidden] {
  display: none !important;
}

.pwa-install-dialog {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(var(--app-height, 100vh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(39, 66, 54, 0.16);
  border-top: 3px solid var(--pwa-cinnabar);
  border-radius: 16px;
  background: var(--pwa-paper);
  box-shadow: 0 24px 70px rgba(10, 25, 19, 0.28);
}

.pwa-install-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pwa-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--pwa-muted);
  font-size: 24px;
  line-height: 1;
}

.pwa-install-kicker {
  margin: 0 52px 5px 0;
  color: var(--pwa-cinnabar);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.pwa-install-dialog h2 {
  margin: 0 52px 10px 0;
  font-size: 24px;
  line-height: 1.2;
}

.pwa-install-summary,
.pwa-install-note,
.pwa-install-native p {
  margin: 0;
  color: var(--pwa-muted);
  font-size: 13px;
  line-height: 1.6;
}

.pwa-install-native {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(40, 88, 75, 0.18);
  border-radius: 12px;
  background: var(--pwa-forest-soft);
}

.pwa-install-primary {
  min-height: 48px;
  border: 1px solid var(--pwa-forest);
  border-radius: 10px;
  background: var(--pwa-forest);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.pwa-install-steps {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.pwa-install-steps section {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--pwa-line);
  border-radius: 12px;
  background: #fff;
}

.pwa-install-steps strong {
  font-size: 14px;
}

.pwa-install-steps span {
  color: var(--pwa-muted);
  font-size: 13px;
  line-height: 1.55;
}

.pwa-install-guide[data-environment="android"] [data-pwa-step="android"],
.pwa-install-guide[data-environment="ios"] [data-pwa-step="ios"],
.pwa-install-guide[data-environment="embedded"] [data-pwa-step="embedded"],
.pwa-install-guide[data-environment="desktop"] [data-pwa-step="desktop"] {
  border-color: rgba(40, 88, 75, 0.45);
  background: var(--pwa-forest-soft);
  box-shadow: inset 3px 0 0 var(--pwa-forest);
}

.pwa-install-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--pwa-line);
}

@media (min-width: 640px) {
  .pwa-install-guide { place-items: center; padding: 24px; }
  .pwa-install-dialog { max-height: min(720px, calc(var(--app-height, 100vh) - 48px)); }
}

@media (prefers-reduced-motion: no-preference) {
  .pwa-install-guide[data-open="true"] .pwa-install-dialog {
    animation: pwa-install-enter 180ms ease-out both;
  }
}

@keyframes pwa-install-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}