:root { color-scheme: light; font-family: system-ui, sans-serif; }
html, body { margin: 0; background: #f6f5f0; min-height: 100%; }
[hidden] { display: none !important; }
#connection-status { position: fixed; z-index: 10000; top: 0; left: 0; right: 0; padding: 9px 18px; padding-top: max(9px, env(safe-area-inset-top)); background: #fff0ca; color: #5d431b; text-align: center; font-size: 12px; line-height: 1.5; }
#pwa-controls { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 9999; display: flex; gap: 8px; max-width: calc(100vw - 32px); }
#pwa-controls button, dialog button { cursor: pointer; border: 1px solid #d9cbaa; border-radius: 12px; padding: 12px 16px; min-height: 44px; background: #10273c; color: #fff; font: 600 12px system-ui, sans-serif; box-shadow: 0 3px 18px #10273c1a; }
#pwa-controls button span { color: #d9b677; margin-right: 6px; font-size: 16px; }
#pwa-controls button:focus-visible, dialog button:focus-visible { outline: 3px solid #c59850; outline-offset: 3px; }
#update-app { background: #c59850 !important; color: #10273c !important; }
dialog { border: 1px solid #e2e2d9; border-radius: 20px; padding: 26px; max-width: min(400px, calc(100vw - 64px)); color: #10273c; box-shadow: 0 12px 80px #10273c33; }
dialog::backdrop { background: #10273c88; }
dialog h2 { margin: 0 0 12px; font-size: 22px; }
dialog p { line-height: 1.7; font-size: 14px; color: #65716e; }
dialog form { text-align: right; }
@media (max-width: 480px) { #pwa-controls button { padding: 10px 12px; font-size: 11px; } }
@media (display-mode: standalone) { #install-app { display: none; } }