:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f4f6f8; color: #243139; }
* { box-sizing: border-box; }
body { margin: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
header { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #006a62; color: white; }
#network-status { font-size: 13px; }
#app { max-width: 600px; margin: auto; }
.layout { display: flex; flex-direction: column; align-items: center; width: 100%; }
.layout.horizontal { flex-direction: row; justify-content: center; }
.layout > * { flex-shrink: 1; min-width: 0; }
.control { max-width: 100%; }
.text { text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
button { font: inherit; color: white; background: #37474f; border: 0; border-radius: 7px; min-height: 44px; padding: 8px 4px; cursor: pointer; touch-action: manipulation; }
button:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, input:focus-visible { outline: 3px solid #e08b00; outline-offset: 2px; }
input { font: inherit; min-height: 44px; }
input[type=range] { accent-color: #006a62; padding: 0; touch-action: pan-y; }
input:not([type=range]) { padding: 10px; border: 1px solid #7d8b94; border-radius: 6px; background: #fff; color: #243139; }
img { object-fit: contain; }
dialog { max-width: min(94vw, 560px); width: 100%; border: 0; border-radius: 12px; padding: 18px; background: #f4f6f8; color: #243139; }
dialog::backdrop { background: #0009; }
dialog h2 { font-size: 18px; margin: 0 0 16px; }
dialog .layout { gap: 12px; }
.install-hint { max-width: 600px; margin: 16px auto; padding: 0 16px; font-size: 13px; text-align: center; }
#notifications { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; right: 12px; z-index: 20; pointer-events: none; }
.notice { max-width: 560px; margin: 6px auto; padding: 12px; border-radius: 8px; background: #243139; color: white; box-shadow: 0 2px 12px #0005; }
@media (display-mode: standalone) { .install-hint { display: none; } }