*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0a0a0a; color: #e0e0e0; }
body { font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
input, textarea, select, button { font-family: inherit; }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

@media (max-width: 639px) {
  #sidebar { display: none !important; }
  #bottom-nav { display: flex !important; }
  #main-content { padding-bottom: 72px !important; }
}
@media (min-width: 640px) {
  #bottom-nav { display: none !important; }
}

.sync-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.sync-saving { background: #f5c800; animation: pulse 1s infinite; }
.sync-ok { background: #4caf50; }
.sync-err { background: #ff6b6b; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

label, button { -webkit-tap-highlight-color: transparent; }