html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #0F0F0F; color: #e9eef6; font-family: system-ui, sans-serif; }
body { display: flex; flex-direction: column; }
/* Keep Avalonia's drawing, input and native-control layers in the same origin. */
#out { position: relative; width: 100%; flex: 1; min-height: 0; overflow: hidden; }
#pwa-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 16px; background: #171717; font-size: 12px; border-bottom: 1px solid #333; }
#pwa-status { margin-right: auto; }
#pwa-update-help { color: #edb85c; }
#pwa-toolbar button { border: 1px solid #555; border-radius: 5px; background: #292929; color: #e9eef6; padding: 5px 10px; font: inherit; cursor: pointer; }
#pwa-toolbar button:disabled { cursor: default; opacity: .5; }
#pwa-toolbar button:focus-visible { outline: 2px solid #eaa840; outline-offset: 2px; }
#pwa-toolbar #pwa-update { background: #eaa840; border-color: #eaa840; color: #171717; }
[hidden] { display: none !important; }
.loading { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; background: #0F0F0F; }
.loading-card { width: min(420px, 100%); font-size: 20px; }
html[lang="ru"] .loading-en, html:not([lang="ru"]) .loading-ru { display: none; }
.loading-meter { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.loading-meter progress { width: 100%; height: 10px; accent-color: #eaa840; }
#app-loading-percent { min-width: 4ch; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
#browser-warning { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #8c672e; background: #332817; color: #ffdfab; }
#browser-warning p { margin: 5px 0 0; font-size: 14px; }
#browser-tutorial { flex-shrink: 0; border: 0; border-radius: 6px; padding: 10px 16px; background: #eaa840; color: #171717; font: inherit; cursor: pointer; }
#browser-tutorial:focus-visible { outline: 2px solid #ffdfab; outline-offset: 3px; }
@media (max-width: 600px) { #browser-warning { align-items: flex-start; flex-direction: column; padding: 14px 18px; } }