:root { color-scheme: dark; font-family: Arial, sans-serif; background: #343b4c; color: #fff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.shell-header { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; padding-top: max(.5rem, env(safe-area-inset-top)); background: #343b4c; }
.shell-header img { border-radius: .25rem; }
.shell-header span { font-weight: 700; }
#install-button { margin-left: auto; border: 0; border-radius: .3rem; padding: .7rem 1rem; background: #d2a53e; color: #222; cursor: pointer; font-weight: 700; white-space: nowrap; }
main { flex: 1; min-height: 0; }
iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
body.standalone .shell-header, body.pwa-installed .shell-header, body.header-dismissed .shell-header { display: none; }
#hide-header-button { border: 1px solid #d2a53e; border-radius: .3rem; padding: .7rem .8rem; background: transparent; color: #fff; cursor: pointer; white-space: nowrap; }
#install-button[hidden] + #hide-header-button { margin-left: auto; }
@media (display-mode: standalone) { .shell-header { display: none; } }
#status { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); left: 1rem; right: 1rem; width: fit-content; max-width: calc(100% - 2rem); margin: auto; padding: .8rem 1rem; border: 1px solid #d2a53e; border-radius: .5rem; background: #343b4c; box-shadow: 0 4px 20px #0006; }
#status { display: flex; align-items: center; gap: .75rem; }
#status-message { min-width: 0; }
#close-status-button { flex-shrink: 0; border: 0; border-radius: .25rem; padding: .25rem .5rem; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
#close-status-button:hover { background: #ffffff20; }
@media (max-width: 400px) { .shell-header { gap: .5rem; padding-left: .5rem; padding-right: .5rem; } .shell-header span { font-size: .9rem; } }