/* Shared install surface, grandma.click tokens inherited from the product. */
.pwa-guide[hidden], [data-pwa-open][hidden], [data-pwa-installed][hidden], .pwa-guide [hidden] { display: none !important; }
.pwa-guide { border: 1px solid var(--border-default, #2A2A38); border-radius: 10px; background: var(--bg-surface, #111118); color: var(--text-primary, #ECECEF); width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 24px; box-shadow: 0 12px 32px rgba(0,0,0,.5); overflow: auto; }
.pwa-guide::backdrop { background: rgba(0,0,0,.7); }
.pwa-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.pwa-icon { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 12px; }
.pwa-title { font: 600 21px/1.25 Geist, sans-serif; margin: 0; letter-spacing: -.02em; }
.pwa-close { flex: 0 0 44px; margin: -10px -12px 0 auto; background: transparent; border: 0; color: var(--text-secondary, #9999A3); min-width: 44px; min-height: 44px; cursor: pointer; display: grid; place-items: center; }
.pwa-close svg { width: 20px; height: 20px; }
.pwa-lead, .pwa-tip, .pwa-steps { font: 400 15px/1.55 Geist, sans-serif; color: var(--text-secondary, #9999A3); }
.pwa-lead { margin: 0 0 20px; }
.pwa-tabs { display: flex; gap: 6px; padding: 4px; background: var(--bg-elevated, #1A1A24); border-radius: 6px; margin-bottom: 20px; }
.pwa-tabs button { flex: 1; min-height: 44px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text-secondary, #9999A3); font: 500 14px Geist, sans-serif; cursor: pointer; }
.pwa-tabs button[aria-pressed=true] { background: var(--bg-overlay, #22222E); border-color: var(--border-strong, #3A3A4A); color: var(--text-primary, #ECECEF); }
.pwa-steps { list-style: decimal; padding-left: 22px; margin: 0; }
.pwa-steps li::marker { color: var(--text-primary, #ECECEF); font-family: "JetBrains Mono", monospace; }
.pwa-steps li { padding-left: 4px; margin-bottom: 12px; }
.pwa-steps strong { color: var(--text-primary, #ECECEF); font-weight: 500; }
.pwa-steps svg { width: 17px; height: 17px; vertical-align: -3px; }
.pwa-tip { font-size: 13px; margin: 8px 0 18px; }
.pwa-actions { display: grid; gap: 8px; margin-top: 20px; }
.pwa-action { min-height: 46px; width: 100%; border: 1px solid var(--border-default, #2A2A38); border-radius: 6px; background: transparent; color: var(--text-primary, #ECECEF); font: 500 15px Geist, sans-serif; cursor: pointer; padding: 10px 14px; }
.pwa-action-main { background: #B8156B; border-color: #B8156B; color: #fff; }
.pwa-action-main:hover { background: #D11B7E; }
.pwa-action-quiet { color: var(--text-secondary, #9999A3); border-color: transparent; }
.pwa-guide button:focus-visible, [data-pwa-open]:focus-visible { outline: 2px solid var(--accent, #B8156B); outline-offset: 3px; }
.pwa-settings { margin-bottom: 20px; }
.pwa-settings h2 { margin-top: 0; }
.pwa-settings p { color: var(--text-secondary, #9999A3); line-height: 1.5; }
.pwa-login-action { display: flex; align-items: center; justify-content: center; margin: 18px auto 0; width: 100%; }
@media (min-width: 768px) { .pwa-login-action { display: none; } }
@media (prefers-reduced-motion: reduce) { .pwa-guide, .pwa-guide * { animation: none !important; transition: none !important; } }

@media print { [data-pwa-panel], [data-pwa-open], .pwa-guide, .pwa-guide::backdrop, .pwa-settings { display: none !important; } }