.pwa-install { position: fixed; right: 18px; bottom: 82px; z-index: 9999; max-width: min(330px, calc(100vw - 36px)); padding: 14px 16px; border: 1px solid #f4b7cc; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 18px 48px rgba(166,35,89,.22); color: #54253a; font: 500 14px/1.5 "Noto Sans SC",sans-serif; }
.pwa-install p { margin: 0 0 10px; }
.pwa-install button { margin-right: 8px; padding: 7px 13px; border: 0; border-radius: 10px; background: #e7538c; color: #fff; font: inherit; cursor: pointer; }
.pwa-install button:last-child { background: #f7e4ec; color: #9a4b6c; }
.pwa-network-status { display:none; position:fixed; left:50%; bottom:20px; z-index:10030; transform:translateX(-50%); max-width:calc(100vw - 36px); padding:10px 12px 10px 16px; border-radius:999px; background:#59263d; box-shadow:0 12px 32px #4f0f2a55; color:#fff; font:500 13px "Noto Sans SC",sans-serif; }
.pwa-network-status.show { display:flex; align-items:center; gap:10px; }.pwa-network-status button{border:0;border-radius:999px;padding:6px 10px;background:#fff;color:#a33767;font:700 12px "Noto Sans SC",sans-serif;cursor:pointer}
.install-guide-entry { position: fixed; right: 18px; bottom: 142px; z-index: 9998; border: 0; border-radius: 999px; padding: 11px 15px; background: linear-gradient(135deg,#ff79ae,#dc3d7b); color: #fff; box-shadow: 0 12px 26px rgba(196,39,105,.3); font: 700 14px/1 "Noto Sans SC",sans-serif; cursor: pointer; }
.install-guide-entry span { margin-right: 4px; font-size: 17px; }
.install-guide-mask { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 20px; background: rgba(55,12,31,.45); backdrop-filter: blur(5px); }
.install-guide { position: relative; width: min(770px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto; padding: 28px; border: 1px solid #ffd1e1; border-radius: 25px; background: #fff9fb; color: #54253a; box-shadow: 0 25px 70px rgba(66,8,36,.28); }
.install-guide-title { display: flex; align-items: center; gap: 13px; padding-right: 36px; }
.install-guide-title img { width: 48px; height: 48px; }
.install-guide-title strong { display: block; font-size: 21px; }
.install-guide-title span { display: block; margin-top: 3px; color: #a0637a; font-size: 13px; }
.install-guide-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border: 0; background: transparent; color: #a0637a; font-size: 26px; cursor: pointer; }
.install-tabs { display: flex; gap: 8px; margin-top: 20px; }
.install-tabs button { flex: 1; border: 1px solid #f2c0d3; border-radius: 11px; padding: 9px; background: #fff; color: #89546b; font: 700 14px "Noto Sans SC",sans-serif; cursor: pointer; }
.install-tabs button.active { border-color: #e7538c; background: #e7538c; color: #fff; box-shadow: 0 7px 16px rgba(212,56,119,.18); }
.install-panel { display: none; }
.install-panel.active { display: block; }
.install-note { margin: 14px 0 -8px; padding: 9px 11px; border-radius: 10px; background: #fff0f5; color: #835269; font-size: 12px; line-height: 1.5; }
.install-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 23px 0 20px; }
.install-steps article { position: relative; overflow: hidden; min-width: 0; padding: 13px; border: 1px solid #f6c7d9; border-radius: 17px; background: #fff; }
.install-steps img { display: block; width: 100%; height: 133px; margin-bottom: 10px; border-radius: 12px; background: #ffe7f0; object-fit: cover; }
.install-steps b { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e7538c; color: #fff; font-size: 13px; }
.install-steps h3 { margin: 8px 0 4px; font-size: 15px; }
.install-steps p { margin: 0; color: #8d6274; font-size: 13px; line-height: 1.55; }
.install-guide-done { display: block; width: 160px; margin: 0 auto; border: 0; border-radius: 12px; padding: 11px; background: #e7538c; color: #fff; font: 700 14px "Noto Sans SC",sans-serif; cursor: pointer; }
@media (max-width: 620px) { .install-guide { padding: 21px 17px; border-radius: 22px; } .install-steps { grid-template-columns: 1fr; gap: 10px; margin: 17px 0; } .install-steps article { display: grid; grid-template-columns: 98px 1fr; column-gap: 11px; align-items: center; padding: 10px; } .install-steps img { grid-row: span 3; height: 90px; margin: 0; } .install-steps h3 { margin: 4px 0; } .install-guide-entry { bottom: 138px; right: 14px; } }