* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --poster-w: 100vw; --card-w: 100vw; }

body { font-family: 'Microsoft YaHei', Arial, sans-serif; min-height: 100vh; overflow-y: auto; position: relative; background: #fff; }

.poster { display: block; width: var(--poster-w); height: auto; margin: 0 auto; }

.qr-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 9999; }
.qr-dialog { background: #fff; border-radius: 12px; padding: 16px 18px; width: 260px; box-shadow: 0 16px 36px rgba(0,0,0,0.24); text-align: center; }
.qr-title { font-size: 16px; color: #111827; font-weight: 700; margin-bottom: 10px; }
.qr-tip { font-size: 13px; color: #6b7280; margin-top: 8px; }
.qr-img { width: 180px; height: 180px; display: inline-block; line-height: 0; }
.qr-img canvas, .qr-img img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qr-close, button.qr-close { 
  margin-top: 12px; 
  display: inline-block; 
  width: 180px;
  background-color: #ef4444; 
  color: #fff; 
  border: none; 
  border-radius: 999px; 
  padding: 10px 0; 
  font-size: 15px; 
  cursor: pointer; 
  -webkit-appearance: none; 
  appearance: none; 
  outline: none; 
}
.qr-close:hover { background-color: #dc2626; }

.download-container { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; transition: all 0.3s ease; padding-bottom: env(safe-area-inset-bottom); }

.button-background { background-color: #ffffff; border-radius: clamp(16px, 3vmin, 24px); padding: clamp(16px, 4vmin, 24px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); transition: all 0.3s ease; width: calc(var(--card-w) - 8px); position: relative; overflow: hidden; display: grid; justify-items: center; gap: clamp(8px, 2vmin, 12px); text-align: center; }

.app-icon { width: clamp(64px, 14vmin, 96px); height: clamp(64px, 14vmin, 96px); border-radius: 22%; object-fit: cover; display: block; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); z-index: 1; }

.app-name { font-size: clamp(16px, 3.6vmin, 20px); font-weight: 700; color: #111827; }
.tagline { font-size: clamp(13px, 2.8vmin, 16px); color: #6b7280; }
.meta { font-size: clamp(12px, 2.6vmin, 14px); color: #6b7280; }

.download-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: clamp(44px, 6vmin, 56px); background: #ef4444; color: #fff; border: none; border-radius: 999px; padding: 0 clamp(24px, 5vmin, 36px); font-size: clamp(14px, 2.4vmin, 18px); font-weight: 700; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 10px 24px rgba(239, 68, 68, 0.35); text-decoration: none; }
.download-button:hover { transform: translateY(-1px); background: #dc2626; }
.download-button:active { transform: translateY(0); }

.fine { font-size: clamp(11px, 2.2vmin, 13px); color: #9ca3af; }

.page-spacer { height: calc(clamp(80px, 18vmin, 160px) + env(safe-area-inset-bottom) - 40px); }

.download-container.compact { bottom: 0; }
.download-container.compact .button-background { width: var(--card-w); padding: clamp(16px, 3.6vmin, 28px); min-height: clamp(72px, 12vmin, 100px); border-radius: 0; box-shadow: 0 14px 36px rgba(0,0,0,0.12); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(10px, 2.4vmin, 16px); }
.download-container.compact .app-icon { width: clamp(56px, 12vmin, 84px); height: clamp(56px, 12vmin, 84px); border-radius: 22%; object-fit: cover; box-shadow: 0 6px 16px rgba(0,0,0,0.08); z-index: 2; }
.download-container.compact .info-col { display: grid; gap: clamp(2px, 0.8vmin, 6px); text-align: left; }
.download-container.compact .app-name { font-size: clamp(15px, 3.4vmin, 19px); font-weight: 700; color: #0f172a; }
.download-container.compact .tagline { font-size: clamp(12px, 2.6vmin, 15px); color: #475569; }
.download-container.compact .meta { font-size: clamp(11px, 2.4vmin, 13px); color: #64748b; }
.download-container.compact .download-button { width: auto; min-width: clamp(112px, 26vmin, 160px); height: clamp(48px, 7vmin, 64px); padding: 0 clamp(22px, 5vmin, 32px); border-radius: 999px; background: linear-gradient(180deg, #ff6b5f 0%, #ff4b42 100%); box-shadow: 0 12px 26px rgba(255, 75, 66, 0.35); }
.download-container.compact .fine { display: none; }

@media (max-width: 768px) { .download-container { bottom: 16px; } }

@media (max-width: 480px) {
  .download-container { bottom: 8px; }
  .page-spacer { height: calc(clamp(80px, 22vmin, 160px) - 5px); }
  .download-container.compact .button-background { gap: clamp(6px, 1.2vmin, 9px); padding: clamp(10px, 2.8vmin, 16px); }
  .download-container.compact .info-col { gap: clamp(2px, 0.6vmin, 4px); }
  .download-container.compact .info-col { max-width: clamp(136px, 42vw, 196px); }
  .download-container.compact .app-icon { width: 72px; height: 72px; margin-left: 8px; }
  .download-container.compact .download-button { min-width: clamp(128px, 34vw, 168px); height: 46px; padding: 0 22px; background: #ef4444; box-shadow: 0 10px 22px rgba(153, 27, 27, 0.35); }
  .download-container.compact .app-name, .download-container.compact .tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .download-container.compact .app-name { font-size: clamp(18px, 4.2vmin, 22px); }
  .download-container.compact .tagline { font-size: clamp(14px, 3.6vmin, 18px); }
}

@media (max-height: 500px) { .download-container { bottom: 20px; } }

@media (min-width: 768px) {
  :root { --poster-w: min(92vw, 420px); --card-w: min(92vw, 420px); }
  .button-background { padding: 14px 16px; }
  .download-button { height: 46px; }
  .download-container.compact .button-background { min-height: 64px; padding: 12px 16px; }
  .download-container.compact .app-icon { width: 52px; height: 52px; }
  .download-container.compact .download-button { height: 44px; padding: 0 20px; }
  .download-container.compact .info-col { gap: 2px; }
  .download-container.compact .app-name, .download-container.compact .tagline, .download-container.compact .meta { line-height: 1.2; }
  .page-spacer { height: calc(clamp(60px, 14vmin, 120px) + clamp(6px, 1.4vmin, 12px) - 30px); }
}