/* ===================== Install — full-screen page ===================== */
/* Shown after someone taps Install on a project. Same page shell as the
   comments page (fixed, own back button in the header) so it feels native. */
.install-page {
  background: var(--paper); bottom: 0; display: flex; flex-direction: column;
  left: 0; position: fixed; right: 0; top: 0; z-index: 120;
}
.install-page.is-hidden { display: none; }

.install-page-head {
  align-items: center; border-bottom: 1px solid var(--line); display: flex;
  flex: 0 0 auto; gap: 12px; padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
}
.install-page-head h2 { color: var(--ink); font-size: 15px; margin: 0; }
.install-back {
  align-items: center; background: #f2f3f7; border-radius: 9px;
  color: var(--ink); display: inline-flex; flex: 0 0 auto; height: 38px;
  justify-content: center; width: 38px;
}
.install-back svg { height: 17px; width: 17px; }

.install-page-body {
  align-items: center; display: flex; flex: 1; flex-direction: column;
  gap: 0; justify-content: center; min-height: 0; overflow-y: auto;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); text-align: center;
  -webkit-overflow-scrolling: touch;
}
.install-tile {
  align-items: center; background: linear-gradient(135deg, #7649f7, #3d83f5);
  background-position: center; background-size: cover; border-radius: 24px;
  box-shadow: 0 14px 34px rgba(70,94,225,.26); color: #fff; display: flex;
  height: 92px; justify-content: center; margin-bottom: 18px; width: 92px;
}
.install-tile svg { fill: none; height: 40px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 40px; }
.install-title { color: var(--ink); font-size: 20px; letter-spacing: -.03em; margin: 0 0 6px; }
.install-sub { color: #6b7385; font-size: 12.5px; line-height: 1.5; margin: 0 0 22px; max-width: 320px; }

.install-steps { counter-reset: step; display: grid; gap: 10px; list-style: none; margin: 0 0 24px; max-width: 340px; padding: 0; text-align: left; width: 100%; }
.install-steps li {
  align-items: flex-start; background: #f6f7fb; border-radius: 12px; color: #3b4356;
  counter-increment: step; display: flex; font-size: 12px; gap: 11px; line-height: 1.45; padding: 11px 13px;
}
.install-steps li::before {
  align-items: center; background: var(--purple); border-radius: 50%; color: #fff;
  content: counter(step); display: inline-flex; flex: 0 0 auto; font-size: 10.5px;
  font-weight: 800; height: 21px; justify-content: center; width: 21px;
}
.install-fine { color: #98a0b2; font-size: 10.5px; line-height: 1.45; margin: 14px 0 0; max-width: 300px; }

.install-actions { display: grid; gap: 10px; max-width: 340px; width: 100%; }
.install-primary, .install-secondary {
  align-items: center; border-radius: 12px; display: inline-flex; font-size: 13px;
  font-weight: 800; gap: 8px; justify-content: center; min-height: 48px; padding: 0 18px;
}
.install-primary { background: linear-gradient(100deg, #3d83f5, #6853db); box-shadow: 0 11px 21px rgba(70,94,225,.23); color: #fff; }
.install-secondary { background: #f2f3f7; color: #4a5165; }
.install-primary svg, .install-secondary svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 17px; }

.install-spinner { animation: install-spin .8s linear infinite; border: 3px solid #e4e7f0; border-radius: 50%; border-top-color: var(--purple); height: 34px; margin-bottom: 18px; width: 34px; }
@keyframes install-spin { to { transform: rotate(360deg); } }

/* success state */
.install-check {
  align-items: center; animation: install-pop .45s cubic-bezier(.2,1.4,.4,1) both;
  background: linear-gradient(135deg, #17c964, #14b358); border-radius: 50%;
  box-shadow: 0 14px 34px rgba(23,201,100,.32); color: #fff; display: flex;
  height: 96px; justify-content: center; margin-bottom: 20px; width: 96px;
}
.install-check svg { fill: none; height: 46px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; width: 46px; }
@keyframes install-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.install-error-badge { align-items: center; background: #fdecec; border-radius: 50%; color: #d64545; display: flex; font-size: 34px; font-weight: 800; height: 84px; justify-content: center; margin-bottom: 18px; width: 84px; }

/* project card / fullscreen page Install button */
.feed-card-link-button.install-button { background: #efeafe; color: #6a3fe0; }
.feed-card-link-button.install-button:hover { background: #e3dcfc; }
.feed-card-link-button.install-button svg { fill: none; }

/* upload / edit form APK field */
.install-apk-field { color: #565e70; display: grid; font-size: 10px; font-weight: 800; gap: 6px; margin-top: 12px; }
.install-apk-field input { background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 10px; color: #303748; font-size: 12px; height: 42px; outline: 0; padding: 0 12px; }
.install-apk-field input:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }
.install-apk-note { margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) { .install-check, .install-spinner { animation: none; } }

/* dark mode */
body[data-theme="dark"] .install-page { background: #0d0d0d; }
body[data-theme="dark"] .install-page-head { border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .install-page-head h2, body[data-theme="dark"] .install-title { color: #f2f2f2; }
body[data-theme="dark"] .install-back { background: rgba(255,255,255,.06); color: #d8d8d8; }
body[data-theme="dark"] .install-sub { color: #9aa1b2; }
body[data-theme="dark"] .install-steps li { background: #161b22; color: #d5d9e3; }
body[data-theme="dark"] .install-secondary { background: rgba(255,255,255,.08); color: #e2e5ee; }
body[data-theme="dark"] .install-spinner { border-color: rgba(255,255,255,.12); border-top-color: #a78bfa; }
body[data-theme="dark"] .install-error-badge { background: rgba(214,69,69,.16); }
body[data-theme="dark"] .feed-card-link-button.install-button { background: rgba(167,139,250,.14); color: #c4b5fd; }
body[data-theme="dark"] .install-apk-field { color: #b7bdcc; }
body[data-theme="dark"] .install-apk-field input { background: #161b22; border-color: rgba(255,255,255,.12); color: #e6edf3; }