:root {
    --pupp-primary: #4b3533;
    --pupp-accent: #ea691b;
}
body { background: #f6f4f3; }
.pupp_nav { background: var(--pupp-primary); }
.pupp_btn_accent { background: var(--pupp-accent); border-color: var(--pupp-accent); color: #fff; }
.pupp_btn_accent:hover, .pupp_btn_accent:focus { background: #d25a12; border-color: #d25a12; color: #fff; }

.pupp_kpi { background: #fff; border-radius: .5rem; padding: .9rem 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); border-left: 4px solid var(--pupp-accent); }
.pupp_kpi_n { font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--pupp-primary); }
.pupp_kpi_l { font-size: .8rem; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }

.pupp_badge_open  { background: #fde8d9; color: #a34a0f; }
.pupp_badge_close { background: #e6dedc; color: var(--pupp-primary); }
.pupp_badge_door  { background: #dfeaf5; color: #26567f; }
.pupp_badge_other { background: #ececec; color: #555; }
.pupp_badge_err   { background: #f8d7da; color: #842029; }
.pupp_badge_ok    { background: #e0f0e3; color: #1e6b32; }
.badge { font-weight: 500; }

#topUsers li { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid #eee; }
#topUsers li:last-child { border-bottom: 0; }

.pupp_login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--pupp-primary); }
.pupp_login_box { width: 100%; max-width: 360px; margin: 1rem; }