*{margin:0;padding:0;box-sizing:border-box}body{font-family:sans-serif;background:#f5f5f5}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.navbar{background:var(--brand-primary, #1a1a2e);color:#fff;padding:0 20px;display:flex;align-items:center;gap:16px;flex-shrink:0;height:60px}.navbar-brand{font-size:20px;font-weight:700;flex:1 1 0;min-width:0}.navbar-links{display:flex;gap:6px;flex:0 1 auto;min-width:0;justify-content:center}.navbar button{background:none;border:none;color:#fff;cursor:pointer;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:600}.navbar button.active{background:#e94560}.navbar-user{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;justify-content:flex-end}.navbar-user span{color:#fffc;font-size:14px}.logout-btn{background:#555!important;border-radius:8px;padding:8px 14px!important}.main-content{flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column}@media(max-width:640px){.navbar{padding:0 10px;gap:8px}.navbar-brand{gap:6px!important}.navbar-brand svg{width:26px!important;height:26px!important}.navbar-brand .brand-wordmark{font-size:16px!important}.navbar-user{gap:6px}.nav-clock-time{font-size:13px!important}.nav-clock-date{display:none}.logout-btn{padding:6px 10px!important;font-size:12px!important}}@media(max-width:460px){.navbar-brand .brand-wordmark,.nav-clock,.nav-staff-name{display:none}.navbar{gap:6px}}