.pwa-install-banner {display: none;position: fixed;top: 0;left: 0;right: 0;z-index: 9999;padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top, 0);box-sizing: border-box}
.pwa-install-content {display: flex;align-items: center;justify-content: space-between;gap: 12px;max-width: 640px;margin: 8px auto 0;padding: 10px 12px 10px 14px;background: #fff;border-radius: 14px;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);border: 1px solid rgba(0, 0, 0, 0.06);box-sizing: border-box}
.pwa-install-main {display: flex;align-items: center;gap: 10px;flex: 1;min-width: 0}
.pwa-install-icon {width: 36px;height: 36px;border-radius: 9px;flex-shrink: 0;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)}
.pwa-install-text {display: flex;flex-direction: column;min-width: 0}
.pwa-install-title {font-size: 0.8125rem;font-weight: 600;color: #1c1e21;line-height: 1.3}
.pwa-install-desc {font-size: 0.6875rem;color: #65676b;line-height: 1.3}
.pwa-install-actions {display: flex;align-items: center;gap: 6px;flex-shrink: 0}
.pwa-install-btn {display: inline-flex;align-items: center;justify-content: center;height: 32px;padding: 0 14px;font-size: 0.75rem;font-weight: 600;color: #fff;background: linear-gradient(135deg, #42b72a 0%, #2d8a1d 100%);border: none;border-radius: 8px;cursor: pointer;white-space: nowrap;transition: opacity 0.2s}
.pwa-install-btn:hover { opacity: 0.9; }
.pwa-install-btn:active { opacity: 0.8; }
.pwa-install-ios-btn {background: #007AFF}
.pwa-install-close {display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;min-width: 32px;padding: 0;margin: -4px -4px -4px 0;border: none;background: transparent;color: #b0b3b8;cursor: pointer;border-radius: 50%;flex-shrink: 0;transition: background 0.2s, color 0.2s;-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1)}
.pwa-install-close:hover,
.pwa-install-close:active {background: #f0f2f5;color: #65676b}
@media (max-width: 768px) {.pwa-install-content {margin: 6px 6px 0;padding: 8px 10px 8px 12px;border-radius: 12px}}
.pwa-ios-guide-overlay {display: none;position: fixed;inset: 0;z-index: 10000;background: rgba(0, 0, 0, 0.55);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);align-items: center;justify-content: center;padding: 16px;pointer-events: none;visibility: hidden}
.pwa-ios-guide-overlay.pwa-ios-guide-visible {display: flex;pointer-events: auto;visibility: visible;animation: pwa-guide-fade-in 0.25s ease}
.pwa-ios-guide-modal {width: 100%;max-width: 370px;max-height: 85vh;overflow-y: auto;background: #f8f9fa;border-radius: 20px;box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);animation: pwa-guide-slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1);scrollbar-width: none;-ms-overflow-style: none}
.pwa-ios-guide-modal::-webkit-scrollbar {display: none}
.pwa-ios-guide-header {display: flex;align-items: center;justify-content: space-between;padding: 20px 20px 16px;background: #fff;border-radius: 20px 20px 0 0;border-bottom: 1px solid #eee}
.pwa-ios-guide-header-left {display: flex;align-items: center;gap: 12px}
.pwa-ios-guide-app-icon {width: 44px;height: 44px;border-radius: 11px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);flex-shrink: 0}
.pwa-ios-guide-header-text {display: flex;flex-direction: column}
.pwa-ios-guide-title {font-size: 1rem;font-weight: 700;color: #1c1e21;line-height: 1.2}
.pwa-ios-guide-subtitle {font-size: 0.75rem;color: #007AFF;font-weight: 600;line-height: 1.3}
.pwa-ios-guide-close {display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;padding: 0;border: none;background: #e8e8ed;color: #666;cursor: pointer;border-radius: 50%;flex-shrink: 0}
.pwa-ios-guide-close:active {background: #d1d1d6}
.pwa-ios-guide-steps {padding: 20px;display: flex;flex-direction: column}
.pwa-ios-guide-step {display: flex;gap: 14px;align-items: flex-start}
.pwa-ios-guide-step-badge {display: flex;align-items: center;justify-content: center;width: 26px;height: 26px;min-width: 26px;background: #007AFF;color: #fff;font-size: 0.8rem;font-weight: 700;border-radius: 50%;margin-top: 2px}
.pwa-ios-guide-step-body {flex: 1;min-width: 0}
.pwa-ios-guide-step-label {font-size: 0.875rem;color: #333;line-height: 1.5;margin: 0 0 10px}
.pwa-ios-guide-step-label strong {color: #1c1e21}
.pwa-ios-guide-connector {display: flex;padding-left: 12px;height: 20px}
.pwa-ios-guide-connector-line {width: 2px;height: 100%;background: #d1d5db;border-radius: 1px}
.pwa-ios-guide-mock {border-radius: 12px;overflow: hidden;margin-bottom: 4px}
.pwa-ios-mock-toolbar {display: flex;align-items: center;justify-content: space-around;padding: 8px 12px;background: #f2f2f7;border: 1px solid #d1d1d6;border-radius: 12px}
.pwa-ios-mock-toolbar-btn {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;color: #007AFF;border-radius: 8px}
.pwa-ios-mock-share-highlight {position: relative;background: rgba(0, 122, 255, 0.12);border-radius: 10px;color: #007AFF}
.pwa-ios-mock-pulse {position: absolute;inset: -4px;border: 2px solid #007AFF;border-radius: 14px;animation: pwa-mock-pulse 2s ease-in-out infinite}
@keyframes pwa-mock-pulse {0%, 100% { opacity: 0; transform: scale(0.95); }
50% { opacity: 0.6; transform: scale(1.05); }}
.pwa-ios-mock-menu {background: #fff;border: 1px solid #e5e5ea;border-radius: 12px;overflow: hidden}
.pwa-ios-mock-menu-item {display: flex;align-items: center;gap: 12px;padding: 11px 14px;font-size: 0.8125rem;color: #1c1e21;border-bottom: 1px solid #f0f0f0}
.pwa-ios-mock-menu-item:last-child {border-bottom: none}
.pwa-ios-mock-menu-icon {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;color: #8e8e93;flex-shrink: 0}
.pwa-ios-mock-menu-icon--add {color: #007AFF}
.pwa-ios-mock-menu-arrow {margin-left: auto;color: #c7c7cc;display: flex}
.pwa-ios-mock-menu-scroll-hint {display: flex;justify-content: center;padding: 6px 0;background: linear-gradient(to bottom, rgba(240, 240, 245, 0.8) 0%, transparent 100%);border-bottom: 1px solid #f0f0f0}
.pwa-ios-mock-menu-scroll-dots::before {content: '•••';font-size: 0.75rem;letter-spacing: 2px;color: #c7c7cc}
.pwa-ios-mock-menu-disabled {opacity: 0.5}
.pwa-ios-mock-menu-highlight {background: #f0f5ff;font-weight: 600;position: relative}
.pwa-ios-mock-menu-highlight::before {content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 3px;background: #007AFF;border-radius: 0 2px 2px 0}
.pwa-ios-mock-confirm {background: #fff;border: 1px solid #e5e5ea;border-radius: 12px;overflow: hidden}
.pwa-ios-mock-confirm-header {display: flex;align-items: center;justify-content: space-between;padding: 12px 14px;border-bottom: 1px solid #e5e5ea;background: #f8f8f8}
.pwa-ios-mock-confirm-cancel {font-size: 0.8125rem;color: #007AFF}
.pwa-ios-mock-confirm-title {font-size: 0.8125rem;font-weight: 600;color: #1c1e21}
.pwa-ios-mock-confirm-add {font-size: 0.8125rem;font-weight: 700;color: #007AFF;padding: 4px 12px;background: rgba(0, 122, 255, 0.1);border-radius: 6px;animation: pwa-mock-add-glow 2s ease-in-out infinite}
@keyframes pwa-mock-add-glow {0%, 100% { background: rgba(0, 122, 255, 0.1); }
50% { background: rgba(0, 122, 255, 0.2); }}
.pwa-ios-mock-confirm-preview {display: flex;align-items: center;gap: 12px;padding: 14px}
.pwa-ios-mock-confirm-icon {width: 40px;height: 40px;border-radius: 10px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);flex-shrink: 0}
.pwa-ios-mock-confirm-info {display: flex;flex-direction: column}
.pwa-ios-mock-confirm-name {font-size: 0.875rem;font-weight: 600;color: #1c1e21}
.pwa-ios-mock-confirm-url {font-size: 0.75rem;color: #8e8e93}
.pwa-ios-guide-done {display: flex;align-items: center;gap: 10px;margin: 0 20px 20px;padding: 12px 14px;background: #e8f5e9;border-radius: 12px;border: 1px solid #c8e6c9;font-size: 0.8rem;color: #2e7d32;font-weight: 500;line-height: 1.4}
.pwa-ios-guide-done-icon {width: 28px;height: 28px;border-radius: 7px;flex-shrink: 0;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)}
@keyframes pwa-guide-fade-in {from { opacity: 0; }
to { opacity: 1; }}
@keyframes pwa-guide-slide-up {from { opacity: 0; transform: translateY(40px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }}